リニアアンプ操作パネルの画面作成

　一昨日から作成していたLCDパネルの画面設計を元に、実際に液晶パネルに描画してみました。パソコンの画面とは違って、使えるフォントの種類やサイズに制約があるので、表示場所を多少変更するなどのトリミングが必要でした。色に関しては16ビットカラー（6万色）が使えるので問題はありませんが、背景色と表示する文字の色との関係で見にくくなったりするので、色々試してみました。色彩的なセンスは持ち合わせていませんので、いい加減なところで折り合いをつけました。

　何種類かのアイコンも作成してみました。画面左上の横三本線のアイコンは、メニュー表示の意味で、此処をタッチすると保守用の画面が開くようにする予定です。

　Arduino IDEのC++ライクな環境で簡単にアイコンを定義するには、XBMフォーマットを使うと良いようです。16x16ドットの小さなアイコンを作るあたり、表計算ソフト（OpenOfficeのCalc）を使いました。Calcで方眼を作り、16行16列のブロック内を黒か白かに塗り分けてアイコンを作りました。それを目で見て、2進数（16進数）に手作業で変換します。

　プログラムでは次のような表現になりました。

//16x16 XBM, 3 stripes for menu icon
const unsigned char menu_icon[] = {
  0x00, 0x00, 
  0x00, 0x00, 
  0x00, 0x00, 
  0xff, 0xff, 
  0xff, 0xff, 
  0x00, 0x00, 
  0x00, 0x00, 
  0xff, 0xff, 
  0xff, 0xff, 
  0x00, 0x00, 
  0x00, 0x00, 
  0xff, 0xff, 
  0xff, 0xff, 
  0x00, 0x00, 
  0x00, 0x00, 
  0x00, 0x00, 
  };
//16x16 XBM, X mark for exit icon
const unsigned char exit_icon[] = {
  0x02, 0x40,  
  0x07, 0xe0,  
  0x0c, 0x70,  
  0x1c, 0x38,  
  0x38, 0x1c,  
  0x70, 0x0e, 
  0xe0, 0x07, 
  0xc0, 0x03,  
  0xc0, 0x03,  
  0xe0, 0x07, 
  0x70, 0x0e,  
  0x38, 0x1c,  
  0x1c, 0x38,  
  0x0c, 0x70,  
  0x07, 0xe0,  
  0x02, 0x40,  
  };
//16x16 XBM, left-arrow for prev icon
const unsigned char prev_icon[] = {
  0x00, 0x00,  
  0x00, 0x00,  
  0x40, 0x00,  
  0x60, 0x00,  
  0x70, 0x00,  
  0xf8, 0x3f, 
  0xfc, 0x3f, 
  0xfe, 0x3f,  
  0xfc, 0x3f,  
  0xf8, 0x3f, 
  0x70, 0x00,  
  0x60, 0x00,  
  0x40, 0x00,  
  0x00, 0x00,  
  0x00, 0x00,  
  0x00, 0x00,  
  };
//16x16 XBM, right-arrow for next icon
const unsigned char next_icon[] = {
  0x00, 0x00,  
  0x00, 0x00,  
  0x00, 0x02,  
  0x00, 0x03,  
  0x00, 0x0e,
  0xfc, 0x1f, 
  0xfc, 0x3f, 
  0xfc, 0x7f,  
  0xfc, 0x3f,  
  0xfc, 0x1f, 
  0x00, 0x0e,  
  0x00, 0x03,  
  0x00, 0x02,  
  0x00, 0x00,  
  0x00, 0x00,  
  0x00, 0x00,  
  };

 

　アイコンを表示するために、次のような関数を作成しました。

void showIcon(const unsigned char icon[], int16_t x, int16_t y, uint16_t color){
  tft.drawXBitmap(x, y, icon, 16, 16, color);
}

　これを次のように呼び出して、任意のアイコンを指定した座標に指定した色で表示します。

 showIcon(menu_icon, 5, 11, TFT_WHITE);

//  showIcon(exit_icon, 294, 215, TFT_RED);
//  showIcon(prev_icon, 5, 215, TFT_YELLOW);
//  showIcon(next_icon, 30, 215, TFT_YELLOW);