~為響應政府網路分級制度~
~本站全部內容均為限制級~

訓練家的佈弱格-Patch1.2

The BLOG of trainer



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

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

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

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

 

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

第 1 頁

有話要說  看留言 【0】

其他分類
當月訓練
(2019-08-29)
【NSR150】NSR150 裝 KTR150 「前叉彈簧」配置心得

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

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

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

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

最新訓練
(2019-11-13)
【光陽 酷龍150】酷龍150 整流罩斷點維修

(2019-11-06)
【KTM 390】KTM Duke 390 水泵油封更換

(2019-10-28)
【羽山廚房家常菜】幸福厚切香煎豬後腿排

(2019-10-27)
【羽山廚房家常菜】香煎美國翼板霜降牛排

(2019-10-27)
【FZR維修】FZR 全車軸承

(2019-10-10)
【哈特佛 VR】VR150重包座墊

(2019-09-30)
【哈特佛 VR】VR150整理(下集)

(2019-09-26)
【機車綜合相關】自製離合器線、油門線、RC鋼索

(2019-09-22)
【哈特佛 VR】VR150整理篇(中集)

(2019-09-18)
【哈特佛 VR】VR150整理篇(上集)