この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
IoT事業部の平内(SIN)です。
以前、Core2 for AWS IoT EduKit BSPの動作確認の中で、ディスプレイの表示(LVGLライブラリ)を確認してみました。
LVGLライブラリでは、各種のコントロールが用意されており、その中でも、ボタンは、簡単に利用でき非常に美しいと感じてました。
今回は、このようなイメージのボタンを、簡単に使えるようにArduinoでクラスを作成してみました。 最初に、使用している様子です。
2 main()
先の動画のmainコードは、以下のとおり非常にシンプルです。new VButton() でオブジェクトを生成し、コールバック関数で、ボタンの操作を処理できます。
ボタンは、タップとトグルの2つのモードが利用可能です。また、ボタンの色は、デフォルトで赤色ですが、コンストラクタ 自由な色を指定できます。
#include <M5Core2.h>
#include "VButton.h"
VButton *red_button;
VButton *blue_button;
VButton *green_button;
void button_callback(char *title, bool use_toggle, bool is_toggled){
if (use_toggle) {
Serial.printf("%s Toggled. %d\n", title, is_toggled);
} else {
Serial.printf("%s Tapped.\n", title);
}
}
void setup() {
M5.begin(true, true, true, true);
M5.Lcd.setBrightness(200);
M5.Lcd.fillScreen(WHITE);
red_button = new VButton("red_button", button_callback, true, -70);
blue_button = new VButton("blue_button", button_callback, false, 0, BLUE);
green_button = new VButton("green_button", button_callback, false, 70, TFT_DARKGREEN);
}
void loop() {
red_button->loop();
blue_button->loop();
green_button->loop();
}
3 リファレンス
(1) constructor
VButton(char *title,
void (* callback)(char *, bool, bool),
bool use_toggle = false,
int position = 0,
ushort color = RED);
- title 表示される文字列 (必須)
- callback ボタン操作時に呼ばれるコールバック関数(必須)
- use_toggle トグルモードの有効無効 [デフォルト:false] (オプション)
- position 表示位置 [デフォルト:0] (オプション)
- color 表示色 [デフォルト:RED] (オプション)
(2) callback
void (* callback)(char title*, use_toggle bool, is_toggled bool);
コンストラクタで指定するコールバック関数の型です。
- title 表示される文字列(コンストラクタで指定したもの)
- use_toggle トグルモードの有効無効
- is_toggled 現在のトグル状態(use_toggle=trueの時のみ有効な値)
(3) loop
void loop()
タップ操作を取得するため、メインプログラムのloopの中で呼び出す必要があります。
例)
void loop() {
button->loop();
}
4 カラー
この仮想ボタンのライブラリでは、色の指定が簡単できるようになっています。少し時間かけたので説明させてください。
コンストラクタでは、枠の色のみを指定します。そして、その他の色は、枠の色を基準に以下のよう修正された値が使用されます。
- ボタン本体の通常状態の色:枠色より200 明い色
- ボタン本体のトグル状態の色:枠色より100 明い色
この色を生成している要領は以下の通りです。
(1) RGB分解
M5.Lcdの色は、RED:5bit、GREEN::6bit、BLUE:5bitで表現されています。
RGBに分解しているコードです。
void VButton::get_rgb(ushort color, ushort rgb[3]){
rgb[0] = (color & 0xF800) >> 8;
rgb[1] = (color & 0x07E0) >> 3;
rgb[2] = (color & 0x001F) << 3;
}
(2) 明度調整
RGBそれぞれの明度を調整しています。
for(int i=0; i<3; i++) {
rgb[i] += 200;
if (rgb[i] > 0xFF) {
rgb[i] = 0xFF;
}
}
(3) RGB合成
最後にRGBを元の形に結合します。
ushort VButton::create_color(ushort rgb[3]){
return ((rgb[0]>>3)<<11) | ((rgb[1]>>2)<<5) | (rgb[2]>>3);
}
上記を組み合わせて通常のボタンの色を生成しているコードです。
ushort VButton::create_background_color_normal(ushort color){
ushort rgb[3];
this->get_rgb(color, rgb);
for(int i=0; i<3; i++) {
rgb[i] += 200;
if (rgb[i] > 0xFF) {
rgb[i] = 0xFF;
}
}
return this->create_color(rgb);
}
5 最後に
今回は、Arduinoで使用できる、仮想ボタンを作成してみました。
全てのコードは、下記に置きました。
https://github.com/furuya02/M5Stack_Core2_VirtualButton
6 参考リンク
Visual Studio Code + PlatformIO 環境で M5Stack Core2 for AWS でHello Worldしてみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してLEDを光らせてみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してディスプレイに表示してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用して仮想ボタンの動作を確認してみました
[M5Stack Core2 for AWS] LVCLを使用してディスプレイ上のボタンの動作を確認してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用して電源を操作してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してスピーカーを操作してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用して静電容量式タッチパネルを操作してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してジャイロセンサーを操作してみました
[M5Stack Core2 for AWS] PlatformIO を使用して、ArduinoでHello Worldしてみました
[M5Stack Core2 for AWS] ArduinoでLED (Adafruit NeoPixel フルカラーLED) を点灯してみました
[M5Stack Core2 for AWS] Arduinoで仮想ボタンを作成してみました
[M5Stack Core2 for AWS] ArduinoでMQTT接続してみました
[M5Stack Core2 for AWS] Arduinoでオーディオファイルを再生してみました
[M5Stack Core2 for AWS] Arduinoでマイクの利用方法を確認してみました
[M5Stack Core2 for AWS] ArduinoでGroveポートのGPIOを使用しててみました