INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

ProtoPie Connect

8

分で読める

Intro to ProtoPie Connect 4 of 7: Arduino Part 2 - Roll Your Own Sketch Code

Learn how to use ProtoPie Connect's Arduino plugin to direct access your Arduino project.

Jeff Clarke、 UX Designer & ProtoPie Educator

はじめに

前のレッスンでは、ProtoPie で Arduino プロジェクトを Blokdots を使っていかに簡単かつ素早く接続できるかをお見せしました。しかし、いくつか問題がありました。ボタンの動作が逆になっていて、ボタンが押されていないときに Blokdots は 1 を、押されたときに 0 を報告していました。また、エンコーダーを速く回しすぎると、「バウンス」と呼ばれる問題が発生し、エンコーダーがカウントアップすべきときにカウントダウンしたり、カウントダウンすべきときにカウントアップしたりすることがありました。

最初の問題は、エンコーダーの GND(グラウンド)ピンと電圧(+)ピンの接続を逆にすることで回避できました。2つ目の問題については、エンコーダーのノブを速く回しすぎないよう注意しました。これらの問題(および他の多くの問題)は、独自の Arduino コードを書けば適切に対処できます。

でも… コードって怖い!!

心配しないでください!コードを書く必要はありません。「Sketch」 と呼ばれる Arduino スクリプトを使いますが、これはすでに私が書いてあります。必要なのは、コピーして貼り付けるだけです。このレッスンは、コードの書き方を学ぶことが目的ではありません。このレッスンで扱うのは、Arduino を ProtoPie Connect で動かすために必要なことだけです。

ただし、もしあなたが冒険心にあふれていて、自分で Sketch を書いてみたいなら、Arduino コードの書き方についてオンラインにたくさんの例があるので、そこから始められることを知っておいてください。実際、私が書いた Sketch は、私が学んだこと(ええと… ほぼコピペしたもの…)に大きく基づいています。この記事から。

学べること

このチュートリアルでは、以下を扱います。

  • ProtoPie Connect で使うために注意すべき、コードの具体的な詳細

  • コードを検証し、Arduino ボードにアップロードする

  • ProtoPie Connect で Arduino プラグインを設定して有効にする

所要時間:≤15分

必要なもの

  • 前のレッスンと同じ完成済みの Pie を使用します。こちらからダウンロードしてください:
    https://cloud.protopie.io/p/35d69ddd96

  • 前のレッスンで行ったように、Arduino 回路を配線しておいてください。

  • Arduino ソフトウェアをダウンロードしてインストールしてください。

  • 以下のコードをコピーしてください:

  • このコードを Arduino ソフトウェアのウィンドウに貼り付けてください。


Paste instructions for Sketch code
  • Pie ファイルを ProtoPie Connect にインポートし、ブラウザでプレビューしてください。

[Climate Control Pie]

さあ、やってみましょう!

準備がすべて整ったら、以下の動画に沿って進めてください。

動画

参考

動画では、ProtoPie Connect で使う Arduino Sketch を書くときに覚えておくべき重要な点を 2 つ挙げています。参考として、その 2 つを以下に載せておきます。

ボーレートを正しく設定する

Connect の Arduino プラグインで選択するボーレート(つまり、シリアル接続が更新を確認される頻度)は、コードで指定した値と一致している必要があります。


The baud rate you select in the plugin needs to match what you specified in your code.

ProtoPie Connect へのメッセージ送信

ProtoPie Connect はシリアル接続に書き込まれたメッセージを探すので、コード内で Serial.print()Serial.println() を使って Connect にメッセージを送り返します。

値のないメッセージの場合は、次のようにシリアル接続へそのままメッセージを出力するだけです。

  • Serial.println(<message name>)、例:Serial.println("TEMP_UP");

値のあるメッセージの場合は、メッセージ名と値を 2 つのパイプ(|)文字で区切る必要があります。

  • 例:
    Serial.println("SET_TEMP||21");

ProtoPie Connect はこのパターンを認識し、値 21 を持つメッセージ SET_TEMP を受け取ります。

メッセージの値として変数を使う場合、Arduino コードでは 1 行でメッセージを組み立てることはできません。たとえば、これは動きません。

  • Serial.println("SET_TEMP||" + temp);

これを 2 行のコードで組み立てる必要があります。最初の部分には Serial.print() を、2 行目には Serial.println() を使います。

  • 例: ``Serial.print("SET_TEMP||"); Serial.println(temp);

2 つの違いは、Serial.print はシリアル接続の現在の行に指定した内容を追加するのに対し、Serial.println はシリアル接続に書き込み、さらに末尾に改行文字を追加して、行の終わり、つまり ProtoPie Connect の視点では送信されたメッセージであることを示す点です。

ProtoPie Connect は、メッセージに対して動作する前に、シリアル接続へ改行文字が出力されるのを待ちます。このようにして、最後の Serial.println() コマンドを出す前に複数の Serial.print() コマンドを使って、メッセージをいくつかの部分に分けてプログラム的に組み立てることができます。これにより、完成したメッセージであることを ProtoPie Connect に示します。

  • 例:
    Serial.print(message); Serial.print(”||”); Serial.println(value);

以上です!ProtoPie Connect 入門 5/7: Logic G29 とのインタラクションでは、本当のマルチスクリーンのダッシュボード体験を作成する方法を紹介します。