訓練家的佈弱格-Patch1.2

The BLOG of trainer



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

類型:NSR 150
作者:羽山
文章時間:2019-08-21 09:18:26
瀏覽人數:3731人
標題: 自製轉速表Part3
網址:http://demo.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://demo.3wa.tw/mypaper/?uid=shadow&mode=view&id=1406

自製LED轉速表Part2:https://demo.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-09-15)
【FZR 150】FZR維修-大閔廢鐵號

(2024-09-11)
【遊戲 / 生活】更換新的濾水器水龍頭

(2024-09-04)
【NSR 150】NSR150 大燈燈炮更換

(2024-09-01)
【KTM 390】KTM Duke 390 安裝空濾盒、水箱水、油箱、試發動

(2024-08-31)
【KTM 390】KTM Duke 390 引擎上車、節流閥安裝、空濾盒修補、單向閥思考

(2024-08-30)
【機車綜合相關】買了一組盜版牧田DTW1002

(2024-08-25)
【KTM 390】KTM Duke 390 汽門間隙檢查、凸輪軸安裝、汽缸蓋、機油壓力開關

(2024-08-24)
【KTM 390】KTM Duke 390更換內鏈排骨

(2024-08-17)
【KTM 390】KTM Duke 390內鏈排骨問題查修-清洗篇

(2024-08-10)
【KTM 390】KTM Duke 390內鏈排骨問題查修-中(落引擎)