概要
- 新型コロナの影響で環境センシングデバイス、可視化ツールの需要が高まっている。
- まず弊社オリジナルのマイコンボードの「IoT-DX-Kit」を使って、気温、湿度を取得してみる。
- スマートフォンにBluetooth経由で温湿度のデータを送り可視化してみることにした。
- スマートフォンアプリの開発環境は、Flutterを採用しiOS/Android両方の動作を確認してみる
IoT-DX-Kit 紹介ページ
https://cami.jp/other/iotdx-kit/
iPhone上で動作している様子(湿度の取得に失敗し検証中)
用意するもの
- 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でも動作している。
次回に向けて
- マイコンボード上にデータが蓄積できない。クラウド上にアップ、蓄積できないか検討してみる。
- 二酸化炭素濃度など、別のセンサーのデータの可視化も試してみる。