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

記事公開日:2017年6月27日
最終修正日:2017年6月28日

スポンサーリンク

こんばんは。

今回も前回に引き続き、Blynk を使って、ESP-WROOM-32 ( ESP32 )をリアルタイムコントロールしてみます。
ただ、今回は ESP32 ボードに接続された フルカラー OLED ( 有機EL ) SSD1331 をスマホでリアルタイムコントロールしてみました。
しかも、2台の ESP32 ( ESP-WROOM-32 )ボードを使って、OLED ( 有機EL )ディスプレイを2台のスマホで同時にコントロールしてみます。

この Blynk というアプリは随分以前に出現して、私もかなり遅れて使い始めてみましたが、しかし、これはホントに優れものですね。
今時のクラウド系アプリというものは、こういうことが出来るのは当たり前なのでしょうか・・・?
改めて感動してしまいました。

Blynk というアプリについては前回の記事を参照していただければ分かるのですが、Blynkサーバーを経由するので、地球の裏側からでも操作可能です。
しかも、複数のスマホ、および複数のデバイスを同時にコントロールでき、そして値がそれぞれのデバイスに即反映されるんです。
私はプログラムについてはアマチュアですが、このアプリの完成度にはホントに完敗した感じです。

まずは以下の動画をご覧ください。

いかがでしょうか。
電子工作レベルでここまで簡単にできてしまうんです。
スゴイですよね。
これが地球の裏側からでもコントロールできるんですよ・・・。
OLED の画像も、複数のスマホの画面もリアルタイムで同時に反映されるなんで、ほんとにスゴ過ぎです・・・。

では、これについて説明していきたいと思います。

準備するもの

ESP-WROOM-32 開発ボード

Amazon.co.jp の HiLetgo という中国の販売店に、 ESP32-DevKitC よりもコンパクトなボードがありましたので買ってみました。
かなり安かったのですが、商品到着までに10日くらいかかりました。

こういうものです。

ESP32_Blynk2_01

表面にピン番号は印刷されていませんが、裏面にはありました。

ESP32_Blynk2_02

ESP32 – DevKitC と大きさを比べるとこんな感じです。

ESP32_Blynk2_03

だいぶブレッドボード上のスペースを節約できそうですよ。
下図をご覧ください。

ESP32_Blynk2_04

サンハヤトの SAD-101 でここまで空きピンがあれば十分使えます。
しかも、アンテナ部分も空いているので、ブレッドボード1枚でいろいろセットできそうです。

動作も今のところ問題なく動いていますので、意外と使えるボードかと思います。
ただ、電源LDO部分が貧弱で、USBシリアルのパーツ選択がイマイチなのは仕方ないところです。
しばらく使っていると ESP32 が故障してしまう可能性もあるので、LDO を ADP3338 などに変えても良いかもしれません。
安いということはそういう代償も覚悟して使うということですね。

また、ESP32 – DevKitC については、私は秋月電子通商さんで購入しましたが、Amazon.co.jp ではこちらにあります。
ちょっと割高ですね。

OLED SSD1331 モジュール

最近、私が主に使っている 小型フルカラー有機EL ( OLED )で、ドライバIC が SSD1331 のモジュールのものです。

秋月電子通商さんの Pmod 96×64 有機ELディスプレイでも問題なく使えました。
価格は高めですが、出所がしっかりしていて、信頼性がありますね。

ESP32_Blynk2_08

Pmod OLEDrgb Pmod96×64有機ELディスプレイ

また、Amazon さんでは、以下で販売しています。
以下は中国の販売店なので、10日~2週間くらいで到着するようです。
品質の面は、今のところの情報では問題が無いようです。
とにかく安いというところが魅力ですね。

その他、eBay などでもとても安く手に入るようです。
いつも参考にさせていただいている、macsbug さんのブログでも詳しく紹介されていますので、是非ご参照ください。

https://macsbug.wordpress.com/2017/06/14/0-95%E2%80%B3-96×64-spi-color-oled-in-esp32/

サンハヤト SAD-101 ニューブレッドボード

上記の写真にもあるように、ESP-WROOM-32 ( ESP32 )開発ボードを載せるには、このブレッドボードが超おすすめです。
ピン列が通常より多く、抜き差しも他のボードより格段にやりやすいです。

出来るだけ高速CPU の最新スマホ

グラフィックや Wi-Fi 通信処理が出来るだけ速い最新のスマホをお勧めします。
処理が遅いとスムースなリアルタイム動作がうまくできません。

ジャンパーワイヤー

インターネットにつながった Wi-Fi ルーター環境

事前にインターネットにつながった Wi-Fi ルーター(アクセスポイント)環境は構築しておいてください。
ローカルエリアネットワークだけの WiFi ではダメです。
インターネットにつながっていないと、Blynk が動作しません。
それに、ESP32 – DevKitC がセキュリティーで弾かれないように、ファイアウォールやMACアドレスフィルタリングなどの設定は事前に済ませておいてください。

パソコン、USBケーブル等

ESP32 – DevKitC の接続

以前の記事と同じです。
HiLetgo の ESP32 ボードも全く同じ同じ接続です。

ESP32_Blynk2_05

Pmod OLEDrgb の場合は下図の様にVCCEN ピンや、PMODEN ピンをプルアップまたは3.3V に接続すればOKです。

ESP32_Blynk2_06

写真ではこんな感じになります。

ESP32_Blynk2_07

これは QI コネクタ(別名2550コネクタ )を圧着して自作しました。
これの圧着方法は以下の記事を参照してください。

Arduino工作の圧着コネクタ(QI)について

Blynk のインストールおよび設定

Blynk スマホアプリのインストール、および Arduino IDE ライブラリのインストール方法は以下の記事を参照してください。

Blynk アプリで 遠方から スマホ とESP32 の双方向リアルタイム同時通信

ESP32_SSD1331 ライブラリのインストール

以前の記事で作った、私の自作 Arduino IDE ライブラリをインストールします。

ライブラリは GitHub の以下のページにあります。

https://github.com/mgo-tec/ESP32_SSD1331

インストール方法や使い方は以下のページを参照してください。

有機EL ( OLED ) SSD1331 ライブラリを作成しました ( ESP32 用 )

Arduino IDE スケッチの入力

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

#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色カラーで指定します。
赤は0~31
緑は0~63
青は0~31
で混ぜ合わせます。

●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

ESP32_Blynk2_10

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

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

ESP32_Blynk2_11

カラーパレットの設定

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

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

ESP32_Blynk2_12

赤、緑、青色ボタン設定

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

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

ESP32_Blynk2_13

ESP32_Blynk2_14

ESP32_Blynk2_15

Joystick の設定

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

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

ESP32_Blynk2_16

コンパイル、書き込み、実行

では、Arduino IDE でコンパイル書き込み実行させてみてください。
コンパイル終了したら、即シリアルモニターを 115200 bps で起動してください。
こうなっていれば、Blynk サーバーと通信可能になります。

ESP32_Blynk2_20

そして、スマホ Blynk アプリの下図の様なところをタッチすれば通信開始できます。

ESP32_Blynk2_21

そうしたら、いろいろ操作してみてください。
最初で紹介した動画のように動作すればOKです。

複数デバイスでも同時に反映されます。
2台のスマホにも同時に値が反映されます。
ESP32_Blynk2_23

因みに、参考程度ですが、シリアルモニターにはこのように値が表示されます。

ESP32_Blynk2_22

WiFi で接続されていれば十分クイックに動きますが、流石に3G , 4G 回線では反応が遅いですね。

まぁ、3G , 4G 回線を使うような環境で、それだけクイックなリアルタイム性が要求されることは、あまり無いと思いますので、私的にはこれで十分です。

まとめ

以上、うまく動きましたでしょうか?

改めて、この Blynk というアプリは優れものですね。
とにかく、複数のデバイスと複数のスマホに同時に値が反映されるというところがスゴイです。

そして何より設定が簡単というところですね。
初心者でも、ちょっと学べばスマホ無線コントロール電子工作が実現できそうなレベルです。

しかし、こういうアプリはたいてい外国製というところが残念ですね。
なぜか日本初というものは殆ど見当たりません。
自分で作ることができればいいんですけど、そんな実力ありませんし・・・。

ということで、今回はここまでです。
ではまた・・・。

mgo-tec電子工作 関連コンテンツ ( 広告含む )

スポンサーリンク

Amazon.co.jp 当ブログのおすすめ







投稿者:

mgo-tec

Arduino, ESP8266, ESP-WROOM-02 等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしてます。 でも、少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持ってます。

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)