aitendoの2.4インチLCDをArduinoで使おう


とても身近になったLCD

ライブラリは中身をすべて理解していなくても、インプットとアウトプットがわかれば、まるで魔法のように振る舞う素晴らしい呪文です。中身を理解すると、魔法が理屈になりますが、DIYではそこまで求めません。

制御の難しそうなフルカラーLCD。ですが、Arduino UNOとLCD用ライブラリを使えばかなり簡単に動かすことができます。
使用したのはaitendoで販売している2.4インチLCD with 基板 [LCD9325D8A]です。2.4インチLCDとこれを基板に乗っけて、DIPタイプのピンで扱いやすくするキャリ基板のセットです。

2.4インチLCDにはドライバーICのILI9325というチップが内蔵してあるそうですが、チップなんてどこに入ってんだと思うくらいとても薄い液晶です。

このセットは、LCDのフレキケーブルとキャリ基板をはんだ付けするというテクニカルなシーンがあります。基板用フラックスを使うと、ハンダが盛り上がらずにいい感じになると思います。
フラックスを使わないと、ハンダが盛り上がって隣とくっついたり悲惨な未来が見えます。
失敗しても1000円で復活できます。

Arduino UNOとつなぐ

Arduinoとのピンの接続はaitendoの指示通りです。
これから使うライブラリはもともとLCDシールドのためのライブラリで、ピンの位置がそれに合わせてあります。ライブラリにはピンの位置を設定するメソッドはありません。ライブラリをいじれば変えられるのでしょうが、しばらく悩んでも小生には理解できませんでした。素直に規定のピンで使用することにします。

必要なのはAdafruit-GFX-Libraryと、MCUFRIEND_kbv Library です。
Adafruit-GFXはグラフィック液晶などの描写をコントロールするコアの部分で、そこから個別のデバイスのコントローラーに合わせたライブラリとしてMCUFRIEND_kbvを使用します。とにかく2ついれとく必要があります。
すべてを理解し尽くそうと思ってはいけません。

ピンの接続と、ライブラリのインストールが適切に完了すれば、MCUFRIEND_kbvのスケッチ例「GLUE_DEMO_320x240」をArduinoに書き込めばいい感じに動くと思います。
他にもいろいろなスケッチ例を楽しむことができ、大変参考になると思います。こういうのを真似ることは大事なことですね。

フォントのデザインにうるさい人も安心

気になったのはフォントのデザインです。Adafruit GFX Libraryにはたくさんのビットマップフォントが入っており、どんなふうに表示されるのか気になりました。
さらに、パソコンに入っているフォントをビットマップフォントに変換して、LCDで使用する事もできます。フォントを使うときは、提供元のライセンスをよく確認してください。

そこで、主要フォントを一挙に表示して雰囲気を確認してみました。
どんなフォントを使おうかとお悩みでしたらご参考にしてください。

試しにオリジナルフォントとしてM+ FONTSを入れてみました。組み込みにも使用できる懐の深いフリーフォントです。固定幅フォントは数字が変化する計測値の表示に最適です。12ptくらいあったほうが栄えです。


おわり

LCDって制御とかフォントの設定とかどーしたらいいんだ……、みたいな億劫さがあったのですが、ライブラリが充実しているおかげでそこらへんの悩みを軽く超えてきました。
値段も1000円ほどでフルカラー液晶が手に入るのも革新的です。

難点としては数少ないArduino UNOの入出力ピンを13本も使用してしまうこと。アナログ入力ピンに関しては1本しか残りません。
そしてLCDの制御や基本的なフォントを入れると、それだけでフラッシュメモリを半分以上使ってしまいます。

これを一挙に解決する方法はずばり、Arduino MEGA 2560にステップアップするのが手っ取り早いのではないでしょうか。
IOピンは14本から54本、アナログ入力ピンは6本から16本に、フラッシュメモリは32kBから256kBに飛躍的に増えます。
メインのマイコンは同じATmega製で、上半分の見た目はUNOとほとんど一緒だからなんとかなりそうな気がしませんか。

実際MEGA 2560でも同じように動作しましたので大丈夫です。
テストで使ったマルツパーツ製互換UNO"Maruduino"と純正MEGA 2560。
MEGAっていうからすげーデカかったらどうしようと思ったけど、縦にちょっと伸びただけで、マイコンは逆に小さくなった。

いいですねぇ、楽しみが広がりますね。
これを使って何を作るかはまた遠い先のお話……。


写真に表示されている文字の大きさテストとか、フォントのデザイン確認で作ったスケッチです。ちょっと参考になれば幸いです。

スケッチ

  1. #include < mcufriend_kbv .h >   // これだけインクルードしておけば、必要なライブラリはこっちで用意します。
  2. MCUFRIEND_kbv tft; 
  3.  
  4. #include < freedefaultfonts .h >    // 各種フォントのインクルード
  5. #include < fonts reemono9pt7b.h >
  6. #include < fonts reesans9pt7b.h >
  7. #include < fonts reeserif9pt7b.h >
  8. #include < fonts reeserifitalic9pt7b.h >
  9. #include < fonts rg_01.h >
  10. #include < fonts icopixel.h >
  11. #include < fonts omthumb.h >
  12. #include < fonts mplus1mmedium12pt7b.h>
  13.  
  14. void setup() {    
  15.  uint16_t ID = tft.readID();
  16.  if (ID == 0xD3) ID = 0x9481;
  17.  tft.begin(ID);
  18.  tft.setRotation(2);　　　　　　　// 画面の回転
  19. }
  20.  
  21. void loop() {
  22.   tft.fillScreen(0x000000);    // 枠の描写
  23.   tft.fillRect(0,0,240,13,0x98f5ff);     // 四角形の作図
  24.   tft.fillRect(0,307,240,13,0x98f5ff);
  25.   
  26.   tft.setFont(NULL);
  27.   tft.setTextSize(1);                               // フォントサイズの指定
  28.   tft.setCursor(10,2);                              // カーソルの移動
  29.   tft.setTextColor(0xffffff);                       // フォント色の指定
  30.   tft.print("Yofuji Shinki Laboratory");            // 文字の表示       
  31.   tft.setCursor(10,310);
  32.   tft.print("http://yofuji-shinki.blogspot.com/");
  33.  
  34.   tft.setCursor(20,20);        // サイズをかえて文字の一覧表示
  35.   tft.print("Size1");
  36.   tft.setCursor(20,35);
  37.   tft.setTextSize(2);
  38.   tft.print("Size2");
  39.   tft.setCursor(20,62);
  40.   tft.setTextSize(3);
  41.   tft.print("Size3");
  42.   tft.setCursor(20,90);
  43.   tft.setTextSize(4);
  44.   tft.print("Size4");
  45.   tft.setCursor(20,130);
  46.   tft.setTextSize(5);
  47.   tft.print("Size5");
  48.   tft.setCursor(20,180);
  49.   tft.setTextSize(6);
  50.   tft.print("Size6");
  51.   tft.setCursor(20,240);
  52.   tft.setTextSize(7);
  53.   tft.print("Size7");
  54.  
  55. delay(5000);                              // 5秒待機
  56.  
  57.   /*  フォントサンプル */
  58.   tft.fillRect(0,13,240,294,0x000000);    // 描写領域のリセット
  59.   
  60.   tft.setTextSize(1);                     // 各種フォントの表示
  61.   tft.setCursor(10,20);
  62.   tft.print("FreeSmallFont 0123456789");
  63.   
  64.   tft.setCursor(10,40);
  65.   tft.setFont(&FreeBigFont);
  66.   tft.print("FreeBigFont");
  67.   
  68.   tft.setCursor(10,105);
  69.   tft.setFont(&FreeSevenSegNumFont);
  70.   tft.print("012345");
  71.   
  72.   tft.setCursor(10,125);
  73.   tft.setFont(&FreeMono9pt7b);
  74.   tft.print("FreeMono 0123456789");
  75.   
  76.   tft.setCursor(10,145);
  77.   tft.setFont(&FreeSans9pt7b);
  78.   tft.print("FreeSans9pt 0123456789");
  79.   
  80.   tft.setCursor(10,165);
  81.   tft.setFont(&FreeSerif9pt7b);
  82.   tft.print("FreeSerif9pt 0123456789");
  83.   
  84.   tft.setCursor(10,185);
  85.   tft.setFont(&FreeSerifItalic9pt7b);
  86.   tft.print("FreeSerifItalic9pt 0123456789");
  87.   
  88.   tft.setCursor(10,205);
  89.   tft.setFont(&Org_01);
  90.   tft.print("Org_01 0123456789");
  91.   
  92.   tft.setCursor(10,225);
  93.   tft.setFont(&Picopixel);
  94.   tft.print("Picopixel 0123456789");  
  95.   
  96.   tft.setCursor(10,245);
  97.   tft.setFont(&TomThumb);
  98.   tft.print("TomThumb 01213456789");
  99.  
  100.   tft.setCursor(10,265);
  101.   tft.setFont(&mplus1mmedium12pt7b);
  102.   tft.print("M+1mMedium 3.14");
  103.   
  104.   delay(5000);
  105. }

参考サイト

Humblesoft WIKI,Adafruit_GFXのメソッド  こちらのメソッドに対応しています。
M+ FONTS PROJECT  お手製組み込みフォントとしてこちらのフォントを利用しました。
Kris Kasprazak,Create and use custom fonts for Adafruit_GFX libraries  YouTube動画です。この動画を参考にすると、好きなフォントを組み込むことができます。

コメント

コメントを投稿