image
2018.8.29更新 プログラムがv2.21になりました。最高最低気温などが表示されるようになりました。
2018.2.28更新 プログラムをver2にバージョンアップしました。天気予報のアイコン画像を必要最低限にして、アイコン画像を自作しやすくしました。説明はこちら

電子ペーパー天気予報実験セットの作り方をご説明します。

実験セットは↓こちら↓で購入いただけます

epdexpset04
 ・専用基板の説明 
epdset01
この基板には
  • ESP-WROOM-02(esp8266) WiFi内蔵マイコンモジュール
  • 電子ペーパーに必要な電源
  • SDカードスロット
  • 画像データの一時保存用のSRAM

と、電子ペーパーに画像を表示するためのすべての機能がつまっていて、電子ペーパーをつないでプログラムをするだけで、いろいろ表示することができます。


 ●電子ペーパーの接続 

epdset02
コネクタの黒い部分を引き出します。黒い部分の両サイドに飛び出したところを爪で引っ掛ける感じで引き出すことができます。


epdset03
電子ペーパーのフィルムコネクタを、基板のコネクタに刺し込みます。この時、コネクタの黒い部分が閉まってしまうと、奥まで刺さらないので、黒い部分が引き出された状態で、フィルムコネクタを刺し込んでください。


epdset04
基板のコネクタの黒い部分を、写真のようにしっかりと閉めます。これでフィルムコネクタが抜けなくなり、接続が完了します。

基板と電子ペーパーとの間の、フィルムの線がとても弱いので動かすときには、よじれたり、ねじれたりしないよう注意してください。1本でも切れてしまうと表示できなくなってしまいます。

epdset05


 ●プログラムのダウンロードとセットアップ 

こちらの手順で、arduinoとesp8266マイコンの開発環境のセットアップをしてください。

Arduinoがセットアップできたら、プログラムをダウンロードします。こちら↓よりプログラムがダウンロードできます。

最新版 ver2.1 2018.8.24 描画が綺麗かつ高速化しました

過去バージョン v2.01 2018.3.8 一部のアイコン画像が正しく選択されないバグを修正

初期バージョン v1.0 


圧縮されているので、展開して「kc_epdforcast」のフォルダごと、Arduinoフォルダに入れてください。Aruduinoフォルダの場所はwindowsの方は[ライブラリ]→[ドキュメント]→[Arduino]です。macの場合は[書類]→[Arduino]です。

このプログラムは

  1. 指定された無線LANのアクセスポイントに接続
  2. Yahoo API で指定されたWOEIDの天気予報を取得
  3. 応答の中から天気予報の番号を探索
  4. その番号からbmpファイル名を生成
  5. SDファイルから読みだして電子ペーパーに表示
  6. マイコンを1時間スリープさせる(1時間後リセットして最初からプログラムが実行される)

という処理を行っています。


・SDカードに画像をコピー
「kc_epdforcast」のフォルダの「sd」フォルダの中のファイルをSDカードにコピーしてください。SDカードにbmpファイルと「font」フォルダができればokです。天気予報のアイコンははFREEPSDFILESのFree PSD Weather Icon Setを利用しました。
ver.2.01の場合はこちらより天気マークのアイコン画像ver2をダウンロードし、SDカードにコピーしてください。フォルダごとではなく、ファイルだけをコピーしてください。
ver1.0のデータはこちらです。天気のマークはLincons – Free Weather Iconsを利用しました。

天気予報のアイコン画像データはご自身でも作ることができます。画像フォーマットと仕様は以下の通りです。
  • 解像度:横500ドット 縦500ドット
  • 色数:モノクロ推奨 フルカラーbmpでも白黒の画像であれば可
  • 形式:BMP形式
  • ファイル名:
  • 晴れ:sunny.bmp
  • 晴れ(夜):moon.bmp
  • 晴れ時々曇り:sunycldy.bmp
  • 晴れ時々曇り(夜):mooncldy.bmp
  • 強風:windy.bmp
  • 霧・ほこり:foggy.bmp
  • 曇り:cloudy.bmp
  • 雨:rainy.bmp
  • 雷:thunder.bmp
  • 雷雨:thdrstrm.bmp
  • 雪・みぞれ:sonwy.bmp



epdset06
SDカードをSDカードスロットに刺しこみます。


 ●設定 

プログラムを修正します。修正の目的は以下の2つです。
  1. ご自宅の無線LANのアクセスポイントににマイコンが接続できるようにします。
  2. 天気予報を知りたい場所を設定します。

espsetup08
Arduinoを起動して、kc_epdforcastフォルダのkc_epdforcast.inoをクリック。

epdset07
サンプルプログラムを2か所修正します。それでは1つ目の修正です。

  • 19行目:SSIDをご自宅の無線LANのアクセスポイントのSSIDにしてください
  • 20行目:PASSWORDを無線LANのアクセスポイントのパスワードにしてください

次に2つ目です。天気予報を得るための場所のIDであるWOEIDを設定します。WOEIDは郵便番号から、以下のサイトで変換できます。どちらでも結構です。

例えば東京ですと、1118370になります。サンプルプログラムはこの東京のWOEIDになっています。この値を、上記のサイトで郵便番号から変換したWOEIDに書き換えてください。

  • 14行目:woeidの数字の部分を書き直してください

以上で、プログラムの修正は完了です。


 ●プログラムのコンパイルと書き込み 

マイコンのUSBをパソコンと接続し、COMポートを設定します。

espsetup17


→ボタンのマイコンボードに書き込むをクリックして、コンパイルと書き込みを行います。

epdset08



epdset09
.........が伸びて100%になったら書き込み完了です。

マイコンのリセットがかかって、自動でプログラムが実行します。

こんな感じになるはずです。


もし、

Wifi connection failed

と表示された場合、マイコンがご自宅のWifiに接続できていないので、SSIDとパスワードが間違っていないか確認してください。また、5GHzの無線LANにはつながらないので注意してください。

また、

invalid response from server

と表示された場合、天気予報のサーバーに接続できないか、接続できても正しいメッセージが受信できていないので、WOEIDが間違っていないか確認し、間違っていなければしばらく待ってから試してください。

電子ペーパーが白黒を繰り返す場合にはSDカードが認識でいないか、bmpが存在しないので、SDカードを確認してください。


シリアルモニタを使うと、マイコンが今何をしているのか見ることができます。

[ツール]→[シリアルモニタ]で表示できます。

epdset10

右下にある通信速度は115200bpsに変更してください。マイコンのリセットを押すと、最初からログを見ることができます。

epdset11



 ●仕上げ 

電子ペーパーをL版のフォトフレームに入れると素敵なインテリアになりますよ。加工方法はこちらをご覧ください。


 ●プログラムの説明 

プログラムの流れは

  1. 指定された無線LANのアクセスポイントに接続
  2. Yahoo API で指定されたWOEIDの天気予報を取得
  3. 応答の中から天気予報の番号を探索
  4. 天気予報の番号から天気のアイコンのbmpファイル名を生成(ver2で追加)
  5. bmpをSDファイルから読みだして電子ペーパーに表示
  6. マイコンを30分スリープさせる(30分後リセットして最初からプログラムが実行される)

となっています。

1.指定された無線LANのアクセスポイントに接続

39行目から51行目までです。WiFi.begin( ssid , pass ); でアクセスポイントに接続し、WiFi.status() がWL_CONNECTEDになるまで待ちます。


2.Yahoo API で指定されたWOEIDの天気予報を取得

Yahoo APIは天気予報だけでなく、ネット上のいろいろな情報をデータベースにアクセスするような感じでデータを取得することができる便利なサービスです。今回は天気予報を取得すために

http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM weather.forecast WHERE woeid="1118370" and u="c"

という要求をマイコンから出しています。大まかな意味は

  • SELECT * : すべてのデータを対象に
  • FROM weather.forecast : weather.forecast というデータの中から
  • WHERE woeid="1118370" : woeidが1118370 に該当するデータを取り出しなさい
  • and u="c" : 温度は摂氏で

みたいな感じです。このリンクをブラウザで開くとどんな応答が返ってくるか見ることができます。

YahooAPIの天気に関する詳しい情報は

をご覧ください。

YahooAPIの応答には、現在の詳しい気象情報

 <yweather:location city="Tokyo" country="Japan" region=" Tokyo Prefecture"/>

 <yweather:wind chill="41" direction="338" speed="6.44"/>

 <yweather:atmosphere humidity="77" pressure="34405.72" rising="0" visibility="25.91"/>

 <yweather:astronomy sunrise="6:46 am" sunset="4:31 pm"/>

と、今と今後の天気予報

 <yweather:condition code="30" date="Tue, 19 Dec 2017 09:00 AM JST" temp="5" text="Partly Cloudy"/>

 <yweather:forecast code="32" date="19 Dec 2017" day="Tue" high="11" low="-1" text="Sunny"/>

 <yweather:forecast code="28" date="20 Dec 2017" day="Wed" high="5" low="1" text="Mostly Cloudy"/>

 <yweather:forecast code="30" date="21 Dec 2017" day="Thu" high="8" low="1" text="Partly Cloudy"/>

 <yweather:forecast code="32" date="22 Dec 2017" day="Fri" high="10" low="0" text="Sunny"/>

 <yweather:forecast code="34" date="23 Dec 2017" day="Sat" high="10" low="-1" text="Mostly Sunny"/>

 <yweather:forecast code="28" date="24 Dec 2017" day="Sun" high="12" low="2" text="Mostly Cloudy"/>

 <yweather:forecast code="30" date="25 Dec 2017" day="Mon" high="13" low="3" text="Partly Cloudy"/>

 <yweather:forecast code="30" date="26 Dec 2017" day="Tue" high="9" low="2" text="Partly Cloudy"/>

 <yweather:forecast code="34" date="27 Dec 2017" day="Wed" high="4" low="0" text="Mostly Sunny"/>

 <yweather:forecast code="32" date="28 Dec 2017" day="Thu" high="7" low="-1" text="Sunny"/>

が含まれています。9日後の天気予報まであるなんですごいですね。

yweather:forecastの中の

  • code:the condition code という天気が番号になっています
  • date:日にち
  • day:曜日
  • high:最高気温
  • low:最低気温
  • text:天気の説明

が天気予報の情報になります。

この応答の中の最初のyweather:forecastのタグの中のcodeのが、知りたい今後の天気になります。


コンディションコードと天気の関係はYahoo Weather API documentation の Condition Codesになっています。英語で書いてあり日本では使われないような天気もありますが、この番号に対応した天気マークをbmpファイルで用意してSDカードに入れておきます。


3.応答の中から天気予報の番号を探索

135行目から145行目までの処理になります。応答の中から最初のyweather:forecastを探し出し、その後のcodeを見つけ出し、その後のダブルクォーテーションでくくられた文字を抽出しています。


4.天気予報の番号から天気のアイコンのbmpファイル名を生成

147行目から228行目までの処理になります。天気コードをswich文を使い天気のアイコンごとに分類し、ファイル名を生成します。


5.bmpをSDファイルから読みだして電子ペーパーに表示

230行目から233行目までの処理になります。epd.loadBmp( fileName , 150 , 50 );で、bmpデータを画面の中心に配置するようメモリーに読み込み、epd.show();で電子ペーパーにメモリーの内容を表示します。


6.マイコンを30分間スリープさせる

ESP.deepSleep(30 * 60 * 1000 * 1000); で、ESP-WROOM-02をdeepSleepさせます。スリープさせる時間はμ秒で指定するので、30分は30 * 60 * 1000 * 1000となります。deepSleepは復帰するときにはリセットがかかります。そのため、30分後にプログラムが最初からやり直しになります。35分以上は正しくリセットがかかりませんでした。1時間に1回、天気予報を取得したいので、スリープ復帰の1回目は、またスリープするようにしてあります。



実験セットは↓こちら↓で購入いただけます

epdexpset04

関連リンク