Linea – ページ 2 – Giardino Familiare

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倍ですのでかなり伸ばすことができました！！
これならモバイルバッテリーを接続することで数日は動かし続けられそうです。計測の間隔を伸ばせば実行時間が減るので更に稼働時間を増やせるかもしれないですね。

今後

今回で計測のプログラムとしては目的が達成できました。
課題としてはM5StickCやセンサーが雨風に耐えられるような対策ですね。今の所むき出しなので、晴れた日にしか計測できないのでIoTなシステムとしてはまだまだです。密閉できるケースをDIYしようと思います。

実際に外で動かす際は画面も特にいらないので画面のないM5Atomを買い足してそちらで動かそうかなとも思っています。システムとして動かすとその間M5StickCで遊べないのでそれも困りますしね。

雨風対策なども記事にできたらと思います。それではまた！

M5 / ガーデニング / プログラミング

2021年7月27日

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

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

こんにちはLineaです　オリンピックも始ま […]

M5 / ガーデニング / プログラミング

2021年7月18日

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

M5StickCでガーデニングの水やりセンサを作る ~その1 【測ってみる編】

こんにちは、Lineaです最近急に晴れて暑く […]

IT系・ガジェット / レビュー

2021年7月14日

タグ: GPD WIN３, UMPC

ゲーミングUMPC GPD WIN3 (i5版)【買い物レビュー】

こんにちは、Lineaです最近、散財気味なの […]

IT系・ガジェット / レビュー

2021年7月7日

タグ: PCパーツ, SSD

Crucial BX500 1TB 2.5in SATA SSD 【買い物短評】

こんにちはLineaです最近、色々忙しく更 […]

M5 / プログラミング

2021年6月20日

タグ: M5SitickC, プログラミング

M5StickCとUIFlowでビジュアルプログラミングしてみる

こんにちは、Lineaです。前回の記事で紹介 […]

プログラミング

2021年6月16日

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

手のひらサイズの高機能マイコンボードM5StickC

こんにちは、Lineaです。プログラマーの方 […]

WordPress / プログラミング

2021年6月10日

タグ: WordPress, 移行

ローカルで運用していたWordPressをサーバーへ移行する話

こんにちは、Lineaですプログラマーの方に […]

ガーデニング

CPU	Intel Core i5-1135G7 / Intel Core i7-1165G7
GPU	Iris Xe Graphics 80EU(i5) / 96EU(i7)
メモリ	LPDDR4x-4266 16GB
ストレージ	1TB NVMe SSD
液晶	5.5インチ　1280*720　タッチパネル

シーケンシャル読み込み	シーケンシャル書き込み	ランダム読み込み	ランダム書き込み
540MB/s	500MB/s	非公開	非公開