M5Stack Core2のUIテスト

M5Stack Core2のUIテスト用にボタンとテキスト表示を行います。開発環境は「PlatformIO」を使用します。

UIテストアプリの作成

UIテストアプリ「ButtonTest」を作成します。

main.cpp

#include <M5Core2.h>

// M5Core2は解像度が320x240
ButtonColors cl_on = {CYAN, WHITE, WHITE};      // タップした時の色 (背景, 文字列, ボーダー)
ButtonColors cl_off = {DARKCYAN, WHITE, WHITE}; // 指を離した時の色 (背景, 文字列, ボーダー)
// ボタン定義名( X軸, Y軸, 横幅, 高さ, 回転, ボタンのラベル, 指を離した時の色指定, タッチした時の色指定）
Button btn_open(15, 130, 140, 30, false, "Open", cl_off, cl_on);
Button btn_close(15, 170, 140, 30, false, "Close", cl_off, cl_on);
Button btn_select(165, 130, 140, 30, false, "Select", cl_off, cl_on);
Button btn_clear(165, 170, 140, 30, false, "Clear", cl_off, cl_on);
Button btn_split(165, 210, 140, 30, false, "Split", cl_off, cl_on);

uint16_t backcolor = M5.Lcd.color565(200, 255, 255);

void event_btn_open(Event &e)
{
  M5.Lcd.setTextFont(4);

  M5.Lcd.fillRect(2, 2 + 27 * 3, 320, 27, backcolor);
  M5.Lcd.setCursor(2 + 160 * 0, 2 + 27 * 3);
  M5.Lcd.printf("Pressed Open");
}

void event_btn_close(Event &e)
{
  M5.Lcd.setTextFont(4);

  M5.Lcd.fillRect(2, 2 + 27 * 3, 320, 27, backcolor);
  M5.Lcd.setCursor(2 + 160 * 0, 2 + 27 * 3);
  M5.Lcd.printf("Pressed Close");
}

void event_btn_select(Event &e)
{
  M5.Lcd.setTextFont(4);

  M5.Lcd.fillRect(2, 2 + 27 * 3, 320, 27, backcolor);
  M5.Lcd.setCursor(2 + 160 * 0, 2 + 27 * 3);
  M5.Lcd.printf("Pressed Select");
}

void event_btn_clear(Event &e)
{
  M5.Lcd.setTextFont(4);

  M5.Lcd.fillRect(2, 2 + 27 * 3, 320, 27, backcolor);
  M5.Lcd.setCursor(2 + 160 * 0, 2 + 27 * 3);
  M5.Lcd.printf("Pressed Clear");
}

void event_btn_split(Event &e)
{
  M5.Lcd.setTextFont(4);

  M5.Lcd.fillRect(2, 2 + 27 * 3, 320, 27, backcolor);
  M5.Lcd.setCursor(2 + 160 * 0, 2 + 27 * 3);
  M5.Lcd.printf("Pressed Split");
}

void setup()
{
  // put your setup code here, to run once:
  M5.begin();
  M5.Lcd.clear(BLACK);
  M5.Lcd.fillRect(0, 0, 320, 115, backcolor);

  // Setup Buttons
  M5.Buttons.setFont(FSSB12);
  btn_open.setFont(FSSB12);
  btn_open.addHandler(event_btn_open, E_RELEASE);
  btn_close.setFont(FSSB12);
  btn_close.addHandler(event_btn_close, E_RELEASE);
  btn_select.setFont(FSSB12);
  btn_select.addHandler(event_btn_select, E_RELEASE);
  btn_clear.setFont(FSSB12);
  btn_clear.addHandler(event_btn_clear, E_RELEASE);
  btn_split.setFont(FSSB12);
  btn_split.addHandler(event_btn_split, E_RELEASE);
  M5.Buttons.draw();

  M5.Lcd.setTextColor(BLACK);
  M5.Lcd.setTextFont(4);
  M5.Lcd.setTextSize(1);

  for (int i = 0; i < 4; i++)
  {
    M5.Lcd.setCursor(2 + 160 * 0, 2 + 27 * i);
    M5.Lcd.printf("0123456789012345678901");
  }
}

void loop()
{
  // put your main code here, to run repeatedly:
  M5.update();
}

UIテストアプリの実行

UIテストアプリ「ButtonTest」を実行します。次のようにテキストとボタンが表示されます。