Arduinoでタッチスクリーンを使う・テキスト描画

Arduino UNO R3
DSC_1805
にほんブログ村 その他趣味ブログへ
にほんブログ村 その他趣味ブログ 電子工作へ
にほんブログ村 科学ブログへ
にほんブログ村 科学ブログ 科学実験・工作へ

独自のプログラムを作る

今回はELEGOO 2.8inches タッチスクリーンを使った独自のプログラムを作ってみます。…しかし、添付CD-ROM内のPDFファイルにはサンプルの使い方しか書かれておらず、ライブラリに関する資料はありません。よって、サンプルプログラムやライブラリのソースコードそのものを読みながらいろいろ試してみることにします。

テキスト表示のサンプル

例によって公式サンプルから贅肉をそぎ落としそぎ落とし最小構成にしました。

#include "Elegoo_GFX.h"
#include "Elegoo_TFTLCD.h"

// ピンの定義
#define LCD_CS A3
#define LCD_CD A2
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RST A4

// 色の定義
#define	BLACK   0x0000
#define	BLUE    0x001F
#define	RED     0xF800
#define	GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

// インスタンスの生成
Elegoo_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RST);

void setup() {
  // 初期化
  tft.reset();
  uint16_t identifier = tft.readID();
  if(identifier==0x0101){     
    identifier=0x9341;
  }else if(identifier==0x1111){     
    identifier=0x9328;
  }
  Serial.println(identifier);
  tft.begin(identifier);
}

void loop() {
  // 画面クリア
  tft.fillScreen(WHITE);
  tft.setRotation(0);
  tft.setCursor(0,0);

  // 文字表示
  tft.setTextColor(RED);
  tft.setTextSize(1);
  tft.println("Hello,World!");
  tft.setTextColor(BLUE);
  tft.setTextSize(2);
  tft.println("Hello,World!");
  tft.setTextColor(GREEN);
  tft.setTextSize(3);
  tft.println("Hello,World!");
  while(true);
}

プログラムの解説

ライブラリのインクルード
#include "Elegoo_GFX.h"
#include "Elegoo_TFTLCD.h"

表示については、”Elegoo_GFX.h”および”Elegoo_TFTLCD.h”の2つのインクルードが必要なようです。

ピンの定義
// ピンの定義
#define LCD_CS A3
#define LCD_CD A2
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RST A4

公式サンプルに倣って、制御信号の接続端子を定数で定義しています。ちなみに各ピンの意味は以下の通りです。

名前意味
LCD_CSチップセレクト
LCD_CDコマンド／データ　セレクト
LCD_WR書き込み
LCD_RD読み出し
LCD_RSTリセット
色の定義
// 色の定義
#define	BLACK   0x0000
#define	BLUE    0x001F
#define	RED     0xF800
#define	GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

これも公式サンプルに倣っています。どうやら色指定は16bit値で、上位ビットから5bitが赤・6bitが緑・5bitが青のようです。緑だけ1bit多いのですが、人間の色覚は緑色に対する感受性が赤・青に較べて高いらしいので、そのためかもしれません。

インスタンスの生成
// インスタンスの生成
Elegoo_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RST);

スクリーンを操作するためのElegoo_TFTLCDクラスのインスタスを生成しています。コンストラクタには先ほど定義した制御信号のピンを与えます。データバスとしてあつかうピンは固定のようです。

初期化
  tft.reset();

Elegoo_TFTLCD.reset()関数では、スクリーンというよりレジスタやポートの設定をしているようです。

スクリーンの開始
  uint16_t identifier = tft.readID();
  if(identifier==0x0101){     
    identifier=0x9341;
  }else if(identifier==0x1111){     
    identifier=0x9328;
  }
  Serial.println(identifier);
  tft.begin(identifier);

Elegoo_TFTLCD.readID()関数ではドライバチップのIDを読み取っているようです。このIDを引数としてElegoo_TFTLCD.begin()関数を呼び出していますが、公式サンプルではいくつかのIDについて別の値に変更するようになっているのでそれに倣っています（たぶん処理を共通化させるためでしょう）。

表示する
  // 画面クリア
  tft.fillScreen(WHITE);
  tft.setRotation(0);
  tft.setCursor(0,0);

  // 文字表示
  tft.setTextColor(RED);
  tft.setTextSize(1);
  tft.println("Hello,World!");
  tft.setTextColor(BLUE);
  tft.setTextSize(2);
  tft.println("Hello,World!");
  tft.setTextColor(GREEN);
  tft.setTextSize(3);
  tft.println("Hello,World!");

loop()関数の中には具体的に画面を描画する関数を記述しています。一度しか実行しないのでsetup()の中に含めてしまってもよかったのですが。

Elegoo_TFTLCD.fillScreen()関数は指定された色で画面を塗りつぶします。色は16bit整数値で、上位5bitが赤、次の6bitが緑、下位5bitが青を表します。この例では先に定義した定数を使っています。

Elegoo_TFTLCD.setRotation()関数は画面表示の向きを指定します。0（デフォルト値）を指定すると、ArduinoのUSB端子のある側が下の縦長画面（横240×縦320ピクセル）になります。Arduinoの基板上のロゴが読める向き（USB端子が左側にくる向き）で横長画面（横320×縦240ピクセル）として使用する場合は3を指定します。

Elegoo_TFTLCD.setCursor()関数は次に文字を描画する位置（文字列表示を開始する左上角の座標）を指定します。画面上の座標は、左上を(0,0)とし、右がx軸正方向、下がy軸正方向です。

Elegoo_TFTLCD.setTextSize()関数は文字の大きさを指定します。基準となるフォントサイズは1文字6×8ピクセルで、Elegoo_TFTLCD.setTextSize()関数の引数は表示倍率を表しているようです。つまり1を指定すると6×8ピクセル、2だと12×16ピクセル…となります。0以下を指定してもエラーにはなりませんが、結果がどうなるかは判りません。大きい方はいくらでも大きくできてしまうようです（後の項を参照）。

Elegoo_TFTLCD.setTextColor()関数は文字の描画色を指定します。色指定はElegoo_TFTLCD.fillScreen()関数と同様です。

Elegoo_TFTLCD.println()関数で実際に文字を表示します。使用法はSerial.println()等と同じのようです。画面の幅より長くなる文字数を表示しようとすると自動的に次の行の先頭から続きが表示されます。ただし、画面最下行に到達してもスクロールはしません。

直感的に判りやすい動作の関数が揃っていて、非常に簡単に文字列を表示するプログラムが組めました。

実行結果

プログラムの実行結果はこのようになります。
一番上にtextsize=1で赤、次にtextsize=2で青、最後にtextsize=3で緑の文字です。
textsize=1だと小さすぎてちょっと読みにくいですね。

文字サイズについて

文字サイズと表示可能文字数について、簡単なテストプログラムを作って確認してみました。

textsize=1

textsize=1では、横40文字×縦40行の表示が可能です（画面が240×320ピクセル、文字が6×8ピクセル）。

textsize=2

textsize=2では、横20文字×縦20行の表示が可能です（文字が12×16ピクセル）。可読性からするとtextsize=1だと小さすぎ、このくらいが適切なように思います。

textsize=4

textsize=4では、横10文字×縦10行の表示が可能です（文字が24×32ピクセル）。

textsize=10

textsize=10では、横4文字×縦4行の表示が可能です（文字が60×80ピクセル）。このあたりになると表示可能な文字数が少なすぎ、用途が限られてくる気はします。

textsize=20

textsize=20では、横2文字×縦2行の表示が可能です（文字が120×160ピクセル）。

textsize=40

textsize=40ではとうとう画面上に1文字しか表示できなくなりました。これを見るとフォントデータは5×7の範囲に収まり、右と下の1ピクセル分は文字同士がくっつかないように空白にされていることが判ります。

textsize=80

textsize=80にすると、フォントサイズが480×640ピクセル、つまり画面の4倍の大きさとなります。実用性はなさそうに思いますが、ちゃんと？文字の左上1/4が表示されているように見えます（表示文字は『0』です）。

日本語表示

println()の表示内容を”こんにちは世界”という日本語文字列に変更して試してみましたが、案の定表示はできませんでした。そもそも処理がマルチバイトに対応していないようにも見えますが、一方で “Σ” や “ü” や “ô” といった文字が8bit文字としてフォントが搭載されていることが判ります。

このフォントデータはソフトウェア上（Elegoo_GFX.zip内の glcdfont.c）で定義されているようなので、頑張れば日本語表示可能なライブラリも作成可能でしょう。

まとめ

予定より長くなってしまったので今回はここまで。次はグラフィック機能を試します。

  • 文字列表示ライブラリがあるので、println()などの簡単な関数で文字列表示が可能

コメント

タイトルとURLをコピーしました