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

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

為什么是Wio終端?

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

為您的項(xiàng)目制造pcb

您必須檢查PCBWAY在線訂購(gòu)pcb便宜!

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

Wio終端硬件特性

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

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

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

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

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

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

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

?LIS3DH加速度計(jì)(IMU)

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

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

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

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

?40針樹(shù)莓派兼容GPIO頭

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

?存儲(chǔ)：microSD卡插槽記錄或媒體

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

特性

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

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

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

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

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

硬件和庫(kù)

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

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

儀表板UI

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

?光傳感器→analoread (WIO_LIGHT)

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

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

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

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

代碼亮點(diǎn)

JSON狀態(tài)端點(diǎn)：

應(yīng)用屏幕顏色

部署步驟

?安裝庫(kù)(ArduinoJson, TFT_eSPI)。

?在草圖中更新Wi - Fi證書(shū)。

下面是完整的代碼：

?通過(guò)Arduino IDE上傳代碼。

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

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

演示體驗(yàn)

一旦連接，你會(huì)看到一個(gè)漸變的背景儀表板與動(dòng)畫(huà)卡。

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

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

?選擇一個(gè)顏色→點(diǎn)擊應(yīng)用→TFT立即改變，日志顯示每一個(gè)動(dòng)作與時(shí)間戳。

增強(qiáng)

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

?使用WebSockets進(jìn)行實(shí)時(shí)推送更新。

?使用簡(jiǎn)單的令牌保護(hù)端點(diǎn)。

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

結(jié)論

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

本文編譯自hackster.io