Arduino

2021.01.05

M5StickCで計測した温度をGoogleスプレッドで可視化(グラフ作成)

はじめに

M5StickCにENVⅡを合わせて計測された温度情報をGoogleスプレッドシートにグラフとして表示します。

必要なもの
Googleスプレッドシートの設定
スケッチ例
実行

1．必要なもの

必要なものはM5StickCとENVⅡです。

番号

商品名

価格

参考販売店

M5StickC

1980円（セット）

1650円（本体のみ）

SwitchSience

M5StickC PIR Hat（AS312搭載）

363円

SwitchSience

2．Googleスプレッドシートの設定

Googleスプレッドシートの設定については「M5stickCを使用したセンサーの値をGoogleスプレッドシートに」を参照下さい。

sheets.google.com/create で直接スプレッドシートを開きます。

まず最初にタイトルを記入します。左上の「無題のスプレッドシート」に「M5SticC」と記入します。（無題のままでも特にもんだいないですが、後々になんのために作成したかわかるように記入した方がいいです）

次に「A1」セルに日付、「B1」セルに温度と記入します。[ツール]⇒[スクリプトディタ]の順で開きます。

スクリプトエディタには前回PIRセンサーの時と同じようなスクリプトを記入します。今回はグラフを作成するのでグラフ作成用のスクリプトを追加しています。

setData関数は前回の内容とほぼ同じです。A列に日付、B列に温度がはいるようにしています。insertRows(Row,Num)でRow行からいくつ行の挿入を行うかを指定しています。2行2列目に温度情報である変数valを2行1列めに日付を入植するようにしています。

function setData(sheet, val) {
  sheet.insertRows(2,1);
  sheet.getRange(2, 2).setValue(val);
  sheet.getRange(2, 1).setValue(new Date());
}

function setData(sheet, val) {

sheet.insertRows(2,1);

sheet.getRange(2, 2).setValue(val);

sheet.getRange(2, 1).setValue(new Date());

}

POST関数にはグラフを作成する記述を入れています。グラフの作成はsheet.insertChart(chart)で実行しています。作成後は sheet.updateChart(chart)でアップデートしていきます。

グラフを作成するにはnewChartを使用します。グラフの範囲はA1からB10までにしています。毎回新しい情報が更新されていくと行数が膨大になるので、sheet.deleteRows(11,1)で11行目から1行だけ毎回削除しています。折れ線グラフを作成しているのはsetChartType(Charts.ChartType.LINE)の部分です。

LINEの部分を変更することで色々なグラフが作成できます。

Charts.ChartType.AREA	面グラフ
Charts.ChartType.BAR	棒グラフ
Charts.ChartType.COLUMN	カラムチャート
Charts.ChartType.LINE	折れ線グラフ
Charts.ChartType.PIE	円グラフ
Charts.ChartType.SCATTER	散布図
Charts.ChartType.TABLE	表チャート

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var params = JSON.parse(e.postData.getDataAsString());
  var val = params.check;

  // スプレッドシートに値を代入
  setData(sheet, val);
  if(sheet.getRange(3,1).getValue()==''){
  var range = sheet.getRange("A1:B10");
  var chart = sheet.newChart()
              .addRange(range)
              .setChartType(Charts.ChartType.LINE)
              .setOption('title','部屋のの温度')
              .setOption('series.0.pointSize', 7)
              .setOption('titleTextStyle.alignment', 'center')
              .setPosition(1,4,0,0) //buildメソッドの前に、挿入場所を指定するsetPositionを加えます。
              .build();
  //グラフをシートに挿入します
    sheet.insertChart(chart);
  }
  sheet.deleteRows(11,1);
  sheet.updateChart(chart);

}

function doPost(e) {

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');

var params = JSON.parse(e.postData.getDataAsString());

var val = params.check;

// スプレッドシートに値を代入

setData(sheet, val);

if(sheet.getRange(3,1).getValue()==''){

var range = sheet.getRange("A1:B10");

var chart = sheet.newChart()

.addRange(range)

.setChartType(Charts.ChartType.LINE)

.setOption('title','部屋のの温度')

.setOption('series.0.pointSize', 7)

.setOption('titleTextStyle.alignment', 'center')

.setPosition(1,4,0,0) //buildメソッドの前に、挿入場所を指定するsetPositionを加えます。

.build();

//グラフをシートに挿入します

sheet.insertChart(chart);

}

sheet.deleteRows(11,1);

sheet.updateChart(chart);

}

作成したら、[デプロイ]⇒[新しいデプロイ]を選択し、歯車のマークからウェブアプリを選択します。表示されるURLはArduinoのスケッチに使用するのでどこかにメモしておきます。Googleの承認については前回の人感センサーのときと同じ内容になります。

3．スケッチ例

スケッチはENVⅡ用のスケッチを元に作成します。今回は温度のみをGoogleスプレッドシートに送るので、不必要な部分を削除します。温度を取得する変数はfloat型なので、sendData関数の引数用の変数もfloat型に変更しています。M5SticCに表示する内容も温度と湿度だけにしています。

#include <M5StickC.h>
#include "SHT3X.h"
#include <Wire.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>


#define D_WIFI_SSID "SSIDを記述します"
#define D_WIFI_PASS "SSIDのパスワードを記述します"

// スプレッドシートURL
const char *host = "Googleスプレッドシートのデプロイ時に取得したURLを記述すします。" ;


// Json設定
StaticJsonDocument<255> json_request;
char buffer[255];
float check ;

SHT3X sht3x; 

float tmp = 0.0;
float hum = 0.0;
float pressure = 0.0;


void setup() {
  // put your setup code here, to run once:
  M5.begin();

  // Wi-Fi接続
  WiFi.begin(D_WIFI_SSID, D_WIFI_PASS);
  Serial.print("connecting");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  
  Wire.begin(0,26);
  M5.Lcd.setRotation(3);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(0, 0, 2);
  M5.Lcd.println("ENV TEST");
  pinMode(M5_BUTTON_HOME, INPUT);
}

// センサーに反応したらデータを送る関数
void sendData() {
  json_request["check"] = check;
  serializeJson(json_request, buffer, sizeof(buffer));

  HTTPClient http;
  http.begin(host);
  Serial.print(check);
  Serial.println("");
  http.addHeader("Content-Type", "application/json");
  int status_code = http.POST((uint8_t*)buffer, strlen(buffer));
  http.end();
}


void loop() {
  // put your main code here, to run repeatedly:
  if(sht3x.get()==0){
    tmp = sht3x.cTemp;
    hum = sht3x.humidity;
  }

  M5.Lcd.setCursor(0, 20, 2);
  M5.Lcd.printf("Temp: %2.1f Humi: %2.0f", tmp, hum);
  check = tmp ;      
  sendData();
  delay(1000*36*1000);
 
}

#include <M5StickC.h>

#include "SHT3X.h"

#include <Wire.h>

#include <HTTPClient.h>

#include <ArduinoJson.h>

#define D_WIFI_SSID "SSIDを記述します"

#define D_WIFI_PASS "SSIDのパスワードを記述します"

// スプレッドシートURL

const char *host = "Googleスプレッドシートのデプロイ時に取得したURLを記述すします。" ;

// Json設定

StaticJsonDocument<255> json_request;

char buffer[255];

float check ;

SHT3X sht3x;

float tmp = 0.0;

float hum = 0.0;

float pressure = 0.0;

void setup() {

// put your setup code here, to run once:

M5.begin();

// Wi-Fi接続

WiFi.begin(D_WIFI_SSID, D_WIFI_PASS);

Serial.print("connecting");

while (WiFi.status() != WL_CONNECTED) {

Serial.print(".");

delay(500);

}

Serial.println();

Wire.begin(0,26);

M5.Lcd.setRotation(3);

M5.Lcd.fillScreen(BLACK);

M5.Lcd.setCursor(0, 0, 2);

M5.Lcd.println("ENV TEST");

pinMode(M5_BUTTON_HOME, INPUT);

}

// センサーに反応したらデータを送る関数

void sendData() {

json_request["check"] = check;

serializeJson(json_request, buffer, sizeof(buffer));

HTTPClient http;

http.begin(host);

Serial.print(check);

Serial.println("");

http.addHeader("Content-Type", "application/json");

int status_code = http.POST((uint8_t*)buffer, strlen(buffer));

http.end();

}

void loop() {

// put your main code here, to run repeatedly:

if(sht3x.get()==0){

tmp = sht3x.cTemp;

hum = sht3x.humidity;

}

M5.Lcd.setCursor(0, 20, 2);

M5.Lcd.printf("Temp: %2.1f Humi: %2.0f", tmp, hum);

check = tmp ;

sendData();

delay(1000*36*1000);

}

4．実行

スケッチをM5SticCに書き込むと温度と湿度が表示されます。

またGoogleスプレッドシートにグラフが表示されます。

loop()関数にdelay(1000*3600)を記述しているので、更新は1時間に1回となります。(delay内の数値の単位はミリ秒。1000ミリ秒=1秒)

グラフの実行結果をもっと早く確認したい場合はこのディレイ時間を短くします。

Googleスプレッドシートの日付と温度の表示内容も調整した方が見やすいです。Dateはデフォルトで年月日までなので、時間も表示するように変更します。A列を選択して、右の[123]から日時を選びます。

温度の小数点表示も小数点を1桁だけ表示するように変更します。[.0」をクリックすれば小数点の桁数を減らすことができます。

作成したグラフは右の[…]を選択し、[ダウンロード]からPDFやPNGに変更できます。[グラフの公開]からURLに張り付けることもできます。

2020.12.31

M5StickCで環境センサーの実行

はじめに

M5StickCに環境センサー（ENVⅡ）を設定し、動作を確認します。

必要なもの
スケッチ
実行

1．必要なもの

M5StickCと環境センサーを使用します。環境センサーは温度、湿度、気圧、磁界センサを搭載しています。I²C通信でデータを取得します。ピン番号26がクロック、0番ピンがデータ用です。

ENVからENVⅡになり、温度/湿度センサーのDHT20がSHT30に変更されています。

番号

商品名

価格

参考販売店

M5StickC

1980円（セット）

1650円（本体のみ）

SwitchSience

ENV II Hat

836円

SwitchSience

2．スケッチ

arduino.exeを起動して、

[ファイル]⇒[スケッチ例]⇒[M5StickC]⇒[Hat]⇒[ENV]とスケッチを開くと

一つ前のENVのスケッチが開きます。今回はENVⅡを使用するのでそのまま使用できません。

ENVⅡから温度/湿度センサーがDHT12ではなくSHT30にかわっているので、新しくGitHubからサンプルを取得します。

以下のURLに行き、[Code]⇒[Download Zip]を実行するか、

git clone https://github.com/m5stack/M5-ProductExampleCodes をDOSプロンプトで実行します。

https://github.com/m5stack/M5-ProductExampleCodes

入手したフォルダM5-ProductExampleCodesからHatフォルダ→ENVⅡ_HATフォルダに移動するとENVⅡ_HAT.inoファイルがあるので、これをarduino.exeで開きます。

Adafruit_BMP280のライブラリが必要とスケッチの先頭に記載されています。

/*
note: need add library Adafruit_BMP280 from library manage
Github: https://github.com/adafruit/Adafruit_BMP280_Library
*/

ライブラリを追加するために[スケッチ]⇒[ライブラリをインクルード]⇒[ライブラリを管理]と選択し、ライブラリマネージャを開きます。

ライブラリマネージャを開いたらAdafruit_BMP280を検索しインストールを実行します。

関連ライブラリもインストールを行いますか？とメッセージが表示された場合は[Install all]を選択します。

3．実行

スケッチをM5StickCに書き込めば温度、湿度、気圧、磁界の向きが表示されました。

2020.12.29

M5StickC+PuppyCをスマートフォンから動かす

はじめに

前回、既存のスケッチ例をもとにPuppyCを動かしてみました。今回はさらにスケッチを書き換えてスマートフォンから動作できるようにします。

必要なもの
スケッチ
実行

1．必要なもの

M5StickCとPuppyCを用意ます。

番号

商品名

価格

参考販売店

M5StickC

1980円（セット）

1650円（本体のみ）

SwitchSience

PuppyC

2002円

SwitchSience

2．スケッチ

スマートフォンからM5StickCを呼び出す場合、M5StickCがサーバーに、スマートフォンがクライアントになります。

WiFiServer

M5StickCをサーバーに設定するにはWiFiServerクラスを使用します。

serverという名前でインスタンした例です。引数はポート番号です。HTTPで接続する場合はポート番号80が一般的であるため、80にしています。

(WebサーバのHTTPならポート番号は80、メール受信プロトコルPOP3ならポート番号110、メール送信はポート番号25と固定的に割り当てるのが一般的)

WiFiServer server(80);

1	WiFiServer server(80);

ポート番号を80ではなく1234などに設定(WiFiServer server(1234))したい場合、そのサーバーにアクセスするためにはwww.AAA.com:1234　のようにコロンとポート番号を記入する必要があります。

server.begin()

Webサーバーとして起動します。

server.available()

クライアント側からアクセスがあった場合に１を返します。この値を用いてクライアントとやり取りを行います。

WiFiClient

クライアントの処理を行うためのクラスです。サーバーにアクセス時に生成します。

  WiFiClient client = server.available();

1	WiFiClient client = server.available();

client.connected()

クライアントと接続されている状態かどうかを表します。(接続１：切断：0）

client.available()

クライアントが書き込んだデータのバイト数を返します。

client.read()

クライアントからの情報を１バイトリードします。

client.println()

ASCIIテキストとして可読文字をクライアントに送信します。

htmlについて

クライアント側に表示するhtmlについて説明します。

HTTP/1.1 200

200 はリクエストが成功した場合に返すレスポンスコードです。(204だとNo Content)

クライアントがサーバーにアクセスしたときに　GET HTTP/1.1を送信します。それに対する応答です。

form

formは入力・送信フォームを作成する際に使用します。
<form>～</form>の間にボタンを作成します。
フォームに入力されたデータは、送信ボタンを押すことで送信され、サーバー側で処理が行われます。

method

nethod属性はデータの送信方法（HTTPメソッド）を指定する際に指定します。 method属性の値として指定できるのは以下の２種類です。

get …… 送信内容がURLとして渡される（初期値）
post …… 本文（本体）として送信される

URLの後ろにクエスチョンマーク（ ? ）を付けて、それ以降続くにクエリとして送信先ページに渡されます。

今回はGET /? control=Forward(Back,Stop)となります。

input

formを構成するためのタグです。type属性の値に”submit”を設定すると送信ボタンを作成します。name属性とvalue属性に設定した値がmethod属性で指定した送信方法で送られます。

HTTP/1.1 302

302リダイレクトとは、URL転送処理のうち,1時的な転送に用いられる処理のことです。ウェブサーバーは、ページの新しい場所を即座にブラウザーに通知してリダイレクトする必要があります。

マルチタスク

サーバーとクライアントのやり取りと同時にPuppyCを動作させるため、マルチタスクを使用します。xTaskCreatePinnedToCore関数を使用します。

BaseType_t xTaskCreatePinnedToCore(
        TaskFunction_t pxTaskCode,          
        const char * const pcName,           
        const uint16_t usStackDepth,          
        void * const pvParameters,            
        UBaseType_t uxPriority,             
        TaskHandle_t * const pxCreatedTask,    
        const BaseType_t xCoreID               
    );

BaseType_t xTaskCreatePinnedToCore(

TaskFunction_t pxTaskCode,

const char * const pcName,

const uint16_t usStackDepth,

void * const pvParameters,

UBaseType_t uxPriority,

TaskHandle_t * const pxCreatedTask,

const BaseType_t xCoreID

);

pvTaskCode：loop()関数と並行して動作する関数名を記載します。
pcName：作成した関数のわかりやすい名前を記入します。
usStackDepth：バイト数として指定されたタスクスタックのサイズ。サイズは1024～8192で指定できます。
pvParameters：作成した関数の引数を指定します。ない場合はNULLを指定します。
uxPriority：実行する優先度を指定します。
pvCreatedTask：作成した関数を参照できるハンドラを返すために使用されます。変数はTaskHandle_t型で定義します。
xCoreID：値がtskNO_AFFINITYの場合、作成されたタスクはどのCPUにも固定されず、スケジューラーは使用可能な任意のコアで実行できます。値0または1は、CPUのインデックス番号を示します。M5StickCはドュアルコアなので、0、1が設定可能です。

スケッチ例のPuppyCを変更したスケッチは以下になります。

3.実行

スケッチをM5StickCに書き込みます。スマホでネットワークを確認すると、ssidで設定した名前（ここではm5stickcに設定）が表示されます。

クリックしてアクセスします。パスワードはpassで指定した内容です。

次にブラウザを起動して　const IPAddress ip　で設定したipアドレスを入力します。

ブラウザに表示されている「Forward」を押すと前進、「Stop」で停止、「Back」で後ろに下がります。

12 3 4 5

Arduino

M5StickCで計測した温度をGoogleスプレッドで可視化(グラフ作成)

1．必要なもの

2．Googleスプレッドシートの設定

3．スケッチ例

4．実行

M5StickCで環境センサーの実行

はじめに

1．必要なもの

2．スケッチ

3．実行

M5StickC+PuppyCをスマートフォンから動かす

はじめに

1．必要なもの

2．スケッチ

WiFiServer

server.begin()

server.available()

WiFiClient

client.connected()

client.available()

client.read()

client.println()

htmlについて

HTTP/1.1 200

form

method

input

HTTP/1.1 302

マルチタスク

3.実行

最近の投稿

アーカイブ

カテゴリー

メタ情報