はじめに

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に張り付けることもできます。

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

1．必要なもの

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

3．スケッチ例

4．実行

コメントを残すコメントをキャンセル

最近の投稿

アーカイブ

カテゴリー

メタ情報

1．必要なもの

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

3．スケッチ例

4．実行

SNSでもご購読できます。

コメントを残す コメントをキャンセル

最近の投稿

アーカイブ

カテゴリー

メタ情報

コメントを残すコメントをキャンセル