时隔近一月,今天我来分享Web管理页面部分的内容。Web页面采用Flask框架,通过flask_login实现登录与权限验证,通过flask_sqlalchemy管理数据库,通过dash将数据绘制为图表……这部分内容太多,且为纯Web开发相关。因此代码便不详细一一介绍,感兴趣可以获取后续上传的源代码。下面直接看成果吧。
登录页:
首页:
统计页:
设置页:
主要讲解一下各个页面的功能,登录页顾名思义,用于登录系统,输入正确账号密码即可进入系统。
登录成功后进入首页,首页为系统的主要展示页。最上方是提示信息,接着是头像和系统名称。
绿色一行为导航栏,用于切换系统页面。
三个蓝色框分别为数据展示、指示灯和开关,鼠标悬停即可查看对应图标的注释。
数据展示框中展示当前ESP32通过传感器获取到的温度、湿度和光照强度数据、每隔数秒自动刷新。
指示灯框中为当前模块的实时状态,如果有状态变化,相应指示灯会变亮。
开关用于改变对应模块状态,可以控制水阀和补光灯的开启和关闭。
最下面是视频监控部分,红色方框为摄像头的开关,同时摄像头会每隔一定时间自动保存一张图片,可用于生成延时GIF图片。
切换到统计页。这里可以查看指定时间段内选中字段的数据统计图。
设置页可以修改用户名,并且可以对系统变量进行一些简单设置,例如补光灯和水阀总开关,补光灯阈值,数据展示时从数据库中取值的间隔,首页传感器数据更新间隔等。
Web页面部分的功能暂时就这么多,由于时间关系,先将系统搭建好再开发新的功能。
本帖最后由 Wenyou 于 2024-10-22 18:47 编辑