グラフィックLCDにカスタム画像を表示する方法
2023年9月28日
グラフィックLCDディスプレイは、テキスト、画像、グラフなど、さまざまな情報を表示するために使用できます。この記事では、グラフィックLCDにカスタム画像を表示する手順を解説します。まず、グラフィックエディタで画像を作成します。画像の作成が完了したら、LCDディスプレイが認識できる形式に変換する必要があります。この変換には、「LCD Assistant」などのツールを使用できます。最後に、LCDディスプレイに画像を表示するためのコードを記述します。
このチュートリアルではArduino Unoを使用しますが、その原理はグラフィックLCDディスプレイを搭載したあらゆるマイクロコントローラに適用できます。
目次
ハードウェアとツール
- Arduino UNO
- グラフィックLCD:NHD-14432WG-BTFH-V#T
- 単列ピンヘッダーコネクタ
- ブレッドボード
- ジャンパー線
- はんだとはんだごて
- USB Aオス-Bオスケーブル(プリンターケーブル)
- Arduino IDE
- MSペイントやGIMPなどの画像編集ソフト(任意)
- モノクロのビットマップ画像を画像データ配列に変換する「LCD Assistant」ソフトウェア(オプション)
グラフィックLCDのピン配置(パラレルインターフェース)
ニューヘイヴンのディスプレイ NHD-14432WG-BTFH-V#T は、ST7920コントローラを搭載した144×32ピクセルのグラフィックLCDモジュールです。パラレル通信を採用しており、5Vの電源電圧で動作します。

| LCDピン | シンボルマーク | 接続 |
|---|---|---|
| 1 | VSS | Arduino:GND |
| 2 | VDD | Arduino:5V |
| 3 | VO | 接続なし |
| 4 | アールエス | Arduino: D8 |
| 5 | R/W | Arduino: D9 |
| 6 | E | Arduino: D10 |
| 7 | DB0 | Arduino: D0 |
| 8 | DB1 | Arduino: D1 |
| 9 | DB2 | Arduino: D2 |
| 10 | DB3 | Arduino: D3 |
| 11 | DB4 | Arduino: D4 |
| 12 | DB5 | Arduino: D5 |
| 13 | DB6 | Arduino: D6 |
| 14 | DB7 | Arduino: D7 |
| 15 | A | 5Vに30Ωを直列接続 |
| 16 | K | 電源:GND |
回路 - 接続図および回路図
接続図
回路図
カスタムグラフィックの作成
グラフィックLCDにカスタム画像や既存の画像を表示するには、その画像をLCDと互換性のある形式、多くの場合データ配列の形式に変換する必要があります。Microsoft Paint、GIMP、Photoshopなどのさまざまなグラフィックデザインツールがこの作業に役立ちます。ただし、このチュートリアルの範囲内では、Microsoft Paintの使用に焦点を当てます。
カスタム画像を作成したくない場合や、もっと手っ取り早い方法をお探しの場合は、画像の作成や変換の手順を省略し、こちらにあるあらかじめ生成済みの画像データ配列のコードをご利用いただけます。
グラフィックLCD用のカスタム画像を作成する方法
- Microsoft ペイントで新しいファイルを開きます。
- 「ファイル」→「プロパティ」を選択します。
- 以下のプロパティを設定してください:
- 単位:ピクセル
- 色:黒と白
- 幅:ディスプレイの幅(ピクセル数)(この例では144)
- 高さ:ディスプレイの高さ(ピクセル数)(この例では32)
- 「表示」タブに移動し、「グリッド線」にチェックを入れます。
- ツールを使って、オリジナルのグラフィックを作成してください。
- 6. 「ファイル」→「名前を付けて保存」を選択し、画像のファイル名を入力して、「ファイルの種類」から「モノクロビットマップ (*.bmp;*.dib)」を選択します。
LCDアシスタントソフトウェアによって生成されたデータ配列のコードを処理した後、「const」キーワードを削除してください。そうしないと、データ配列が正常に動作しない可能性があります。
上記の画像設定では、互換性を最大限に高めるためカラーモードがモノクロに設定されており、画像サイズも144×32とLCD画面の寸法に合わせてあるため、画像が画面にぴったり収まります。
Macをお使いの場合や、オープンソースの画像編集ソフトを好む場合は、同様の手順でGIMPを使用し、画像を「X Bitmap」形式でエクスポートした後、任意のコードエディタで開いて画像データの配列を確認することができます。GIMPを使用すれば、画像をデータ配列に変換する手順を省略できます。また、この目的にはオンラインツールのImage2cppも利用できます。
グラフィックをデータ配列に変換する
グラフィックをデータ配列に変換するには、通常、画像からピクセルの色データを抽出し、それをデータ配列として数値で表現します。この変換には、プログラミングライブラリ、カスタムソフトウェア、オンラインツールなど、いくつかの方法やツールが利用可能です。このチュートリアルでは、「LCD Assistant」というソフトウェアを使用します。
- LCD Assistant ソフトウェアを開きます:こちらからダウンロードしてください。
- バイトの向きを「水平」に設定します。
- 「ファイル」→「画像を読み込む」を選択し、グラフィック用のBMPファイルを選択してください。
- 「ファイル」→「出力を保存」を選択し、ファイル名を .h 拡張子付きで保存してください。
- .h ファイルを開き、データ配列をコピーします。
LCD Assistant を選ぶにせよ、GIMP を選ぶにせよ、目標は、このチュートリアルの例のような画像の数値表現を得ることです。
サンプルコードに画像データ配列を追加する
画像データ配列をArduinoスケッチに組み込むには、主に2つの方法があります。スケッチ内にデータを直接埋め込む方法と、別のヘッダーファイルを使用する方法です。このチュートリアルでは、同じプロジェクトディレクトリ内の別のファイルを使用します。プロジェクトフォルダには、画像データ配列の.hファイルと、以下のArduinoサンプルコードが記述された.inoファイルが含まれている必要があります。
サンプルコードをArduino IDEにコピーする
Arduino IDEを開き、新しいスケッチを作成します。既存のコードをすべて削除してから、以下に示すコードをコピーして貼り付けてください。
//---------------------------------------------------------
/*
Program for writing to NHD-14432WG-BTFH-V#T LCD with the ST7920 controller
This code is written for the Arduino Uno R3 using 8-bit parallel interface
Newhaven Display invests time and resources providing this open source code,
Please support Newhaven Display by purchasing products from Newhaven Display!
This code is provided as an example only and without any warranty by Newhaven Display.
Newhaven Display accepts no responsibility for any issues resulting from its use.
The developer of the final application incorporating any parts of this
sample code is responsible for ensuring its safe and correct operation
and for any consequences resulting from its use.
See the GNU General Public License for more details.
Use Horizontal Orientation when converting BMP to hex code
to display custom image using LCD assistant.
*/
//---------------------------------------------------------
#define RS 8 //Register Select signal
#define RW 9 //Read/Write signal
#define E 10 //Enable signal
#include "144_32_Arrows.h"
/****************************************************
Function Commands
*****************************************************/
//--------------------------------------------------------------------------
void command(unsigned char c){
unsigned char i, temp;
PORTD = c;
digitalWrite(RS, LOW); // Command
digitalWrite(RW, LOW); // Write
digitalWrite(E, HIGH);
delay(1);
digitalWrite(E, LOW);
delay(1);
}
//--------------------------------------------------------------------------
void data(unsigned char d){
unsigned char i, temp;
PORTD = d;
digitalWrite(RS, HIGH); // Data
digitalWrite(RW, LOW); // Write
digitalWrite(E, HIGH);
delay(1);
digitalWrite(E, LOW);
delay(1);
}
/****************************************************
Display Commands
*****************************************************/
void disp(unsigned char *LCD_String)
{
unsigned int x, y, page;
page = 0x80;
for(int i=0;i<32;i++)
{
command(0x3E);
command(page);
command(0x80);
for (x=0;x<18;x++){
data(*LCD_String);
LCD_String++;
}
page++;
}
}
void Fill()
{
unsigned int x, y, page;
page = 0x80;
for (page=0x80;page<0xA1;page++)
{
command(0x3E);
command(page);
command(0x80);
for (x=0;x<18;x++)
{
data(0xFF);
delayMicroseconds(50);
}
}
}
void Clear()
{
unsigned int x, y, page;
page = 0x80;
for (page=0x80;page<0xA1;page++)
{
command(0x3E);
command(page);
command(0x80);
for (x=0;x<18;x++)
{
data(0x00);
delayMicroseconds(100);
}
}
}
/****************************************************
Initialization For controller
*****************************************************/
void Initialization_Sequence()
{
command(0x38); //Function Set: 8-bit mode, basic instruction
delay(2);
command(0x0C); //Display control: Display on, cursor off, blink off
delay(2);
command(0x06); //Entry Mode Set
delay(2);
command(0x02); //Return home
delay(100);
command(0x01); //Display Clear
delay(10);
for(int i=1;i<=32;i++){
command(0x3E);
command(0x80);
command(0x80);
for(int j=1;j<=40;j++){
data(0x00);
}
}
}
/*****************************************************
Setup Function, to run once
*****************************************************/
void setup() {
DDRD = 0xFF; // First 8 pins of PORT D as output
DDRB = 0x3F; // Port B first 6 pins as output
Initialization_Sequence();
delay(10);
Fill();
delay(500);
Clear();
delay(500);
}
/*****************************************************
Loop Function, to run repeatedly
*****************************************************/
void loop() {
disp(Arrows);
}
機能の概要:
- command()関数は、LCD にコマンドを送信します。
- data()関数は、LCD にデータを送信します。
- disp()関数は、LCD に 144×32 のグラフィックを表示します。
- fill()関数は、LCD のすべてのピクセルを点灯させます。
- clear()関数は、LCD のすべてのピクセルをオフにします。
- Initialization_Sequence()関数は、LCD を初期化するために必要な命令を送信します。
- setup()関数はメイン関数であり、Arduino の起動時に実行されます。setup 関数は Initialization_Sequence() 関数を呼び出し、その後、LCD 上のすべてのピクセルを点灯・消灯させます。
- loop()関数は、setup() 関数の実行が完了した後、継続的に実行されます。この関数は、グラフィックデータ配列を引数として disp() 関数を呼び出します。
Arduinoにコードをアップロードする
- USB-Bケーブルを使って、ArduinoをPCに接続してください。
- Arduino IDE で、ボードとポートを選択します。
- 「アップロード」ボタンをクリックして、Arduinoにコードを書き込んでください。
コードのアップロードが正常に完了すると、LCD画面にカスタム画像が表示されるはずです。
動画チュートリアル
結論
グラフィックLCDにカスタム画像を表示することで、ユーザー体験を向上させ、よりインタラクティブなインターフェースを実現できます。本記事で解説する、グラフィックの作成からコードの実装に至るまでの手順に従うことで、ユーザーはカスタムグラフィックをLCDディスプレイにシームレスに組み込むことができます。Arduino Unoを使用する場合でも、他のマイクロコントローラを使用する場合でも、その原理は同じであるため、どなたでもスムーズに作業を進めることができます。
