Nextionディスプレイを使用してFridgeyeアプリを構築する

アプリとオンラインサービス

	NextionGUIエディター
	Arduino IDE
	GIMP-GNU画像操作プログラム

このプロジェクトについて

今年の7月に、ドイツからの数人のデザイン学生が風刺的なKickstarterを立ち上げてFridgeyeのプロトタイプを作成しました。あなたの冷蔵庫のための美しい光センサー。ばかげたハードウェアプロジェクトがKickstarterに表示されることを一般的に期待しているという事実と、チームがそれを現実に見せるためにどれだけの努力を払ったかを組み合わせると、人々が何を考えるべきかわからなかったのも不思議ではありません。私が最初からプロジェクトのファンであったことは周知の事実ですが、冷蔵庫のライトが何をしているのか知りたくてたまらないからではありません。 Fridgeyeは、モノのインターネットの開始を検討している場合に成長の可能性に取り組むための完全な範囲のプロジェクトです。

Fridgeyeデバイスを構築する

この投稿の大部分は、NextionタッチディスプレイをArduinoに接続してFridgeyeアプリを実行することに焦点を当てていますが、そこまで到達する前に、光を感知できる実際のデバイスが必要です。問題ない。 5分かけてビルドしましょう。 1秒もかからないことをお約束します。必要なのは、Arduino、ブレッドボード、フォトレジスター、および3.3K抵抗器だけです。このように配線します。まだ画面の接続について心配する必要はありません。 Arduino、抵抗器、フォトレジスターに注目してください。

私は実際にProtoShieldを横に置いていました。そこで、ミニブレッドボードをその上に叩きつけて、すべてを1つの素敵なシールドスタックパッケージに収めながら、ブレッドボードの自由を維持できるようにしました。これは私のように見えます。

さて、私は嘘をつきました、それは約4分しかかかりませんでした。しかし、残りの分を使用して、この非常に単純なスケッチをArduinoに投げ込み、ArduinoIDE内から光センサーのシリアル出力を見ることができます。

  void setup（）{Serial.begin（9600）; } void loop（）{int val =analogRead（A0）; Serial.println（val）; delay（500）; }  

Arduinoをプログラムした後、ツールからシリアルモニターを開きます メニュー。ボーレートが9600に設定されていることを確認してください。約0.5秒ごとに光レベルを表す新しい整数値が表示されます。さあ、ちょっと時間を取って、それで遊んでください。センサーを覆い、ライトのオンとオフを切り替え、スマートフォンの懐中電灯を照らしてみてください。値の変化を監視します。完全な暗闇でのほぼ0から、光を当てたときのほぼ1024までの範囲であることに気付くでしょう。

Fridgeyeアプリとは何ですか？

Fridgeyeアプリは、Fridgeyeデバイスの信頼できるコンパニオンです。デバイスが停滞した時代は終わりました。今日の壮大なIoTの世界では、それに対応する何らかのアプリがない限り、デバイスにチャンスがないことは誰もが知っています。ピーナッツバターとゼリー、ミルクとシリアル、エンドウ豆とニンジンです。

アプリは非常にシンプルです。 Kickstarterのページを見ると、文字通りFridgeyeが検出した光の割合であり、0または100％にすぎないように見えます。

少し良くして、99個の値のいくつかを間に使用して、気分が悪くならないようにすることができると確信しています。概念図から直接進んで、それを現実の世界に持ち込みましょう。

Nextionディスプレイ入門

このプロジェクトでは、Nextion Enhanced 3.5 "タッチディスプレイを使用しています。これは、グラフィックスコントロールの重い持ち上げを処理することを目的とした完全抵抗膜方式のタッチスクリーンディスプレイであり、Arduinoのような非常にローエンドのデバイスでもペアで通信できます。シリアルライン。ディスプレイ自体は非常に優れていますが、特に初心者の場合、ドキュメントをナビゲートするのは非常に難しい場合があるため、一度に1ステップずつ説明していきましょう。

ディスプレイプログラミングモデル

画面表面に描画する低レベルのコマンドを抽象化した単純なグラフィックライブラリのようなものを使用する前に、ディスプレイを使用するようにArduinoをプログラムしたことがある場合。これらのライブラリは非常に優れていますが、画面に描画するために多くのピクセルプッシュを実行する必要があります。 Nextionディスプレイは、MVVMまたはMVCパターンに慣れている場合に非常に馴染みのある別のアプローチを使用します。基本的に、アプリの外観は完全に前もって構成され、画面自体に保存されます。実行時に、Arduinoは事前に割り当てられたIDを使用してUIの一部を参照します。 Arduinoも同じ方法でタッチイベントのように画面から情報を取り戻します。つまり、実行時に物を描く代わりに、Arduinoはビューとコントロールのコンダクターとしてのみ機能します。それが意味をなさない場合は、私たちがそれをステップスルーする間、もう少し長く私を保持してください。

ビューを準備する

私たちのFridgeyeアプリはとてもシンプルなので、必要なのは1ページだけです。ただし、Nextionディスプレイは、複数のページとトランジションを持つ非常に複雑なアプリケーションを処理できます。私たちのような単純なアプリを設計する場合でも、非常に複雑なアプリを設計する場合でも、NextionGUIエディターを使用します。これは、Nextionファミリーのディスプレイ用のWYSIWYGエディターであり、レイアウトを適切に調整するのに役立ちます。繰り返しになりますが、ドキュメントと開始の経験は初心者にとって非常に難しい場合がありますが、一度コツをつかむと、複雑なレイアウトをすばやく設計することになります。

エディターをクラックして開く前に、バックグラウンドアセットを準備する必要があります。上記のモック画像を参照すると、実行時にディスプレイ上で変化するのは、検出された光の割合だけであることがわかります。下部のロゴ、背景色、および緑色のバーは静的です。背景に使えるアイテムを使って画像を作ってみましょう。これは私がGIMPで5分すべてかかった、そしてこのように見える。

ここで覚えておくべき重要なことは、画面に必要なサイズの画像を正確に作成することです。私の場合、480 x 320ピクセルに変換される3.5インチの画面を使用しています。これは、GIMPで画像を作成したときの大きさです。

NextionEditorの使用

注： NextionEditorには.NETFrameworkが必要であり、現在はWindowsでのみサポートされています。 MacbookのParallelsを介してWindows10仮想マシンで問題なく実行できました。 Linux上のWineではテストしていません。

次の手順では、Nextionエディターで簡単なアプリレイアウトを作成する手順を説明します。 Nextion Editorを開いた状態で、次の手順を実行します。

1。 ファイル->新規 。プロジェクトにマシン上の名前と場所を付けます。

2。 デバイスを選択するように求めるダイアログがポップアップ表示されます。私の場合、Enhancedと3.5 "モデル番号を選択しました。クリックしないでください 。手順3に進みます。

3。 表示をクリックします ダイアログの左上隅にあるタブ。 90水平表示方向を選択します。

4。 これで、 [OK]をクリックできます。

5。 画像をクリックします 左側のツールボックスから。これにより、要素 p0 が追加されます あなたのアウトラインに。

6。 画像/フォント 左下のペインに画像があることを確認してください タブが選択されました。

7。 + をクリックします シンボル。

8。 アプリの背景を提供するGIMPで作成した画像に移動し、[開く]をクリックします 。

9。 右側の属性ペインで、 pic をダブルクリックします 属性値領域。画像選択ダイアログがアプリの背景とともに開きます。

10。 アプリの背景を選択し、[ OK ]をクリックします 。

11。 テキストをクリックします ツールボックスから。これにより、 t0 という名前のテキスト領域が追加されます ディスプレイの左上隅にあります。 id の値に注意してください 後でArduinoをプログラミングするときに必要になるため、属性。

12。 テキスト領域を「LightStatus」という単語の下の目的の場所にドラッグし、大きな領域を埋めるようにサイズを変更します。

13。 白い背景を修正するには、テキスト領域の背景をメインの背景のトリミングされたバージョンに設定する必要があります。 t0 を使用 選択した sta の変更 属性ペイン内の属性を単色から画像を切り抜く 。

14。 picc をダブルクリックします テキスト領域の属性値 t0 。これにより、画像選択ダイアログが開きます。メインの背景画像をもう一度選択して、[ OK ]をクリックします 。これには、テキスト領域の背景を透明にする効果があります。

15。 pco を変更します t0 の属性 好きなフォントの色にします。赤：125、緑：231、青：191のカスタムカラーを使用しました。

16。 ツールから メニューで FontGeneratorを選択します。

17。 [フォントクリエーター]ダイアログで、高さ96を選択し、使用するフォントを選択します。私のはモントセラトです。

18。 フォントに名前を付けて、[フォントの生成]をクリックします 。覚えやすい場所に保管してください。すぐにまた必要になります。

19。 FontCreatorダイアログを閉じます。生成されたフォントを追加するかどうかを尋ねられます。 はいをクリックします 。そのフォントは現在、フォントインデックス0として参照されています。

20。 t0 にダミーテキストを追加します t0 のtxt属性を変更して、どのように表示されるかを確認します 100％まで。更新するには、エディタ領域の属性値領域をクリックする必要があります。

21。 t0 の位置を変更します あなたの好みに。

22。 コンパイルをクリックします 上部のツールバーにあります。

すべてがうまくいけば、コンパイルされたTFTファイルが％AppData％\ Nextion Editor \ bianyi にあります。 。

ディスプレイを更新する

派手な新しいデザインをディスプレイ自体に組み込むには、いくつかの方法があります。 USBからTTLへのコンバーターをお持ちの場合は、Nextion IDE内から画面に直接接続し、コンパイルされたTFTファイルを直接アップロードできます。それ以外の場合は、コンパイルされたTFTファイルをマイクロSDカードにコピーする必要があります。このカードは、画面の背面にあるスロットに直接挿入できます。 SDカードはFAT32形式である必要があり、TFTファイルが1つ含まれている必要があります。そうしないと、エラーが発生します。 Nextion Editorは、正常にコンパイルされたファイルをWindowsの次のディレクトリに配置します。

  C：\ Users \ [ユーザー名] \ AppData \ Roaming \ NextionIDE \ bianyi \ [プロジェクト名] .tft  

注：AppDataフォルダーは非表示としてマークされているため、非表示ファイルの表示を有効にする必要がある場合があります。

SDカードのTFTファイルを使用して、次の手順を実行します。

• ディスプレイの電源がオフになっていることを確認します

• SDカードをディスプレイに挿入します

• ディスプレイの電源を入れます。画面に更新中であることが表示されます。

• 更新が終了したら、ディスプレイの電源を切ります

• SDカードを取り外します。 SDカードが挿入されたままの状態では画面が表示されないため、この手順を忘れないでください。

• ディスプレイの電源を再度入れます。これで、美しいFridgeyeアプリが表示されます。欠落しているのは、光センサーからの値だけです。

ArduinoにNextionの話し方を教える

ディスプレイにアプリビューが表示されたので、Arduinoにコードを記述して、ディスプレイと相互作用し、ライトステータスのパーセンテージを設定できるようにする必要があります。

Nextionライブラリをインストールする

1。 NextionArduinoライブラリの最新バージョンをダウンロードします。

2。 ITEADLIB_Arduino_Nextion 全体をコピーします フォルダをArduinoライブラリフォルダに移動します。 Windowsの場合、次の場所にあります：

  C：\ Users \ [your_username] \ Documents \ Arduino \ libraries  

Macの場合は次の場所にあります：

 〜/ Documents / Arduino / libraries  

3。 Arduino Megaを使用している場合は、手順7に進んでください。

4。 Arduino Unoを使用している場合は、 NexConfig.h を開きます ITEADLIB_Arduino_Nextion にあるファイル Arduinoライブラリフォルダにコピーしたばかりのフォルダ。

5。 次の行をコメントアウトします：

  #define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6。 #define を変更します nexSerial の場合 Serial2ではなくSerialになります。これにより、ディスプレイをUNOのRXおよびTXラインに直接接続できます。

  #define nexSerial Serial  

7。 Arduino IDEがすでに開いている場合は、再起動します。これにより、メニューからライブラリを利用できるようになります。

8。 ファイルから メニュー選択新規 新しいスケッチを作成します。

9。 デフォルトのスケッチコードを次のように置き換えます。

  #include "Nextion.h" long lastUpdate; int SENSOR =A0; NexText t0 =NexText（0、2、 "t0"）; void checkSensor（）{int val =map（analogRead（SENSOR）、0、1024、0、100）; String displayText =String（val）+ "％"; t0.setText（displayText.c_str（））; } void setup（void）{lastUpdate =millis（）; pinMode（SENSOR、INPUT）; nexInit（）; } void loop（void）{nexLoop（NULL）; if（millis（）-lastUpdate> 100）{checkSensor（）; lastUpdate =millis（）; }}  

コードウォークスルー

Arduino fooでそのスケッチを理解できる場合は、このセクションを完全にスキップできます。あなたは素晴らしいです。 Arduinoコードを初めて使用する場合は、これを怖がらせないでください。このスケッチを少しずつ見ていきましょう。

  #include "Nextion.h"  

これは、Nextionライブラリを使用する意図があることを示しています。 Arduino IDEはライブラリフォルダに配置されているため、どこにあるかを知っているので、他に何もする必要はありません。

  long lastUpdate;  

これは単に lastUpdate という名前の変数です これにより、スケッチの後半で画面を更新する頻度を制御できます。

  int SENSOR =A0;  

ここでは、ArduinoのA0ピンに、後で参照するために使用できる、よりコードで読みやすい名前を付けています。これは、私たちが扱っている唯一のI / Oピンであるため、このスケッチでは実際には重要ではありませんが、Arduinoに多くのものが接続されている場合に役立つので、使用するのは良い習慣です。

  NexText t0 =NexText（0、2、 "t0"）;  

ここでは、GUIで作成したテキスト要素を参照するオブジェクトをスケッチに作成しています。 「 t0 」という名前を付けたことを思い出してください "。最初の引数はページ番号で、この場合は0で、2番目の引数は前に思い出したコンポーネントIDです。2です。書き忘れた場合は、Nextion Editorに戻って、<をクリックしてください。強い> t0 要素を選択し、属性ペインでIDを確認します。

  void checkSensor（）{int val =map（analogRead（SENSOR）、0、1024、0、100）; String displayText =String（val）+ "％"; t0.setText（displayText.c_str（））; }  

checkSensor（） 私たちのアプリの肉です。最初の行では、実際に2つの操作を実行しています。まず、 analogRead（SENSOR）を呼び出します これにより、ピンA0に存在する電圧を表す整数値が得られます（これをSENSORと呼んだことを思い出してください）。 Arduino UNOでは、analogRead呼び出しは0から1024の値を返しますが、それを0から100パーセントの範囲にマッピングしたいと思います。問題ない。 Arduino IDEには、組み込みの map（）が含まれています。 値の後に[fromrange]と[torange]を指定できる関数。次に、そのint値をString型に変更し、％記号を付けます。最後のステップは、 setText（）を呼び出すことです。 NexText t0 以前に作成したオブジェクト。

  void setup（void）{lastUpdate =millis（）; pinMode（SENSOR、INPUT）; nexInit（）; }  

これは、他のスケッチコードの前に実行される標準のArduinoセットアップ関数です。 lastUpdate を初期化します millis（）を呼び出して今すぐに 関数、A0ピンを入力として設定し、Nextionライブラリを初期化します。

  void loop（void）{nexLoop（NULL）; if（millis（）-lastUpdate> 100）{checkSensor（）; lastUpdate =millis（）; }}  

Arduinoプログラミングでは、 loop（） Arduinoの電源をオフにしてからオンに戻すか、他の方法でリセットするまで、機能は継続的に実行されます。 nexLoop（）を呼び出して、Nextionライブラリに継続的にサービスを提供する必要があります 。 NULLパラメータは、この例では画面からのタッチイベントをリッスンしていないことを意味します。次に、最後のセンサー読み取りから100ミリ秒を超えているかどうかを確認するための非常に簡単なチェックがあります。その場合は、 checkSensor（）を呼び出します。 メソッドを設定し、 lastUpdate を設定します millis（）への別の呼び出しで今すぐ変数 。

それでおしまい。 ArduinoからNextionディスプレイを操作するのに必要なのは、30行未満のコードだけです。

ディスプレイを接続する

実際にディスプレイをArduinoに接続する前に、トップバーの小さな右矢印をクリックするか、ショートカットCtrl + Uを使用して、IDEからスケッチコードを押し込みましょう。

Arduino UNOでは、新しいスケッチをプッシュするためにIDEがディスプレイで使用するのと同じシリアルラインが必要なため、アップロード中に画面を接続できません。代わりにArduinoMegaを使用している場合は、それについて心配する必要はありません。

コードをArduinoにプッシュしたら、ディスプレイを接続しましょう。最初にArduinoから電源を切ることを忘れないでください。接続情報については、フリッツの図を参照してください。

Arduinoのバックアップに電源を入れると、Fridgeyeアプリは現在の光センサーの読み取り値を表示します。

まとめ

ふぅ！着いた。ですから、この時点で、「これは何がいいの？画面が見えないように全部を冷蔵庫に入れなければならない」と怒りを込めて尋ねているかもしれません。あなたは非常に鋭敏な生徒ですが、これが役に立ったとは決して言いませんでした。構築して学ぶのはとても楽しいです。

このプロジェクトをさらに一歩進めて、センサーを冷蔵庫に入れて別の場所にディスプレイを配置する方法を見つけてください。その目標を達成する方法はたくさんあります。 WiFi、Bluetooth、Zigbee、および一般的な無線送信機は、頭に浮かぶほんの数例です。たくさんのオプションと学ぶべきことがたくさんあります。試してみる場合は、Twitter @KevinSidwarで私に連絡するか、電子メール（Sidwar dot comのKevin）を送ってください。 IoTでのあなたの冒険について聞いてみたいです。次回まで、ハッピーハッキング。

私の投稿を楽しんで、IoTの使用を開始する方法について詳しく知りたい場合は、に興味があるかもしれません。 現在Fridgeyeのコンセプトに基づいて作成しているコース 。そうでない場合は、最後まで実際に読んでいただき、誠にありがとうございます。素晴らしい一日をお過ごしください。あなたはそれに値する。

コード

Fridgeyeアプリ用のArduinoスケッチ

回路図