Blynk と ESP32 で カラー OLED SSD1331を２つ同時 リアルタイムコントロールしてみる

Arduino IDE スケッチの入力

では、以下のスケッチを入力してください。
ESP32 ( ESP-WROOM-32 )開発ボードや OLED SSD1331 が２台以上ある場合は、それぞれに同じスケッチを入力すればＯＫです。
そうすれば、同じ動作をします。

【ソースコード】 (※無保証　※PCの場合、ダブルクリックすればコード全体を選択できます)

#define BLYNK_PRINT Serial

#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
#include "ESP32_SSD1331.h"

char auth[] = "xxxxxxxxxxxx";
char ssid[] = "xxxxxxxx"; //ご自分のWiFiルーターのSSID
char pass[] = "xxxxxxxx"; //ご自分のWiFiルーターのパスワード

const uint8_t SCLK_OLED = 14; //SCLK
const uint8_t MOSI_OLED = 13; //MOSI (Master Output Slave Input)
const uint8_t MISO_OLED = 12; //これは実際は使っていない。MISO (Master Input Slave Output)
const uint8_t CS_OLED = 15; //OLED Chip Select
const uint8_t DC_OLED = 16; //OLED DC(Data/Command)
const uint8_t RST_OLED = 4; //OLED Reset

ESP32_SSD1331 ssd1331(SCLK_OLED, MISO_OLED, MOSI_OLED, CS_OLED, DC_OLED, RST_OLED);

int x = 48, y = 32; //四角形の中心位置初期化
int r = 10; //四角形の幅と高さの1/2サイズ初期化

int red = 31, green = 63, blue = 31; //色の初期化。赤(0-31),緑(0-63),青(0-31)

void setup()
{
  Serial.begin(115200);

  Blynk.begin(auth, ssid, pass);

  ssd1331.SSD1331_Init(); //OLED SSD1331 初期化
  ssd1331.Display_Clear(0, 0, 95, 63);
  ssd1331.Drawing_Rectangle_Fill(x-r, y-r, x+r, y+r, red, green, blue, red, green, blue);
}

void loop()
{
  Blynk.run();
}

BLYNK_WRITE(V0){
  //ディスプレイの明るさ調節
  int brightness = param[0].asInt();
  ssd1331.Brightness( brightness );
  Serial.printf("brightness = %d\r\n", brightness);
}

BLYNK_WRITE(V1){
  //RGB色の調節
  red = param[0].asInt();
  green = param[1].asInt();
  blue = param[2].asInt();
  ssd1331.Drawing_Rectangle_Fill(x-r, y-r, x+r, y+r, red, green, blue, red, green, blue);
  Serial.printf("RGB = %d, %d, %d\r\n", red, green, blue);
}

BLYNK_WRITE(V2){
  //ボタンで赤色に変更
  red = param[0].asInt();
  green = 0;
  blue = 0;
  ssd1331.Drawing_Rectangle_Fill(x-r, y-r, x+r, y+r, red, green, blue, red, green, blue);
  Serial.printf("RGB = %d, %d, %d\r\n", red, green, blue);
}

BLYNK_WRITE(V3){
  //ボタンで緑色に変更
  red = 0;
  green = param[0].asInt();
  blue = 0;
  ssd1331.Drawing_Rectangle_Fill(x-r, y-r, x+r, y+r, red, green, blue, red, green, blue);
  Serial.printf("RGB = %d, %d, %d\r\n", red, green, blue);
}

BLYNK_WRITE(V4){
  //ボタンで青色に変更
  red = 0;
  green = 0;
  blue = param[0].asInt();
  ssd1331.Drawing_Rectangle_Fill(x-r, y-r, x+r, y+r, red, green, blue, red, green, blue);
  Serial.printf("RGB = %d, %d, %d\r\n", red, green, blue);
}

BLYNK_WRITE(V5){
  //ジョイスティックで四角形を移動
  int x1 = param[0].asInt();
  int y1 = param[1].asInt();
  ssd1331.Display_Clear(x-r, y-r, x+r, y+r);
  x = x1;
  y = y1;
  ssd1331.Drawing_Rectangle_Fill(x-r, y-r, x+r, y+r, red, green, blue, red, green, blue);
  Serial.printf("x, y = %d, %d\r\n", x, y);
}

【解説】

●1-5行目：
Blynk のサンプルスケッチのままのインクルードです。

●6行目：
私の自作ライブラリ ESP32_SSD1331.h のインクルードです。

●8行目：
authコードは、Blynk のプロジェクトを作成した時に送られてきたメールにあります。

●9-10行：
ご自分の Wi-Fi ルーターの SSID とパスワードに書き換えてください。

●12-17行：
OLED SSD1331 と接続する ESP-WROOM-32 ( ESP32 )開発ボードのピンアサインです。

●19行：
自作ライブラリのクラス宣言です。

●21行：
起動時にOLED に描く四角形の中心位置を指定します。

●22行：
四角形の幅と高さの1/2サイズを指定します。

●24行：
四角形の色を65000色カラーで指定します。
赤は０～３１
緑は０～６３
青は０～３１
で混ぜ合わせます。

●30行：
Blynk の初期化です。

●32行：
自作ライブラリ、ESP32_SSD1331 の初期化です。

●33行：
ディスプレイをクリアします。

●34行：
起動時に正方形を描きます。

●37-40行：
メインループです。
Blynk.run()関数だけあるという、とてもシンプルなものです。

●42-47行：
ディスプレイ全体の明るさを 0-255 の値で変更する関数です。
V0 という値は、スマホ Blynkアプリ側のスライダーの Virtual PIN の V0 と一致していなければなりません。

●49-56行：
スマホ Blynk アプリ上の RGB ウィジェット操作で、OLED ディスプレイ上の四角形の色を変更する関数です。

●58-83行：
スマホ Blynk アプリ上のボタン操作で、色を一発変更する関数です。

●85-94行：
スマホ Blynk アプリ上のジョイスティックで、OLEDディスプレイ上の四角形を移動する関数です。
前に描いた四角形を一旦クリアしてから、次の四角形の中心位置を代入するところがミソです。

Blynk スマホアプリ側設定

次に、Blynk スマホアプリ側の設定をしていきます。

新規プロジェクトを作成し、とりあえず test という名前をつけて、以下のウィジェット（アイテム）を追加します。
Blynk では、無料で使えるアイテム点数が 2000 Energy までです。
以下のアイテムを使うと、合計 1600 Energy を消費します。
残り 400 Energy まで無料でウェジェット（アイテム）を追加できます。

●Vertical Slider ( 200 Energy )
●zeRGBa ( 400 Energy )
●Button RED ( 200 Energy )
●Button Green ( 200 Energy )
●Button Blue  ( 200 Energy )
●Joystick  ( 400 Energy )

合計 1600 Energy

明るさ ( Brightness ) スライダー設定

Vertical スライダーは以下のように設定します。
Virtual PIN は V0
値は０～２５５として、Send On Release は OFF にします。

カラーパレットの設定

不思議な馬の絵のウィジェットを使います。
zeRGBa というものです。
これを使うと、スライドさせながら RGB色をリアルタイムに変化させて色を作ることができる便利なものです。
カラーパレットみたいなものです。

Virtual は V1 とし、値は下図の様に「MERGE」にして、
赤は０～３１
緑は０～６３
青は０～３１
とし、SSD1331 仕様の65000色カラー設定にします。
そして、Send On Release は OFF にします。

赤、緑、青色ボタン設定

ボタンスイッチの設定をします。
Virtual は
赤はV2
緑は V3
青は V4
にします。

値はそれぞれ下図のようにします。
MODE は SWITCH にします。
PUSH にするとモーメンタリーボタンになります。

Joystick の設定

ジョイスティックの設定をします。
Virtual は V5 とし、値は MERGE にします。

四角形の中心からの幅が 10 pixel なので、端に移動したときに画面からはみ出さないように下図の様に設定します。
AUTORETURN などの設定は自由に変えてみて試してみて下さい。