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

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のグラフ

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



まとめ・学んだこと

コメント

コメントを投稿

このブログの人気の投稿

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. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
コメントを投稿
続きを読む

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ゲームの基礎を作ろう！その１

今回は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/ （これから書くプログラムの保存領域）
コメントを投稿
続きを読む