環境センサーのデータをスマホでモニタリングする(Flutter) - データ表示編 -

概要

• 新型コロナの影響で環境センシングデバイス、可視化ツールの需要が高まっている。
• まず弊社オリジナルのマイコンボードの「IoT-DX-Kit」を使って、気温、湿度を取得してみる。
• スマートフォンにBluetooth経由で温湿度のデータを送り可視化してみることにした。
• スマートフォンアプリの開発環境は、Flutterを採用しiOS/Android両方の動作を確認してみる
  IoT-DX-Kit 紹介ページ
  https://cami.jp/other/iotdx-kit/

iPhone上で動作している様子(湿度の取得に失敗し検証中)

Android上で動作している様子(温湿度両方取得成功)

iPad上で動作している様子

用意するもの

• IoT-DX-Kit マイコンボード
• DHT22 温湿度センサー

環境構築

(1)Flutterをインストール
　https://www.arduino.cc/en/main/software
(2)Flutter Blueをインストール
　https://github.com/sparkfun/SparkFun_MAX3010x_Sensor_Library

組み立て

IoT-DX-Kitマイコンボード、DHT22温湿度センサーを以下のように接続する
スマートフォンとはBLE(Bluetooth Low Energy)で接続される

プログラミング

以下のリポジトリにあるFlutterコードをベースに、マイコンボードからのデータを受信出来るように修正、Widgetとしてメーター(温度)とバーグラフ(湿度)を表示してみる。
デバイス名やUUIDの変更、マイコンボードから送信されるデータのフォーマットに合わせるよう
改修する必要があった。
https://github.com/Sensirion/smart-gadget-flutter

lib/view_models/smart_gadget_detail_view_model.dart

〜（省略）〜

      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 2.0, horizontal: 12.0),
          child: _buildCard(ImageIcon(AssetImage(temperatureIcon)),
              Text('Temperature'), Text(temperature)),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 2.0, horizontal: 12.0),
          child: _buildCard(ImageIcon(AssetImage(humidityIcon)),
              Text('Humidity'), Text(humidity)),
        ),
        //Padding(
        //  padding: const EdgeInsets.symmetric(vertical: 2.0, horizontal: 12.0),
        //  child: _buildCard(deviceState, connectionState, progressIndicator),
        //),
        Padding(
            padding:
                const EdgeInsets.symmetric(vertical: 2.0, horizontal: 12.0),
            child: Container(
                child: SfRadialGauge(axes: <RadialAxis>[
              RadialAxis(minimum: 0, maximum: 35, ranges: <GaugeRange>[
                GaugeRange(startValue: 0, endValue: 25, color: Colors.green),
                GaugeRange(startValue: 25, endValue: 30, color: Colors.orange),
                GaugeRange(startValue: 30, endValue: 35, color: Colors.red)
              ], pointers: <GaugePointer>[
                NeedlePointer(value: double.parse(temperature.substring(0, 4)))
              ], annotations: <GaugeAnnotation>[
                GaugeAnnotation(
                    widget: Container(
                        child: Text(temperature,
                            style: TextStyle(
                                fontSize: 25, fontWeight: FontWeight.bold))),
                    angle: 90,
                    positionFactor: 0.5)
              ])
            ]))),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 2.0, horizontal: 12.0),
          child: SfLinearGauge(
            ranges: [
              LinearGaugeRange(endValue: 100),
            ],
            barPointers: [
              LinearBarPointer(value: 50),
            ],
            markerPointers: [
              LinearShapePointer(value: double.parse(humidity.substring(0, 4))),
            ],
          ),
        ),
      ],
    ));
  }

検証

• iOS/Android上で動作が確認できた。iPadでも動作している。

次回に向けて

• マイコンボード上にデータが蓄積できない。クラウド上にアップ、蓄積できないか検討してみる。
• 二酸化炭素濃度など、別のセンサーのデータの可視化も試してみる。