タッチによる色変え

前回はタッチによる座標を表示しましたが、
今回はタッチしたエリアに色を付けて表現してみました。

m5stack-build.hatenablog.com

サンプルコード

サンプルコード

#include <M5Core2.h>

typedef struct TS_TOUCH_GAME {
  unsigned short usCoord_X;
  unsigned short usCoord_Y;
  unsigned short usWidth;
  unsigned short usHeight;
  unsigned short usColor;
} TS_TOUCH_GAME;

const TS_TOUCH_GAME gtTouchTbl[] = {
  {   0,   0, 160, 120, RED   },
  { 160,   0, 160, 120, WHITE },
  {   0, 120, 160, 120, BLUE  },
  { 160, 120, 160, 120, GREEN }
};
const unsigned short gusTblNum = sizeof(gtTouchTbl) / sizeof(TS_TOUCH_GAME);

void setup() {
  // 初期化
  M5.begin();

  return;
}

void loop() {
  unsigned short ausIdx = 0;
  TouchPoint_t atTouchPoint;

  // タッチ中
  if( M5.Touch.ispressed() )
  {
    // タッチしたX座標、Y座標を取得する
    atTouchPoint = M5.Touch.getPressPoint();
  }

  //
  for( ausIdx = 0; ausIdx < gusTblNum; ausIdx++ )
  {
    // 範囲チェック
    if( ((gtTouchTbl[ausIdx].usCoord_X <= atTouchPoint.x) &&
        ((gtTouchTbl[ausIdx].usCoord_X + gtTouchTbl[ausIdx].usWidth) >= atTouchPoint.x)) &&
        ((gtTouchTbl[ausIdx].usCoord_Y <= atTouchPoint.y) &&
        ((gtTouchTbl[ausIdx].usCoord_Y + gtTouchTbl[ausIdx].usHeight) >= atTouchPoint.y)) )
    {
      //四角形塗りつぶし
      M5.Lcd.fillRect( gtTouchTbl[ausIdx].usCoord_X,
                       gtTouchTbl[ausIdx].usCoord_Y,
                       gtTouchTbl[ausIdx].usWidth,
                       gtTouchTbl[ausIdx].usHeight,
                       gtTouchTbl[ausIdx].usColor );
    }
    else
    {
      ;
    }
  }

  // Bボタン
  if( ((130 <= atTouchPoint.x) &&
      ((200) >= atTouchPoint.x)) &&
      ((240 <= atTouchPoint.y) &&
      ((280) >= atTouchPoint.y)) )
  {
    M5.Lcd.fillRect( 0, 0, 320, 240, BLACK );
  }
  return;
}

www.youtube.com

色で表現すると作った感が出てきますね。
ちなみに下部の〇ボタンも物理キーからタッチキーに変わったので座標判定が必要です。
詳しくはまた。

2021-04-29

タッチの座標

M5stack Core2 サンプルコード

M5stack Core2の一番の魅力は画面をタッチして操作できること。
そのためにはまずタッチした座標を知る必要があります。
では座標を表示してみましょう。

座標位置を取得する関数
サンプルコード

座標位置を取得する関数

戻り値はTouchPoint_t構造体です。
構造体のメンバにはX座標、Y座標が含まれています。

  M5.Touch.getPressPoint();

サンプルコード

#include <M5Core2.h>

void setup() {
  // 初期化
  M5.begin();
  // 文字列サイズ指定
  M5.Lcd.setTextSize(2);

  // X座標表示
  M5.Lcd.setCursor(100,70);
  M5.Lcd.printf("x:%d \r\n", 0);
  // Y座標表示
  M5.Lcd.setCursor(100,90);
  M5.Lcd.printf("y:%d \r\n", 0);
}

void loop() {
  TouchPoint_t atTouchPoint;

  // タッチ中
  if( M5.Touch.ispressed() )
  {
    // タッチしたX座標、Y座標を取得する
    atTouchPoint = M5.Touch.getPressPoint();
    // X座標表示
    M5.Lcd.setCursor(100,70);
    M5.Lcd.printf("x:%d \r\n", atTouchPoint.x);
    // Y座標表示
    M5.Lcd.setCursor(100,90);
    M5.Lcd.printf("y:%d \r\n", atTouchPoint.y);
  }
  
  return;
}

youtu.be

これでタッチによる操作が出来そうです。
手を離すとマイナスになるみたいです。

2021-04-25

何事もはじめは Hello world

サンプルコード M5stack Core2

どのプログラミング言語も大体は「Hello World」で始まってますよね。

今回はm5stack Core2でもHello Worldを表示させてみよう。

「Hello World」の表示

「Hello World」の表示

サンプルコード

#include <M5Core2.h>

void setup() {
  // put your setup code here, to run once:
  M5.begin(true, true, true, true);
  M5.Lcd.setTextSize(3);
  M5.Lcd.print("Hello world");
}

void loop() {
  // put your main code here, to run repeatedly:

}