构建一个独立的物联网仪表板，使Wio终端通过Wi - Fi具有交互性和视觉吸引力

Seeed Wio终端不仅仅是一个带屏幕的微控制器-它是一个紧凑的物联网强国。在这个项目中，我们将把它变成一个支持Wi - Fi的web服务器，它承载着一个时尚的仪表板。从任何浏览器，你可以监控实时传感器数据(光，麦克风，按钮)，甚至实时控制TFT屏幕的颜色。

本教程介绍了设计、代码和用户界面，展示了如何将嵌入式c++与现代web技术相结合。

为什么是Wio终端?

在深入研究该项目之前，让我们先了解一下是什么使Wio Terminal成为如此多功能的平台。它不仅仅是一个微控制器-它是一个完整的物联网开发工具包，内置传感器，显示器和连接。

为您的项目制造pcb

您必须检查PCBWAY在线订购pcb便宜!

你得到10个高质量的pcb制造和运送到你的家门口便宜。你也可以在第一次订购时获得折扣。将您的Gerber文件上传到PCBWAY，以获得高质量和快速周转时间的制造。PCBWay现在可以提供完整的产品解决方案，从设计到外壳生产。看看他们的在线Gerber浏览器功能。有了奖励积分，你就可以从他们的礼品店得到免费的东西。此外，从这里查看这个有用的博客PCBWay插件KiCad。使用此插件，您可以在KiCad中完成设计后直接订购pcb。

Wio终端硬件特性

以下是使Wio终端成为仪表板和物联网项目的理想选择的突出功能：

•处理器：ATSAMD51P19 ARM CortexM4F，运行频率120 MHz(可提升至200 MHz)

•内存：512kb闪存，192kb RAM，外加4mb外部闪存

•无线：Realtek RTL8720DN模块，支持双频Wi - Fi (2.4G/5G)和蓝牙5.0

•显示：2.4英寸LCD (320×240分辨率)由TFT_eSPI驱动

•光传感器(400 - 1050nm范围)

•麦克风(1.0V-10V，灵敏度−42 dB)

•LIS3DH加速度计(IMU)

•红外发射器(940nm)

•音频：内置蜂鸣器/扬声器(~78 dB @10厘米，4000赫兹)

•3个用户按钮(A、B、C)

•5路操纵杆开关

•40针树莓派兼容GPIO头

•Seeed的Grove生态系统的2个Grove连接器

•存储：microSD卡插槽记录或媒体

•连接：用于编程和电源的USB - C端口

特性

•Wi - Fi服务器：运行在端口80上，提供HTML和JSON端点。

•实时仪表板：显示光传感器、麦克风值和按钮状态。

•屏幕控制：在浏览器中选择一种颜色，立即应用到TFT。

•调试日志：串行日志和浏览器日志都是透明的。

•响应式UI: CSS网格布局适合移动和桌面。

硬件和库

•硬件：Wio终端(内置传感器和TFT)。

•库：rpcWiFi + WiFiServer→NetworkingArduinoJson→JSON序列化/反序列化ationtft_espi→TFT显示控件

仪表板UI

嵌入的HTML用CSS动画定义了一个现代的、基于卡片的布局。每张卡片显示一个传感器或控制器：

•光传感器→analoread (WIO_LIGHT)

•麦克风→analogRead(WIO_MIC)

•按键A/B/C→digitalRead(WIO_KEY_X)

•屏幕颜色→+应用/刷新按钮

JavaScript每秒钟轮询/状态并更新值。颜色选择器的值在发布到/screen之前从#RRGGBB转换为RGB565。

代码亮点

JSON状态端点：

应用屏幕颜色

部署步骤

•安装库(ArduinoJson, TFT_eSPI)。

•在草图中更新Wi - Fi证书。

下面是完整的代码：

•通过Arduino IDE上传代码。

•打开串口监视器→记录IP地址。

•现在您可以打开IP地址，并且可以使用该工具。

演示体验

一旦连接，你会看到一个渐变的背景仪表板与动画卡。

•灯光和麦克风值每秒钟更新一次。

•按钮状态在“按下”和“释放”之间切换。

•选择一个颜色→点击应用→TFT立即改变，日志显示每一个动作与时间戳。

增强

•为传感器趋势添加图表(使用Chart.js)。

•使用WebSockets进行实时推送更新。

•使用简单的令牌保护端点。

•扩展仪表板与更多的传感器(温度，加速度计)。

结论

这个项目展示了Wio终端如何作为一个独立的物联网仪表板，将嵌入式c++与现代网页设计相结合。它非常适合课堂演示、创客项目或物联网界面原型。

本文编译自hackster.io