スキップしてメイン コンテンツに移動

IFTTTを使って天気と気温をフルカラーLEDで確認しよう

 前回の記事ではesp32からIFTTT経由でSlackに通知を送ってみました。

今回は逆にIFTTTからesp32に天気や気温の情報を送りフルカラーLEDを使って色で天気を確認できるものを作っていきます。

前提条件

Blynkの設定

前回の記事では登場しなかったサービスのBlynkの設定を行っていきます。
スマートフォンを少しだけ使うので準備しておいてください。

アプリインストール

Blynkのスマートフォンアプリがあるのでインストールしていきます。 iPhone(IOS)の場合↓
https://apps.apple.com/jp/app/blynk-iot-for-arduino-esp32/id808760481?at=10l8JW&ct=hatenablogapps.apple.comAndroidの場合↓
https://play.google.com/store/apps/details?id=cc.blynkplay.google.com上記どちらか選択しスマートフォンからリンクにアクセスしてください。
またそれぞれのOSでapp storeかGooglo playからBlynkと検索すれば一番上に出てくるのでそこからインストールしても構いません。
以下の説明はIphoneで説明していきます。しかしAndroidとさほど変わらないので同じような操作をしていただければ構いません。
今回はFacebookを使わずにアカウントを作っていきたいと思います。

アカウント作成
画像"アカウント作成"を参考に操作してください。
②③には登録するメールアドレスとパスワードを入力します。
後ほど重要なメールを受け取るために登録したメールアドレスでメールが受け取れる状態にしておいてください。

プロジェクト作成

プロジェクト作成
画像"プロジェクト作成"を参考に操作してください。
③④は画像の通りに選択してください。
⑤をタップ後メールアドレスにAuth Tokenが送信されているはずなのでメールを確認しにいきましょう。
プロジェクト作成2
画像"プロジェクト作成2"のようなメールが送られてきているので指示に従ってください。
Auth Tokenはこの後必ず使うので忘れないようにしましょう。

  • 注意:Auth Tokenはプロジェクトごとに違うので今後、自分で新規プロジェクトを作成するときは注意しましょう。

プロジェクト作成3

以上でBlynkのプロジェクトの作成は終了です。

IFTTTのレシピ作り

レシピ作り
レシピ作り2
レシピ作り3
レシピ作り4
レシピ作り5
レシピ作り6

画像"レシピ作り6"のURL欄には

http://188.166.206.43/(Auth Token)/update/V1?value={{TodaysCondition}}&value= {{HighTempCelsius}}&value= {{LowTempCelsius}}

と入力し(Auth Toke)の部分を消し自分のAuth Tokenに書き換えてください。画像では赤で塗りつぶされたところをさします。 また②と③は画像と同じように設定してください。
今回は天気と最高気温、最低気温を取得するのでURLの中にTodaysCondition、HighTempCelsius、LowTempCelsiusと入っています。

レシピ作り7

追加して情報を得たい場合は上記のURLに&value=と入力しadd ingredientをクリックすることで取得したいデータを選択できます。

  • 注意:取得情報を追加したいときは&value=の最後にカーソルを合わせてください。add ingredientがうまく機能しない場合あがあります。

レシピ作り8
finishボタンを押したら完成です。

ハードウェア構成

必要なもの

  • ESP32-WROOM-32 開発ボード
  • ブレッドボードなどの配線機材
  • フルカラーLED(RGBLED)
  • 抵抗1Kぐらい

配線

フルカラーLED

  • 注意:筆者が使用するフルカラーLEDはアノードコモンのものをしようしています。またものによっては端子に対応する色が違う可能性があるのでそれぞれで確認し配線を変えてください。

ハードウェア

筆者の配線はvin->vcc D32->抵抗->R D33->抵抗->G D25->抵抗->Bとなっています。

ソフトウェア

#include <Arduino.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>

const char auth[] = "----"; //ご自分のBlynk用 Auth Tokenに""の中を書き換えてください
const char ssid[] = "----"; //ご自分のルーターの SSID に""の中を書き換えてください
const char pass[] = "----"; //ご自分のルーターのパスワードに""の中を書き換えてください
void setup() {
  Serial.begin(115200);
  Blynk.begin(auth,ssid,pass);
  int i = 0;

  ledcAttachPin(A4,1);
  ledcAttachPin(A5,2);
  ledcAttachPin(A18,3);
  ledcSetup(1, 12000, 8);
  ledcSetup(2, 12000, 8);
  ledcSetup(3, 12000, 8);
  ledcWrite(1,255);
  ledcWrite(2,255);
  ledcWrite(3,255);

  while(WiFi.status() != WL_CONNECTED){
        delay(100);
        i++;
        Serial.print(".");
        if(i == 100){
            i = 0;
            return;
        }
    }
    Serial.println("Connected!!");
    ledcWrite(1,0);
    ledcWrite(2,0);
    ledcWrite(3,255);
    Serial.println(WiFi.localIP());
}

void loop() {
  Blynk.run();
}
BLYNK_WRITE(V1){ //Blynk Virtual Pin
  Serial.println("---------------");
  Serial.println(param[0].asString());
  Serial.println(param[1].asInt());
  Serial.println(param[2].asInt());
  String condition = param[0].asString();
  if(condition.indexOf("Clear") >= 0){
    ledcWrite(1,0);
    ledcWrite(2,190);
    ledcWrite(3,255);
    Serial.println("clear");
  }
  if(condition.indexOf("Cloud") >= 0){
    ledcWrite(1,127);
    ledcWrite(2,127);
    ledcWrite(3,127);
    Serial.println("cloud");
  }
  if(condition.indexOf("Shower") >= 0){
    ledcWrite(1,255);
    ledcWrite(2,127);
    ledcWrite(3,0);
    Serial.println("shower");
  }
}

上記のコードの5から7行目をご自身の環境に合わせて書き換えてください。
その後esp32に書き込みができたら終わりです。   プログラムの仕様は、起動後WiFiに接続できたらLEDが黄色に光ます。この状態でIFTTTで設定した時間まで待ち時間になったら自動で情報を受け取るようになっています。情報を受け取ることができたら天気の情報に応じて全三色のパターンで光ます。
パターンは
晴れ=Clear:オレンジ
曇り=Cloud:白
雨 =Shower:
に光ります。

晴れ
曇り
曇りと雨の色が写真になると分かりづらいですがrご了承ください。
IFTTTから受け取る天気は3種類だけでなく他にも
Partly Cloudy
Showers Early
Mostly Cloudy
Clouds Early
etc... がありますが、それぞれに配色してしまうと分かりづらい(めんどくさい)ので3パターンに分けました。
実際に取得している情報をみたい方はシリアル通信を開くと見れると思うので試してください。
シリアル通信
取得した情報の2、3行目が最高気温と最低気温の情報です。

まとめ

今回は新しくBlynkというサービスを使いましたが本来の使い方とは違った方法で扱ってきたのでネットで調べても情報が少なくつまづくところがいくつかありました。しかし思い通りに動かすことができているのでよかったです。IFTTTの方では気温なども取得できるように設定しましたが、その情報を受け取りはしているもののLEDで光らせているわけではありません。やってみたい方はプログラムを自分でいじって7セグなどで光らせてみるのもいいかもしれませんね。

コメント

このブログの人気の投稿

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう!その2

前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標(再掲) ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提(再掲) ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール(再掲) ・typescript(Typescriptの コンパイル 用) ・phaser(フロントの Javascript 用ゲームライブラリ) ・live-server(ソースを監視してブラウザのページをリロード) ・ts-loader(webpackがTypescriptをバンドルする用)webpack(言わずと知れたモジュール依存をいい感じに解決しバンドルする) ・webpack- cli (webpackを コマンドライン で使用するのに必要) 注:各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作

M5Stackで、においセンサー(TGS2450)を使ってみる。(LCDに表示編)

今回は、においセンサー(TGS2450)から取得したデータをM5Stackの LCD にグラフ表示をしていきます。 今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch  MOSFET  2SJ334(スイッチとして利用) M5StackSideBB(ブレッドボード) M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。 ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意 本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。 過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事 があるので、参考にしてください。 においセンサー(TGS2450)について 今回使用したセンサーは 秋月電子通商 で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。 ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。 よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。 配線 においセンサーとM5Stackの配線 上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。 また、上部の抵抗10Ω二

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう!その1

今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。 内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。 またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。 この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。 最終目標 ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・開発環境を整える ・Phaser3の開発構成を知る ・スタート画面を作る ・マップ表示をさせる 開発前提 ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール ・typescript(Typescriptの コンパイル 用) ・phaser(フロントの Javascript 用ゲームライブラリ) ・live-server(ソースを監視してブラウザのページをリロード) ・ts-loader(webpackがTypescriptをバンドルする用)webpack(言わずと知れたモジュール依存をいい感じに解決しバンドルする) ・webpack- cli (webpackを コマンドライン で使用するのに必要) 注:各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備 今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリ で公開しました。 以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。 ここから先は リポジトリ のプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。 注: 他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ (これから書くプログラムの保存領域)