【Arduino】TcMenu - OLED対応 組込みグラフィカル開発ツールの紹介
OLED UI
序：TcMenu
組込みシステムや電子工作において、画面の設計・実装は非常に重要な工程であると同時に、非常に骨の折れるものでありましょう。特に
電子工作といった趣味の範疇であれば、文字だけの表示で簡単に済ますということもよく行われます。かと言って、文字だけの画面では見栄えが良くありません。また、システムとして色々付け加えていくと、画面としての機能性の無さが気になることもあるでしょう。
そんな悩みを解決する手段は既に幾つか存在します。
しかしこれらも万能ではありません。どちらも、ある程度大きさのあるタッチスクリーン(あるいは単なる液晶画面)が主な用途となります。
引用：https://github.com/UsefulElectronics/esp32-ssd1306-lvgl-monochrome
有機1602Aなどの液晶画面(
タッチスクリーンにも対応しているそうですが、そこまで行くと使途次第になるでしょう。やはり見栄えや機能性では
本題
前置きはこの辺にして、
導入手順
複数のものを用意する必要があります。なお、
U8g2
U8g2を使うのが一般的です。
TcMenuDesigner
このソフトウェアは「デザイナー」であり、
Releasesとあるところから、インストーラーが手に入ります。
Assetsの下に並んでいる内、.exe 、.dmg、.debとあるものをダウンロードします。その他の環境では、Source codeをダウンロードしてどうにかするしかないようです。
ここでは、
インストール手順
インストールするには規約に同意します。
インストール先を指定します。私は特に変えていません。
ショートカットを作るかどうか選択します。
確認してインストールします。
初回起動時のみ、このようなものが出てきました。
tcMenu
実演
インストールが済んだら、実際に使ってみます。
使用デバイス
私の手元にあるものはこちらです。
SSD1306(
引用：https://wiki.seeedstudio.com/Seeeduino-XIAO-Expansion-Board/
回路について
しかし他の環境については手前で読みかえろというのも非礼と思い、参考程度に、配線図に起こせばこうなるだろうという図を示しておきます。慎重に作図したものですが、誤りがあるかもしれません。この配線の動作確認は一切しておりません。充分な調査なしにそのまま真似することは絶対におやめください。
動作未検証：この配線図をそのまま使用することは絶対におやめください
DO NOT REPLICATE: UNTESTED DESIGN.
回路について詳細
以下の回路図は全てこちらから引いたものです。
XIAO
引用：https://wiki.seeedstudio.com/Seeeduino-XIAO/
| 「主な」接続先 | |
|---|---|
D1 |
|
SDA |
SDA(SSD1306) |
SCL |
SCK(SSD1306) |
3V3 |
VDD(SSD1306) |
GND |
GND(SSD1306) |
スイッチは常時閉でプルアップ
ここにある通り、使用されているスイッチはTS-1111Aです。
上のページを見ると次のようにあり、
TS-1111A Normally Closed Tactile Switch SMT 63.8mm
Short Description:
Normally Closed NC Tact Switch SMD 63.8mm SPST Surface Mount
そしてこのスイッチは、次のサンプルにもある通り、プルアップで使用します。
const int buttonPin = 1; // the number of the pushbutton pin
void setup() {
// initialize the LED pin as an output:
pinMode(LED_BUILTIN, OUTPUT);
// initialize the pushbutton pin as an input:
pinMode(buttonPin, INPUT_PULLUP);
}
実際の挙動はこのようになります。
| スイッチ | 入力 |
|---|---|
| 押す | HIGH |
| 押さない | LOW |
これが再現できればよいものと思います。
SSD1306との接続
VDDの箇所にVDD_3V3_OLEDとあることからも電源電圧は
先述の通り、SDA及びSCLピンの電圧はVDDも
VDD_3V3_OLEDとあるのは、3V3のことです。
図右上、12が3V3
VDD_3V3_OLEDはSYS_3V3と、SYS_3V3は3V3と繋がっています。
抵抗
D4_SDAとD5_SCL、そのどちらも4.7Kとある抵抗器と繋がっていることが記されています。先の
TcMenuDesigner
デザイナー側では、
新規プロジェクト作成
起動直後はそれらしい画面が出てきますが、無視して新しく始めるのが明快でした。
New Projectを選択
I want to create ...とある方を選択して、フォルダーごと新しく作ります。Project NameにNamespaceはどこに使われているのかよくわかりませんでした。
PlatformをArduino 32bit ARMとしているのは、「
対応プラットフォーム一覧
この画面に到達したら、ほぼ完了です。
Source file Locationsとある箇所をAll files in current folderにしておきます。
.inoファイル名とが一致していなければなりません。ここではどちらもHelloTcMenuになっています。変にsrcフォルダーが作られると、
UI
＋マークのボタンで要素を追加します。
Integer and Decimal...とあるものを選択すると、整数値を表示・カウントする要素を追加します。
文字列の要素を追加するときはText, IP address...とあるものを選択します。
設定一覧
実際の表示がどのようになるのか、プレビューで確認することもできます。
Show Preview Windowを選択する
実際の表示ままとは限らない
プログラム出力
Generate Codeを選択
- 入力デバイス
入力デバイスとはマウスやキーボードなどの、画面を操作するものを指します。ここでは、
The button that will control the menuの下に、ボタンと接続したピン番号を記載します。
ここでは、ボタンがD1に繋がっているため、1と入れています。
Button(D1)とある
引用：https://wiki.seeedstudio.com/Seeeduino-XIAO-Expansion-Board/
- ディスプレイ
U8G2 display quick start, ...とあるものを選択します。
ここでは次のように設定しています。Display Variableは変数名なので、他の変数と同名にならないものを適当に設定します。
| 設定 |
|
|---|---|
Display variable type |
SSD1306 128x64 HW I2C |
Display Rotation |
U8G2_R0 |
Clock Pin |
SCL |
Data Pin |
SDA |
Optional Reset Pin |
U8X8_PIN_NONE |
SCLとSDAは、variant.hにて定義されたものです。デバイスや配線によって適切なピンを記載します。
これらの設定は、出力されたプログラム中に斯うして現れます。
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE, SCL, SDA);
- テーマ
それっぽいものがあったので適当に選びました。
- 遠隔操作
よくわかっていませんが、遠隔操作するつもりは特にないので何も選んでいません。
Arduino IDE
今、
HelloTcMenu_menu.hとHelloTcMenu_menu.cppに、デザイナーで設計した内容が記述されています。例えばヘッダーファイルの方を見ると、各要素を指す変数が確認できます。
︙
// Global Menu Item exports
extern TextMenuItem menuTextNewYear;
extern TextMenuItem menuTextU8G2;
extern TextMenuItem menuTextHello;
extern AnalogMenuItem menuAnalogItem1;
︙
今回は特に追記するようなこともないため、
動作の様子
幅に対して文字数が多かったようで、TextHelloの箇所が潰れています。
それ以外では表示に何の問題もなさそうでした。ボタンによるカーソル移動もできます。
その他の様子
ボタンを長押しするとカーソルが切り替わる
この状態でボタンを押すと数値が増える
Read Onlyと設定した項目ではカーソルが切り替わらない
カーソルが下に行くと画面全体がスクロールされる
所感
極めて主観的ではありますが、幾つか感じた利点、不満点があります。
プレビューについて
これはv2.6当時)と比較した感想ですが、プレビューとそうでないウィンドウを一画面に並べることができます。追加した要素がプレビューでどのように映っているか、確認しながらデザインできます。しかし
入力デバイスと画面との間を定義しなくてよい
これはControl menu with a single buttonを選んだだけで、何の問題もなく画面を操作することができました。非常に簡単で感動しました。
ほぼローコード開発？
本記事では入力欄を幾つか記載しただけで、一切プログラムを書いていません。
実際にはプログラムを出力した後、内部処理(コールバックやタスクなど)を自分で追加していく工程も必要ですので、完全なノーコードとはなりませんが、それでも最小限に済むと言えるのではないでしょうか。
コールバックの使い方がまだ分からない
当然ですが、最初から使い方が分かるわけありませんので、始めの方はチュートリアル動画を見ながら試行錯誤していました。
この動画を見ると、プログラム出力後、タスクとコールバックを.inoに追記しています。タスクの方は、乱数を使用して画面に動きをつけていることが分かるのですが、コールバックは動いている様子がありませんでした。
ドキュメントを読めと言われたらその通りですが、なかなか読解に苦労しそうなページが出てきます。
追記：何となくわかりました。
起動できない不具合
時折、起動に失敗することがありました。
アプリの閉じ方が悪いと、画面だけ消えた後も裏で動き続けてしまうようです。タスクマネージャーで都度終了する必要がありました。そのうち改善されるでしょう。
跋
ほんの端緒に過ぎないものではありますが、
私としても、今度は
Discussion