网页实现温湿度监控,如何处理单片机通过WiFi传输来的温湿度数据,控制温湿度计跟踪显示-上海实邦电子科技有限公司
你的位置:首页 > 新闻动态 > 技术交流

网页实现温湿度监控,如何处理单片机通过WiFi传输来的温湿度数据,控制温湿度计跟踪显示

2022/8/23 15:03:13      点击:

在制作教程的时候,为了显示出湿度,将温度计的网页界面进行复制,改成湿度计。在简单的复制中发现一些问题。如下是上次制作的温度监控界面,本次复制一个温度计作为湿度计。

如下段代码是前段的温度计界面,这个在前面的物联网WiFi温度监控中有提到过。这次需要复制出来显示湿度,形成温湿度的监控。


很简单,将这段代码复制之后,则会出现两个温度计复制后的结果是,这两个温度计并不在同一行上,因此这就是要解决的一个问题。


查阅资料,在原本的代码外围增加div,并且设置style="float:left;width:200px;",其中float:left;是让第一个温度计居左,width:200px;是这是温度计的宽度,否则两个温度计会挨的特别近。


以上就完成了两个温度计的复制,接下来针对第二个温度计作为湿度计进行内容的修改。湿度范围是0到100%,其实这个应该根据DHT11的湿度范围20%到90%更改。


接下来对湿度数据进行提取,之前的温度计中已经接收到数据,所以非常方便。在js代码中获取到前端的控件,包括湿度计高度和数据显示。如下端代码的range2和humidity。


代码中的range2humidity分别对应湿度计数值和高度。


最终接收到代码数据。

通过测试,实现了单片机控制DHT11采集温湿度数据,控制WiFi模块上传温湿度数据到网页进行远程监控。