今回はM5 Stack Basicで摂取カロリー記録用の3ボタンUIが完成した。
動作画面はこんな感じ。
動作イメージは動画でUpしようかと思ったんだけどGIF化してサイズ小さくしても収まらなかったので諦めた。。
ま、そんな大層なプログラムじゃないしな。
図示するとこんな感じ。
桁移動は循環するようになっている。
単品で1000kcalを超えることが少ない為、入力桁の初期値は100の位としている。
他にも中央ボタン長押しで入力中の値をリセットする機能がある。
3ボタンという制約でシンプルに入力しやすさを工夫した結果として、ボタン数が少ないUIの典型的なパターンに収束した感じがする。
コードは以下のとおり。
#include <M5Stack.h> int p; int digit[4]; void setup() { M5.begin(true, false, true); M5.Power.begin(); resetNumber(); } // Add the main program code into the continuous loop() function void loop() { M5.update(); // if you want to use Releasefor("was released for"), use .wasReleasefor(int time) below if (M5.BtnA.wasReleased() || M5.BtnA.pressedFor(1000, 200)) { if(digit[p]++ >= 9){digit[p]=0;} displayNumber(); } else if (M5.BtnB.wasReleased() || M5.BtnB.pressedFor(1000, 200)) { if(++p >= 4){p=0;} displayNumber(); } else if (M5.BtnC.wasReleased() || M5.BtnC.pressedFor(1000, 200)) { M5.Lcd.setTextSize(2); M5.Lcd.println("Connecting..."); delay(1000); int x = 0; x = digit[0]*1000 + digit[1]*100 + digit[2]*10 + digit[3]; M5.Lcd.println("Sending " + String(x) + " kcal."); delay(1000); M5.Lcd.println("Done!"); M5.Speaker.tone(659, 200); delay(200); M5.Speaker.mute(); delay(1000); resetNumber(); } else if (M5.BtnB.wasReleasefor(700)) { resetNumber(); } } void resetNumber() { p = 1; for (int i=0; i<4; i++){ digit[i] = {0}; } displayNumber(); } void displayNumber() { M5.Lcd.clear(BLACK); M5.Lcd.setCursor(0, 0); M5.Lcd.setTextSize(10); for(int i=0; i<4; i++) { if(i==p){M5.Lcd.setTextColor(YELLOW);} else {M5.Lcd.setTextColor(WHITE);} M5.Lcd.print(digit[i]); } M5.Lcd.setTextColor(WHITE); M5.Lcd.setTextSize(5); M5.Lcd.setCursor(180, 18); M5.Lcd.println("kcal"); }
Cの配列を忘れてたり、添え字関連で未定義エリアを参照して画面が数値で埋め尽くされたりと色々とポカミスによる苦労はあったものの、なんとかそれっぽいプログラムになった。
なお、右の送信ボタンであるが、Connecting・Sending・Done!とプリントしてるだけで何もしてない。
このハリボテに後日ネットワーク機能を組み込んでラズパイに値を送付する予定。
実はM5 Stack側のネットワーク機能はできてるんだけど、ラズパイ側のサーバープログラムがまだ出来てない。
ということで本日はここまで。
以上。