之前作了 8 LED、16 LED、Servo 等轉速表
讓我一直想把轉速表作在手機,或是網頁上
轉速表的 UI 參考了網路上的一個 html、css3、javascript 的版本:
https://codepen.io/ilhantekir/pen/igyEe
修改程式碼,改成機車轉速用的 0~14000rpm 的版本,並調整紅線區的位置
如此就有一個基礎的轉速表 UI 樣版
接下來只需要調整 Arduino ESP-8266 NodeMcu 的程式碼
因為 Arduino 本身有 Wifi,轉上基地台後,就可以傳輸資料
有這個傳輸方式再來就要想辦法把轉速訊號傳到網頁的 UI 畫面
如果是手機,手機分享基地台,讓裝置連上後,手機要寫個 APP 來接收資料
在開發手機 APP 前,先用 3WA 的網站試看看
嘗試把訊號餵入 3WA 主機,再用 Web 去接資料
然後就把第二版 LED 的功能跟網路Wifi 傳輸的功能作出來了
目前資料傳輸協定是用 mqtt 搭配 websocket,QoS:0,沒想到跑起來居然沒啥延遲~
日後再改成純 Websocket send data,這樣就不用再多架一個 mqtt Server XD
之後手機用 Webview 開發,就能輕易改變各種造型
第三版支援網頁 UI 程式碼:
https://github.com/shadowjohn/NSR150_RC_Computer/blob/master/NSR150_RC_COMPUTER/RPM_METER/RPM_METER_V0.03/RPM_METER_V0.03.ino
參考資料:
MQTT:https://59-126-75-42.hinet-ip.hinet.net/mypaper/?uid=shadow&mode=view&id=1406
自製LED轉速表Part2:https://59-126-75-42.hinet-ip.hinet.net/blog/blog.php?id=1787
CSS Tachometer:https://codepen.io/ilhantekir/pen/igyEe