[经验分享] 【2024 DigiKey 创意大赛】基于Raspberry Pi 5的植物生长监管系统—3、Web页面

Wenyou   2024-10-22 17:03 楼主

时隔近一月,今天我来分享Web管理页面部分的内容。Web页面采用Flask框架,通过flask_login实现登录与权限验证通过flask_sqlalchemy管理数据库,通过dash将数据绘制为图表……这部分内容太多,且为纯Web开发相关。因此代码便不详细一一介绍,感兴趣可以获取后续上传的源代码。下面直接看成果吧。

登录页:

登录页.png
首页:

 

首页.png

统计页:

统计页.png

设置页:

设置页.png
主要讲解一下各个页面的功能,登录页顾名思义,用于登录系统,输入正确账号密码即可进入系统。
登录成功后进入首页,首页为系统的主要展示页。最上方是提示信息,接着是头像和系统名称。
绿色一行为导航栏,用于切换系统页面。
三个蓝色框分别为数据展示、指示灯和开关,鼠标悬停即可查看对应图标的注释。
数据展示框中展示当前ESP32通过传感器获取到的温度、湿度和光照强度数据、每隔数秒自动刷新。
指示灯框中为当前模块的实时状态,如果有状态变化,相应指示灯会变亮。
开关用于改变对应模块状态,可以控制水阀和补光灯的开启和关闭。
最下面是视频监控部分,红色方框为摄像头的开关,同时摄像头会每隔一定时间自动保存一张图片,可用于生成延时GIF图片。
首页注释.png
切换到统计页。这里可以查看指定时间段内选中字段的数据统计图。
统计页注释.png
设置页可以修改用户名,并且可以对系统变量进行一些简单设置,例如补光灯和水阀总开关,补光灯阈值,数据展示时从数据库中取值的间隔,首页传感器数据更新间隔等。
Web页面部分的功能暂时就这么多,由于时间关系,先将系统搭建好再开发新的功能。
 
 
 
 

 

 

 

 

本帖最后由 Wenyou 于 2024-10-22 18:47 编辑

回复评论 (4)

结果确实不错,期待续上传的源代码哈

点赞  2024-10-23 07:23

楼主分享的技术内容确实精彩,希望楼主能提供更详细的相关内容

点赞  2024-10-23 23:59

楼主,啥时候上传代码捏

点赞  2024-10-29 19:23
引用: CoderX9527 发表于 2024-10-29 19:23 楼主,啥时候上传代码捏

就这两天,发总结帖的时候

点赞  2024-10-29 21:44
电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 京公网安备 11010802033920号
    写回复