Giardino Familiare – ページ 2 – プログラマー×助産師がオープンガーデンで開業するまでの道のり

読んだ本

2021年10月26日

タグ: MOUSE, SF, イタリアオペラ, ジョージ・オーウェル, つばめ

季節のせい？読書欲

本日２本目。アイキャッチ画像、カフェ飯ばかり […]

M5 / プログラミング

2021年10月9日

タグ: IoT, M5Atom, プログラミング

M5AtomでENVⅡHatを使う

こんにちは、Lineaです　前回で水分監視 […]

こんにちは、Lineaです　

前回で水分監視システムの制御をM5Atomに替えました。
今回は測定できるものが水分量だけなのも寂しいので、余っていたENVⅡHatを追加して気温や湿度の計測を追加しました。
ENVⅡHATはそもそもM5StickC用のセンサーモジュールなのですが、アダプターを使うことでM5Atomでも使用することができます。今回は使ったアダプターやM5Atomで使用するポイントも解説したいと思います。

ENVⅡHAT

ENVⅡHATはM5StickCに直接接続できる環境センサーモジュールです。内部には温湿度、地磁気、気圧センサーの3つのセンサーが内蔵されています。それぞれのセンサーはI2C接続でまとまっていますが、センサー自体は別々なので個別に制御する必要があります。

ENVⅡHAT
https://www.switch-science.com/catalog/6559/

写真のようにM5StickCのピンソケットに直接挿さるようになっているのでM5Atomには直接接続することはできません。M5Atomでてっとり早く接続するには以下に含まれるアダプターを使います。

Atom Mate
https://www.switch-science.com/catalog/6532/

M5Atom底部のピンソケットからM5StickCのピンソケットと同じ配置に変換します。製品ページの注意にも書いてありますが、M5Atom自体がM5StickCとピン番号が異なるのでプログラム側でピン番号は置き換えて使う必要があります。
アダプターの裏にピン配置が書かれているのでそれを元にピンを指定します。HATのサンプルコードなどWebにあるコードはM5StickCのピンになっていることがほとんどなので参考にする場合は注意しましょう。

このようなM5StickC用の拡張センサはHatシリーズとして他にも色々用意されています。接続できればM5Atomで使えるのは同じようなのでアダプタを持っておくと使い回せて便利ですね。

温湿度センサーのプログラム

ENVⅡHATは内部に温湿度、地磁気、気圧の3つのセンサーがありますが、今回は温湿度センサーのみを使います。
温湿度センサーからの情報取得はこちらの公式のサンプルの一部を参考にしています。

公式サンプルコード（GitHub）
https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/ENVII_HAT

この中のSHT3X.h/cppに温湿度センサーの情報取得が書かれていますが、そのままだとM5Atomのピンが設定できないので少し変更しました。
以下のようにI2C接続で使用するピンを設定できるコンストラクタを追加しています。

class SHT3X{
public:
  SHT3X(uint8_t address=0x44); //元のコンストラクタ
  SHT3X(uint8_t scl, uint8_t sda,uint8_t address=0x44);//追加コンストラクタ
//略
}

//元のコンストラクタ
SHT3X::SHT3X(uint8_t address)
{
  Wire.begin();
  _address=address;
}
//追加コンストラクタ
SHT3X::SHT3X(uint8_t scl, uint8_t sda,uint8_t address)
{
  Wire.begin(sda,scl);
  _address=address;
}

メインの計測プログラムでセンサーの値の取得には上記で変更したSHT3X.h/.cppをインクルードします。
計測のコードは以下のようになります。

#include "SHT3X.h"
//I2cピン
const uint8_t kI2CSclPin = 22; 
const uint8_t kI2CSdaPin = 19;
//センサーオブジェクト
SHT3X sht3x = SHT3X(kI2CSclPin,kI2CSdaPin); 

//計測関数
void measure(){
  //温湿度計測 get()で取得　成功すると0が返る
  if(sht3x.get() == 0){
    //オブジェクトに書き込まれているので読み取る
    Serial.printf("temp:%.2f \n",sht3x.cTemp);
    Serial.printf("humidty:%.2f \n",sht3x.humidity);
  }
}

SHT3X型のオブジェクトを作成し、get関数で値を取得します。取得した値はオブジェクトの変数に書き込まれます。
あとは変数の値を読んで表示やデータ送信などデータ処理に使うだけです。
注意点としてはピンの設定を忘れないことです。I2CにはSCL,SDAの2ピンを使いますが22,19ピンが対応しています。

おまけ

アダプターにピン拡張基板がついてきたのですが、足の長いピンソケットと組み合わせてアダプターと同時に使えるようにしてみました。アダプターだけだとAtom本体のピンソケットが幾つか使えなくなってしまうのですが、これで全部のピンを生かせます。

問題は厚みがすごいことになって要塞のようになってしまうことですwww。Atomとは言えませんねこれはw

ガーデニング / レビュー

2021年9月30日

タグ: CHILL OUT, LEAN BODY, オクラ, ガーデニング, ヨガ

リラックスすること ①

こんにちは、まりあんぬです。夏の暑さはほぼ […]

M5 / プログラミング

2021年9月18日

タグ: IoT, M5Atom, プログラミング

M5Atomを買ってみた

こんにちはLineaです。　また日が空いてし […]

こんにちはLineaです。　
また日が空いてしまいました。書くネタは溜まってるんですが書く一歩が中々重い、これが筆不精ってやつでしょうか。

今回のネタはM5シリーズの一つM5Atomを買って使ってみた話になります。

M5Atomは以前紹介したM5StickCよりも更に小型で安価なマイコンボードです。メインのチップはM5StickCと同じなので基礎性能は同じなのですが液晶ディスプレイなど内蔵デバイスが省かれていてよりIoTデバイスに特化しています。

今回は水分監視システムの制御をM5StickCからM5Atomで置き換えました。定期的にデータを計測して送信することがメインなのでディスプレイは必要ないですのでM5Atom向きですからね

それでは解説していきます。

M5Atomについて

M5Atomは先程述べたとおりM5シリーズの一つでIoTデバイス向けのマイコンボードです。
特徴としては、表示やボタンといった人が操作する部分は必要最小限になっている分、小型で安価なところです。
内蔵するチップはESP32と他のM5シリーズと同じチップを搭載しているため、処理性能やWifi,Bluetoothといったネットワーク接続が可能な点は同じです。GROVE互換の端子や接続ピンを持っているのも共通です。
M5Atomには搭載するフルカラーLEDが一つのLite版と、5＊5のマトリックスLEDになっているMatrixの2種類があります。自分が購入したのはLite版ですが、1300円ほどで販売されています。

M5Atom Lite
https://ssci.to/6262

他のM5シリーズと同様に開発はUIFlowやArduinoIDEといった開発環境が使えます。チップも同じなのでライブラリやピン配置は変える必要がありますがコードもある程度使い回すことができます。

M5StickCと並べてみました。半分ぐらいのサイズですね。
裏にはピン配置が書かれています。M5StickCのものと見比べるとGROVEのピンが結構異なるのでちゃんと確認してプログラムを書く必要がありますね。
M5Atomは汎用端子が裏面に出ているのでジャンパピンなどを刺してやればそのままブレッドボードに挿すこともできます。

水分監視システムのプログラム：M5Atom版

それでは以前M5StickC向けにC++で作ったプログラムをM5Atomで動くように書き換えます。

前提として、M5Atomには専用のライブラリがあるのでそちらを使用します。ここらへんは内蔵しているデバイスが違うので他機種で使い回せないのは仕方ないですね。ライブラリのリンクは以下ですが、ArduinoIDEなど各エディタで「M5Atom」ライブラリで検索したほうが早いと思います。

M5Atomライブラリー
https://github.com/m5stack/M5Atom

また、上記のM5Atomのライブラリでは内蔵LEDの制御にFastLEDというライブラリを使用しています。そのため、動作にはFastLEDライブラリもインストールする必要があります。

FastLEDライブラリー
https://github.com/FastLED/FastLED

作成したプログラムが以下になります。

#include <M5Atom.h>
#include <WiFi.h>
#include <Ambient.h>

//define
//スリープ時間計算マクロ関数
#define SLEEP_MIN(min) min*60000000ULL
//色定義　GRBの順番に注意
#define LED_PINK 0x55FFAA
#define LED_GREEN 0xFF0022
#define LED_BLUE 0x0022FF
#define LED_OFF 0x000000
//pin定義
const uint8_t kEarthPin = 32;
//スリープ時間
const uint sleepMin = 30; //30分
//wifi情報
const char wifi_ssid[32]="SSID";
const char wifi_key[64]="アクセスポイントのキー";
//ambient情報
const unsigned int channelId = 0; // AmbientのチャネルID
const char* writeKey = "ライトキー";
//static変数
WiFiClient client;
Ambient ambient;

//functions
//測定
void measureEarth(){

  //5回計測した平均を送る
  uint16_t earthVal = 0;
  int measureNum = 5;
  for(int i=0; i<measureNum; i++)
  {
    M5.dis.fillpix(LED_GREEN);    //LED点灯
    delay(200);
    //水分センサは濡れているほうが値が低くなるので反転させる
    earthVal += 1024 - analogRead(kEarthPin);
    M5.dis.fillpix(LED_OFF);    //LEDオフ
    delay(300);
  }
  earthVal/= measureNum;
  ambient.set(1,earthVal);

  //Ambient送信
  ambient.send();
  
}

//カウントダウン
void countDown(const char *dispTxt,const int sec)
{
  int count = sec;
  while (count >= 0)
  {
    count--;
    M5.dis.fillpix(LED_PINK);    //LEDオン
    //1秒待つ
    delay(500);
    M5.dis.fillpix(LED_OFF);    //LEDオフ
    delay(500);
  }
}

//setup関数　ディープスリープ復帰時もここから再開する
void setup() {
  //M5スタート
  M5.begin();

  //水分センサのピンをセットアップ
  pinMode(kEarthPin,ANALOG);

  //アナログ値の解像度を1024段階に設定
  analogSetWidth(10); //10bit(1024)

  // WiFi接続
  Serial.printf("Connecting to %s ", wifi_ssid);
  WiFi.begin(wifi_ssid, wifi_key);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("CONNECTED");

  //Ambient setup
  ambient.begin(channelId, writeKey, &client); // チャネルIDとライトキーを指定してAmbientの初期化
}

void loop() {
  //計測カウントダウン
  countDown("measure",5);

  //計測
  measureEarth();
  
  //wait
  delay(5000);

  //スリープカウントダウン
  countDown("sleep",5);

  //スリープ
  Serial.println("Enter sleep");
  esp_sleep_enable_timer_wakeup(SLEEP_MIN(sleepMin));
  esp_deep_sleep_start();
}

主な変更点は液晶ディスプレイの表示をLEDの点灯に切り替えた点です。LEDはフルカラーLEDですのでfillpix()関数で色を指定して変更することができます。このとき色の指定は16進数で指定しますが、色の並びがGRBになっているので注意が必要です。

水分センサはM5AtomのGROVE端子に接続する想定ですが、M5StickCとピンが異なるので書き換えるひつようがありました。

その他のWifi接続や計測、Ambientへの送信についてはM5StickC用のコードから変えていません。スリープの開始関数もESP32の関数を呼んでいるので共通して使えます。

終わり

動作自体は大して変わらないので割愛します。
M5Atom自体が小型なおかげでケース内での取り回しが良くなりました。ステータス表示ぐらいはLEDの色で表現できるのでIoTデバイスを作るにはこちらのほうが確かに向いていますね。
お役目が余ったM5StickCの方でまた別でお役立ちデバイス？を作ったのでそのうち紹介したいと思います。

それではまた！

ガーデニング / 母乳・育児のこと

2021年8月29日

タグ: アレルギーポータル, エコロジー, ガーデニング, コンポスト, 世界母乳育児週間

夏のコンポスト大作戦

こんにちは。まりあんぬです。トップ画像は今日 […]

M5 / プログラミング

2021年8月29日

タグ: IoT, 電子工作

土壌水分センサをアップグレードした話

こんにちはLineaです。　今回は溜まって […]

WordPress / プログラミング

2021年8月27日

タグ: ガーデニング, プログラミング

AmbientのデータをJavaScript(Vue)でWordPressに表示させる

こんにちは、Lineaです。前回でM5St […]

こんにちは、Lineaです。

前回でM5Stickと土壌水分センサを使ったガーデニング水やりセンサが一応の完成をみて運用し始めました。

M5StickCでガーデニングの水やりセンサを作る ~その4 【ケースと電源編】

しばらく使ってみていて、感じたことは様子を見るために毎回Ambientのページにログインして閲覧しないといけない点です。ログインが必要なので手間を感じると同時に、他の人に様子を共有することも難しいです。
特に実際にガーデニングでいじるのは彼女の方なので簡単にチェックできるようにする必要がありました。

Ambientにも公開チャンネルというログイン不要で公開する機能はあるのですが、折角なので自分でこのサイトにグラフ表示してみようというのが今回の目的です。
WordPressで独自にコンテンツを表示するのにはJavaScriptを使う必要があるのですが、勉強も兼ねて最近流行りっぽいフレームワークのVueを使ってみました。

完成したグラフはIoTの部屋という固定ページを作成して、表示してみました。良ければ見てみてください。

IoTの部屋

Vue(JS)コード

VueはJavaScriptのフレームワークです。ユーザー操作やデータ変更などで動的に表示が変化するコンテンツを簡単に作ることができます。特徴としてはテンプレート構文によって簡単にHTMLの要素とバインド（紐付け）ができることと、コンポーネントによって機能、役割の分割が行いやすいことです。
小さい要素から大きくて複雑なアプリレベルまで拡張や分割がしやすいのかなと感じました。とはいえ自分は触り始めたばかりなのでまだまだよく分かっていないですが…
とりあえず、HTML操作が簡単にできるというだけでも使う価値はあったかなと思います。公式のドキュメントも日本語化されているのもありがたかったです。

はじめに | Vue.js
https://v3.ja.vuejs.org/guide/introduction.html

それでは今回作成したJavaScriptコードです

console.log('ambient chart');

function  convertDate(date){
  return{year:date.getFullYear(),month:date.getMonth(),day:date.getDate()};
}

const app = Vue.createApp({
  data() {
    return{
    ambient:[{value:0,label:'ambientデータ'}],
    listShow:false,
    am:null,
    selectDate:{year:2021,month:1,day:1},
    }
  },
  computed:{
    dateStr(){
      try{
      var ld = this.selectDate;
      return ld.year+ "年" + (ld.month+1) + "月" + ld.day + "日";
      }
      catch{
        return "Error:" + ld;
      }
    },
  },
  methods:{
    onGetLastData(lastData){
      if(lastData.status == 200){
        var date = new Date();
        date.setTime(Date.parse(lastData.data[0].created));
        this.selectDate = convertDate(date);
        this.am.read({date:date.toUTCString()},this.onGetAmbient);
      }
    },
    onGetAmbient(response){
      this.ambient.splice(0);
      console.log('try get ambient data');
      if(response.status == 200){
        //新しい方が先頭になってるので反転
        response.data.reverse().forEach((element) => {
          var dataDate = new Date();
          dataDate.setTime(Date.parse(element.created));
          let labelDate = dataDate.getHours()+':'+dataDate.getMinutes();
          this.ambient.push({value:element.d1, label:labelDate, date:element.created});
        });
        this.$refs.chartComp.createChart();
      }
      else{
        this.ambient.push('cannnot get ambient data');
      }
    },
    onClickDateChange(dir){
      if(this.selectDate != null){
        var cDate = this.selectDate; 
        var date = new Date();
        date.setFullYear(cDate.year);
        date.setMonth(cDate.month);
        date.setDate(cDate.day+dir);
        this.selectDate = convertDate(date);
        this.am.read({date:date.toUTCString()},this.onGetAmbient);
      }
    },
  },
  mounted(){
    this.am = new Ambient('チャンネルID', 'ライトキー', 'リードキー');
    this.am.read({n:1}, this.onGetLastData);
  },
  template:`
    <div v-on:click="listShow = !listShow">
        Ambient取得
        <ul v-if="listShow">
        <li v-for="data in ambient">
            Ambient:{{data}}
        </li>
        </ul>
    </div>
    <div>
        <button v-on:click="onClickDateChange(-1)" style="display:inline;">◀</button>
        <h2 style="display: inline; padding-left:4px; padding-right:4px;">{{dateStr}}のグラフ</h2>
        <button v-on:click="onClickDateChange(1)" style="display:inline;">▶</button>
    </div>
    <chart-view ref="chartComp" :chart-data="ambient"></chart-view>
  `
});

app.component('chart-view', {
  data() {
    return {
      count: 0,
    }
  },
  props: ["chartData","options"],
  computed:{
    chartValues:function(){
　　　//グラフ表示用のデータ形式に整形する
      return this.chartData.map(item => { return {x:item.date, y:item.value}});
    },
  },
  methods:{
    createChart() {
      console.log(this.chartData);
      var ctx = this.$refs.my_chart.getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'line',//線グラフ指定
        data: {
          datasets: [{ //データの指定
              label: '水分量', //データ系列のラベル
              data: this.chartValues //データ　{x:hoge, y:huga}のオブジェクト配列で渡す
          }]
        },
        options:{
          scales: {
            xAxes: [{
              type: 'time', //X軸を時間形式に指定する
              time: { //時間の扱い指定
                  unit: 'hour', //表示区切り時間の単位
                  displayFormats: {
                    hour: 'HH:mm' //時間表示の形式指定
                  },
              }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true //軸の下限を0にする
                }
            }]
          },
          tooltips:{ //値をマウスオーバーした際のツールチップ
            callbacks:{ //コールバック関数を定義して表示を変更させる
              title:function(tooltipItem, data){
                return dayjs(tooltipItem[0].xLabel).format('YYYY年M月D日 HH:mm');
              },
            }
          }
        } 
      });
    },
  },
  template: `
    <canvas ref="my_chart"></canvas>
    <button v-on:click="count++">
      You clicked me {{ count }} times.
    </button>`
});

app.mount('#ambient-chart');

HTMLのほうは最終的にWordPressの方に書くのですが、テスト用の対応したHTMLを作っておくと確認が楽です。以下のものを作りました。

<!DOCTYPE html>
<head title="Test">
</head>
<body>
    <div>
        テスト表示
    </div>
    <div id="ambient-chart">
    </div>
</body>

<script src="https://unpkg.com/vue@3.2.6/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/ambient-lib@1.0.3/lib/ambient-lib.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
<script src="../js/ambient-chart.js"></script>

全部を説明すると大変なのでポイントと思ったところをいくつか紹介します。

Vueの使い方

Vueでは基本となるアプリに、パーツとなるコンポーネントを追加して作ります。最後にアプリをHTMLの要素にマウントすることでページ上での描画位置を指定します。ここではHTMLのidに紐づけてマウントしています。
マウント時にはアプリ内のmounted()イベントが呼ばれます。ページ表示時のスタートイベントとして使っています。

const app = Vue.createApp({
  data() {
    //メンバ変数
  },
  computed:{
    //メンバ変数のように使えるが処理が走る値 C#でいうプロパティ
  },
  methods:{
    //メンバ関数
  },
  mounted(){
    //アプリがマウントされた際に呼ばれるイベント関数
  },
  template:
    //挿入されるHTML
});

//コンポーネントの追加
app.component('chart-view', {
  data() {
  },
  props: //コンポーネントがデータを受け取るための変数
  computed:{
  },
  methods:{
  },
  template: 
});
//アプリをマウント id=ambient-chartのHTML要素内に描画される
app.mount('#ambient-chart');

アプリやコンポーネントには用途に応じた値や関数を定義できます。クラスのようなものと考えると理解しやすいかと思います。
中でもtemplateは自分が追加された箇所に挿入するHTMLを書くことができる点で特殊です。ですが、同じファイルに表示部分を書くことができるので一々HTML側に移動する手間がなくなれると便利に感じました。

表示周りではdataやcomputedのような値をHTML上でバインドさせるために、以下のようにテンプレート（HTML)上で{{ }}で表示したい変数名を囲みます。これだけで勝手に値が紐付いて表示されます。
また、v-on属性ではボタンイベントなど入力に紐付いた処理をバインドできます。面白い点として、バインドの文字列で直接JavaScript式で処理を書ける点です。短い記述で表示を紐付けられるので便利ですね

data() {
    return {
      count: 0, //ボタンクリック回数の変数
    }
  },
template: `
    <button v-on:click="count++"> //v-on内でJS式でカウンタ変数を更新している
      You clicked me {{ count }} times. //{{ }}で囲った変数がHTMLに描画される
    </button>`

Ambientデータの読み込み

AmbientはJavaScript用のライブラリがあるのでそれを読み込む必要があります。以下のように読み込みますが依存するaxiosライブラリも読み込む必要があります。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/ambient-lib@1.0.3/lib/ambient-lib.js"></script>

Ambientからデータを取得するには以下のようにAmbientオブジェクトを作成します。作成時にチャンネルIDとキーを引数に渡しますが、読み込むだけの場合ライトキーは空白でも問題ありませんでした。
取得はread()で行います。引数の渡し方次第で取得範囲を様々に指定できます。第２引数は読み込み時のコールバック関数を指定できます。無名関数も使えるのですがVueでのthisの挙動と相性が悪かったので別途関数を作っています。
取得したデータはコールバック関数の引数にオブジェクトとして渡されます。

    this.am = new Ambient('チャンネルID', 'ライトキー', 'リードキー');
    this.am.read({n:1}, this.onGetLastData); //最新１個を読み込む
    this.am.read({date:Date().toUTCString()},this.onGetAmbient); //Date型のUTC文字列で指定した日のデータを取得できる

グラフ表示

グラフの表示にはChart.jsライブラリを使用しています。VueでChart.jsを使いやすくしたライブラリもあるのですが、今回使ったVue3には対応していなかったので素のChart.jsを使用しています。

Chart.jsで日付データを横軸にプロットするためには日付ライブラリを含んだバージョンを読み込む必要がありました。bundleが付くものが対応したバージョンになります。

//bundleつきでないと日付に合わせて表示できない
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>

グラフの表示にはChartオブジェクトを作成します。このとき表示コンテキストの取得のためにHTML要素を直接取得する必要があります。$refsを使用するとHTMLでref=を指定している要素を取得できます。
Chartオブジェクトは作成時に表示するデータや形式を指定します。データだけでなく軸の設定や表示書式まで細かく設定できますが、そのおかげで行数は増えがちです…
細かい指定はコード全文の方を参照してください

    createChart() {
　　　//$refsで描画するHTML要素を取得する
      var ctx = this.$refs.my_chart.getContext('2d');
     //コンテキストを指定してグラフ作成
      var myChart = new Chart(ctx, {
　　　　//ここにデータや表示の指定を書く
      });
    },

WordPressページでの表示

JavaScriptのほうが準備できたらいよいよWordPressでの表示適用です。と言っても意外とこれが面倒でした。
WordPressのページ上で表示するにはjsファイルとHTMLファイルをアップロードして終わりというわけには行きません。以下の準備が必要になります。

子テーマの準備
phpでのライブラリ、jsファイル読み込み処理

まず、WordPressのfunctions.phpを触ることになるのですが、これはテーマのフォルダ内に存在します。テーマ本体でfunctions.phpを触ると何かあった際に致命的な表示の乱れや、最悪ページが表示されなくなる可能性があります。そこで、編集に失敗しても本テーマに影響しないように、テーマを継承した子テーマを用意したほうが良いでしょう。

子テーマの作り方はまた長くなるのでここでは割愛します（余裕があれば記事にしたいと思います）
子テーマが用意できたら子テーマのfunctions.php内に必要なライブラリの登録処理を追加します。

/**
 * IOT部屋だけスクリプト読ませる
 */
function load_scripts_ambient() {
  if ( is_page( 'iot_room' ) ){
  wp_enqueue_script('vue','https://unpkg.com/vue@3.2.6/dist/vue.global.prod.js');
	wp_enqueue_script('axios','https://unpkg.com/axios/dist/axios.min.js');
  wp_enqueue_script('ambient','https://unpkg.com/ambient-lib@1.0.3/lib/ambient-lib.js');
  wp_enqueue_script('chartJs','https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js');
  wp_enqueue_script('dayjs','https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.6/dayjs.min.js');
  wp_enqueue_script( 'ambient-chart', get_stylesheet_directory_uri() . '/js/ambient-chart.js',array('vue'),false,true);
  }
}
add_action( 'wp_enqueue_scripts', 'load_scripts_ambient' );

このとき特定のページでのみグラフを表示するので、そのページでのみライブラリを読み込むよう分岐しています。

ここまでくれば後は最後！表示したいページでカスタムHTMLでアプリのマウント先の要素を書いて追加するだけです。

というわけでサイトに自作JavaScriptでコンテンツを表示できました。今回は機能優先でCSSでの見た目などは整えていないのですが、今後追加していこうと思います。

他にも色々ネタが溜まっているのでなるべく早く書いていきたいです。
それではまた！

M5 / プログラミング

2021年8月15日

タグ: M5 StickC, ガーデニング, プログラミング

M5StickCでガーデニングの水やりセンサを作る ~その4 【ケースと電源編】

こんにちは、Lineaです　前回はスリープ […]

こんにちは、Lineaです　

前回はスリープを使用しての長時間計測のプログラムを作成しました。システムとしては完成したのですが、M5Stickやセンサをむき出しで外で使うのはあまりにも心配なので、風雨対策のケースを自作してみました。
また、さらに動作時間を延ばすためにモバイルバッテリーなどの外部電源を試してみてわかったことも書いていきます。

前回の記事はこちらです.

M5StickCでガーデニングの水やりセンサを作る ~その3 【スリープで長時間稼働】

ケース作成

屋外用のケーズですが、あまりコストをかけずに作ることを目的とします。そこでホームセンターで売っていたジップロックのタッパーを使います。タッパーの側面に水分センサのコネクタが通るサイズの穴（2㎝四方ほど）をカッターで開けます。

ホームセンターで買ったゴムシートを穴のサイズより一まわり大きくカットします。ゴムシートの中央にカッターで十字に切り込みを入れます。この切込みでケーブルを通します。ゴムシートをタッパーの穴を塞ぐように貼れば完成です

水分センサーの方は100円ショップなどで売られているチャック式の小袋を使います。センサの電極を袋の底を破って突き出させます。ケーブル部分はチャックを閉じれないので養生テープで覆って密封しました。

タッパーにM5StickCとモバイルバッテリーを入れてみました。スティックタイプのモバイルバッテリーならM5StickCと一緒に入ります。USBケーブルは短くて柔らかいものを使うと収納しやすいです。
早速ベランダーのポットに設置してみました。自作DIYなので完全な防水ではないですが、ベランダなど屋根があるところでなら使用していけそうです。2,3日外で動かしてみましたが問題ありませんでした。

電源まわり

内前回の検証では内蔵バッテリーでは7時間程度の稼働時間だったので、1日中放置しておくことができませんでした。そこで手持ちのモバイルバッテリーをUSB経由でつないで給電しながら放置してみました。
その結果ですが8時間程度と内蔵バッテリーとあまり変わらない稼働時間でした。原因を探るためにバッテリーとUSBの電圧をAmbientへのデータ送信に含めて再度試してみました。

d3=M5バッテリー電圧　d4=M5バッテリー電流
d5=USB電圧　d6=USB電流

上のグラフを見るとバッテリー電圧が約4.2VになるまではUSBから電流が流れていますが、その後USB電流が0になっています。モバイルバッテリーからの給電によってM5StickC自体の充電が終わると、消費電力が少なくなることでモバイルバッテリーの給電が止まってしまうようです。

調べてみると、ほとんどのモバイルバッテリーは消費電力が少ない場合には自動で電源を切る機能が備わっているようです。スマホの充電のように普段の用途なら無駄な消耗や過放電を防げてうれしい機能ですが今回のような電子工作の電源としては扱いにくいですね。

自動オフ機能のない5v電源として乾電池と昇圧コンバーターで自作しようかとも思ったのですが、100円ショップで乾電池USBチャージャーが使えると聞いたので探して購入しました。ちなみに何店か回りましたがセリアでしか売ってませんでした。他の100円ショップだともうモバイルバッテリーにとってかわられてました（100円じゃないけど）。

M5StickCに接続して使ってみました。電池はアルカリ乾電池とNi-MH充電池の両方を試してみました。どちらも長時間給電し続けることが可能でした。給電できた時間は以下の通りでした（グラフは期間が長いので割愛）

電池の種類	給電時間
Ni-MH充電池	24時間
アルカリ電池	34時間

乾電池のほうが動作時間が長いのが意外でした。充電池は1本あたりの電圧が低いので動作電圧が維持できなくなるまでが早いのかなと推測してます。とはいえ充電池でも1日持つのでランニングコストを考えると充電池で運用しようかなと思います。

ひとまず屋外設置の対策ができたので一旦これで完成としてしばらく運用してみます。水分量の変化の関係性が分かってきたら水やりの通知なども手を出してみたいですね。

それではまた！

M5 / プログラミング

2021年8月8日

タグ: IoT, M5 StickC, プログラミング

M5StickCでガーデニングの水やりセンサを作る ~その3 【スリープで長時間稼働】

こんにちは、Lineaです　前回は計測した […]

こんにちは、Lineaです　

前回は計測した水分量データをAmbientというIoTログサービスに送信してデータの可視化まで行いました。ですが、課題としてM5StickCの内蔵バッテリーで常時ネットワーク接続して稼働させ続けると1時間弱しか保ちませんでした。
今回はM5StickCのスリープ機能を使って解決してみようと思います。計測してデータ送信⇒15分スリープ⇒計測してデータ送信…と繰り返す動作を作っていきます。
スリープ機能はUIFlowでは使用できなかったので、今回からArduino環境（C/C++)でつくっていきます

前回の記事はこちらです

M5StickCでガーデニングの水やりセンサを作る ~その2 【Ambientでデータ保存編】

M5StickCのスリープ機能

M5StickC（に内蔵されるマイコン）には2段階のスリープがあります。

ディープスリープ
ライトスリープ

どちらも復帰にはタイマーやボタンの入力が使えます。一定時間後やボタンが押されたらといった条件で復帰させることができます。
2つのスリープの差は電力以外に復帰時の挙動に大きな違いがあります。

ディープスリープ

名前の通り機能をほぼ停止させることで電力消費を大きく抑えます。
復帰時にはプログラムを最初から実行し直すことになります。また、データもスローメモリという特殊領域に保存しておかないと維持されないです。スリープから復帰したかどうかを判別する事はできるのでプログラムの先頭でスリープ復帰時に処理を切り替える事はできます。

ライトスリープ

ディープスリープより色々停止しないので消費電力は少し大きくなります。その代わりスリープの復帰時に継続してプログラムが動作します。変数なども普通に維持された状態で復帰します。どちらかというとこっちの方が「スリープ」っぽい動作ですね。

今回は実行する機能としては数十分おきに測って送信するだけなので、状態を維持する必要がないのでディープスリープを使います。

プログラミング

最初にも書きましたがUIFlowではスリープが使えないのでC言語でプログラミングします。
M5StickCはArduino環境でC言語でプログラミングできます。ArduinoIDEでもプログラミングできますが、自分はVSCode+PlatformIOを使用しています。そのうちPlatformIOでのスタート手順も書かないとですね。

今回作成したプログラムがこちらです。

#include <M5StickCPlus.h>
#include <WiFi.h>
#include <Ambient.h>

//define
//pin定義
const uint8_t kEarthPin = 33;
const uint8_t kEarthDigiPin = 32;
//スリープ時間
const uint sleepMin = 15; //15分
//wifi情報
const char wifi_ssid[32]="SSID";
const char wifi_key[64]="アクセスポイントのキー";
//ambient情報
const unsigned int channelId = 0; // AmbientのチャネルID
const char* writeKey = "ライトキー"
//static変数
WiFiClient client;
Ambient ambient;

//functions
//測定
void measureEarth(){
  //濡れているほうが値が低くなるので反転させる
  uint16_t earthVal = 1024 - analogRead(kEarthPin);
  int earthDigi = digitalRead(kEarthDigiPin);

  //表示
  M5.lcd.fillScreen(BLACK);//クリア
  M5.Lcd.setTextColor(WHITE, BLACK);
  int32_t drawX=4 ,drawY = 16;
  char valStr[32];
  M5.lcd.drawString("Earth Sensor",drawX,drawY);
  drawY += 24;
  sprintf(valStr,"value : %d",earthVal);
  M5.lcd.drawString(valStr,drawX,drawY);
  drawY += 24;
  M5.lcd.fillRect(drawX,drawY,(earthVal/1024.0)*(M5.Lcd.width()-32),16,BLUE);
  drawY += 24;
  sprintf(valStr,"wet? : %d",earthDigi);
  M5.lcd.drawString(valStr,drawX,drawY);
  drawY += 24;
  sprintf(valStr,"wifi? : %d",WiFi.status());
  M5.lcd.drawString(valStr,drawX,drawY);

  //Ambient送信
  ambient.set(1,earthVal);
  ambient.set(2,earthDigi);
  ambient.send();
  
}

//カウントダウン
void countDown(const char *dispTxt,const int sec)
{
  int count = sec;
  char countStr[16];
  M5.Lcd.setTextColor(WHITE, GREEN);
  M5.Lcd.fillRect(24,24,M5.Lcd.width()-48,M5.Lcd.height()-48,GREEN);
  while (count >= 0)
  {
    sprintf(countStr,"%s %ds...",dispTxt,count);
    M5.lcd.drawCentreString(countStr,M5.Lcd.width()/2,M5.Lcd.height()/2,2);
    count--;
    //1秒待つ
    delay(1000);
  }
}

//setup関数　ディープスリープ復帰時もここから再開する
void setup() {
  //M5スタート
  M5.begin();
  M5.Lcd.setRotation(1);
  // 画面をつける（スリープ復帰用）
  M5.Axp.ScreenBreath(10);

  //水分センサのピンをセットアップ
  pinMode(kEarthPin,ANALOG);
  pinMode(kEarthDigiPin,INPUT);

  //アナログ値の解像度を1024段階に設定
  analogSetWidth(10); //10bit(1024)

  //文字サイズを少し大きくしておく
  M5.lcd.setTextFont(2);

  // WiFi接続
  Serial.printf("Connecting to %s ", wifi_ssid);
  WiFi.begin(wifi_ssid, wifi_key);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("CONNECTED");

  //Ambient setup
  ambient.begin(channelId, writeKey, &client); // チャネルIDとライトキーを指定してAmbientの初期化
}

void loop() {
  //計測カウントダウン
  countDown("measure",5);

  //計測
  measureEarth();
  
  //wait
  delay(5000);

  //スリープカウントダウン
  countDown("sleep",5);

  //スリープ
  Serial.println("Enter sleep");
  // 画面を消す
  M5.Axp.ScreenBreath(0);
  esp_sleep_enable_timer_wakeup(SLEEP_MIN(sleepMin));
  esp_deep_sleep_start();
}

重要なところをいくつか解説します

スリープ処理

//スリープ時間
const uint sleepMin = 15; //15分

//setup関数　ディープスリープ復帰時もここから再開する
void setup() {
  //中略...
  // 画面をつける（スリープ復帰用）
  M5.Axp.ScreenBreath(10);
}

void loop() {
  //計測
  measureEarth();
　//中略...

  //スリープ
  Serial.println("Enter sleep");
  // 画面を消す　スリープに入るだけでは画面は点いたままになる
  M5.Axp.ScreenBreath(0);
  //スリープ復帰方法を設定　タイマー版
  esp_sleep_enable_timer_wakeup(SLEEP_MIN(sleepMin));
　//スリープ開始
  esp_deep_sleep_start();
}

スリープはesp_sleep_enable_xxx_wakeup()で復帰方法を指定後にesp_deep_sleep_start()で開始します。xxxの部分は復帰方法毎に関数が分かれています。今回は復帰方法にタイマーを使用します。タイマーの時間はマイクロ秒で指定するので注意が必要です。SLEEP_MIN()など変換マクロ関数が用意されているのでこちらを使うと指定が楽です。

ディープスリープからの復帰はsetup()からやり直されることになるのでこの中に復帰した際の処理はここに書く必要があります。

スリープでは液晶画面のオンオフは管理されないので、スリープ突入時に画面をオフにする場合はM5.Axp.ScreenBreath()で画面の明るさを0にして消す必要があります。また、スリープからの復帰時には再度ScreenBreath()で明るさを設定してオンにする必要がありますのでsetup()に書いてあります。

Wifi & Ambient

//ヘッダ
#include <WiFi.h>
#include <Ambient.h>
//wifi情報
const char wifi_ssid[32]="SSID";
const char wifi_key[64]="アクセスポイントのキー";
//ambient情報
const unsigned int channelId = 0; // AmbientのチャネルID
const char* writeKey = "ライトキー"
//static変数
WiFiClient client; //Ambientで使うので必要
Ambient ambient;

void setup() {
  // WiFi接続
  WiFi.begin(wifi_ssid, wifi_key);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }
  //Ambient setup
  ambient.begin(channelId, writeKey, &client); // チャネルIDとライトキーを指定してAmbientの初期化
}

Ambientに送信するにはWifi接続も必要なので合わせて解説します。Ambientを使うにはライブラリをインストールする必要があります。ArduinoIDEやPlatformIOのライブラリ検索で「Ambient ESP32 ESP8266 lib」を検索してインストールします。インストールできたらWifi.hとAmbient.hをインクルードしておきます。

ENVⅡHAT
https://www.switch-science.com/catalog/6559/

WiFi.begin()の引数にSSIDとパスワードを渡して呼ぶことで接続します。接続には時間がかかるので、すぐに次の処理を始めてしまうとエラーの原因になります。WiFi.status()で状態を取得して、接続状態WL_CONNECTEDになるまでループして接続できるまで待機します。

AmbientはAmbient型のクラスから制御します。static変数などでインスタンスを作っておき、Ambient::begin()にチャネルIDとライトキーを渡して初期化します。 Ambient::begin() にはWifiClientのポインタも渡す必要がありますのでWifi接続後に呼ぶ必要があります。

測定 & データ送信

//pin定義
const uint8_t kEarthPin = 33; //アナログ値ピン
const uint8_t kEarthDigiPin = 32;　//デジタル値ピン

void setup() {
  //水分センサのピンをセットアップ
  pinMode(kEarthPin,ANALOG);
  pinMode(kEarthDigiPin,INPUT);
  //アナログ値の解像度を1024段階に設定
  analogSetWidth(10); //10bit(1024)
}

void measureEarth(){
　//計測
  //濡れているほうが値が低くなるので反転させる
  uint16_t earthVal = 1024 - analogRead(kEarthPin); //アナログ値
  int earthDigi = digitalRead(kEarthDigiPin);　//デジタル値

  //Ambient送信
  ambient.set(1,earthVal); //データスロット1
  ambient.set(2,earthDigi); //データスロット2
  ambient.send();
  
}

水分センサの値は接続しているピンの値を直接読み取ります。32,33ピンが対応するピンです。32はデジタル値で一定値を境に0-1で取得できます。33はアナログ値で細かい数値が取得できます。基本的には細かく取れる33ピンの方を使用すると思います。pinMode()でピンとモードを適したものに設定します。
アナログ値はanalogSetWidth()でAD変換の解像度を設定することで値の範囲を変更できます。デフォルトでは0-4096になっていますが、UIFlowでは0-1024だったのでそれに合わせて変更しています。

センサからの値の取得はanalogRead(),digitalRead()でそれぞれ設定したピンから取得します。
Ambientへのデータ送信はAmbient::set()にデータのスロットと値を渡してセットします。Ambient::send()でセットした値を送信します。

動作

動かしてみたところをGif動画にしてみました。

Wifiの接続完了後に計測までのカウントダウンが表示されます。Wifi接続までは数秒かかります。接続中の表示を足しても良かったかもしれないです。
測定後にカウントダウンしてスリープに入ります。画面もオフにしているので見た目では電源が切れているのと差がわからないのが難点ですね。運用上はプランターに挿して放置するので目視確認することもないので気にしない方針。

さて、肝心の稼働時間です。Ambientのデータにどれだけデータ送信が続けられたかで確認します。

満充電で17:30ごろから動かして24:30ごろまでデータが送信されていました。内蔵バッテリーだけで約7時間ほど稼働できました。前回の1時間に比べれば7倍ですのでかなり伸ばすことができました！！
これならモバイルバッテリーを接続することで数日は動かし続けられそうです。計測の間隔を伸ばせば実行時間が減るので更に稼働時間を増やせるかもしれないですね。