M5Stackで、においセンサー（TGS2450）を使ってみる。（ThingSpeakで見える化編）

-

前回においセンサー（TGS2450）から取得したデータをM5StackのLCDにグラフ表示をしていきましたが、今回はデータを見える化してくれるサービスの『Thing Speak』にPOSTして見える化をしていきます。

今回主に使用したもの

  • 前回作成したM5Stackとにおいセンサー（TGS2450）の配線後の状態

＊注意：今回の記事は前回の記事（M5Stackで、においセンサー（TGS2450）を使ってみる。（LCDに表示編））の続きなので、もし紹介した内容を試したい場合は前回の記事から読むことをおすすめします。

ThingSpeakの設定

thingspeak.com

ThingSpeakの登録を済ませたら、まずは下の図のようなマイページまで行きます。
マイページにアクセスできたら下の図の赤い矢印の『New Cannel』をクリックしましょう。

ThingSpeakのマイページ

クリックしたら下のような画面になるかと思います。
赤い矢印の入力フォームは最低限入力必須のものになっています。
『Name』の方にプロジェクト名、『Field1』にグラフの名前を入力します。

チャンネル登録画面

入力が終わったら登録ページの下の方に『Save Cannel』ボタンがあるのでクリックしてCannelの登録完了です。
マイページに戻ったら下の図のようにCannelが増えているかと思います。
先ほど登録したCannelがあれば、そのCannelをクリックしましょう。

登録後のマイページ

すると画面にグラフが出てくると思いますが、まだデータがないので空になっています。
下の図のようにメニューから『API keys』を選択すると下の図のようになります。
ここでは、データをPOSTするためのURLを取得できます。
ここで赤い矢印の『Update a Cannel Feed』のテキストエリアに書かれたURLをメモ、又はコピーしておきましょう。
このURLをプログラムに組み込むことでデータをPOSTできるようになります。
デフォルトでURLの最後にfield1=0とありますが、0の部分をPOSTしたい数値にすることでグラフを作ることができます。

リクエストを送るURLの取得



プログラムの修正点

前回作成したプログラムではLCDニ表示していましたが、今回は前回のプログラムにWiFi接続するプログラムとThingSpeakにPOSTするプログラムを追加していきます。 まずはWiFiに接続するための関数を作成しました。

#include <WiFi.h>

#define TRY_CONNECT_AP 10

char SSID[] = "hogehoge";
char PASS[] = "fugafuga";

bool connectAP(){
  uint8_t cnt = 0;

  WiFi.mode(WIFI_MODE_APSTA);
  WiFi.disconnect(true);
  delay(1000);
  WiFi.begin(SSID, PASS);
  while (WiFi.status() != WL_CONNECTED && cnt < TRY_CONNECT_AP){
    delay(500);
    Serial.print(".");
    cnt += 1;
  }
  if(WiFi.status() != WL_CONNECTED) return false;

  Serial.println("\nWiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  return true;
}

変数SSIDには無線LANのSSID、変数PASSにはパスワードに置き換えてください。 また、マクロ定義されているTRY_CONNECT_APはWiFiに接続を試みる回数を設定できます。 この関数を前回プログラムのsetup関数内で呼び出すことで無線LANに接続することができます。

次に、ThingSpeakにデータを送るためにGETリクエストを投げる関数を作成します。

int sendGETRequest(String host, String uri, uint8_t port = 80){
  int httpCode = 0;
  HTTPClient http;

  http.begin(host, port, uri);
  httpCode = http.GET();

  return httpCode;
}

この関数では第一引数にPOSTするサーバーのホスト名を渡し、第二引数にURI（パス）を渡します。 ホスト名とURIは、簡単に言えばURLから『https://』取り除いて/「スラッシュ」で分けることができ、下の図のようになります｡

例）

URL：https://api.thingspeak.com/update?api_key=xxxxxxxxx&field1=0

ホスト名：api.thingspeak.com
URI：/update?api_key=xxxxxxxxx&field1=0

つまり例のURLにリクエストを投げるには、先ほどの関数をsendGETRequest("api.thingspeak.com", "/update?api_key=xxxxxxxxx&field1=0")と呼び出す必要があります。 また、第３引数はデフォルトで80にセットされているので今回は渡す必要はありません。

これで追加する関数ができたので、実際のコードで呼び出すことでPOSTができるようになります。
今回作成した関数を挿入して、30秒ごとにPOSTするプログラムを下に貼りますので、ぜひ参考にしてみてください。
下のリポジトリのプログラムではWiFiのSSIDとパスワード、POSTするURL（ホスト名とURI）は別のヘッダファイル（local_properties.h.example）から呼び出しています。
ヘッダファイル名をlocal_properties.hに変更した上で、それぞれ適切な値にすることで本プログラムは動作します。

github.com

それでは実際に動作させた結果が下の図です。

ThingSpeakのグラフ

簡単に見える化できましたね。



まとめ・学んだこと

コメント

コメントを投稿

このブログの人気の投稿

レイクタウンにある生産緑地

-
イメージ
１９９２年に改正された生産緑地法に基づいて定められた地域区域で市街化区域にありながら３０年間の農業の継続することや・１５１坪以上所有などの条件で税制優遇が受けれる地区を生産緑地地区(生産緑地)と呼ばれますが、生産緑地２０２２年問題と騒がれた税制優遇の廃止や農家の高齢化(後継者問題)によって手放す懸念が増す中、続けて頑張って下さっている農家の皆さまには頭が上りません。 都内でも、練馬や世田谷での生産緑地手放しの声は耳にしますが意外にも皆さん延長されているようです。というのも３０年経過前に特定生産緑地に指定しておけば１０年後まで税制優遇も延長できるのです。地球温暖化現象を抑えてる緑地を少しでも無くさないためにも、これからもご尽力頂ければ幸いです。   HaLake は、 ニャンパス株式会社 の運営するコワーキングスペースです。 受託開発をメインに行うニャンパス株式会社では、ウェブサービスやアプリ開発、IoTデバイスの開発を含め様々なご注文にお応えいたします。お気軽にご連絡ください。 ニャンパスへのお問い合わせ
続きを読む

越谷レイクタウンに新たに民間キャンプ場がオープン

-
イメージ
 越谷レイクタウンでアウトドア施設といえば、レイクタウンアウトレットに隣接し 湖畔を一望しながらBBQが楽しめる  KOSHIGAYA Lake side BBQ   が思い浮かびますが、 今年９月に、越谷市東町の中川沿いに新たにBBQはもちろんサイクリングやカヌーも楽しめ、 テントによるキャンプができる観光スポットがオープンすることになったという。 キャンプ場予定地に上げられる東町にある中川河川緑地。 昨年、吉川橋がリニューアルし交通の便が良くなりこの河川緑地のスペースに何かできる予感はしていましたが、期待以上の施設が計画されておりました。 　テントサイトは１０区画(大型 12 × 8m・小型 6 × 5m)・管理施設や炊事場も完備する予定だとか。 　天気も良く風がなければ、中川や元荒川はカヌーに適した場所なので期待できるでしょう！ HaLake は、 ニャンパス株式会社 の運営するコワーキングスペースです。 受託開発をメインに行うニャンパス株式会社では、ウェブサービスやアプリ開発、IoTデバイスの開発を含め様々なご注文にお応えいたします。お気軽にご連絡ください。 ニャンパスへのお問い合わせ
続きを読む

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

-
イメージ
前回の記事 に引き続き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. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
続きを読む