Firebase Realtime database を使った ESP32, M5Stack, スマートフォン相互通信してみる

記事公開日:2018年9月21日
最終修正日:2018年9月27日

こんばんは 。

今回は Firebase Realtime database を使った、スマホと WiFi マイコン間相互通信の3回目です。
こちらの記事の Firebase Realtime database と ESP32 との基礎的通信と、前回の記事のスマホ Android , iOS や Windows PC のブラウザ間通信を全部ひっくるめて、計5台のデバイス間相互通信する実験です。

本家 Espressif Systems 社の ESP32-DevKitC と、2台の M5Stack、および Android スマホや iOS iPad のブラウザを使います。
これができれば、単なる WiFi デバイスではなく、真の IoT 機器を自由に自作することができそうです。

スポンサーリンク

M5Stack や ESP32-DevKitC の LCD には、文字列を電光掲示板スクロールさせています。
そしてスマホや iPad からは、テキスト入力の他に、スクロール速度切り替えボタンで操作したり、Color Picker ボタンで微妙な中間色を作ったりできます。

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

いかがでしょうか。
デバイスをもっと増やしたら、もっといろいろ面白いことができそうですよね。
Firebase の 無料の Spark プランでも、同時に100台まで接続可能なので、いろいろ応用すれば、スゴイことができそうです。

もはや、こうなってくると、Firebase を意識しない、それぞれのデバイス間 WiFi 通信みたいな感じです。
でも実際はアメリカのサーバーとインターネット通信をしているのです。
レスポンスは素晴らしいものがありますね。

これと同じようなことが Blynk というスマホアプリを使えば可能ですが、Blynk と Google Home と連携したこちらの記事では、日本語漢字の通信はできませんでした。
でも、Firebase Realtime database を使えば、日本語漢字は問題無くできます。

今回は記事に載せおりませんが、Google Home と連携すると、とっても面白いです。
Firebase を使えば Google Home に限らず、Amazon Echo とも連携できそうですね。
それについては、次回以降記事にしたいと思います。

さて、今回はこちらの記事のコードをブラッシュアップして、Firebase Realtime database アクセス用のライブラリを自作してみました。
これによって Arduino IDE 上ソースコードを比較的簡単にすることができました。
ではこれから実際に説明してみたいと思います。

ただ、SDカードスロット付きLCD ILI9341 モジュールを買う場合は、注意点があります。
後で詳しく述べていますが、表示されるピクセル幅が少ないものがあります。

ちなみに何度も申し上げておりますが、私は独学の素人アマチュアです。
動作保証はしません。
でも、何か不具合や誤り等がありましたら、コメント投稿などでお知らせいただけると助かります。

※私の自作ライブラリでコンパイルエラー
display_bme280_i2c.h: fatal error: bme280.h: No such file or directory
が出る場合、インストールした私の自作ライブラリのSensorフォルダの中のファイルを削除してください。
Windows 10 の場合、以下のパスになります。

C:\Users\__user_name__\Documents\Arduino\libraries\ESP32_mgo_tec-master\src\ESP32_mgo_tec_bV1\Sensor

BME280ライブラリを使っている場合は、Sensorフォルダ内の以下の2つのファイルのみの削除でOKです。
display_bme680_i2c.h
display_bme680_i2c.cpp
また、BME680ライブラリを使っている場合は、以下の2つのファイル削除だけでOKです。
display_bme280_i2c.h
display_bme280_i2c.cpp
両方使わない場合は Sensor フォルダごと削除してからコンパイルしてください。
(2018/09/24)

 

このブログの維持運営にご支援いただけると助かります。
支援方法はこちらの記事をご覧ください。
(管理人:mgo-tec)

 

    【目次】

  1. 使ったもの
  2. Firebase Realtime database のデータベースシークレットを発行しておく
  3. Firebase Realtime database の作成およびユーザーの作成
  4. Arduino core for the ESP32 のインストール
  5. M5Stack に日本語漢字東雲フォントが表示できるように、micro SDHC カードにフォントデータをコピーしておく
  6. 自作ライブラリのインストール
  7. M5Stack にスケッチを書き込む
  8. スマホ側 ( Android , iOS )の HTML プログラム作成
  9. M5Stack コンパイル書き込み実行
  10. スマホ側の操作
  11. ESP32-DevKitC ( ESP32-WROOM-32 開発ボード ) を使う場合
  12. 明らかにおかしい? LCD ILI9341 モジュールの画素確認
  13. ESP32-DevKitC ( ESP32-WROOM-32 開発ボード )用スケッチの入力
  14. ESP32-DevKitC ( ESP32-WROOM-32 開発ボード )のコンパイル書き込み実行

使ったもの

M5Stack

これについては以下の記事でレビューしていますので参照してみてください。
M5Stack ( ESP32 搭載 ) を分解したり電源を入れてみて、いろいろ思ったこと

ESP32-WROOM-32 開発ボード

ESP32-DevKitC ( Espressif Systems社製)

ESP32 を製造している、本家 Espressif Systems 社製開発ボードです。

ESPr Developer 32 ( スイッチサイエンス製)

スイッチサイエンスさんこのボードでも、もちろん使用できます。

これはUSB電源入力のソフトスタート機能があり、個人的にお勧めです。
これの使い方は以下の記事を参照してください。

ESPr Developer 32 ( スイッチサイエンス製 ) を使ってみました

micro SDHC カード

先に紹介した動画の様に、3つのデバイスを使う場合、micro SDHC カードは3つ必要です。

ILI9341 モジュール付属の SDカードスロットのサイズにより、標準サイズに変換するアダプターが必要です。
私が購入した時は、アダプターが付属しておりました。
ただ、今後アダプターが付属されなくなる場合もありますので、よく確認してから購入してください。

TFT LCD ILI9341 モジュール(SDカードスロット付きのもの)

随分昔に買った以下のものを使いました。

ただ、注意してください。
後で詳しく述べていますが、表示される pixel 幅が数列分だけ表示されない現象が起きています。
随分昔に買ったので、あまり深くは追求していませんが、それを十分理解した上で購入してください

私は M5Stack で十分使えているので、あまり気にしないで使っています。
同じ構成であれば、他のモジュールに替えても動作するとは思います。

Amazon ではいろんな種類のものが販売されています。
どれがちゃんと使えるのか、調査不足で良く分かりません。
いろいろ試してみてください。

固定抵抗

プルアップ抵抗用

1/4W 100kΩ(スイッチの個数分)
1/4W 10kΩ ×4(SDカードスロットの各ピンにプルアップ抵抗が無い場合)

定電流ダイオード

LCD ILI9341 ディスプレイの LED バックライトに電流を流す時に、電流が流れ過ぎて、ESP32 ボードを壊さないようにするためのものです。
最大 10mA のもので良いと思います。

タクトスイッチ

このタクトスイッチはブレッドボード上で安定度が高いです。
個人的に超おすすめです。

ブレッドボード

ESP32-DevKitC を載せても、一方の片側が2列空くので、個人的にお勧めのブレッドボードです。

サイズの具合は以下の記事を参照すると分かりやすいかもしれません。

https://www.mgo-tec.com/blog-entry-espr-developer-32-01.html/2

ジャンパワイヤー

Android スマートフォンおよび Google Chrome

今回は、Android 8.0 の2年前に購入した Sony Xperia SO-04H を使用しました。
できるだけ最新の高速 CPU スマートフォンを使用することをお勧めします。
ブラウザは Google Chrome を使います。

iOS iPad または iPhone、および Dropbox

今回は iOS 11.4.1 を使用しました。
ブラウザは Dropbox 上のものを使います。
こちらも最新式のものを使用することをお勧めします。

その他、USBケーブルおよびパソコン等々

スポンサーリンク

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

投稿者:

mgo-tec

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

「Firebase Realtime database を使った ESP32, M5Stack, スマートフォン相互通信してみる」への13件のフィードバック

  1. mgo-tec 様

    待望の新作発表、早速試させていただきました。
    コンパイル書き込みをすると、
    未使用 : C:\Users*********\ESP32_mgo_tec-master\src/ESP32_mgo_tec_bV1/Sensor/display_bme680_i2c.h:44:64:fatal error: bme280.h: No such file or directry
    となります。
    このプログラムでは ESP32_mgo_tec_bV1/Sensor は不要と思い削除し、再コンパイル書き込みをすると、書き込みは可能となりますが、「 WiFi conenecting…」「 SSE Connecting 」の表示のままです。
    A ボタンを押すと、「 Patch Connecting 」「 SSE Connecting 」という表示に変わり、その後「 Patch Failed 」「 SSE Connectinng 」となります。
    他の方のコメントを参考にと出るのを待っていたのですが、待ちきれず投稿した次第です。
    アドバイスの程よろしくお願い致します。

    1. juchangさん

      いつも検証いただき、ありがとうございます。

      私は、全く気付きませんでした。
      BOSCH bme680.h, bme280.h をインストールしていたので、そういうエラーが出なかったのです。
      display_bme280_i2c.h ファイル等で、extern していたことが原因です。
      応急処置として、juchangさんのやったように、Sensorフォルダごと削除してください。
      コンパイルする時に、不要なヘッダファイルまでインクルードされてしまうとは、全然知らずにいました。
      とっても勉強になりました。
      只今修正中ですので、しばらくそのままご利用ください。

      また、「 WiFi conenecting…」「 SSE Connecting 」の表示のままというのは、Firebase Console で事前にデータを入力していないとそういう状態になるかも知れません。
      今調査中ですので、分かりましたらお知らせしたいと思います。

      度々の不手際、申し訳ございません。
      やっぱり、まだまだ素人だなぁと実感しています。
      m(_ _)m

      1. juchangさん

        お待たせしました。
        こちらでいろいろ検証したところ、コンパイルエラーが出た対象ファイルを削除していただくことが最善と思います。
        display_bme280_i2c.h エラーが出た場合、
        display_bme280_i2c.h
        display_bme280_i2c.cpp
        の2つのファイルを削除する。
        display_bme680_i2c.h エラーが出た場合、
        display_bme680_i2c.h
        display_bme680_i2c.cpp
        を削除していただく。
        あるいは、Sensorフォルダごと削除していただくことです。
        記事も修正しました。
        これは、ホントに気付かなかったです。
        当方ではすべてのファイルがインストールされているので、ファイルが無い場合にエラーが出るとは考えも及びませんでした。
        コンパイラについて、もっと勉強しなきゃと思いました。

        ところで、WiFi conenecting…」「 SSE Connecting 」の表示のままという現象は当方では確認できませんでした。
        原因は分からず、申し訳ございません。
        m(_ _)m

  2. mgo-tec 様

    M5stack で動作確認致しました。
    プログラム21行目のデータベースシークレットキーの入力ミスが原因でした。
    まだ細かい動作確認はできていませんが取り急ぎご報告まで。
    ありがとうございました。

    1. juchangさん

      動いて良かったですね。
      (^^)
      それにしても今回は私自身もとっても勉強になりました。
      これからのライブラリ作成に良い教材となりました。
      こちらこそ、いつもありがとうございました。
      m(_ _)m

  3. mgo-tec 様

    LCD ILI9341 モジュールを試してみました。
    手持ちの HiLetgo 2.8″TFT LCD では、SD カードスロットが使えず、micro SD カードスロットを別置きとし、A、B、C ボタンも設置しました。
    プログラムを実行すると、M5stack と同じ動作をすることを確認致しました。
    今回、M5stack と同じPin ナンバーが使えるのが大変ありがたいです。
    この、「M5stack もどき」でこれまでの M5stack のプログラムを動かすのが楽しみです。
    これからの新作を期待しております。

    1. juchangさん

      いつもコメントありがとうございます。
      無事動いて良かったです。
      2.8″ TFT は画面大きそうで、良さそうですね。
      私も、他にESP32開発ボードが数枚あり、わりと重宝しております。

      ところで、Yahoo記事を長時間取得し続けていると、取得失敗する新たな原因を本日追記しました。
      ESP32 および M5Stack で数時間後に Web 記事取得失敗する問題について

      client.connect 関数の使い方を変えれば、殆ど失敗は無くなりました。
      自分のライブラリも修正して次回の記事ではバージョンアップします。

      ということで、しばらくお待ちくださいませ。

  4. お世話になります。

    超初心者的質問なのですが、mgo_tec_esp32_m5stack_firebase.hの
    リンク先を教えてください。
    隅から隅まで見たつもりでありますが見当たりません。

  5. おはようございます。

    githubのリンク先には、ESP32_mgo_tec-masterはあるのですが、mgo_tec_esp32_m5stack_firebase.hがどうしても見つかりません。
    ためしに、ESP32_mgo_tec-masterをインクルードしてコンパイルしても
    エラーがでます。途方に暮れています。
    Firebaseの実験がしたくてうずうずしています。
    私も69歳になってぼけてきたのかと自虐しています。

    1. あれ?
      おかしいですね。
      私の環境では問題無く動いています。
      GitHub から ZIPファイルをダウンロードして、ZIP形式のまま Arduino IDE にインストールされていますか?
      GitHubにある ZIP形式ライブラリ のインストール方法 ( Arduino IDE )

      私の環境は、Windows 10
      Arduino IDE 1.8.6
      Arduino core for the ESP32 stable 1.0.0

      つい先ほど試しても問題ありませんでした。

      これでもダメなら、GitHubのページから辿っていくと、srcの中に mgo_tec_esp32_m5stack_firebase.h があります。
      そのテキストをコピペして、テキストエディタで保存してみてください。
      また、ESP32_mgo_tec beta ver 1.0.40 では、他にもいくつかアップデートしたファイルがありますので、GitHubのページにあるのと同じ構成でテキストエディタでコピペしてファイルを作ってください。
      ZIP形式インストールが上手くいっていないのでしょうか?
      それとも、ダウンロードした際にウィルスソフトで弾かれている可能性もありますね。
      謎ですね。
      他のライブラリは問題無くインストールできますか?

コメントを残す

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください