プログラミング

M5 / プログラミング

2022年6月4日

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

ARGBライトでゲーミング苔

こんにちはLineaです。前回、湿度センサ […]

こんにちはLineaです。

前回、湿度センサとUSB加湿器で苔の水やりを自動化してみました。あれからシステムとしては安定して、水を2,3日おきに補充するだけになったので楽になりました。

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

しかし、なんとなく見た目が寂しいなと思っていたのですが、明かりが足りないことに気が付きました。アクアリウムではライトで照らしてやるのが基本ですから、苔にもそういったライトがあれば映えるのではないかと。

アクアリウム用のライトを買ってきても良かったのですが、折角M5Atomを使っているならライトも制御したいと考え、最近流行りのLEDテープを使って光り方を制御してみようというのが今回の趣旨です。

今回の成果としてこんな感じになりました。虹色に光らせるとゲーミング感（？）満点になったので満足です。

LEDの選定

今回、購入して使用したLEDがこちらです。

EZDIY-FAB 新しいアドレス指定可能な5V 3PIN RGB LEDストリップセット

LEDテープ類を色々調べているとゲーミングPCの装飾用の製品がおしゃれで丁度よさそうでした。シリコンカバーに覆われているため、光が拡散して線としてきれいに見えます。また、ある程度の防水性も期待できそうです。

こういったLEDテープ類で虹色など光り方を自由に変えられるタイプは軒並みNeoPixel系と呼ばれるLEDチップが使われています。LEDチップ内にICが入っていて、シリアル通信で光り方を個別に制御できるため虹色など様々な光らせ方ができます。また、制御用のライブラリも公開されているので比較的簡単に制御できます。

今回使ったのはゲーミングPC用の製品（いわゆる3ピンARGB）ですが中身は電子工作用のLEDテープと同じなのでそのままM5Atomなどで制御できました。コネクタが配線済みと考えるとむしろPC用はお得かも？

配線

PC用の3ピンARGBタイプのコネクタは次のようになっています。

5VとGNDはそれぞれM5Atomの5V出力、GNDへ接続します。データピンはシリアル通信ができるピンならどこでもいいので、今回は5V,GNDに隣接する25ピンを使用しました。

設置

今回購入した製品には設置用のステー（直線、90°）が付属していたので、利用して水槽の天板に両面テープで固定しました。

LED制御

今回使うNeoPixel系のLEDテープを制御するライブラリとしてFastLEDを使用します。FsatLEDはM5Atom内蔵のLED制御にも使われていて、既にライブラリが入っているはずなのでインストールについては割愛します。

FastLEDライブラリでLED制御する際はライブラリ内のstatic変数で競合するため、M5AtomライブラリのLED制御と同時に使うことができません。M5Atomの初期化時に本体側のLEDをオフにする必要があります（後述）。

プログラム

購入したLEDテープ用に下の制御クラスをM5AtomのLED処理を参考に作成しました。

#ifndef __LEDBar_H
#define __LEDBar_H

#include <FastLED.h>
#include "utility/Task.h"

#define NUM_LEDS_BAR 30
#define DATA_PIN_BAR 25

enum LightingMode 
{
    Static,
    Move,
    Breath,
    Rainbow,
};

class LEDBar: public Task
{
private:
    CRGB _ledbuff[NUM_LEDS_BAR];
    uint8_t _ledNumber;

    LightingMode _mode;
    CRGB _mainColor;
    CHSV _maniHSV;

    uint8_t _movePos;

    SemaphoreHandle_t _xSemaphore = NULL;

public:
    LEDBar();
    ~LEDBar();

    void begin(uint8_t LEDPin = DATA_PIN_BAR ,uint8_t LEDNumber = NUM_LEDS_BAR);
    void run(void *data);

    void setBrightness(uint8_t brightness);
    void setLightingMode(LightingMode mode, CRGB color);
    void lightOff();
};

#endif

#include "LEDBar.h"

LEDBar::LEDBar()
{

}

LEDBar::~LEDBar()
{

}

void LEDBar::begin(uint8_t LEDPin ,uint8_t LEDNumber)
{
    FastLED.addLeds<WS2812, DATA_PIN_BAR>(_ledbuff, LEDNumber);
    _xSemaphore = xSemaphoreCreateMutex();
    _ledNumber = LEDNumber;
}

void LEDBar::run(void *data)
{
    data = nullptr;

    for (int num = 0; num < NUM_LEDS_BAR; num++)
    {
        _ledbuff[num] = 0x000000;
    }
    FastLED.show();
    FastLED.setBrightness(20);

    while (1)
    {
        xSemaphoreTake(_xSemaphore, portMAX_DELAY);
        switch (_mode)
        {
            case LightingMode::Static:
                fill_solid(_ledbuff,_ledNumber,_mainColor);
                break;
            case LightingMode::Move:
                fadeLightBy(_ledbuff,_ledNumber,30);
                _movePos++;
                if(_movePos >= _ledNumber)
                {
                    _movePos = 0;
                }
                _ledbuff[_movePos] = _mainColor;
                break;
            case LightingMode::Breath:
            {
                uint8_t BeatsPerMinute = 16;
                uint8_t beat = beatsin8( BeatsPerMinute, 0, 255);
                _maniHSV.value = beat;
                fill_solid(_ledbuff,_ledNumber,CRGB(_maniHSV));
                break;
            }
            case LightingMode::Rainbow:
                fill_rainbow(_ledbuff,_ledNumber,_maniHSV.hue);
                _maniHSV.hue++;
                break;
            default:
                break;
        }
        FastLED.show();
        xSemaphoreGive(_xSemaphore);
        delay(20);
    }
}

void LEDBar::setBrightness(uint8_t brightness)
{
    xSemaphoreTake(_xSemaphore, portMAX_DELAY);
    FastLED.setBrightness(brightness);
    xSemaphoreGive(_xSemaphore);
}

void LEDBar::setLightingMode(LightingMode mode, CRGB color)
{
    xSemaphoreTake(_xSemaphore, portMAX_DELAY);
    _mode = mode;
    _mainColor = color;
    _maniHSV = rgb2hsv_approximate(color);
    xSemaphoreGive(_xSemaphore);
}

void LEDBar::lightOff()
{
    setLightingMode(LightingMode::Static,CRGB::Black);
}

FastLEDライブラリの基本的な使い方として、LEDの色情報バッファをFastLED.show()で実際にLEDに送信します。
光が動いているように見せるには定期的に色情報バッファの更新と送信を行う必要があるため、表示更新関数run()をタスクで定期実行させています。
マルチスレッドで動作するため、発光モードや色などの設定処理はセマフォで排他制御を行っています

発光のパターンについてはとりあえず4種類を定義して用意してみました。

単色
流れる
明滅
レインボー

レインボーはゲーミングの定番だけあってか、ライブラリで既に関数が用意されていて呼ぶだけなので実は1番簡単だったりします。意外と苦労したのは流れる表示の方ですね。

使い方

上のLEDBarクラスは次のように使用します

#include <M5Atom.h>
#include "LEDBar.h"

//LEDBarのインスタンス
LEDBar ledBar;

void setup() {
  //M5スタート 3つ目の引数が内蔵LED制御の有効化なのでFalseにしておく
  M5.begin(true,false,false);

  //LEDバーを初期化 第一引数 データピン、第二引数 LED個数
  ledBar.begin(25,30);
  //LEDバーの更新タスクを開始
  ledBar.setTaskName("LEDBar");
	ledBar.setTaskPriority(2);
	ledBar.start();
  delay(10);
  //LEDバーの明るさを設定
  ledBar.setBrightness(64);
  //LEDバーの発光モードと色を指定
　ledBar.setLightingMode(LightingMode::Breath,CRGB::Red);
　delay(5000);
  //虹色
  ledBar.setLightingMode(LightingMode::Rainbow,CRGB::Blue);
}

begin()関数でLEDのピンと個数を設定します。その後、タスクを開始します。タスク開始後に明るさや発光モード、色を指定して発光させることができます。
FastLEDライブラリの仕様で数値は8bit=256での指定のため、明るさは0~255、色はCRGB型で表します。色についてはFastLEDライブラリでデフォルト定義の色やRGB(0~255,0~255,0~255)で指定することができます。
ただ、LEDの種類によってはBRGの順で光る物があるようで今回購入したものもそうでした。その場合色の読み替えなどが必要になるので注意してください。

今回はここまでです。
ゲーミングPCなどでもおなじみのレインボー発光などが自分で制御して作れるということがわかって楽しかったです。
オリジナルの発光パターンも今後増やしてみたいですね。
それではまた！

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的に間欠動作させて加湿量をコントロールしてよりフラットなグラフを目指すのも考えています。
でもその前に苔ルームに照明が欲しくなってきたのでそっちですかね

それではまた！

M5 / プログラミング / 未分類

2021年12月12日

タグ: M5 StickC, python, プログラミング, 読書

M5StickCで速読リーダーを作ってみた

こんにちは、Lineaです。最近は買い物レ […]

こんにちは、Lineaです。

最近は買い物レビュー記事が続いていましたが、久々にプログラミングの記事です。

この前、普段観ているEテレの2355という番組で面白い生理現象?が紹介されていました。
文章の位置が変わらなければ人間は高速に文章が読めるという内容です。文章を読むときには目線を動かして文を追っているのですが、位置が変わらずに文章が切り替わると目線を動かさなくて良いので読めるそうです。Youtubeに同じ効果を紹介した動画がありました。

この効果を知って、本を速読するのに使えるのではと思いました。ちょうどM5StickCだとコンパクトで１行分の文字を表示できるサイズの画面を持ってるので、これで速読リーダーを作ってみたのが今回の内容になります。

青空文庫からダウンロードした本のテキストデータを加工して表示させています。メニュー画面で内部に保存しているテキストファイルを一覧から選択して読むことができます。1行ずつテキスト表示を切り替えていくので動画と同様に高速で読むことができます。進行度の保存機能もあるので電源を切っても続きから読むことができます。

とりあえずデバッグで使っている「吾輩は猫である」のテキストを読んでいますが、読む速度自体は結構早くても読めますね。ただ、古い本だと感じが旧字で見慣れなかったり、言い回しが古いので内容を理解するのが追いつかないときがあります。あらすじレベルでは頭に入ってきますが細かいニュアンスを考える時間がなく次に進んでいくので一長一短な感じはあります。

以下あまり需要なさそうな解説になります

プログラムを一応GitHubに上げてます。M5StickCPlus用にしか書いてないのでM5StickCではそのまま動かないと思います。本のデータは念のため抜いているので、別途用意が必要になります。

表示や状態管理で結構がっつりとファイル数が多くなったので今回は仕組みとポイントだけ解説していきます。

大まかな仕組み

大まかな流れとして次のような流れです。

元のテキストを形態素解析して文節で改行したテキストを作る
M5StickCに加工済みテキストをSPIFFS領域にアップロードする
M5StickC側でテキストデータを読み出し、1行ずつ表示する

テキストの加工は形態素解析で行うためM5StickCでは荷が重いので、pythonで前処理としてPCで行うようにしています。

テキストデータの加工

本を速読するのが目的なので、青空文庫からダウンロードしたテキストデータを表示用に加工するプログラムもpythonで作りました。ちなみに文を単語ごとに区切ることを分かち書きっていうんですね。

pythonで形態素解析ができるJanomeというライブラリを利用しています。これを使った理由としてはpythonでインストールが簡単でサクッと使えるためです。
形態素解析ではmecabが有名ですが、インストールが面倒そうだったのでこちらにしました。

Janomeは解析器のTokenizerをメインに前処理、後処理のフィルターを組み合わせたAnalayzerを作成してテキストを渡すだけで解析してくれます。解析で単語ごとに分かれたリストで返してくれるのでfor文などで必要な処理をします。上の例では解析した単語ごとに”/”で区切りを入れて表示します。

今回はM5StickCで表示する最大文字数を超えるか、助詞が来たら改行して表示用テキストを作っています。青空文庫から落とした「我輩は猫である」の例だとこんな感じです。

吾輩は猫である。名前はまだ無い。
↓
吾輩は
猫である
名前は
まだ無い

例だとうまくいっていますが、人物名など区切れない長い単語やセリフの「」の扱いなどまだ対応しきれていないところもあるので今後考えたいところです。

また、青空文庫のテキストデータにはフリガナや底本の情報などが乗っています。本文だけで読みたいのと形態素解析が正確にできないので、前処理として正規表現などで本文だけ抜き出す作業もしています。

M5StickCにテキストアップロード

本1冊分となるとテキストデータも数百KB~1MBほどと結構なサイズになります。吾輩は猫であるを加工したテキストデータは900KBほどになりました。

これをプログラムのソースコードとして一緒に書き込むとメモリサイズが心配になったので、SPIFFS領域というデータ保存用の領域に別途書き込むことにしました。ちなみにM5StickC全体ではメモリは4MBです。そのうちアプリ領域が1.2MBらしいのでやはり足りなくなりそうですね。SPIFFSは1.5MBなので1冊分は余裕そうですが、2冊入るかは本の組み合わせ次第になりそうです。

M5StickCへのデータのアップロードはPlatformIOを使っているととても簡単です。
プロジェクトのディレクトリ直下にdataフォルダを作成し、その下にアップロードしたいファイルを配置します。今回はdata/books/以下にテキストを配置しました。

次にPlatformIOのメニューを開き、「PromiseTasks」→「Platform」→「Upload FileSyste Image」でアップロードすることができます。アップロードしたデータはプログラムの変更に関係なく保存され続け、プログラム上からアクセスすることができます。

M5StickCでの表示

ここが今回一番頑張った部分ですが、結構がっつりと表示周りや機能を書いた結果解説しきれないものになってしまいました。
そこでいくつかM5StickCならではの部分だけ紹介したいと思います。

テキストデータの読み出し

先程SPIFFS領域に保存したテキストデータの読み出し方法です。SPIFFS領域にアクセスするには、そのままなSPIFFSクラスを使用します。

SPIFFSでスタティックなインスタンスを操作します。 SPIFFS.begin()で初期化しておいて、 SPIFFS.open()でアップロード時のdataフォルダをルートとしてたパスを渡すことでファイルにアクセスできます。Fileクラスで返ってくるので扱いやすいです。

進捗状況の保存

テキストの読み進め具合を保存する機能は読んだテキストのデータ位置を記録することで実装しています。

M5Stickで簡単に情報の保存をするにはPreferencesクラスを使用します。こちらはスタティックな変数が用意されてないので自分で適当にインスタンスを作ります。
Begin()で保存先のグループ名を指定します。get〇〇()で取得、put〇〇で保存になります。〇〇の部分はIntやFloatなど保存する型ごとに分かれています。

テキストファイルを1バイトずつread()で読んでいるので、同時にカウントアップしてデータ位置を保持しています。実際は毎行で保存するのもちょっと無駄に感じたので変数で位置を保持だけしておき、テキスト選択画面に戻る際にPreferencesで保存するようにしています。

日本語フォント表示

実はM5StickCは公式ライブラリ単体では日本語フォントがないので表示できないです。（簡体字はある）
M5StickCには他にTTFフォントなどを自由に使える機能もなさそうだったのでLangShipさんのライブラリを使用させてもらいました。

多言語(日本語)フォント表示
https://lang-ship.com/reference/unofficial/M5StickC/UseCase/UnicodeFont/

ヘッダファイルにフォントデータごと入っているのでライブラリとして組み込むだけで使うことができます。
ですが、現状でライブラリを落として組み込むと自分の環境ではビルドエラーが出るので少し修正が必要でした。

ライブラリに含まれるefontWrapperクラスでなんでかソースとヘッダ両方に実装が書かれているのでエラーになります。自分はラッパークラスを使わなかったのでとりあえずソースのefontWrapper.cppを消して解消しました。

また、実装がすべてヘッダに書かれているので複数のソースでefont.hを直接インクルードするとリンカエラーになりました。この対策として以下のように関数を更にラップした関数を作成してそちらはソースとヘッダに分けることで回避しました。

ソース側でefontライブラリのヘッダを読むようにしています。こうすることでefontライブラリのヘッダはソースで1回しか読まれないのでヘッダの多重読み込みが防止されます。
ヘッダに実装書かれるとインクルードガードしてもそれぞれのオブジェクトコンパイルで読まれてしまうのでリンカで多重読み込みエラーになるんですね。main.cppだけで大体書く実装なら問題ないんでしょうけどね

最後に

解説しきれないのですがM5Stickでの表示部分は結構頑張りました。以前作った魚釣りゲームのオブジェクト管理から流用してアップグレードしたので、シーン単位でオブジェクト管理や遷移ができるようになっています。UIのボタン選択なども作ったので、今後他にもリッチなアプリケーションも作っていけそうです。

ただ色々リッチにしようとするとメモリ管理がシビアになってくるので難しいですね。今回もメモリリークに悩まされたり、画像を扱うメモリ余裕がなかったりと色々難しさを体験しました。

また、本のテキスト加工をPCで前処理で分けて行っていますが新しい本を追加しようとすると手作業になるのでローカルサーバーで処理して自動化できたらいいなとも思いました。今後の挑戦目標としようと思います。

それではまた！

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

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の方でまた別でお役立ちデバイス？を作ったのでそのうち紹介したいと思います。

それではまた！

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