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

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

iPhone上で動作している様子(湿度の取得に失敗し検証中)
![スクリーンショット 2021-08-29 11.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/919787b6-c6cb-b15a-2cc1-bf04b0655b83.png)

Android上で動作している様子(温湿度両方取得成功)
![スクリーンショット 2021-08-29 11.39.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/91ccaa59-658c-1320-3419-a06399f9d28a.png)

iPad上で動作している様子
![ios___________720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/d29c8a46-aea7-0005-3340-8b340bea6478.jpeg)


## 用意するもの
* 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)で接続される
![スクリーンショット 2021-08-30 9.24.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/cd137e63-9c5b-ad9c-17c0-64a01085c195.png)


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

```Dart: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でも動作している。  

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