MilkTech

とある牛乳好きエンジニアによる技術備忘録的な何か

M5stackを電光掲示板にする

ESP32 arduino

M5Stackとスマホ(PC)をwifiルータを介して接続。 好きな文字列をM5stackの液晶に表示させます。

以下サイト様の記事で作成されていたものを、実行しましたが、インストールするライブラリ数が多く、ややこしかったため、備忘録的に自分なりにまとめてみました。

www.mgo-tec.com

必要な物

  • M5stack　Basic grayでも可能です。
  • microSDカード PCよりフォントデータを書き込み、最終的にはM5stackに挿入して使用します。
  • wifiルータ スマホとの通信の際に使用します。
  • スマホorPC webブラウザを開けるなら、iOS端末でもandroid端末でもOK。
  • PC(開発環境) なんでもいいですが本記事では、arduinoIDEインストール済windows10　環境で実施しています。 また、M5stackに必要なドライバ等はインストール済としています。 ドライバのインストールについては、以下記事を参照ください。

M5Stackをいじってみた！！！ [MIlkTech]

SDカードへのフォントデータ書き込み

フォントデータのダウンロード

フリーのフォントとして有名な東雲フォントを使用します。

  1. shinonome font familyというサイトから「2004-09-15 0.9.11 リリース」→「 shinonome-0.9.11p1.t..>」を押してダウンロード。

  2. ファイルを2回解凍して、ファイル内から 半角データ shnm8x16r.bdf、全角データshnmk16.bdf の2種類を使用するため、これを取り出しておきます。 なお、このとき半角データのファイル名をrを消してshnm8x16.bdfとしておきます。1

SDカードのフォーマット

  1. FAT32でフォーマット

  2. /font/というフォルダを作成しておく ここにフォントデータを入れます

書き込みデータのDL

  • UTF-8 → Shift_JIS 変換テーブルファイル SDカードにフォントデータと一緒に書き込むファイル 以下gitよりUtf8Sjis.tblというファイルをDL

GitHub - mgo-tec/UTF8_to_Shift_JIS

ファイルの書き込み

以下3つのファイルをSDカードに書き込む。

  • shnmk16.bdf

  • shnm8x16.bdf

  • Utf8Sjis.tbl

HTML ヘッダファイルをSD カードへ書き込む

WebSocket 通信を行うために、ブラウザに表示させる HTML のヘッダファイルをSDカードに移す。

HTMLヘッダファイルをコピー

GitHub - mgo-tec/ESP32_SD_EasyWebSocketより、ESP32_SD_EasyWebSocket-master.zipをダウンロード。インストールしたライブラリの以下ディレクトリ内に以下3つのヘッダファイルがあるのでこれをコピーする。 ~\ESP32_SD_EasyWebSocket-master.zip\examples\ESP32_SD_EWS_STA_sample\data

  • LIP2hed1.txt

  • LIP2hed2.txt

  • dummy.txt

ファイルの書き込み

SDカードに新たに/EWS/というフォルダを作成し、そこに上記3ファイルをコピーする。

f:id:aomegane888:20180823075407p:plain

コピー後、PCから取り外して、M5stackに挿入。 これでSDカードの作業は完了です。

M5stack(ESP32)へのプログラム書き込み

必要ライブラリのダウンロード

以下5つ必要なライブラリをダウンロードする。 なお、使用させていただくライブラリはすべてmgo-tec様リポジトリのものです。

arduino IDEへのライブラリ(zip形式)インストール手順

ダウンロードしたライブラリをarduinoIDEにインストールする。 arudinoIDEには、形式さえ対応していれば、ライブラリをzip形式のままインストールする機能が備わっている。

  1. 「スケッチ」→「ライブラリをインクルード」→「.ZIP形式のライブラリをインストール」を選択 f:id:aomegane888:20180823075506p:plain

  2. 上記でDLしたESP32_SD_UTF8toSJIS-master.zipを選択しインストール

  3. 同様に以下4つもインストール

    • ESP32_SD_ShinonomeFNT-master.zip
    • ESP32_Button_Switch-master.zip
    • ESP32_LCD_ILI9341_SPI-master.zip
    • ESP32_SD_EasyWebSocket-master.zip

  4. arduinoIDEを再起動する

ソースコードの入力

  1. 以下サイト様よりソースコードをarduinoIDEにコピペ。 M5stack ( ESP32 )電光掲示板をスマホでリアルタイムコントロールしてみた | ページ 2 / 2 | mgo-tec電子工作

  2. 17,18行目のxxx部分をスマホ、PCが接続されているwifiルータのSSID、パスワードに書き換える。

    const char* ssid = "xxxxxxxx"; //ご自分のルーターのSSIDに書き換えてください
const char* password = "xxxxxxxx"; //ご自分のルーターのパスワードに書き換えてください

  3. 「ツール」タブより、 ボード選択で「ESP32 Dev Module]を選ぶ その他項目も以下画像の用意選択する。 f:id:aomegane888:20180823075521p:plain

  4. コンパイル実行し、M5stackに書き込む。

掲示板を使ってみる

M5stackを起動する

M5stackを起動させると、画像の様な画面になり、プログラムに記述したSSIDのwifiアクセスポイントに自動的に接続されます。

f:id:aomegane888:20180823075544j:plain 接続に成功すると、IPアドレスが表示されます。

f:id:aomegane888:20180823075611j:plain

webブラウザを開く

M5stack上に表示されたIPアドレスに、同じwifiアクセスポイントに接続されたPC(スマホ)のwebブラウザでアクセスしてみます。 するとこのような画面が出てきます。

f:id:aomegane888:20180823075633p:plain 表示テキストを変更して、「送信」を押すと好きな文字が出ます。 テキストスクロールをStartにすると、テキストがスクロールを始め、スクロール速度、テキストの横幅、縦幅を変更するたびリアルタイムで表示が対応して変化します。

使ってみた様子

スマートフォン向けUIとなっているため、タッチ操作できないPCはスクロールスピード等がいじれないかもしれません。(未検証)

所感

M5stackが電光掲示板になりました！ 意外にもラグがほとんどなく、コンパイルエラーも起きなかったので、ライブラリの完成度の高さに感動しました・・・。 ブラウザのUIに関しては操作性や利便性を考えると、色々改善できそうですね。(HTML勉強しなきゃ・・・) 今回はwifiですがせっかくBluetoothもあるので、次はこれを少し発展させてBLEによるスマホとの直接通信で電光掲示板を作ってみたいですね。あいにく自分はandroid端末を持っていないので、スマホアプリ開発は・・・まだまだ先になりそうです(逃げ)

  1. ArduinoIDEにおいて、ファイル名が8文字以上だとエラーが起きる場合があるらしく、こうすべきらしい。(ソース不明)参考：日本語漢字ビットマップフォント、東雲フォントについて|mgo-tec電子工作↩