M5Core2のタッチパネルでお絵かきしてみた

Katsu Shun

M5Stackの進化版Core2が発売されました！

タッチパネル、視野角広いIPS液晶、マイク、振動モーターなど各所進化しています。

開封して起動するとこのEVA風のUIで各機能が確認出来ます。かっこいい！！


今回は新機能のタッチパネルの使い方を理解するのに、シンプルなお絵かきアプリ作ってみました。

M5Core2 Example : touch

参考として、M5Core2のlibraryのExampleにtouchを確認できるものがあります。

これを動かしてみると押している間x,y座標が取れていることがわかります。

M5Core2/src/touch.hをみると

typedef struct point
{
   int x;
   int y;
}TouchPoint_t;
   
TouchPoint_t getPressPoint();

が使えそうです。

あとは

   bool ispressed();

でタッチ中が判定できそうです。


お絵かきアプリ

タッチした箇所に円を描くことでお絵かきできるようにします。

また、M5Core2は物理ボタンがなくなり、タッチ座標で判定するかたちになっています。機能としては

左ボタン(BtnA相当) : 色変更

中央ボタン（BtnB相当）：円のサイズ変更

右ボタン（BtnC相当）：画面クリア

としました。

loop()で内で処理するボタン判定と円の描画のコードです。

void loop() {
 TouchPoint_t pos= M5.Touch.getPressPoint();

 static bool isPressed = false;

 if(!M5.Touch.ispressed()) isPressed = false;

 if(pos.y > 1 && pos.x > 1){
   M5.Lcd.fillCircle(pos.x, pos.y, radiusMap[radius], colorMap[color]);
 }

 if(!isPressed){
   if(pos.y > 240){
     if(pos.x < 120){//btnA
       isPressed = true;
       toggleColor();
     }
     else if(pos.x > 240){ //btnC
       isPressed = true;
       resetScreen();
     }
     else if(pos.x >= 180 && pos.x <= 210){ //btnB
       isPressed = true;
       toggleRadius();
     }
   }
 }
 delay(10);
}

少し工夫したのは、bool isPressedを用いて、画面から離した状態を一度経由しないとボタン押しと判定しないようにしました。これがないとボタン判定範囲を押しっぱなしでもボタンが押し続けたような動きになってしまいました。（もう少しきれいな解決方法がありそうですが。）

toggleColor(), resetScreen(), toggleRadius()で色変更、画面クリア、円サイズ変更しています。また画面左上に描画する円の色とサイズのサンプルをshowCircleIcon()で描画しています。

enum {
 small = 0,
 midium,
 large,
 radius_threshold,
};

enum {
 black = 0,
 white,
 red,
 green,
 blue,
 yellow,
 purple,
 pink,
 color_threshold,
};

std::map<int, uint32_t> colorMap{
   {black, BLACK},
   {white, WHITE},
   {red, RED},
   {green, GREEN},
   {blue, BLUE},
   {yellow, YELLOW},
   {purple, PURPLE},
   {pink, PINK},
};

std::map<int, uint32_t> radiusMap{
   {small, 10},
   {midium, 15},
   {large, 25},
};

uint32_t color = black;
uint32_t radius = midium;

void toggleColor()
{
 color++;
 if(color >= color_threshold) color = 0;
 showCircleIcon();
}

void toggleRadius()
{
 radius++;
 if(radius >= radius_threshold) radius = 0;
 showCircleIcon();
}

void showCircleIcon()
{
 const int L = radiusMap[large];
 const int x = L + 2;
 const int y = L + 2;
 M5.Lcd.fillCircle(x, y, L + 2, WHITE); //reset
 if(color == white) M5.Lcd.drawCircle(x, y, radiusMap[radius], BLACK);
 else M5.Lcd.fillCircle(x, y, radiusMap[radius], colorMap[color]);
}

void touchsetup()
{
 showCircleIcon();
}

void setup() {
 M5.begin(true, true, true, true);
 Serial.begin(115200);
 M5.Lcd.fillScreen(WHITE);
 touchsetup();
}

void resetScreen()
{
 M5.Lcd.fillScreen(WHITE);
 showCircleIcon();
}

実際のコードはこちらに置いてあります。

実際に動かしている様子です。ちょっと指だと細かい絵を描くのは難しいですね。


タッチパネルの基本的な機能を理解するのに、シンプルなコードでもお絵かきアプリが作ってみました。液晶もきれいですし、もっといろいろアプリを作って遊べそうですね！！

この記事が気に入ったらサポートをしてみませんか？