BlynkとM5Stackをつなぐ

概要

BlynkでUIを作成し、ボタン入力をM5StackがBLE通信で受け取れるようにします。
BlynkはiOSやAndroidのアプリで、簡単にUIを作成しマイコン等のデバイスと簡単に通信してごにょごにょできるありがたいやつです！

開発環境

• OS: MacOS Mojave
• エディタ:Visual Studio Code
• IDE: PlatformIO (VSCodeの拡張機能)
• マイコン: M5Stack GRAY

Blynk側設定

いろんな記事があるので詳細は割愛しますが、以下のような手順で設定していきます。

###　手順

1. New Projectをタップ
2. Project Nameを入力
3. CHOOSE DEVICEはESP32 Dev Boardを選択
4. CONNECTION TYPEはBLEを選択
5. CREAATE PROJECTをタップ
6. BLEウィジェット、ボタンウィジェットを置く
7. ボタンウィジェットのPINをVirtualにし、V0等のピン番号を選択する

authkeyをメールで受け取るか設定画面で確認しておきます。

BlunkのUI

(ラジコン作る過程だったのでそういう感じになっています)
右上にRUNボタンがありますが、BluetoothはRUNしていない状態で接続しておく必要があります。

M5Stack側プログラミング

こちらと同じくVSCode+PlatformIOを使用している方は、HOMEからBlynkライブラリを導入しておいてください。

Blinkのボタンを押したときにバーチャルピンに値を書き込むように設定しており、それを受信するコードはBLYNK_WRITEだったということにたどり着くのに時間がかかりました...
BLYNK_READだとparamが宣言されていないと怒られます。

blynk_test.cpp

#include <Arduino.h>
#include <M5Stack.h>
#include <BlynkSimpleEsp32_BLE.h>

char blynkAuth[] = "auth keyを入力";

// 変数
int v1 = 0;
int v2 = 0;
int v3 = 0;

// blynk functions
BLYNK_WRITE(V1){
  v1 = param.asInt();
}

BLYNK_WRITE(V2){
  v2 = param.asInt();
}

BLYNK_WRITE(V3){
  v3 = param.asInt();
}

void setup(){
  // LCD設定
  M5.begin();
  M5.Lcd.setBrightness(100);
  M5.Lcd.setTextSize(2);
  M5.Lcd.setTextColor(WHITE, BLACK);

  Blynk.setDeviceName("M5Stack");
  Blynk.begin(blynkAuth);
}

void loop(){
  M5.Lcd.setCursor(0, 20);
  M5.Lcd.printf("V1:%d  V2:%d  V3:%d", v1, v2, v3);
  Blynk.run();
  delay(100);
}

動作確認

M5Stackへソースコードを書き込みます。
Blynkアプリから作成したUIを開き、BLEウィジェットをタップしてM5Stakとコネクトします。
RUNボタンでBlynkを動かし、ボタンを押したりすることでM5StackのLCDの値が変化することを確認できたら成功です！