t-hom’s diary

主にVBAネタを扱っているブログ…とも言えなくなってきたこの頃。

M5 Stack Basicで摂取カロリー記録用の3ボタンUI部分が完成

今回はM5 Stack Basicで摂取カロリー記録用の3ボタンUIが完成した。
動作画面はこんな感じ。
f:id:t-hom:20210217230325p:plain

動作イメージは動画でUpしようかと思ったんだけどGIF化してサイズ小さくしても収まらなかったので諦めた。。
ま、そんな大層なプログラムじゃないしな。

図示するとこんな感じ。
f:id:t-hom:20210217231347p:plain

桁移動は循環するようになっている。
単品で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側のネットワーク機能はできてるんだけど、ラズパイ側のサーバープログラムがまだ出来てない。
ということで本日はここまで。

以上。

当ブログは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。