ArduinoでLCD 20x4ディスプレイ：VelxioでHello World

はじめに

Velxioチュートリアルへようこそ！今回は、20x4 LCDディスプレイとArduino Unoを使って、定番のHello Worldプロジェクトを構築します。キャラクターLCDをマイコンと接続する方法を学びたい初心者に最適なプロジェクトです。ディスプレイ制御を簡単にしてくれる人気のLiquidCrystalライブラリを使用します。

この記事を読み終える頃には、20x4 LCDの配線、複数行にテキストを表示するコードの作成、そして稼働時間のような動的データの表示までできるようになります。さっそく始めましょう！

回路の解説

この回路は、Arduino Unoと20x4 LCD（モデルwokwi-lcd2004）の2つの主要コンポーネントで構成されています。LCDには16本のピンがありますが、データと制御に必要なのはそのうちの6本だけです。配線は以下の通りです。

• RS（レジスタセレクト） – Arduinoのピン12に接続（緑色の線）
• E（イネーブル） – Arduinoのピン11に接続（緑色の線）
• D4 – Arduinoのピン5に接続（青色の線）
• D5 – Arduinoのピン4に接続（青色の線）
• D6 – Arduinoのピン3に接続（青色の線）
• D7 – Arduinoのピン2に接続（青色の線）

4ビットモードを使用しているため、8本ではなく4本のデータ線（D4–D7）のみで済みます。これにより貴重なI/Oピンを節約できます。LCDには電源（5V）とグランドも必要ですが、Velxioではコンポーネントを配置すると自動的に接続されます。

Velxioでこの回路を構築するには：

1. LCD Hello Worldの例を開くか、新しいプロジェクトを開始します。
2. コンポーネントピッカーを使用して、Arduino Unoと20x4 LCDを追加します。
3. ピンをクリックし、上記の接続に合わせてワイヤーをドラッグします。カラースウォッチをクリックするとワイヤーの色を変更できます。
4. キャンバスが上の回路図のようになれば完了です。

コードの解説

それではコードを見てみましょう。Velxioでコードエディタを開きます（シンタックスハイライト付きのMonacoエディタが表示されます）。以下が完全なスケッチです。

// LiquidCrystal Library - Hello World
// Demonstrates the use a 20x4 LCD display

#include <LiquidCrystal.h>

// initialize the library by associating any needed LCD interface pin
// with the arduino pin number it is connected to
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {
  // set up the LCD's number of columns and rows:
  lcd.begin(20, 4);
  // Print a message to the LCD.
  lcd.print("Hello, Arduino!");
  lcd.setCursor(0, 1);
  lcd.print("Velxio Emulator");
  lcd.setCursor(0, 2);
  lcd.print("LCD 2004 Test");
}

void loop() {
  // set the cursor to column 0, line 3
  lcd.setCursor(0, 3);
  // print the number of seconds since reset:
  lcd.print("Uptime: ");
  lcd.print(millis() / 1000);
}

仕組み

1. ライブラリをインクルード: #include <LiquidCrystal.h> により、すべてのLCD関数が使用可能になります。
2. ピンを定義: ピン番号の定数を作成します：rs = 12、en = 11、d4 = 5、d5 = 4、d6 = 3、d7 = 2。これらは配線と一致します。
3. LCDオブジェクトを作成: LiquidCrystal lcd(rs, en, d4, d5, d6, d7); で、どのピンが接続されているかをライブラリに伝えます。
4. setup()内:
   • lcd.begin(20, 4); でディスプレイを20列×4行で初期化します。
   • lcd.print() で現在のカーソル位置にテキストを書き込みます。
   • lcd.setCursor(col, row) でカーソルを特定の位置（0始まり）に移動します。
5. loop()内:
   • カーソルを3行目、0列目に移動します。
   • “Uptime: ” に続けて millis() / 1000（リセットからの秒数）を表示します。

コードを実行するには、ツールバーのコンパイルボタンをクリックし、次に実行をクリックします。

重要な概念

• 4ビットモード vs 8ビットモード: 4本のデータ線（D4–D7）のみを使用することでピンを節約します。LiquidCrystalライブラリがプロトコルを処理します。
• カーソル位置指定: setCursor(col, row) – 行と列は0から始まることに注意してください。
• millis(): プログラム開始からの経過ミリ秒を返します。1000で割ると秒数になります。
• ライブラリ管理: VelxioにはデフォルトでLiquidCrystalライブラリが含まれています。ライブラリマネージャーからさらにライブラリを追加できます。

よくある落とし穴とデバッグのヒント

• 配線ミス: 各ワイヤーが正しいピンに接続されているか再確認してください。D4とD5を入れ替えると文字化けが発生します。
• begin()のサイズ間違い: 20x4ディスプレイで lcd.begin(16, 2) を使用すると、テキストが途切れたり位置がずれたりする可能性があります。
• ライブラリの欠落: LiquidCrystal.h に関するコンパイルエラーが出た場合は、ライブラリがインストールされているか確認してください（デフォルトでインストールされているはずです）。
• カーソルが見えない: デフォルトではカーソルは非表示です。lcd.cursor() を使用するとアンダースコアカーソルが表示されます。
• テキストが更新されない: ループ内で新しいデータを表示する前に、行をクリアする必要がある場合があります。lcd.setCursor(0, 3); lcd.print(" "); で行をクリアできます。

おすすめの拡張アイデア

基本的なHello Worldが動作したら、以下の拡張に挑戦してみてください。

1. テキストのスクロール: lcd.scrollDisplayLeft() や lcd.scrollDisplayRight() を使ってスクロールメッセージを作成します。
2. センサーデータの表示: アナログセンサー（例：ポテンショメータ）を読み取り、その値をLCDに表示します。
3. カスタム文字: lcd.createChar() を使って独自のシンボルを作成します。
4. ボタン入力: ボタンを追加して、表示メッセージを切り替えます。
5. 複数画面: ステートマシンを使用して、異なる情報ページを順に表示します。

自分で試してみよう！

自分だけのLCDプロジェクトを構築する準備はできましたか？VelxioでLCD Hello Worldの例を開いて、実験を始めましょう。コードの変更、配線の変更、新しいコンポーネントの追加など、すべてブラウザ上で行えます。ハードウェアは不要です。

それでは、楽しいものづくりを！