IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 嵌入式 -> 【STM32】最近脑洞的一个前端监测系统 -> 正文阅读

[嵌入式]【STM32】最近脑洞的一个前端监测系统

接上帖
STM32H743IIT6开发板+LAN8720+W25Q128移植RT-Thread(包含文件系统+TFTP+web服务器+AJAX前端与服务器CGI联动)

上次已经搞清楚了RTT下Web服务器联动前端CGI的方法
然后我进一步脑洞了一个基于前端的监测系统,下位机就是我上次用的H743板子
下位机还是上次那个平台,就是RTT系统多装了一个cJSON,这里不过多讲cJSON的用法。

主要讲讲套路

  • 下位机通过JSON把需要的数据包装好,通过CGI接口,响应前端AJAX的请求,将需要的数据以JSON发上去,前端JS进行解析展示到浏览器。
  • 浏览器触发某些事件,发送AJAX请求,下位机通过CGI收到请求和需要的参数,然后根据参数,把需要的数据以JSON格式再发回前端,前端解析到浏览器展示出来。
  • 所有的前端页面以文件的形式放在下位机的SD卡上,RTT系统提供的web服务器对接这些页面文件。
    在这里插入图片描述

然后这里我直接展示最后的效果并提供我这个前端demo的代码给大家参考
不适合展示的信息我已经XX处理~~~
前端部分就是简单的HTML/CSS/JS/jQuery
【主要自己不是专业的前端人员,H743也不是强大的A核处理器,所以也整不了太复杂的效果】
不过凭借我渣渣的前端技术,能做到这个程度我也很满意了
首先是主页【整了个侧边栏,快速切换到其他页面,移动到对应图标会点亮对应的字】
在这里插入图片描述
板卡状态页面
这里整了个GET请求请求下位机CGI传输基本信息,当然没接上位机也就没得数据啦
在这里插入图片描述
机柜状态页面
我这里用HTML DIV和表格的方式做了一个机柜的展示效果,移动到对应模块模块会变红并且会弹出一个信息框,这里可以对应做AJAX请求下位机发对应的模块的信息上来。
在这里插入图片描述
目前就整了上面这些页面,其他页面还是空的
大致脑洞的成果就是这样子
然后我把前端部分分享给大家
下载地址

  嵌入式 最新文章
基于高精度单片机开发红外测温仪方案
89C51单片机与DAC0832
基于51单片机宠物自动投料喂食器控制系统仿
《痞子衡嵌入式半月刊》 第 68 期
多思计组实验实验七 简单模型机实验
CSC7720
启明智显分享| ESP32学习笔记参考--PWM(脉冲
STM32初探
STM32 总结
【STM32】CubeMX例程四---定时器中断(附工
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 13:17:11  更:2022-03-06 13:19:22 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 8:39:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码