CO2 monitor with M5Stack and LVGL

M5Stack と LVGL で CO2 , TVOC モニターを製作しました。　　　　　　2021.07.05

CO2 , TVOC Digital	CO2 Gauge

CO2 Chart	TVOC Chart

M5Stack へ CCS811 CO2 VOC Sensor を接続：費用は 1000円

.
仕様：
1.　表示：eCO2 , TVOC Digital , eCO2 Gauge , eCO2 Chart , TVOC Chart
2.　CCS811 10sec / 1 sec Sample：起動時に B Button を押すと 1sec,。通常は10sec。
3.　表示切り替え：左 = A Button , 右 = C Button
4.　Auto / Manual Display：画面切り替えを手動又は自動切り替え：B Buttonを押します。

構成：
1.　開発機種：MacBook Pro (16-inch, 2019) , macOS Catalina Ver 10.15.7
2.　開発環境：Arduino IDE 1.8.15
3.　開発環境：Board Manager：ES32 Arduino 1.0.6
4.　Library：m5stack / M5Stack
5.　Library：LVGL ( LittleVGL )：lv_arduino
6.　Library：LGFX；LovyanGFX：高速化が可能です。
7.　HARD：M5Stack
8.　HARD：CCS811 CO2 VOC Sensor

DownLoad：lv_CCS811_M5Stack.zip：DL後 pdfを削除しzipを解凍します。
memo.ino に開発に便利なメモが書かれています。

.
費用：1000円。( Without M5Stack )

No.	Nomen	Price
1	CCS811 Module	820円
2	CASE、基板、コネクター	180円
–	Total	1000円

メモ：AliExpress HNV Official Store：リストにある販売店は輸送期間 37日で少し長いです。
メモ：国内では 2000円から3000円等の高い価格がありますのでお調べください。
メモ：CJMCU-8128：二酸化炭素, 温度, 湿度, 気圧。多数測定可能なセンサー
_　　　価格=1723円 ($15.49)。輸送期間=17日。
_　　　CCS811：二酸化炭素。SI7021(校正付き) ：温度, 湿度。BMP280：気圧。
_　　　CCS811+SI7021+BMP280 Carbon Dioxide Temperature Humidity 3in1 Module
メモ：CJMCU-8128+CCS811+HDC1080+BMP280：$16

.
配線：
CCS811：５本 ( VCC, GND, SCL, SDA, WAK )

CCS811	VCC	GND	SCL	SDA	WAK
M-BUS	3V3	GND	22	21	GND

.
M5Stackの A と C button で touchpad controll する方法。
_　tabview上に tabを４つ作ります。例：eCO2 TVOC , eCO2 , eCO2 , TVOC
_　tabの位置に touchpad操作をするとそのtabが選択されます。
_　touchpad 方式は x,y で位置を決めます。
_　M5stack はボタンが３つの為に x,y 操作はできません。
_　y を固定し x を操作します。事前に x,y を決めて A, C Button で操作する方法もあります。
_　A Buttonで左、C Buttonで右に touchpad操作で画面が移動します。
_　touchpadの state (LV_INDEV_STATE_PR) と x,y 情報が
_　lv_indev_drv.read_cb = my_touchpad_read; に接続され tab(1,2,3,4) が表示されます。
_　int tb = 4; ：tab の数だけ設定しますと x の位置が自動的に計算されます。

my_touchpad_read：

int tb = 4;
//=====================================================================
int mx = screenWidth/(tb*4), my = 10, md = screenWidth/tb;
// Read M5Stack A B,C buttons as touchpad : Tabview select ------------
static bool my_touchpad_read(lv_indev_drv_t * indev_driver,
                             lv_indev_data_t * data){
  // A Button : Leftward ----------------------------------------------
  if (M5.BtnA.wasPressed()){
    mx = mx - md; if (mx < 0){ mx = screenWidth - (md / 4);}
    data->point.x = mx; data->point.y = my;
    data->state =LV_INDEV_STATE_PR; M5.update(); return true;
  }
  // C Button : Rightward ---------------------------------------------
  if (M5.BtnC.wasPressed()){
    mx = mx + md; if (mx > screenWidth){ mx = md / 4;}
    data->point.x = mx; data->point.y = my;
    data->state =LV_INDEV_STATE_PR; M5.update(); return true;
  }
  // B Button : Auto / Manual Display ---------------------------------
  if (M5.BtnB.wasPressed()){
    auto_man = !auto_man;          M5.update(); return false;
  }
  // No button operation ----------------------------------------------
  data->state =LV_INDEV_STATE_REL; M5.update(); return false;
}
//=====================================================================

my_touchpad_read の state と x,y 情報は
indev_drv.read_cb = my_touchpad_read; に接続されます。

// Initialize the Touch pad =========================================
lv_indev_drv_t indev_drv;
lv_indev_drv_init(&amp;indev_drv);     //input device driver
indev_drv.type = LV_INDEV_TYPE_POINTER;//Touch pad is a pointer-like
indev_drv.read_cb = my_touchpad_read;  //Set your driver function
lv_indev_drv_register(&amp;indev_drv); //Finally register the driver
//-------------------------------------------------------------------

.
既製品：屋内多機能空気検出器
測定項目：HCHO,TVOC,TEMP,HUM,CO2,PM2.5,OM1.0,PM10
表示：数値表示とグラフ表示。
価格：11514円 ( $ 110.78 )。
輸送期間：20日。
販売：Aliexpress Gas Analyzer Store；ここの販売店は他のGas Analyzer製品が多数あります。

同様な商品は IOT初期に 3〜5万円で高価で購入するまでには至りませんでした。
この商品は測定項目多く, 表示機能高く, ワーニング機能, 低価格, デザイン良く家庭で使用できます。
これらの機能やケースを全て含んだ電子工作をすると１万円以上になります。
さらに、綺麗なケースは作れません。そして温度、湿度、気圧、CO2センサー等を作る経験では、
キャリブレーション，エージング、補正等々で難儀します。

結果、作るよりも既製品を購入した方が合理的です。
よって、私は電子工作で幾つか製作しましたが、この既製品を使用しています。
購入時の注意はフルスペックを選択します。センサーの少ない同等品はその分安くなっています。

M5StackのPM2.5 大気質センサキットは温度,湿度,空気質(PM2.5)のみで6350円もします。
そしてサンプルはデイスプレーに数値を出す程度です。

.
LovyanGFXで高速化；
以下の様に記述しますと画面切り替えが速くなります。
M5Stack で使用する場合。

#pragma GCC optimize ("Ofast")
#include <M5Stack.h>
#include <lvgl.h>

LGFX で使用する場合。M5.Lcd を tft に変更し M5StackのSwicth命令はそのまま使用できます。

#pragma GCC optimize ("Ofast")
#include <M5Stack.h>
#define LGFX_AUTODETECT
#define LGFX_USE_V1
#include <lvgl.h>;
#include <LovyanGFX.hpp>;
static LGFX tft;

.
感想：
CO2センサーには金属ケースに入ったタイプがありサイズが大きく不便です。
CCS811 は小型で工作が容易、ケースも小さくて済みます。
CCS811 センサーは 1sec Sample で 40度になると言われており、寿命が低下します。
その為にファンで冷やすか 10sec 又は 60sec Sample で動作させるかになります。

デザインは、M5Stack の画面サイズに入るように作成しました。
画面ギリギリに作成するとスクロールバーが出てきますので、表示しない様にしています。
LVGLで見易く操作性を追求すると、限りなく既製品のデザインや機能のソフトに近づきます。

A,B,Cボタンしか無い M5Stackでマウス操作は難しいです。
LVGL Forum ではボタン操作のアイデアが投稿されています。
画面のスライドはマウスを「なぞる」事で上下左右ができます。
このスライド「なぞる」事を検知する方法はまだ出来ておらず課題です。
タッチパットのあるディスプレーは操作性が良いです。　M5Stackの様な
機械的なボタン操作は「操作している感触が指に伝わり、やり易い」面があります。

.
.
M5Stack , LVGL , CCS811 , CO2 , eCO2 , TVOC , LGFX , LovyanGFX

Written by macsbug

7月 5, 2021 @ 10:52 am

カテゴリー: ESP32, M5STACK

macsbug