触覚フィードバック付き仮想ボタンを作ってみた

はじめに

M5Stack Core2が発売されました。
www.switch-science.com

これまでのM5Stackシリーズと比較しても様々な点でパワーアップしていますが、個人的に注目したのがタッチスクリーンと内蔵振動モーターです。

本記事では、タッチスクリーンと内蔵振動モーターを活用した、触覚フィードバック付きの仮想ボタンを作成したので紹介します。

触覚フィードバックとは

最近ではスマートフォンでも活用されており、iOSにおいてはロック画面からカメラやライトを起動する際、また設定のオンオフを押した際のフィードバックに利用されています。触覚フィードバックを実現することで、視覚的な情報のみならず触覚によっても変更したことを伝えることができ、なおかつボタンに活用することで実際にボタンを押した際の感覚に近づけています。

M5Stack Core2は触覚フィードバックを実現することに適しているなという考えもあり、今回作成しました。

完成品

画面をタッチすると、画面に下記の変化が起こります。

  • ボタン描画の変更
  • 振動を与える

これらによって、実際のボタンを押したときの感覚に近づけています。
なお、今回はボタン部分のみのソースコードを下記に示します。

開発環境

準備物

  • M5Stack Core2

www.switch-science.com

実現方法

  • 全体の流れ

1. タッチイベントを取得
2. 画面をタッチしている間は、振動と描画を変更する
3. 画面から離すと振動が止まり、描画も元に戻る

スケッチ例

#include <M5Core2.h>
#include <Fonts/EVA_20px.h>
#include <stdio.h>
bool button_state = false;

uint16_t getColor(uint8_t red, uint8_t green, uint8_t blue){
  return ((red>>3)<<11) | ((green>>2)<<5) | (blue>>3);
}

void not_push_button(){
  M5.Lcd.fillScreen(BLACK);  
  M5.Lcd.fillEllipse(160, 120, 110, 110, getColor(190, 193, 195));
  M5.Lcd.fillEllipse(160, 120, 90, 90, RED);
  M5.Lcd.setTextSize(14);
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setCursor(80, 95);
  M5.Lcd.printf("PUSH");
}

void push_button(){
  M5.Lcd.fillScreen(BLACK);  
  M5.Lcd.fillEllipse(160, 120, 110, 110, getColor(190, 193, 195));
  M5.Lcd.fillEllipse(160, 120, 90, 90, getColor(125, 0, 0));
  M5.Lcd.setTextSize(14);
  M5.Lcd.setTextColor(getColor(255, 255, 150));
  M5.Lcd.setCursor(80, 95);
  M5.Lcd.printf("PUSH");
}

void setup() {
  M5.begin();
  not_push_button();
}

void loop() {
  TouchPoint_t pos= M5.Touch.getPressPoint();
  if(pos.x != -1) {
    if(!button_state){
      M5.Axp.SetLDOEnable(3,1);
      button_state = true;
      push_button();
    }
  }else{
    if(button_state){
      M5.Axp.SetLDOEnable(3,0); 
      button_state = false;
      not_push_button();
    }
  }
  delay(10);
}

おわりに

今回はM5Stack Core2を利用した触覚フィードバック付き仮想ボタンを作ってみました。
ただ、このままではちょっとリッチなボタンなので、何かと連携することでその価値が生まれるかと思います。
M5Stack Core2はWi-fiやBluetooth接続が可能ですので、完成品のようなM5StackとのBluetooth接続を始めとした、ESP32との接続、またはM5Stack Core2自体にセンサーを接続して、センサー値を送信する際のボタンにするのも良いでしょう。

発売されてまだ間もないM5Stack Core2ですが、この製品を活用したプロダクトが生まれるのが楽しみですね。

参考

  • 任意の色を指定する際に利用しました。

qiita.com