ESP-WROOM-02 と 極小OLED (有機EL) で Yahooニュース電光掲示板とNTP時計を表示させてみた。もうIoTですね

ESP8266 ( ESP-WROOM-02 )
最新記事では、ESP32 を使って、もっとスゴイ、フルカラー OLED ミニ電光掲示板ができました。
以下の記事も合わせてご覧ください。

ESP32 と 有機EL SSD1331 で Yahoo News 、 天気予報 、 NTP 時計 Wi-FI ガジェットを作ってみた
 ※ ESP-WROOM-02 の Flashメモリサイズが 4MB のはずが、実は 2MB だったという情報がありました。
以下のページを参照して、Flashメモリサイズを確認しておくことを強くお勧めします。
●ESP-WROOM-02 ( ESP8266 ) チップ・メモリ・MACアドレス情報確認方法
(2017/10/2)
Yahoo!ニュース RSS サイトが https ( SSL )化されてしまいました。
よって、スケッチが動作しなくなったので、変更しましたが、メモリの大幅削減を余儀なくされました。
この記事を書いた時期の動作とは程遠い結果になっていますので、予めご了承ください。
ESP-WROOM-02(ESP8266)では辛いものがあるので、今はESP-WROOM-32(ESP32)の導入をお勧めしています。
(2017/12/19時点)
以下、過去の記事です。

スポンサーリンク


こんばんは。

熊本地震などがあり、記事をアップする気になれなくて、しばらく滞っておりました。
自分の力では何もできなくて本当に心苦しい限りです。
明日は我が身です。
普段から心と体と物品の備えをしておくことが大事なんだとつくづく思いました。
この経験をしっかりと記憶にとどめて、将来のために役立てることが必要ですね。

ということで、電子工作の話に戻りまして、滞っていた記事をアップしました。
今回は 前回の記事 をさらに応用して、LEDドットマトリックスを極小の有機EL (OLED) に替えて、Yahooニュースのトップ記事タイトルとNTP自動同期時計を表示させてみました。
もちろん、Arduino化したESPr Developer ( ESP-WROOM-02 開発ボード )を使用してます。
そして、スマホのブラウザとの設定コントロール通信はWebSocket通信を使用してます。

使うパーツは最少部品点数だと思います。
ESPr Developer (ESP-WROOM-02 ( ESP8266 ) 開発ボード)とOLED ( SSD1306 )モジュールの2点のみ。
あとはブレットボードやジャンパワイヤーだけ。
Very Simple !!

動作状況の動画はこれをご覧ください。

Yahoo RSS SSL化対応による修正プログラムでは、このようにスムースにスクロールしません。
また、スピードコントロールもできなくなりましたので、予めご了承ください。

どうでしょうか?
タッチペンの反応が悪くてスイマセン。手でやった方が全然イイです。
OLEDの画像のちらつきはデジカメとのフレッシュレートが合わないので動画ではしょうがないです。実際はクッキリ表示されてますのでご安心を。
ニュース記事を取得する場合はスクロールが停止してしまうのはしょうがないです。停止させたくない場合は電光掲示表示と記事取得を別のCPUで制御しなければなりません。

ちなみに、モバイルバッテリーを使用すると完全無線化できますね。
5年前にコンビニで買った単3乾電池を使ったバッテリーでもできました。
こんな感じです。


ただ、これだとあまり長く持ちません。3時間くらいでしょうか・・・(結局8時間ちょいしか持ちませんでした)
リチウムイオンの方が長く持つと思います。
ESP-WROOM-02をディープスリープモードにするともっと持つかもしれませんね。いつか試してみたいと思います。

フォントは8×8ドットのフリーの美咲フォント を使用してます。しかし、そのまま表示させるとあまりにも小さい文字だったので、ドットを2倍大きくしました。
それでもやはり複雑な漢字は読みにくいのですが、逆に前後の文脈からだいたいの漢字は推察できると思います。だいたいは読み取り可能だと思います。
昔のファミコン字体みたいで、想像力を鍛えられると思います。
もっと判別したいならば詳細な漢字が表示できる16×16ドットのフォントにするしかありません。いつかそれはやってみたいと思っています。

前回の記事 では全角4文字のスクロールでしたが、今回は全角8文字のスクロールです。
しかも、2行別々の記事を異なる速度でスクロールできますので、勝手が良いと思います。
そして、NTPサーバー自動同期時計では年月日および曜日を常時表示できますので、さらに実用性が高いのではないかと思います。

この最少部品点数だと、バッテリーを除くとFriskケースに入れられそうです。
バッテリーをうまく工夫すれば、腕時計っぽく作ることもできそうです。

では、これの作り方を説明します。

2016/6/2アップした記事ではさらに詳細な漢字フォント16x16東雲フォントを使って表示させています。
こちらの方が鮮明に読み取れてキレイですよ!!
https://www.mgo-tec.com/blog-entry-1616shinonome-ws-oled-news.html

1.準備するもの

● ESPr Developer ( ESP-WROOM-02 開発ボード ) (スイッチサイエンス製)
Amazonさんではこんな感じで販売してます。

ESP-WROOM-02開発ボード
スイッチサイエンス(Switch Science)

ESPr Developer(ピンソケット実装済)
スイッチサイエンス(Switch Science)

これには2.54mmピンヘッダが付属しておりませんので、別途購入が必要です。

i2c OLEDモジュール ディスプレイ 0.96インチ ブルー&イエロー
有機ELとディスプレイドライバ SSD1306 を使った極小の128×64ドットのI2C通信ディスプレイです。
これは上部横16ドット列が予め黄色になっていて、それ以下は全てブルーというものです。
今回はAmazonさんで販売しているこちらのものを使用しました。

(※当方で購入したものはDIYMALLさんで販売していたものを使用しております。記事を上げた当初は別の販売店のものを紹介しており、訂正しました。大変失礼いたしました。
別の販売店のものでも使用は問題ないと思います。が、SPI接続は使用できません。必ずi2C接続のものを使用してください。2016/4/28)
因みに、こちらは2.54mmピンヘッダが予めハンダ付けされておりました。
これが在庫切れの場合、色は単色ですが、以下のものでもOKです。

●ブレッドボード、ジャンパワイヤー、2.54mmピンヘッダ
ジャンパワイヤーは通常のオス-オスでも良いのですが、オス-メスジャンパワイヤーで直接OLEDに接続しても良いと思います。
過去の記事のこちらのページにあるようにQIコネクターを自作しても良いと思います。
または以下のようにAmazonさんでもオス-メスのものが売っております。

2.接続する

ESPr Developer ( ESP-WROOM-02 開発ボード )の詳細な使い方やピンヘッダハンダ付け方法はこちらのページをご覧ください。

有機EL(OLED) SSD1306 は表面はこんな感じです。

裏面にはディスプレイドライバSSD1306 のI2C通信用アドレスが記載されています。
これは7bit数値で0x78 とありますので、実際にArduino IDEでプログラミングするにはそれを1bit右へシフトした0x3Cというアドレスになります。

このOLEDの使い方に関しての詳細は過去の記事も参照してみてください。

あとはブレッドボード上で以下のようにジャンパワイヤーで接続するだけです。
有機EL(OLED) SSD1306 とはI2C通信接続します。
I2C通信ではプルアップ抵抗が必要ですが、このOLEDモジュールには予め埋め込んであるようなので、直付けしてます。

実際の接続した写真はこんな感じです。

3.Arduino IDE と ESP-WROOM-02 の設定

●Arduino IDE はver 1.6.8 のインストール
1.6.5でも、1.6.8でも動作します。
1.6.5 を使っていた方はこちらの記事を参照してアンインストールして、Arduino15フォルダを削除して、1.6.8を再インストールしてください。

●Arduino IDE の最新版ESP8266ボードインストール
これは、ESP-WROOM-02 ( ESP8266 )をArduino IDEで開発するためのプラグインです。
インストール方法はこちらの記事を参照してください。
2016/4/19現在ではStable版2.2.0になってます。これでも問題なく動作しました。

●プラグインのSPIFFSファイルシステムのインストール
これは、スケッチフォルダの中のdataフォルダの中にあるファイルをArduino IDE を使ってESP-WROOM-02 のフラッシュメモリにアップロードするためのプラグインツールです。
インストール方法はこちらの記事を参照してください。

4.ライブラリのインストール

前回の記事のドットマトリックス電光掲示板を試された方は今回はOLED_SSD1306ライブラリだけインストールすれば良いのですが、初めて試される方のために全て載せておきます。
ZIPファイルをダウンロードしていただき、Arduino IDE にインストールしてください。
ZIPファイルのインストール方法は以下のページを参照してください

GitHubにある ZIP形式ライブラリ のインストール方法

●当方自作の、OLED_SSD1306ライブラリのインストール
これは今回の記事で初登場です。
有機EL(OLED) SSD1306 をI2C通信で制御する自作ライブラリです。
現在、Beta 1.0 です。
GitHubのこちらのページ からZIPファイルをダウンロードしてインストールしてください。

●自作ライブラリ、EasyWebSocket Beta 1.50 をインストール
スマートフォンのブラウザとリアルタイム通信のWebSocketを行うための自作ライブラリです。
2017/4月以降、Yahoo! RSS ニュースサイトが https ( SSL )化されてしまいました。
よって、http通信では記事を取得できなくなったため、ライブラリを一新しました。
以下のページからZIPファイルをダウンロードして、Arduino IDE にインストールしてください。

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

こちらのページを参照していただき、EasyWebSocketサンプルスケッチを別名で保存して、サンプルスケッチの中のdataフォルダの中の spiffs_01.txt ファイルのローカルIPアドレスをご自分のルーターで割り当てたアドレスに変更して保存しておいてください。
サンプルスケッチのプログラムは全て消去して空のファイルにしてOKです。そこに後で述べるソースコードを入力します。
このライブラリの解説はこちらのページを参照してください。

●当方自作の、UTF8 to Shift_JIS 変換ライブラリのインストール
これは文字コードのUTF-8 を Shift_JIS に変換するための私の自作のライブラリです。
ESP-WROOM-02専用です。
現在、Beta version 1.0 です。
GitHubのこちらのページ からZIPファイルをダウンロードして解凍して、UTF8SJIS_for_ESP8266-masterフォルダの中の更にその中のUTF8SJIS_for_ESP8266-masterフォルダをIDEのlibrariesフォルダにフォルダごとコピーしてください。
このライブラリの解説はこちらのページを参照してください。

●当方自作の、MisakiFNT_read_for_ESP8266 ライブラリのインストール
これはフリーの日本語8×8ドット 美咲フォント をESP-WROOM-02のフラッシュメモリから呼び出すためのライブラリです。
Beta version 1.1 を使用してください。
GitHubのこちらのページ からZIPファイルをダウンロードして解凍して、
MisakiFNT_read_for_ESP8266-masterフォルダの中の更にその中のMisakiFNT_read_for_ESP8266-masterフォルダをIDEのlibrariesフォルダにフォルダごとコピーしてください。
このライブラリの解説はこちらのページを参照してください。

●当方自作の、I2C_Adafruit_8x8_LED_matrixライブラリのインストール
これは本来Adafruit社製の8x8LEDドットマトリックスを操作するためのライブラリだったのですが、電光掲示板としてSSD1306でも使用できるので流用してます。
Beta version 1.1 を使用してください。
GitHubのこちらのページ からZIPファイルをダウンロードして解凍して、
I2C_Adafruit_8x8_LEDmatrix_library-masterフォルダの中の更にその中のI2C_Adafruit_8x8_LEDmatrix_library-masterフォルダをIDEのlibrariesフォルダにフォルダごとコピーしてください。
このライブラリの解説はこちらのページを参照してください。

●Timeライブラリのインストール
Arduino.ccページのこちらにあります。→http://playground.arduino.cc/code/time
このページを開いて下図のようなところをクリックすると

このように表示されますので、下図のようにGithubリンクをクリックしてください。

そうしたら下図のようなところをクリックするとZIPファイルのダウンロードが開始されます。

それを解凍するとTime-masterフォルダがありますので、更にその中のTime-masterフォルダをIDEのlibrariesフォルダにフォルダごとコピーしてください。

5.SPIFFSファイルアップローダーでWROOMのフラッシュに書き込む

EasyWebSocketサンプルスケッチを空にして保存したファイルにdataフォルダがあるので、そこに以下の4つのファイルをコピーしておきます。

①spiffs_01.txt
スマートフォンのブラウザとWebSocket通信するためのHTMLヘッダファイル。
このテキストファイルをメモ帳などのテキストエディタで開き、ws://192.168.0.14  のところをご自分のルーターで割り当てたESP-WROOM-02 のアドレスに書き換えてください。必ず文字コードはUTF-8で保存してください。

②Utf8Sjis.tbl
これは文字コードのUTF-8をShift_JISに変換するテーブルです。これはGitHubのこちらのページにあります。
ZIPファイルをダウンロードして解凍してUtf8Sjis.tblファイルだけdataフォルダにコピーしておいてください。
このファイルについての詳細はこちらのページにありますので参照してみてください。

③MSKG13KU.FNT
これは全角の8×8ドットの美咲フォントです。これはこちらのページにあります→http://littlelimit.net/misaki.htm
PC-E500 SCRNJPN.FNT 形式のものをダウンロードして解凍してMSKG13KU.FNTファイルをdataフォルダにコピーしてください。

④mgotec48.FNT
これは美咲フォントの4X8.FNTフォントの数値部分を私が独自に書き換えたフォントです。
4X8.FNTフォントは半角ですが、数値が全角と合わなくて小さすぎるので改良しました。
このファイルはこちらのページにありますので、ZIPファイルをダウンロードして解凍して、mgotec48.FNTファイルをdataフォルダにコピーしておいてください。

以上の4つのファイルをIDEプラグインのSPIFFSファイルシステムアップローダーでESP-WROOM-02のフラッシュメモリにアップロードします。
下図のようなところをクリックするとアップロードが始まります。終るまで結構時間がかかりますので、気長に待ってください。

コメント

  1. Kasu Kou より:

    こんなに簡単にwebを利用したデバイスが作れると思ってなかった。
    感動した!!

    • mgo-tec mgo-tec より:

      Kasu Kouさん
      コメントありがとうございます。
      こういう声をいただくと、とても励みになります。
      記事をお読みいただいただけでもそれだけで感謝感謝です。
      ありがとうございました!!!

  2. iectec より:

    今後の工作に活用させていただきます。

    これほどの良質なソースコードとノウハウを無償で提供しているとは驚きです。

    ありがとうございました

    • mgo-tec mgo-tec より:

      iectecさん

      当ブログをご覧いただき感謝いたします。
      まだまだ勉強中なので「良質」なんてとんでもないことでございます。
      まだまだ至らないところが有るかも知れませんが、今後とも当ブログをよろしくお願いいたします。

タイトルとURLをコピーしました