项目4任务2-Web展示网关上报的温湿度_第1页
项目4任务2-Web展示网关上报的温湿度_第2页
项目4任务2-Web展示网关上报的温湿度_第3页
项目4任务2-Web展示网关上报的温湿度_第4页
项目4任务2-Web展示网关上报的温湿度_第5页
已阅读5页,还剩9页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

2相关知识34任务小结与练习1任务实施任务引入与目标Web展示网关上报的温湿度一、任务引入与目标任务目标任务2通过Node-RED流程设计,接收网关上报的MQTT消息,将消息中温湿度字段的值解析后,通过Web页面展示出来。解析展示的过程,与APP中的设计很像,都需要掌握JSON解析的知识。注意,在任务2中,Node-RED创建了MQTT客户端,与网关、APP中创建的MQTT客户端的地位是相等的。网关用项目3中的程序,将周期上报间隔改为1分钟,其他内容不变,包括消息的主题和消息的载荷。任务引入项目3将网关上报的MQTT消息经过解析,在APP上展示了温湿度的值。有了Node-RED工具之后,我们也可以将硬件检测的温湿度值在Web上展示出来,这样数据可视化的形式就更加丰富了。二、相关知识dashboard节点Node-RED中常用的图形化节点叫做dashboard,它主要用于快速创建实时数据仪表板。在安装节点的输入框内输入“dashboard”,找到名为“node-red-dashborad”的控件并点击安装即可。Web页面布局总体来看,通过dashboard设计的Web页面布局分为三级,分别是:tab、group、spacer。仪表板的布局依赖于tab和group属性,tab可以理解为页面,group是分组,spacer即控件。一个页面里可以有多个分组,建议使用多个分组,而不是一个大组,因为dashboard可以根据页面的大小动态调整分组的位置。三、任务实施实施设备部署了Node-RED和Arduino开发环境的计算机。网关和温湿度传感器各一个。实施过程1.Node-RED接收MQTT消息为了完成本任务中温湿度显示的功能,需要在Node-RED中创建MQTT客户端,接收MQTT消息,设计流程如图4-12所示。图4-12打印温湿度值流程三、任务实施流程中的2个节点,分别是mqttin(用于mqtt请求)和debug(用于打印调试信息)。对于mqttin节点,设置主题为网关上报的消息,如图4-13所示。接下来在mqttin节点中设置要连接的MQTT服务器,如图4-14所示。图4-13编辑mqttin节点图4-14编辑MQTT节点的服务器三、任务实施然后设置debug节点,输出调试信息,如图4-15所示。网关连接温湿度传感器,运行,使用的程序以及硬件连接与项目3保持一致,这里不再介绍。部署Node-RED流程,打开debug窗口,查看结果,如图4-16所示。图4-15编辑debug节点图4-16打印调试结果三、任务实施2.Web页面通过gauge展示温度我们既可以用文本显示消息载荷,也可以用图表显示网关上报的温度值。将前面的节点设为无效,MQTT节点复制后还要再用。增加一个“switch”和“gauge”节点。“switch”判断温度解析值非空,即判断MQTT消息中是否有“temperature”字段,如图417所示。“gauge”放在“健康监测中心”页面(对应Web的一个菜单)的一个“温度”组中。显示的内容是{{msg.payload.temperature}},即提取消息载荷的temperature字段的值,如图4-18所示。图4-17编辑switch节点图4-18编辑gauge节点三、任务实施结果如图4-19所示。网址是:1880/ui,用的是本机IP;如果Node-RED应用服务器部署在公网,可通过公网IP访问;如果部署在局域网,同一局域网里的计算机可以通过局域网IP访问。可以发现采用了二次解析过程,第一次判断非空,第二次再解析展示,与之前APP和网关对MQTT消息解析过程相同。二次解析过程可以避免以下情况:如果上报的是湿度消息,解析为空,展示错误图4-19gauge展示环境温度三、任务实施3.Web页面通过折线图展示温度“健康监测中心”页面新增group,名称为“温度曲线”。流程中需要增加一个change和chart节点,如图4-20所示。设置change节点的载荷(即输出到chart节点的载荷),为输入此节点的载荷的temperature的值,如图4-21所示。图4-20流程中增加温度曲线图4-21编辑change节点三、任务实施在chart节点中,设置显示10分钟的值。折线图中的标签为“十分钟温度变化”。范围、颜色等根据喜好确定即可,如图4-22所示。部署Node-RED流程,然后查看结果,如图4-23所示。图4-22编辑chart节点图4-23gauge和chart显示温度三、任务实施关于UI布局,可以在tab的layout里进行设计,如图4-24所示。可以设置宽度、高度及部件的相对位置,如图4-25所示。图4-24流程的UI布局图4-26温度监控界面完成后重新部署,结果如图4-26所示。图4-25设置UI属性三、任务实施4.Web页面通过gauge、折线图展示温度、湿度参照温度显示,分别以仪表盘和折线图的形式显示网关上报的湿度值。流程如图4-27所示,不再详细分析。调整布局,运行一段时间之后的结果如图4-28所示。图4-27流程中增加湿度监控图4-28温湿度监测情况四、任务小结与练习任务小结任务2在Node-RED中设计流程,分别实现了Node-RED接收MQTT消息

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论