イデオン　ゲージ　製作方法

先日丸いLCDを購入して、丸ならこっれでしょ！とイデゲージ製作したらtwitterで反響がありましたので、唐突ですが、イデゲージの作り方を紹介します。

こんな感じですね。

//—————————————————————————————–

まずは必要機材
・パソコン

・ESP32 DevKitC esp-WROOM-32

アマゾンやアリエクスプレスで販売しています。ピンの配置に色々とバリエーションが有るようです。基本的にはどれでも構いません。
パソコンの接続のためUSBケーブルのマイクロBタイプが必要です。

・丸い液晶　GC9A01 ドライバー

こちらもアマゾンで販売しています。
ただ、納期が遅くて今すぐ作りたいのにい！！という方は
こちらのSTEAM Tokyoさんなら3日位で届きました。
（こちらは上写真の様にコネクタ付きの配線も付属していました。アマゾンの方は付属するかは分かりません。）
アリエクスプレスでは少し形が違いますがこちらで値段はズットお安く売っていますｗ
こちらはハンダ付けとか必要そうです。

//———————————————————————————–

全体の作業の流れ
arduinoIDEの準備
↓
プログラムの書き込み
↓
配線の接続
↓
必要なら枠を付ける

てな感じです。

//————————————————————————————-

１　arduinoIDEの準備

①arduinoIDEのインストール
こちらのリンクを参考にarduinoIDEをインストールしてください。

➁ライブラリーのインストール
こちらのリンクを参考にライブラリーをインストールします。
必要なライブラリーはlovyanGFXです。
このリンクの「ライブラリ追加方法１」を参考に３枚目の写真の「検索をフィルタ・・・」となっている部分に「lovyanGFX」と打ってインストールして下さい。

③ESP32ボードマネージャーの追加
こちらのリンクに沿ってボードマネージャーを更新してください。
項目１４の部分ではESP32 Dev Moduleを選択して下写真の様にしてください
シリアルポートはESP32をつないでいるポート名を選択してください
シリアルポートの選択が複数ある場合は、間違ったらプログラムの書き込みができませんので、もし書き込みできない場合は他のシリアルポートを選択してください。

２　プログラムの書き込み

①まずはarduinoIDEを起動して、新規ファイルの作成を選択します。
プログラム記述枠に何やら書いてありますが、全選択して削除で。

②次に書き込むプログラムはこちらです。

#define LGFX_USE_V1
#include <LovyanGFX.hpp>

#define lcd display
int k,s;

class LGFX : public lgfx::LGFX_Device
{

  lgfx::Panel_GC9A01      _panel_instance;
  lgfx::Bus_SPI       _bus_instance;   // SPIバスのインスタンス
  lgfx::Light_PWM     _light_instance;

public:

  // コンストラクタを作成し、ここで各種設定を行います。
  // クラス名を変更した場合はコンストラクタも同じ名前を指定してください。
  LGFX(void)
  {
    { // バス制御の設定を行います。
      auto cfg = _bus_instance.config();    // バス設定用の構造体を取得します。

// SPIバスの設定
      cfg.spi_host = VSPI_HOST;     // 使用するSPIを選択  (VSPI_HOST or HSPI_HOST)
      cfg.spi_mode = 0;             // SPI通信モードを設定 (0 ~ 3)
      cfg.freq_write = 40000000;    // 送信時のSPIクロック (最大80MHz, 80MHzを整数で割った値に丸められます)
      cfg.freq_read  = 16000000;    // 受信時のSPIクロック
      cfg.spi_3wire  = true;        // 受信をMOSIピンで行う場合はtrueを設定
      cfg.use_lock   = true;        // トランザクションロックを使用する場合はtrueを設定
      cfg.dma_channel = 1;          // Set the DMA channel (1 or 2. 0=disable)   使用するDMAチャンネルを設定 (0=DMA不使用)
      cfg.pin_sclk = 18;            // SPIのSCLKピン番号を設定
      cfg.pin_mosi = 23;            // SPIのMOSIピン番号を設定
      cfg.pin_miso = 19;            // SPIのMISOピン番号を設定 (-1 = disable)
      cfg.pin_dc   = 27;            // SPIのD/Cピン番号を設定  (-1 = disable)
     // SDカードと共通のSPIバスを使う場合、MISOは省略せず必ず設定してください。
//*/
      _bus_instance.config(cfg);    // 設定値をバスに反映します。
      _panel_instance.setBus(&_bus_instance);      // バスをパネルにセットします。
    }

    { // 表示パネル制御の設定を行います。
      auto cfg = _panel_instance.config();    // 表示パネル設定用の構造体を取得します。

      cfg.pin_cs           =    14;  // CSが接続されているピン番号   (-1 = disable)
      cfg.pin_rst          =    33;  // RSTが接続されているピン番号  (-1 = disable)
      cfg.pin_busy         =    -1;  // BUSYが接続されているピン番号 (-1 = disable)

      // ※ 以下の設定値はパネル毎に一般的な初期値が設定されていますので、不明な項目はコメントアウトして試してみてください。

      cfg.memory_width     =   240;  // ドライバICがサポートしている最大の幅
      cfg.memory_height    =   240;  // ドライバICがサポートしている最大の高さ
      cfg.panel_width      =   240;  // 実際に表示可能な幅
      cfg.panel_height     =   240;  // 実際に表示可能な高さ
      cfg.offset_x         =     0;  // パネルのX方向オフセット量
      cfg.offset_y         =     0;  // パネルのY方向オフセット量
      cfg.offset_rotation  =     0;  // 回転方向の値のオフセット 0~7 (4~7は上下反転)
      cfg.dummy_read_pixel =     8;  // ピクセル読出し前のダミーリードのビット数
      cfg.dummy_read_bits  =     1;  // ピクセル以外のデータ読出し前のダミーリードのビット数
      cfg.readable         = false;  // データ読出しが可能な場合 trueに設定
      cfg.invert           = true;  // パネルの明暗が反転してしまう場合 trueに設定
      cfg.rgb_order        = false;  // パネルの赤と青が入れ替わってしまう場合 trueに設定
      cfg.dlen_16bit       = false;  // データ長を16bit単位で送信するパネルの場合 trueに設定
      cfg.bus_shared       = true;  // SDカードとバスを共有している場合 trueに設定(drawJpgFile等でバス制御を行います)

      _panel_instance.config(cfg);
    }

    { // バックライト制御の設定を行います。（必要なければ削除）
      auto cfg = _light_instance.config();    // バックライト設定用の構造体を取得します。

      cfg.pin_bl = 32;              // バックライトが接続されているピン番号
      cfg.invert = false;           // バックライトの輝度を反転させる場合 true
      cfg.freq   = 44100;           // バックライトのPWM周波数
      cfg.pwm_channel = 7;          // 使用するPWMのチャンネル番号

      _light_instance.config(cfg);
      _panel_instance.setLight(&_light_instance);  // バックライトをパネルにセットします。
    }
//*/

    setPanel(&_panel_instance); // 使用するパネルをセットします。
  }
};

// 準備したクラスのインスタンスを作成します。
LGFX display;

static LGFX_Sprite sprite(&lcd);

//===================================================================
void setup(void)
{ 
  display.init();   
}

//==================================================================
void loop(void)
{ 
/*
//-----------走査線-----------------------------
sprite.createSprite(255, 240);
sprite.fillRect(0,0,255,240,TFT_BLACK);
sprite.setScrollRect(0, 0, 255, 240, TFT_BLACK);

for(int i=0;i<500;i++){
  s++;
  if(s==1 ){sprite.drawFastHLine(0, 40, 30, TFT_WHITE);//2
            sprite.drawFastHLine(0, 100, 30, TFT_WHITE);//4
            sprite.drawFastHLine(0, 160, 30, TFT_WHITE);//6
            sprite.drawFastHLine(0, 220, 30, TFT_WHITE);//8
           }
  if(s==31){sprite.drawFastHLine(0, 10, 30, TFT_WHITE);//1
            sprite.drawFastHLine(0, 70, 30, TFT_WHITE);//3
            sprite.drawFastHLine(0, 130, 30, TFT_WHITE);//5
            sprite.drawFastHLine(0, 190, 30, TFT_WHITE);//7    
           } 
  if(s==61){s=0;}

  sprite.scroll(2,0);  
  sprite.pushSprite(-15,0);
 // delay(100);
}
//*/
//-----------------------イデ発動-----------------------

lcd.fillScreen(TFT_BLACK);
 delay(2000);
 //中心緑点滅
 for(int i=0;i<=30;i++){   
     lcd.drawLine(120, 115, 120, 125, TFT_DARKGREEN);
     lcd.drawLine(116, 120, 124, 120, TFT_DARKGREEN);
     lcd.drawLine(117, 117, 123, 123, TFT_DARKGREEN);
     lcd.drawLine(117, 123, 123, 117, TFT_DARKGREEN);
     delay(40);
     lcd.fillCircle(120,120,120,TFT_BLACK); 
     delay(40);
 }

 lcd.fillCircle(120,120,120,TFT_BLACK); 
 delay(300);
 for(int i=0;i<=10;i++){   
      lcd.fillCircle(120,120,i*12,TFT_DARKGREEN); 
      //delay(1);
 }
 delay(50);
 lcd.fillCircle(120,120,120,TFT_BLACK); 
 delay(30);
 lcd.fillCircle(120,120,120,TFT_DARKGREEN); 
 
 delay(500);

//円の描画
  for(int i=1;i<=360;i++){
      lcd.fillArc(120,120,120,117,270,270+i,TFT_WHITE);
      k++;
      if(k<=5){lcd.fillRect(119,119,3,3,TFT_WHITE);}
      if(k>5 && k<=10){ lcd.fillRect(119,119,3,3,TFT_DARKGREEN);}
      if(k==10){k=0;}
      delay(2);
  }
//縦線の描画  
 for(int i=0;i<=218;i++){ 
      lcd.fillRect(119,120-120*i/218,3,240*i/218,TFT_WHITE); 
      lcd.fillRect(169,11,3,i,TFT_WHITE); 
      lcd.fillRect(69,11,3,i,TFT_WHITE); 
      delay(2);
 }
//斜めの線描画
delay(100);
lcd.drawLine(69, 11, 169, 229, TFT_WHITE);
lcd.drawLine(70, 11, 170, 229, TFT_WHITE);
lcd.drawLine(71, 11, 171, 229, TFT_WHITE);

lcd.drawLine(69, 229, 119, 120, TFT_WHITE);
lcd.drawLine(70, 229, 120, 120, TFT_WHITE);
lcd.drawLine(71, 229, 121, 120, TFT_WHITE);

lcd.drawLine(69, 228, 169, 228, TFT_WHITE);
lcd.drawLine(70, 229, 169, 229, TFT_WHITE);
lcd.drawLine(71, 230, 169, 230, TFT_WHITE);

//---------------待機----------------------------------

delay(10000);
lcd.fillScreen(TFT_BLACK);

delay(2000);

  
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

#define LGFX_USE_V1

#include <LovyanGFX.hpp>

#define lcd display

int k,s;

class LGFX : public lgfx::LGFX_Device

{

lgfx::Panel_GC9A01 _panel_instance;

lgfx::Bus_SPI _bus_instance; // SPIバスのインスタンス

lgfx::Light_PWM _light_instance;

public:

// コンストラクタを作成し、ここで各種設定を行います。

// クラス名を変更した場合はコンストラクタも同じ名前を指定してください。

LGFX(void)

{

{ // バス制御の設定を行います。

auto cfg = _bus_instance.config(); // バス設定用の構造体を取得します。

// SPIバスの設定

cfg.spi_host = VSPI_HOST; // 使用するSPIを選択 (VSPI_HOST or HSPI_HOST)

cfg.spi_mode = 0; // SPI通信モードを設定 (0 ~ 3)

cfg.freq_write = 40000000; // 送信時のSPIクロック (最大80MHz, 80MHzを整数で割った値に丸められます)

cfg.freq_read = 16000000; // 受信時のSPIクロック

cfg.spi_3wire = true; // 受信をMOSIピンで行う場合はtrueを設定

cfg.use_lock = true; // トランザクションロックを使用する場合はtrueを設定

cfg.dma_channel = 1; // Set the DMA channel (1 or 2. 0=disable) 使用するDMAチャンネルを設定 (0=DMA不使用)

cfg.pin_sclk = 18; // SPIのSCLKピン番号を設定

cfg.pin_mosi = 23; // SPIのMOSIピン番号を設定

cfg.pin_miso = 19; // SPIのMISOピン番号を設定 (-1 = disable)

cfg.pin_dc = 27; // SPIのD/Cピン番号を設定 (-1 = disable)

// SDカードと共通のSPIバスを使う場合、MISOは省略せず必ず設定してください。

//*/

_bus_instance.config(cfg); // 設定値をバスに反映します。

_panel_instance.setBus(&_bus_instance); // バスをパネルにセットします。

}

{ // 表示パネル制御の設定を行います。

auto cfg = _panel_instance.config(); // 表示パネル設定用の構造体を取得します。

cfg.pin_cs = 14; // CSが接続されているピン番号 (-1 = disable)

cfg.pin_rst = 33; // RSTが接続されているピン番号 (-1 = disable)

cfg.pin_busy = -1; // BUSYが接続されているピン番号 (-1 = disable)

// ※ 以下の設定値はパネル毎に一般的な初期値が設定されていますので、不明な項目はコメントアウトして試してみてください。

cfg.memory_width = 240; // ドライバICがサポートしている最大の幅

cfg.memory_height = 240; // ドライバICがサポートしている最大の高さ

cfg.panel_width = 240; // 実際に表示可能な幅

cfg.panel_height = 240; // 実際に表示可能な高さ

cfg.offset_x = 0; // パネルのX方向オフセット量

cfg.offset_y = 0; // パネルのY方向オフセット量

cfg.offset_rotation = 0; // 回転方向の値のオフセット 0~7 (4~7は上下反転)

cfg.dummy_read_pixel = 8; // ピクセル読出し前のダミーリードのビット数

cfg.dummy_read_bits = 1; // ピクセル以外のデータ読出し前のダミーリードのビット数

cfg.readable = false; // データ読出しが可能な場合 trueに設定

cfg.invert = true; // パネルの明暗が反転してしまう場合 trueに設定

cfg.rgb_order = false; // パネルの赤と青が入れ替わってしまう場合 trueに設定

cfg.dlen_16bit = false; // データ長を16bit単位で送信するパネルの場合 trueに設定

cfg.bus_shared = true; // SDカードとバスを共有している場合 trueに設定(drawJpgFile等でバス制御を行います)

_panel_instance.config(cfg);

}

{ // バックライト制御の設定を行います。（必要なければ削除）

auto cfg = _light_instance.config(); // バックライト設定用の構造体を取得します。

cfg.pin_bl = 32; // バックライトが接続されているピン番号

cfg.invert = false; // バックライトの輝度を反転させる場合 true

cfg.freq = 44100; // バックライトのPWM周波数

cfg.pwm_channel = 7; // 使用するPWMのチャンネル番号

_light_instance.config(cfg);

_panel_instance.setLight(&_light_instance); // バックライトをパネルにセットします。

}

//*/

setPanel(&_panel_instance); // 使用するパネルをセットします。

}

};

// 準備したクラスのインスタンスを作成します。

LGFX display;

static LGFX_Sprite sprite(&lcd);

//===================================================================

void setup(void)

{

display.init();

}

//==================================================================

void loop(void)

{

//-----------走査線-----------------------------

sprite.createSprite(255, 240);

sprite.fillRect(0,0,255,240,TFT_BLACK);

sprite.setScrollRect(0, 0, 255, 240, TFT_BLACK);

for(int i=0;i<500;i++){

s++;

if(s==1 ){sprite.drawFastHLine(0, 40, 30, TFT_WHITE);//2

sprite.drawFastHLine(0, 100, 30, TFT_WHITE);//4

sprite.drawFastHLine(0, 160, 30, TFT_WHITE);//6

sprite.drawFastHLine(0, 220, 30, TFT_WHITE);//8

}

if(s==31){sprite.drawFastHLine(0, 10, 30, TFT_WHITE);//1

sprite.drawFastHLine(0, 70, 30, TFT_WHITE);//3

sprite.drawFastHLine(0, 130, 30, TFT_WHITE);//5

sprite.drawFastHLine(0, 190, 30, TFT_WHITE);//7

}

if(s==61){s=0;}

sprite.scroll(2,0);

sprite.pushSprite(-15,0);

// delay(100);

}

//*/

//-----------------------イデ発動-----------------------

lcd.fillScreen(TFT_BLACK);

delay(2000);

//中心緑点滅

for(int i=0;i<=30;i++){

lcd.drawLine(120, 115, 120, 125, TFT_DARKGREEN);

lcd.drawLine(116, 120, 124, 120, TFT_DARKGREEN);

lcd.drawLine(117, 117, 123, 123, TFT_DARKGREEN);

lcd.drawLine(117, 123, 123, 117, TFT_DARKGREEN);

delay(40);

lcd.fillCircle(120,120,120,TFT_BLACK);

delay(40);

}

lcd.fillCircle(120,120,120,TFT_BLACK);

delay(300);

for(int i=0;i<=10;i++){

lcd.fillCircle(120,120,i*12,TFT_DARKGREEN);

//delay(1);

}

delay(50);

lcd.fillCircle(120,120,120,TFT_BLACK);

delay(30);

lcd.fillCircle(120,120,120,TFT_DARKGREEN);

delay(500);

//円の描画

for(int i=1;i<=360;i++){

lcd.fillArc(120,120,120,117,270,270+i,TFT_WHITE);

k++;

if(k<=5){lcd.fillRect(119,119,3,3,TFT_WHITE);}

if(k>5 && k<=10){ lcd.fillRect(119,119,3,3,TFT_DARKGREEN);}

if(k==10){k=0;}

delay(2);

}

//縦線の描画

for(int i=0;i<=218;i++){

lcd.fillRect(119,120-120*i/218,3,240*i/218,TFT_WHITE);

lcd.fillRect(169,11,3,i,TFT_WHITE);

lcd.fillRect(69,11,3,i,TFT_WHITE);

delay(2);

}

//斜めの線描画

delay(100);

lcd.drawLine(69, 11, 169, 229, TFT_WHITE);

lcd.drawLine(70, 11, 170, 229, TFT_WHITE);

lcd.drawLine(71, 11, 171, 229, TFT_WHITE);

lcd.drawLine(69, 229, 119, 120, TFT_WHITE);

lcd.drawLine(70, 229, 120, 120, TFT_WHITE);

lcd.drawLine(71, 229, 121, 120, TFT_WHITE);

lcd.drawLine(69, 228, 169, 228, TFT_WHITE);

lcd.drawLine(70, 229, 169, 229, TFT_WHITE);

lcd.drawLine(71, 230, 169, 230, TFT_WHITE);

//---------------待機----------------------------------

delay(10000);

lcd.fillScreen(TFT_BLACK);

delay(2000);

}

これを全選択して、先ほどのarduinoIDEにコピペします。

③次にUSBケーブルでESP32をパソコンに接続します。

arduinoIDEの左上に有る→マークを押すとコンパイルと書き込みが始まります。
（右下に進行を示すバーが出ますが、少々時間がかかりますｗ）
通常はこれで書き込まれますが、ESP32によっては書き込まれない場合も有りますので、その場合は次の方法を試して見て下さい。

手動書き込み方法

ア、BOOTボタンを押しっぱなしにする。
イ、そのままの状態でENボタンを一度押して離す。
ウ、BOOTボタン押しっぱなしの状態で、arduinoIDEの書き込みボタン（上の→マーク）をクリック。
エ、arduinoIDEの下方に「Connecting…」と表示されたらBOOTボタンから手を放す。

４　配線の接続
念のためESP32に接続されているUSBを外します。

LCD　　　　　　　ESP32
VCC———————–3V3
GND———————-GND
DIN ———————–23
CLK————————18
CS————————-14
DC————————-27
RST————————33
BL————————-32

上記に従って丸いLCDとESP32を接続してください。

配線を確認後、ESP32にUSBをつなぐと

注意して！！！！イデが発動しますｗｗ！

ちなみにゲージ周りは私は３Dプリントしてホットボンドで固定しましたが、

必要なら３Dデーターはこちらからダウンロードしてください。

これで完成で～～す！

備考
プログラムの99行目の先頭に「/」を書き込むと走査線の様な画面も出てきますｗ
イデゲージだけだと間が持たないと思って追加しましたｗ

6 comments

てつの より:

2022年5月23日 11:25 PM

にゃるほど。
これは企業案件儲かりまっせ！
イデオン好きなら喉から手が出るほど
欲しいだろうなあ。
イデオン知らんのよね〜。
キャラぐらいわかりますけども。
イデオン好きとこれ弄れるスキルの持ち主が
バチコンするかが問題ですね〜。
スケッチは超貴重だから参考にしまーす。
6jiro より:

2022年5月23日 11:39 PM

てつのさん　こんばんは！
イデオン好きが思っていたよりも多くてびっくりしたよ～＾＾；
コレやってみたら簡単だからぜひトライして欲しい！
ESP32の書き込みさえ出来ればハンダ付けも必要ないからねｗ
スケッチはlovyanGFXでの基本図形の書き方だけだからあまり参考にはならないかも＾＾；
なおより:

2022年5月24日 6:24 PM

こんばんは
この記事、ESP32の導入の解説にもなっててログとしてかなり価値ありそうです。やってみよかな？いじりだしたらハマりそうだからやめといた方がいいかな？確か道具箱にESP32は落ちてるんだよな～、この液晶はさすがに持ってないけどｗ
6jiro より:

2022年5月24日 10:38 PM

なおさん　こんばんは！！
やるべしｗｗ！！
アリからラウンドのＬＣＤ来たら送るから、やってみそ！
とりあえずやったら絶対模型にＬＣＤ組み込みたくなるからｗｗｗ
なおさんならすぐ理解すると思うから！
Vividさんも待ってるよ～！
Vivid より:

2022年5月25日 8:44 AM

こんにちは
ちょっと間が空いた時には「ソフト開発案件」でしたね！
残念ながらこの「イデオン」は全く知りませんので、どれくらい凄いかわからず、すみません(笑)
丸型LCDは、YouTubeなどで何度か見たことがあります。個人的には飛行機等の操縦席模型にたくさん並べたら凄いのではと狙っていました！
その節はぜひ使わせていただきます！
これ、ライブラリとかあったんでしょうか？
6jiro より:

2022年5月25日 11:17 PM

Vividさん　こんばんは！
今回は他の事で色々と有りまして更新サボってましたｗ
ライブラリーはいつものLovyanGFXの最新バージョンです。
そのため初めの辺の設定部分の書き方が少し違います＾＾
GC9A01には素早く対応してくださっていましたので1日程度でプログラム出来ちゃいましたｗ
これを飛行機の計器のように並べるとなると相当な大きさになりそうですねｗｗ
でもそういうのも見てみたいです！

イデオン　ゲージ　製作方法

関連すると思われる記事：

6 comments

Leave a Reply

2024年11月
日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30