op.29 《全领域》－全域开发实战 - 居家植物盆栽 Mvt IV （Flutter）

op.29

//今天脑袋暂时想不出干话

铁人赛也要来到尾声了，今天就来将之前在 Flutter 里学习到的进行整合，预计将 MQTT 收集到的资讯转成图表形式，并且对这个小专案进行总结这样。

整合 Flutter 的功能

首先先了解到，目前欠缺一个图形化的介面，来将原本的 print 编辑器上的 Console 资料转成图形化的介面，并且可以手动更新图表。

(原本想做资料动态更新，但发现自己在 flutter 还没如此的炉火纯青，所以这边就改成比较好实现的手动更新 QQ)

首先我们再来看看原本 MQTT 的部分。

Future<MqttServerClient> connect() async {
  client.port = port;          //对应 port
  client.setProtocolV311();    //设置 mqtt 的版本
  client.logging(on: true);
  
  await client.connect(username, password);
  
  if (client.connectionStatus.state == MqttConnectionState.connected) {
    print('client connected');
  } else {
    print(
        'ERROR client connection failed - disconnecting, state is ${client.connectionStatus.state}');
    client.disconnect();
  }
  
  //以下是订阅主题并监听的该主题的讯息
  client.subscribe("Test", MqttQos.atLeastOnce);    //这里订阅了 Test 主题。
  
  //下段程序码为监听的部分
  client.updates.listen((List<MqttReceivedMessage<MqttMessage>> c) {
    final MqttPublishMessage message = c[0].payload;
    final payload = MqttPublishPayload.bytesToStringAsString(message.payload.message);
    print('${c[0].topic}:${payload}');
  });
}

那这时候我们欠缺一个变数空间来记录湿度的数值，所以先宣告一个

double hum = 0;    //使用 Double 的原因是因为图表的值为 Double 型态

然後再将监听的部分，把数值对应进变数。

hum = double.parse(payload);

接着，来简单地设计个页面，我们一样在 MyHomePageState 里设计。

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            WaveProgress(
              300,                         //显示大小
              hum,                         //显示的 % 数
              label: 'Humidity',           //显示的上标签
              subLabel: '',                //显示的下标签
            ),
            RaisedButton(
              child: Text('读取'),
              onPressed: charRefresh,
              color: Colors.white,
            )
          ],
        ),
      ),
    );
  }
}

因为需要在按下 读取 按钮後，抓取到最近的数值，所以要写一个 Function 在 MyHomePageState 里。用来重整页面。

  void charRefresh() {
    setState(() {
    });
  }

然後来看看目前的执行结果吧。

当感测器拔出有水分的土


当感测器插入有水分的土

这一路走来，铁人赛也在明天就会完赛了，过程中算是跌跌撞撞的，有着很多不完美的地方，但也是透过铁人赛发现自己的弱点，发现自己许多有待加强的地方，明天是最後一天，没意外应该会是一篇冗长的心得感想与自己对於物联网未来的小小看法，好啦今天就到这里了，技术文章到这里就算是结束了，过程中有任何错误或是建议也请各路大神跟小弟说，我会非常感激的呜呜呜。

今日的曲子：<<红尘菩提>>孙沛立

一位臂膀上刺有龙纹的老先生，手中的录音机永远反覆播放着「南无阿弥陀佛」...。「红尘菩提」的A段被一个挥之不去，反覆在各声部出现的主题纠缠着，象徵佛法无边。B段则神游至西方幻境，但仍脱离不了主题的纠缠。最後是A的再现，代表了人世的轮回。