ガーデニング – Giardino Familiare

M5 / プログラミング

2022年5月1日

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

M5Atomと100均加湿器で作る自動苔水やりシステム

こんにちは、Lineaです久しぶりの更新と […]

こんにちは、Lineaです

久しぶりの更新となってしまいました。

半年ほど前から苔を育てているのですが、1日数回の霧吹きというのをつい忘れてしまいます。
そのため、水不足で何度か苔が茶色くなったり黒ずんだりしてダメにしてしまいました。

以前、M5Atomでガーデニングの水分管理を行ってみましたが、その延長で小型の加湿器を使って自動水やりができるのではないかと考えて作ってみました。

ハードウェア

水やりシステムで使用したものは以下のとおりです。M5Atomはすでに持っていたのでセンサ代と加湿器、部品代で1500円ぐらいです。

M5 Atom
湿度センサ（ENVⅢ ユニット）
100均 USB 加湿器(ダイソー）
ブレッドボード
USBコネクタ
トランジスタ(2N2222)
抵抗(2.2kΩ,10kΩ)

システムの配線は下の図のとおりです

湿度センサとM5はGroveで接続し、計測した湿度値に応じてUSBコネクタの5Vラインを簡単なトランジスタ回路でスイッチングして加湿器への電力のON/OFFを制御します。

湿度センサにはM5シリーズ向けのセンサユニットを使用しています。画像では以前買ったM5StickC用のHATタイプをAtomに接続したものを本体ごと水槽に入れていますが、流石に湿度でAtom本体が逝きそうなので後で替えています。ユニット化されてGroveケーブルで回路本体と分離できるので、もし壊れてもセンサユニットの替えがきくので安心です。

加湿器にはダイソーの300円USB加湿器を使用しました。ここで重要なのがスイッチやタイマー機能がついておらず、USB端子に電流が流れるだけで動作する単純なものを使用することでした。M5から加湿器に対して制御できるのが電流のON/OFFだけなので、余計な機能がついていると制御できない可能性があるからです。
最近の100均製品も進化していてスイッチやタイマーがついているものが多く、意外と単純なものを探すのに苦労しました。作り始めたのが4月頭だったので加湿器のシーズンが終わっていたこともあって1週間ほど100均めぐりをしてやっと見つけたのがダイソーの300円加湿器でしたので、同じこと考えている人はご参考ください。

加湿器への電流のオンオフはM5のピンから直接流すのは流石に怖かったので簡単なスイッチング回路を組んでいます。抵抗計算はいい加減ですがUSB端子に150mAぐらい流せるように計算してみました。とりあえず加湿器は元気に動いてくれているので大丈夫そうです。

プログラム

プログラムは以前つくった水分計測システムを元にしています。
動作としては5分おきに湿度測定、加湿器の動作決定、ディープスリープを繰り返します。湿度値などはデータベースサービスのAmbientへ送信しています

#include <M5Atom.h>
#include <WiFi.h>
#include <Ambient.h>
#include "driver/rtc_io.h"
#include "SHT3X.h"
#include "key.h"

//define
#define SLEEP_MIN(min) min*60000000ULL
//GRB?
#define LED_PINK 0x55FFAA
#define LED_GREEN 0xFF0022
#define LED_BLUE 0x0022FF
#define LED_YELLOW 0xAAAA00
#define LED_RED 0x00FF22
#define LED_OFF 0x000000
//明るさ
const uint8_t kLEDBright = 15;
//pin定義
const gpio_num_t kPowerPin = GPIO_NUM_33; //電力供給
//スリープ時間
const uint64_t sleepMin = 5;

//加湿稼働閾値
const float minHumidity = 70;
const float targetHumidity = 90;
//static変数
WiFiClient client;
Ambient ambient;

//温湿度センサ
const uint8_t kI2CSclPin = 32;
const uint8_t kI2CSdaPin = 26;
SHT3X sht3x = SHT3X(kI2CSclPin,kI2CSdaPin);

//保存変数
RTC_DATA_ATTR bool humidifierActive = false;
RTC_DATA_ATTR float humidityInteglal = 0;

//functions

//加湿ONOFF
void sethHumidifier(bool sw)
{
  humidifierActive = sw;
  rtc_gpio_set_level(kPowerPin, sw ? HIGH:LOW);
}

//測定
void measure(){

  //温湿度計測
  if(sht3x.get() ==0){
    //ambient セット
    float humidity = sht3x.humidity;
    ambient.set(7,sht3x.cTemp);
    ambient.set(8,humidity);
    Serial.printf("temp:%.2f \n",sht3x.cTemp);
    Serial.printf("humidty:%.2f \n",humidity);

    //湿度によってLED色変える
    CRGB col = LED_GREEN;
    #ifdef false
    //カラー無段階変化
    fract8 frac = humidity / 100.f * UINT8_MAX;
    col = col.lerp8(CRGB::Red,frac);
    Serial.printf("humid color R:%d, G:%d, B:%d\n",col.r,col.g,col.b);
    #else
    //段階カラー
    if(humidity < targetHumidity){
      col = LED_YELLOW;
      if(humidity < minHumidity)
      {
        col = LED_RED;
      }
    }
    #endif

    M5.dis.fillpix(col);

    //加湿器稼働
    humidityInteglal = min(max((humidityInteglal + (targetHumidity - humidity))*0.5f,-10.f),10.f);
    sethHumidifier(humidityInteglal > 0);
    ambient.set(6,humidifierActive);
    Serial.printf("humidifier:%d \n",humidifierActive);
  }

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

//Wifi接続
void connectNet()
{
  // WiFi接続
  Serial.printf("Connecting to %s ", wifi_ssid);
  WiFi.begin(wifi_ssid, wifi_key);
  while (WiFi.status() != WL_CONNECTED) {
    M5.dis.fillpix(LED_BLUE);
    delay(250);
    M5.dis.fillpix(LED_OFF);
    delay(250);
    Serial.print(".");
  }
  Serial.println("CONNECTED");

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

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

void setup() {
  Serial.println("Setup");

  //M5スタート
  M5.begin(true,false,true);

  //ピンをセットアップ
  rtc_gpio_init(kPowerPin);
  rtc_gpio_set_direction(kPowerPin,RTC_GPIO_MODE_OUTPUT_ONLY);
  //rtc_gpio_set_level(kPowerPin,LOW);

  M5.dis.setBrightness(kLEDBright);

  //Wifi接続はクロック上げたほうがいいらしい？CPUクロックを戻す
  setCpuFrequencyMhz(160);

  //ネットワーク系初期化
  connectNet();

  //CPUクロックを下げる 80より下はWifi使えないらしい
  setCpuFrequencyMhz(80);
}

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

  //計測
  measure();
  
  //wait
  delay(100);

  //wifiオフ
  WiFi.disconnect();
  //pinもオフにする
  //pinMode(kPowerPin,DISABLED);

  //スリープカウントダウン
  //countDown("sleep",3);
  //LED停止
  //M5.dis.stop();

  //スリープ
  Serial.println("Enter sleep");
  Serial.printf("sleep time: %ld \n",SLEEP_MIN(sleepMin));

  esp_sleep_pd_config(ESP_PD_DOMAIN_RTC_PERIPH,ESP_PD_OPTION_ON);
  esp_sleep_enable_timer_wakeup(SLEEP_MIN(sleepMin));
  esp_deep_sleep_start();
}

Wifiやデータベース（Ambient）へのアクセス情報はmainに書くとGit管理などでうっかり上げてしまいそうなので、別途”key.h”と別ヘッダに置くようにしました。

#ifndef __key_H
#define __key_H

//wifi情報
const char wifi_ssid[32]="SSID";
const char wifi_key[64]="Wifi_Pass";
//ambient情報
const unsigned int channelId = 00000; // AmbientのチャネルID
const char* writeKey = "Write_Key"; // ライトキー

#endif

温湿度センサで使用しているライブラリ「SHT3X」については過去記事で導入の解説をしているので参考にしてください

M5AtomでENVⅡHatを使う

要所解説

湿度計測

//温湿度センサ定義
const uint8_t kI2CSclPin = 32;
const uint8_t kI2CSdaPin = 26;
SHT3X sht3x = SHT3X(kI2CSclPin,kI2CSdaPin);

//温湿度計測
void measure(){
  if(sht3x.get() ==0){
    //計測完了時の動作
    float humidity = sht3x.humidity;
    }
}

湿度センサの使い方は過去記事とほぼ同様です。今回はSHT3Xのオブジェクトを作成時にGroveのデータピン32,26を指定します。計測はSHT3X::get()を呼び出します。このとき返り値0であれば成功ですのでif文などで分岐して計測時の動作を記述します。測定値はオブジェクト内に保存されているので必要な値を取り出します。

加湿器の動作

//加湿稼働閾値
const float targetHumidity = 90;

//加湿器稼働
    humidityInteglal = min(max((humidityInteglal + (targetHumidity - humidity))*0.5f,-10.f),10.f);
    sethHumidifier(humidityInteglal > 0);
    ambient.set(6,humidifierActive);
    Serial.printf("humidifier:%d \n",humidifierActive);

加湿器の稼働の判断は目標の湿度値との差分をもとにオンオフの判定を行っています。単純にその時の湿度値で判定すると値の変化に過敏になりすぎるので前回の計算値との移動平均の値で判定をしてみています。後述する結果でもわかりますが、それでもオンオフを交互に繰り返すような結果なので計算方法は今後も考えていきたいです。

//保存変数
RTC_DATA_ATTR bool humidifierActive = false;
RTC_DATA_ATTR float humidityInteglal = 0;

//加湿ONOFF
void sethHumidifier(bool sw)
{
  humidifierActive = sw;
  rtc_gpio_set_level(kPowerPin, sw ? HIGH:LOW);
}

void setup() {
  //ピンをセットアップ
  rtc_gpio_init(kPowerPin);
  rtc_gpio_set_direction(kPowerPin,RTC_GPIO_MODE_OUTPUT_ONLY);

  //スリープ時にピン出力し続ける設定
  esp_sleep_pd_config(ESP_PD_DOMAIN_RTC_PERIPH,ESP_PD_OPTION_ON);
}

ディープスリープを使用しているので、加湿器の稼働判定用の変数や出力ピンの動作をスリープ中でも継続する必要があります。
スリープ中に変数を保存するには変数の定義の先頭にRTC_DATA_ATTRを設定することで保存されます。
ピンについては通常のピン入出力関数ではなく、rtc_gpio_で始まる関数を使用する必要があります。
esp_sleep_pd_config(ESP_PD_DOMAIN_RTC_PERIPH,ESP_PD_OPTION_ON)を呼ぶことでスリープ時にrtc_gpio_~で設定したピンの動作が継続できるようになります。

結果

結果はAmbientへ送信しているので、現在IoTの部屋でグラフとして確認することができます。

IoTの部屋

上は4/30の結果ですが、目標の90%を行ったり来たりしています。もうちょっとなだらかな結果を期待していたのですが、半開きのテラリウム水槽だと5分加湿器を止めるだけで結構水分が逃げていくみたいですね。
16時頃から加湿器用の水が切れたみたいで湿度が下がりっぱなしですが、稼働しないとこれだけ下がるということで効果はしっかりありそうです。

ゆくゆくは加湿器を単純にオンオフではなく、PWM的に間欠動作させて加湿量をコントロールしてよりフラットなグラフを目指すのも考えています。
でもその前に苔ルームに照明が欲しくなってきたのでそっちですかね

それではまた！

ガーデニング / レビュー

2021年9月30日

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

リラックスすること ①

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

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

2021年8月29日

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

夏のコンポスト大作戦

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

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円じゃないけど）。