echarts 设置仪表盘数字的位置_falsk+flask_socketio+socket.io Client设置温度仪表盘实时数据更新...

NO.1前言

上期文章描述使用vue+echarts设置温度仪表盘并自定义区段颜色

本期文章接着用python flask设置socket服务和前端通信实时获取温度数据

主要内容为

1. 后端设置flask服务并启用socket

2. 前端使用socket.io(websocket)实时获取温度数据

3. arduino和python usb端口通信的关闭和独占访问模式(仅POSIX)

NO.2设置flask

安装依赖flask

pip install flask

安装依赖flask_cors

pip install flask_cors

安装依赖flask_socketio

pip install flask_socketio

以下代码使用python flask启动服务并支持socket

# 引入flask

服务启动后,默认地址为

http://127.0.0.1:5000/

NO.3前端socket

安装依赖socket.io

npm install socket.io

vue-cli项目中引用socket.io client

import io from "socket.io-client";

建立socket连接

格式const socket = io(server url);

const socket = io("http://127.0.0.1:5000");

NO.4设置事件

服务端定义事件接收

• 使用装饰器@socketio.on

• 事件名自定义,此处为hello

• 收到socket信息后打印数据到控制台台

• emit为发送给前端定义的事件响应

@socketio.on('hello')

前端定义事件接收

• 使用socket.on定义事件名

• 自定义事件名为replay

• 收到socket信息后打印数据到控制台台

socket.on("reply", data => {

事件通信测试

前端发起hello事情,并传递参数字符串world

socket.emit("hello", "world");

后端控制台日志如图

前端收到回应如图

NO.5实时数据

原先设计为

1. 储存到sqlite温湿度数据和时间戳

2. 前端通过http轮询或者socket获取最后一次数据库数据

3. 比对当前时间戳,误差3秒左右为可用数据

4. 时间跨度大,则图表置灰,数据不可用(因为不是当前的温度)

5. 设置为动态更新折线图

现在改为

1. 通过socket每秒一次通信事情开启usb串口,获取数据

2. 服务器获取到温湿度数据后通过socket事情传给前端,然后关闭串口

3. 前端拿到数据后绘制/更新仪表盘数据(不用折线图),然后一秒后再次请求数据(频率前端自行控制)

4. 循环往复

NO.6实际代码

前端socket.vue,具体细节参考注释

服务端代码app.py,具体细节参考注释

# 引入flask

NO.7tips

serial.Serial新加参数exclusive为True

Exclusive(bool)–设置互斥访问模式(仅POSIX)。如果端口已经以独占访问模式打开，则不能以独占访问模式打开端口。

这样在重复socket连接flask打开串口时,就不会因为独占模式报错无权限开启端口

如果需要优化,也可以加上try except 进行异常处理

本文功能优先,暂不细化

ser = serial.Serial(serialPosrt, baudRate, timeout=timeout, exclusive=True)

is_open:获取串行端口的状态，无论它是否打开

while ser.is_open: 循环获取数据(条件)

当每次通信成功获取和传递数据后,及时关闭串口,条件就不成立,就不会一直读取arduino数据,只有当需要的时候才获取

ser.close():关闭串口

serial.Serial方法会默认init和open端口,所以要使用close开关闭端口

NO.8文档地址

pyserial文档地址

https://pyserial.readthedocs.io/en/latest/pyserial_api.html

flask-socketio文档地址

https://flask-socketio.readthedocs.io/en/latest/

socket.io文档地址

https://socket.io/

NO.9总结

本文描述了

• flask服务端socket代码

• 前端socket和echarts图表代码

• 技术构思流程和技术细节tips

其他前置条件

• usb连接arduino获取温湿度(按之前的文章做好准备工作)

• 代码中的端口,设备名,其他细节根据自己环境修改

至此,一个实用arduino获取温湿度计,并通过usb串口实现在web显示温度实时仪表盘图表的功能完成

其他湿度,光感,声音等传感器数据都可以用本demo提供的思路和方法来完成实时图表和数据通信以及储存功能

下期计划

• web面板使用控制arduino的led灯的开关(反向控制下位机)

• 蓝牙通信和wifi通信等通信协议尝试和深入(脱离有线,开始无线互联)

END.

你还可以阅读以下文章

vue+echarts设置arduino温度仪表盘并自定义区段颜色

使用python+sqlalchemy把温湿度传感器的数据通过usb串口存到sqlite