Wenyou 发表于 2024-10-22 17:03

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

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

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

<p><span style="font-size:18px;">登录页：</span></p>

<div style="text-align: center;"></div>

<div><span style="font-size:18px;">首页：</span></div>

<p>&nbsp;</p>

<div style="text-align: center;"></div>

<p><span style="font-size:18px;">统计页：</span></p>

<div style="text-align: center;"></div>

<p><span style="font-size:18px;">设置页：</span></p>

<div style="text-align: center;">
<div style="text-align: center;"></div>
</div>

<div><span style="font-size:18px;">主要讲解一下各个页面的功能，登录页顾名思义，用于登录系统，输入正确账号密码即可进入系统。</span></div>

<div><span style="font-size:18px;">登录成功后进入首页，首页为系统的主要展示页。最上方是提示信息，接着是头像和系统名称。</span></div>

<div><span style="font-size:18px;">绿色一行为导航栏，用于切换系统页面。</span></div>

<div><span style="font-size:18px;">三个蓝色框分别为数据展示、指示灯和开关，鼠标悬停即可查看对应图标的注释。</span></div>

<div><span style="font-size:18px;">数据展示框中展示当前ESP32通过传感器获取到的温度、湿度和光照强度数据、每隔数秒自动刷新。</span></div>

<div><span style="font-size:18px;">指示灯框中为当前模块的实时状态，如果有状态变化，相应指示灯会变亮。</span></div>

<div><span style="font-size:18px;">开关用于改变对应模块状态，可以控制水阀和补光灯的开启和关闭。</span></div>

<div><span style="font-size:18px;">最下面是视频监控部分，红色方框为摄像头的开关，同时摄像头会每隔一定时间自动保存一张图片，可用于生成延时GIF图片。</span></div>

<div>
<div style="text-align: center;"></div>

<div><span style="font-size:18px;">切换到统计页。这里可以查看指定时间段内选中字段的数据统计图。</span>

<div style="text-align: center;">
<div style="text-align: center;"></div>

<div style="text-align: left;"><span style="font-size:18px;">设置页可以修改用户名，并且可以对系统变量进行一些简单设置，例如补光灯和水阀总开关，补光灯阈值，数据展示时从数据库中取值的间隔，首页传感器数据更新间隔等。</span></div>

<div style="text-align: left;"><span style="font-size:18px;">Web页面部分的功能暂时就这么多，由于时间关系，先将系统搭建好再开发新的功能。</span></div>
&nbsp;

<div style="text-align: left;">&nbsp;</div>

<div style="text-align: left;">&nbsp;</div>

<div style="text-align: left;">&nbsp;</div>

<p>&nbsp;</p>
</div>

<p>&nbsp;</p>
</div>
</div>

<div>&nbsp;</div>

<p>&nbsp;</p>

Jacktang 发表于 2024-10-23 07:23

<p>结果确实不错，期待续上传的源代码哈</p>

chejm 发表于 2024-10-23 23:59

<p>楼主分享的技术内容确实精彩，希望楼主能提供更详细的相关内容</p>

CoderX9527 发表于 2024-10-29 19:23

<p>楼主，啥时候上传代码捏</p>

Wenyou 发表于 2024-10-29 21:44

CoderX9527 发表于 2024-10-29 19:23
楼主，啥时候上传代码捏

<p>就这两天，发总结帖的时候</p>
页: [1]
查看完整版本: 【2024 DigiKey 创意大赛】基于Raspberry Pi 5的植物生长监管系统—3、Web页面