繼上篇使用了瀏覽器Chrome顯示WiFi傳輸的即時影像之後

老男人覺得如果不會設計手機App,用瀏覽器來當做操做介面也是一種方法

5.png

 

上圖為此次使用的硬體

DS18b20溫度感測器

NodeMCU(ESP-12E WiFi )

LED 兩個

 

Arduino用Web Page控制LED的範例非常多

例如這裡

但是要做出自己想要的功能

還是修改與測試^^

 

老樣子

打開Chrome 然後輸入程式裡設定好的Server IP

1.png

 

輸入完按Enter

就進入下圖的畫面

畫面Html語法是寫在NodeMCU裡

當輸入IP按Enter後

Chrome就會來連接

NodeMCU只是把Html語法回傳給Chrome

就形成下面的畫面

3.png

 

老男人讓畫面顯示房間內的攝氏溫度與華氏溫度

然後做四個按鈕控制2個LED

兩個圓形燈泡代表LED1與LED2

 

至於操做使用了螢幕錄影

內容是

1.溫度變化的表現

   故意手握著溫度計溫度就上升,吹電風扇溫度就下降。

2.LED On/Off操做

   LED燈泡亮滅表示

 

手機錄影實際的狀況

 

後來覺得用Chrome透過Wifi來操做

需要有登入(Log in)的方式比較安全

6.png

 

版面也稍做修飾

7.png

 

以下是螢幕錄影

 

因為是使用Chrome當介面

手機上也可以操做

安卓手機

 

蘋果手機

創作者介紹
創作者 老男人 的頭像
老男人

老男人幻想世界

老男人 發表在 痞客邦 留言(7) 人氣()


留言列表 (7)

發表留言
  • koko
  • 早安, 謝謝分享..........

    假日愉快..........[:emotion1379949798-728752876.gif]
  • 假日愉快

    老男人 於 2018/05/27 15:23 回覆

  • wenshu
  • 感謝分享
  • 感謝來訪

    老男人 於 2018/05/27 16:15 回覆

  • 安綺~♥ 滴滴咕咕
  • 推推~
    謝謝好友的分享!
    午安安,
    祝福週一開心快樂。。
  • 感謝好友推推

    老男人 於 2018/05/31 23:02 回覆