Seeed Wio終端不僅僅是一個帶屏幕的微控制器-它是一個緊湊的物聯(lián)網(wǎng)強國。在這個項目中，我們將把它變成一個支持Wi - Fi的web服務(wù)器，它承載著一個時尚的儀表板。從任何瀏覽器，你可以監(jiān)控實時傳感器數(shù)據(jù)(光，麥克風(fēng)，按鈕)，甚至實時控制TFT屏幕的顏色。

本教程介紹了設(shè)計、代碼和用戶界面，展示了如何將嵌入式c++與現(xiàn)代web技術(shù)相結(jié)合。

為什么是Wio終端?

在深入研究該項目之前，讓我們先了解一下是什么使Wio Terminal成為如此多功能的平臺。它不僅僅是一個微控制器-它是一個完整的物聯(lián)網(wǎng)開發(fā)工具包，內(nèi)置傳感器，顯示器和連接。

為您的項目制造pcb

您必須檢查PCBWAY在線訂購pcb便宜!

你得到10個高質(zhì)量的pcb制造和運送到你的家門口便宜。你也可以在第一次訂購時獲得折扣。將您的Gerber文件上傳到PCBWAY，以獲得高質(zhì)量和快速周轉(zhuǎn)時間的制造。PCBWay現(xiàn)在可以提供完整的產(chǎn)品解決方案，從設(shè)計到外殼生產(chǎn)?？纯此麄兊脑诰€Gerber瀏覽器功能。有了獎勵積分，你就可以從他們的禮品店得到免費的東西。此外，從這里查看這個有用的博客PCBWay插件KiCad。使用此插件，您可以在KiCad中完成設(shè)計后直接訂購pcb。

Wio終端硬件特性

以下是使Wio終端成為儀表板和物聯(lián)網(wǎng)項目的理想選擇的突出功能：

?處理器：ATSAMD51P19 ARM CortexM4F，運行頻率120 MHz(可提升至200 MHz)

?內(nèi)存：512kb閃存，192kb RAM，外加4mb外部閃存

?無線：Realtek RTL8720DN模塊，支持雙頻Wi - Fi (2.4G/5G)和藍(lán)牙5.0

?顯示：2.4英寸LCD (320×240分辨率)由TFT_eSPI驅(qū)動

?光傳感器(400 - 1050nm范圍)

?麥克風(fēng)(1.0V-10V，靈敏度?42 dB)

?LIS3DH加速度計(IMU)

?紅外發(fā)射器(940nm)

?音頻：內(nèi)置蜂鳴器/揚聲器(~78 dB @10厘米，4000赫茲)

?3個用戶按鈕(A、B、C)

?5路操縱桿開關(guān)

?40針樹莓派兼容GPIO頭

?Seeed的Grove生態(tài)系統(tǒng)的2個Grove連接器

?存儲：microSD卡插槽記錄或媒體

?連接：用于編程和電源的USB - C端口

特性

?Wi - Fi服務(wù)器：運行在端口80上，提供HTML和JSON端點。

?實時儀表板：顯示光傳感器、麥克風(fēng)值和按鈕狀態(tài)。

?屏幕控制：在瀏覽器中選擇一種顏色，立即應(yīng)用到TFT。

?調(diào)試日志：串行日志和瀏覽器日志都是透明的。

?響應(yīng)式UI: CSS網(wǎng)格布局適合移動和桌面。

硬件和庫

?硬件：Wio終端(內(nèi)置傳感器和TFT)。

?庫：rpcWiFi + WiFiServer→NetworkingArduinoJson→JSON序列化/反序列化ationtft_espi→TFT顯示控件

儀表板UI

嵌入的HTML用CSS動畫定義了一個現(xiàn)代的、基于卡片的布局。每張卡片顯示一個傳感器或控制器：

?光傳感器→analoread (WIO_LIGHT)

?麥克風(fēng)→analogRead(WIO_MIC)

?按鍵A/B/C→digitalRead(WIO_KEY_X)

?屏幕顏色→+應(yīng)用/刷新按鈕

JavaScript每秒鐘輪詢/狀態(tài)并更新值。顏色選擇器的值在發(fā)布到/screen之前從#RRGGBB轉(zhuǎn)換為RGB565。

代碼亮點

JSON狀態(tài)端點：

應(yīng)用屏幕顏色

部署步驟

?安裝庫(ArduinoJson, TFT_eSPI)。

?在草圖中更新Wi - Fi證書。

下面是完整的代碼：

?通過Arduino IDE上傳代碼。

?打開串口監(jiān)視器→記錄IP地址。

?現(xiàn)在您可以打開IP地址，并且可以使用該工具。

演示體驗

一旦連接，你會看到一個漸變的背景儀表板與動畫卡。

?燈光和麥克風(fēng)值每秒鐘更新一次。

?按鈕狀態(tài)在“按下”和“釋放”之間切換。

?選擇一個顏色→點擊應(yīng)用→TFT立即改變，日志顯示每一個動作與時間戳。

增強

?為傳感器趨勢添加圖表(使用Chart.js)。

?使用WebSockets進行實時推送更新。

?使用簡單的令牌保護端點。

?擴展儀表板與更多的傳感器(溫度，加速度計)。

結(jié)論

這個項目展示了Wio終端如何作為一個獨立的物聯(lián)網(wǎng)儀表板，將嵌入式c++與現(xiàn)代網(wǎng)頁設(shè)計相結(jié)合。它非常適合課堂演示、創(chuàng)客項目或物聯(lián)網(wǎng)界面原型。

本文編譯自hackster.io