ロータリーエンコーダーを使用したNokia5110LcdのArduinoメニュー

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

>

Arduino IDE

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

親愛なる友人は別のチュートリアルへようこそ！このビデオでは、人気のあるNokia 5110 LCDディスプレイ用に独自のメニューを作成する方法を学びます。これは、プロジェクトをよりユーザーフレンドリーでより高性能にするためです。 始めましょう！

これは私たちが構築しようとしているプロジェクトです。ディスプレイにシンプルなメニューが表示され、ロータリーエンコーダーを使用して、ロータリーエンコーダーボタンを押してメニュー項目を上下に移動して選択できます。ロータリーエンコーダーの中央のボタンを押すと、別の画面が表示され、変数の値を変更できます。もう一度ロータリーエンコーダボタンを押すと、メインメニュー画面に戻ります。メニューには6つの項目があり、メニューを上下にスクロールすると、それに応じて表示される項目が変わります。添付のビデオを見て、このメニューがどのように機能するかを正確に確認してください。もちろん、必要に応じて変更して、独自のより複雑なメニューを作成することもできます。

このプロジェクトを構築する方法を見てみましょう。

ステップ1：すべての部品を入手する

このプロジェクトを構築するために必要な部品は次のとおりです。

• ArduinoUno▶http：//educ8s.tv/part/ArduinoUno

• Nokia 5110LCDディスプレイ▶http：//educ8s.tv/part/NOKIA5110

• ロータリーエンコーダー▶http：//educ8s.tv/part/RotaryEncoder

• 小さなブリーボード▶http：//educ8s.tv/part/SmallBreadboard

• 一部のワイヤー▶http：//educ8s.tv/part/Wires

プロジェクトの費用は非常に低く、10ドル未満です。以下のビデオの説明で、私が使用するすべてのパーツへのリンクを見つけることができます。

ステップ2：Nokia 5110LCDディスプレイ

Nokia 5110は、Arduinoプロジェクトで私のお気に入りのディスプレイです。

Nokia 5110は、もともと携帯電話の画面として使用することを目的とした基本的なグラフィックLCD画面です。低電力CMOSLCDコントローラー/ドライバーであるPCD8544コントローラーを使用します。このため、このディスプレイの消費電力は非常に大きくなっています。オンのときは0.4mAしか使用しませんが、バックライトは無効になっています。スリープモード時の使用量は0.06mA未満です。これが、このディスプレイを私のお気に入りにしている理由の1つです。 PCD8544は、シリアルバスインターフェースを介してマイクロコントローラーにインターフェースします。これにより、Arduinoでのディスプレイの使用が非常に簡単になります。接続する必要があるのは8本のワイヤーだけです。

ArduinoでNokia5110LCDディスプレイを使用する方法についての詳細なチュートリアルを用意しました。このチュートリアルでそのビデオを添付しました。ディスプレイに関する有用な情報が提供される可能性があるため、注意深く視聴することをお勧めします。ディスプレイのコストは約4ドルです。

ここで入手できます：▶http：//educ8s.tv/part/NOKIA5110

ステップ3：ロータリーエンコーダー

シャフトエンコーダとも呼ばれるロータリーエンコーダは、シャフトまたは車軸の角度位置または動きをアナログまたはデジタルコードに変換する電気機械装置です。ロータリーエンコーダーは、産業用制御装置、ロボット工学、特殊用途の写真レンズ、コンピューター入力デバイス（オプトメカニカルマウスやトラックボールなど）、制御された応力レオメーター、回転レーダープラットフォームなど、シャフトの無制限の正確な回転を必要とする多くのアプリケーションで使用されます。

このプロジェクトで使用するロータリーエンコーダーは、非常に安価なエンコーダーです。また、ボタンが埋め込まれており、それを機能させるには、5本のワイヤーを接続するだけで済みます。ロータリーエンコーダの使い方の詳細なチュートリアルを用意しました。このビデオはここに添付されています。

このロータリーエンコーダのコストは非常に低いです。それは約1.5ドルかかります。

こちらから入手できます▶http：//educ8s.tv/part/RotaryEncoder

ステップ4：プロジェクトを構築する

それでは、すべてのパーツを接続してみましょう。このプロジェクトを構築する前に、過去にロータリーエンコーダーを使用したことがない場合は、ロータリーエンコーダーについて作成したチュートリアルをご覧になることをお勧めします。ロータリーエンコーダーがどのように機能するかを理解するのに役立ち、それらを使ってある程度の経験を積むことができます。このビデオはここに添付されています。

このような小さなブレッドボードにディスプレイを配置しました。まず、ディスプレイを接続しましょう。リセットであるディスプレイの最初のピンはArduinoUnoのデジタルピン3に行き、2番目のピンはデジタルピン4に行き、3番目のピンはデジタルピン5に行き、4番目のピンはデジタルピン11に行き、5番目のピンはデジタルに行きますピン13。次のピンはVccです。 Vccをブレッドボードの正のレールに接続し、ブレッドボードの正のレールをArduinoの3.3V出力に接続します。次のピンはディスプレイのバックライトです。ソフトウェアで制御したいので、デジタルピン7に接続します。最後のピンはGNDです。 GNDをブレッドボードの負のレールに接続し、ブレッドボードの負のレールをArduinoGNDに接続します。

今、私たちがしなければならないのは、ロータリーエンコーダーを接続することだけです。最初のピンはGNDで、ブレッドボードの負のレールに接続します。次のピンはVccで、ブレッドボードのプラスレールに接続します。次のピンはSWで、アナログピン2に接続します。次のピンはDTという名前で、アナログピン1に接続します。最後に、ピンCLKをアナログピン0に接続します。このプロジェクトの概略図は次の場所にあります。以下の動画の説明。

これで、プロジェクトをパワーアップする準備が整いました。ご覧のとおり、プロジェクトは正常に機能しており、メニューは期待どおりに機能しています。では、プロジェクトのソフトウェアを見てみましょう。

ステップ5：プロジェクトのコード

このプロジェクトでは、4つのライブラリを使用します。ディスプレイ用に2つのライブラリを使用し、ロータリーエンコーダ用に2つのライブラリを使用します。

• Adafruit GFX：https：//github.com/adafruit/Adafruit-GFX-Library

• Nokia 5110：https：//github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library

• エンコーダライブラリ：https：//github.com/0xPIT/encoder/tree/arduino

• TimerOneライブラリ：https：//github.com/PaulStoffregen/TimerOne

まず、drawMenu関数を見ていきます。この関数は、ディスプレイにメニューを描画する役割を果たします。この関数は数ミリ秒ごとに呼び出されるため、メニューに変更があった場合、この関数は画面上のメニューを更新する役割を果たします。

  int menuitem =1; int frame =1; int page =1; int lastMenuItem =1;  

また、3つの非常に重要なグローバル変数、変数ページ、変数menuitem、および変数フレームがあります。可変ページは、画面に表示されているUI画面を記憶しています。したがって、ページ変数が1の場合は、メインUI画面が表示され、変数が2の場合は、変数に値を設定するセカンダリUI画面が表示されます。メニュー項目は、選択したメニュー項目を記憶しています。したがって、値が1の場合、最初のメニュー項目が選択されるため、drawMenu関数は、このメニュー項目を黒と白の文字で描画する必要があります。メニュー項目が2の場合、2番目のメニュー項目が選択されます。フレーム変数は、メニューのどの部分が画面に表示されているかを記憶しています。作成したメニューには6つのアイテムが含まれており、一度に表示できるのは3つだけなので、画面に表示されているアイテムを知る必要があります。フレーム変数は、まさにこれを教えてくれます。フレーム変数の値が1の場合、最初の3つのメニュー項目を表示し、2の場合、項目2​​、3、4を表示します。

コードをできるだけ簡単に変更できるようにしたので、メニュー項目の名前を保持するグローバル変数をいくつか作成しました。このようにして、コードを検索せずに独自のメニューを簡単に作成できます。

  String menuItem1 ="Contrast"; String menuItem2 ="Volume"; String menuItem3 ="Language"; String menuItem4 ="Difficulty"; String menuItem5 ="Light：ON"; String menuItem6 ="Reset";ブールバックライト=true; intコントラスト=60; intボリューム=50;文字列言語[3] ={"EN"、 "ES"、 "EL"}; int selectedLanguage =0;文字列難易度[2] ={"EASY" 、 "HARD"}; int selectedDifficulty =0;  

最初に、コードで必要なすべてのグローバル変数を初期化します。次に、表示を初期化します。ループ関数では、最初にdrawMenu関数を呼び出して、画面にメニューを描画します。次に、ロータリーエンコーダーから値を読み取り、ボタンが押されているかどうかを確認します。たとえば、メインUI画面で最初のメニュー項目が選択されている場合、ロータリーエンコーダーからの値が増加すると、menuitem変数が増加し、次のループでdrawMenu関数が選択されたとおりに2番目のメニュー項目を描画します。ロータリーエンコーダーのボタンを押すと、2ページ目に移動し、変数の値を設定します。ここでもロータリーエンコーダーを使用して、変数の値を増減できます。ボタンを押すと、メインメニューページに戻り、ページ変数が減少します。

それがこのメニューの背後にある基本的な考え方です。すべてのメニュー項目とページについて同じ手順に従います。コードは複雑で、400行を超えています。複雑そうに見えますが、自分で試してみるとわかりやすくなり、変更・拡張して自分のプロジェクトで使えるようになります。いつものように、ここに添付されているコードを見つけることができます。

ステップ6：プロジェクトをテストする

コードをロードすると、プロジェクトが期待どおりに機能していることがわかります。シャフトを使用してメニューを上下にナビゲートでき、ロータリーエンコーダボタンを押すことで任意のメニュー項目を選択できます。なんてクールだ！

Nokia 5110 LCDディスプレイのメニューを作成する方法がわかったので、プロジェクトに機能を追加して、よりユーザーフレンドリーにすることができます。しかし、今日作成したこのシンプルなメニューは改善できます。ボタンの状態を常にチェックする代わりに、割り込みを使用できます。このようにして、プロジェクトの消費電力を削減し、コードをよりクリーンにすることができます。すぐに割り込みに関するビデオを準備しますので、お楽しみに。このメニュープロジェクトについてのご意見をお聞かせください。あなたはそれが役に立つと思いますか、そしてあなたはあなたのプロジェクトのいずれかでメニューを使うことを計画していますか？以下にあなたの考えやアイデアを投稿してください、ありがとう！

コード

• コードスニペット＃2

コードスニペット＃2 プレーンテキスト

 String menuItem1 ="Contrast"; String menuItem2 ="Volume"; String menuItem3 ="Language"; String menuItem4 ="Difficulty"; String menuItem5 ="Light：ON"; String menuItem6 ="リセット";ブールバックライト=true; intコントラスト=60; intボリューム=50;文字列言語[3] ={"EN"、 "ES"、 "EL"}; int selectedLanguage =0;文字列難易度[2] ={"EASY"、 "HARD "}; int selectedDifficulty =0; 

Github