訓練家的佈弱格-Patch1.2

The BLOG of trainer



編輯日期:2019-08-21 09:18

類型:NSR 150
作者:羽山
文章時間:2019-08-21 09:18:26
瀏覽人數:4003人
標題: 自製轉速表Part3
網址:http://sunnyriver.3wa.tw/blog/blog.php?id=1788
內容:
 

之前作了 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://sunnyriver.3wa.tw/mypaper/?uid=shadow&mode=view&id=1406

自製LED轉速表Part2:https://sunnyriver.3wa.tw/blog/blog.php?id=1787

CSS Tachometer:https://codepen.io/ilhantekir/pen/igyEe

 

首頁  上十頁  上一頁  1 下一頁    最末頁 (總共有...1頁)

第 1 頁

有話要說  看留言 【0】
其他分類
當月訓練
(2019-08-29)
【NSR 150】NSR150 裝 KTR150 「前叉彈簧」配置心得

(2019-08-21)
【KTM 390】KTM RC390 安裝可調速風扇

(2019-08-21)
【NSR 150】自製轉速表Part3

(2019-08-21)
【NSR 150】自製LED轉速表Part2

(2019-08-12)
【機車綜合相關】家庭噴砂機總合使用心得

最新訓練
(2024-12-22)
【KTM 390】KTM RC390 更換後輪

(2024-12-17)
【木工】三樓客廳椅子維修

(2024-12-17)
【出遊】聯合大學一日遊

(2024-12-02)
【NSR 150】NSR150 改裝回 14T

(2024-11-04)
【酷龍 150】酷龍150 換新鏈條 里程:39250km

(2024-10-31)
【機車綜合相關】煞車檢測筆測量電阻範圍

(2024-10-29)
【機車綜合相關】拆胎特工-輪胎拆胎架

(2024-10-25)
【NSR 150】NSR150 更換前煞車油(簡易) 43177km

(2024-10-25)
【網誌】加密文章測試

(2024-10-19)
【本田 MSX-125】MSX-125 更換前輪軸承