05 網頁模組

(2022/06/22)

之前完成了pixel:bit利用彩色螢幕來顯示鏡頭的畫面，本文則利用【瀏覽器】來觀看鏡頭畫面，全部採用【法蘭斯】的【網頁模組】來做，直接套用就好了，真的很簡單！並利用製作在網頁上的【按鈕】來控制pixel:bit腳位下的LED燈，如下，供參(更要感謝法蘭斯及吉哥，在我遇到問題時的指導)


一、基本款的使用

  • 利用網頁來觀看鏡頭畫面

  • 直接利用【法蘭斯】的【網頁模組】，除了WIFI帳密外，其他都不用改

  • 燒錄完後，先點擊【PUTTY序列埠監看視窗】，一定要先開進去【序列埠監看視窗】，才能做後續的事，後來又發現，這些沒做好像也沒關係！

  • 或開啟後方的【網頁序列埠監看視窗】也可以

  • 到網址列輸入本機的IP

    • 一開始如果沒有看到畫面，就多點擊幾次【重新整理】

    • 如果畫面太小，可調整程式積木內的【解析度】

  • 也可直接在網址列輸入http://本機的IP:81/stream (兩者同時只能執行一個)

  • 也可直接在網址列輸入http://本機的IP/capture來擷取畫面

二、利用網址控制pixel:bit

  • 利用網址來控制【pixel:bit+EZ Start Kit+】上LED燈的亮滅

  • (2022/06/27更新)因為，ESP32和pro mini之間的溝通一定要設57600，可能太高的鮑率，pro mini無法支援 ，所以這邊的鮑率一定要設57600 (感謝吉哥的指導)，之前設115200發現傳值時會出現問題！

  • 利用以下程式，一開始發現下半部的程式都沒有作用！！

  • 後來，感謝法蘭斯老師的指導

    • 串流模組指令格式跟張流模組不同

    • 張流版

      • ?led=2

    • 串流版

      • /control?led=2

  • 因為pixel:bit腳位是ATmega328P晶片控制的，所以要利用序列埠把ESP32晶片的控制傳給 ATmega328P晶片

    • EZ Start Kit+的LED燈腳位如下：

      • 紅色LED燈(IO4 ->P13 ->D13)

      • 黃色LED燈(IO5 ->P14 ->D12)

      • 紅色LED燈(IO6 ->P15 ->D11)

    • 另外，感謝吉哥的指導，使用吉哥積木的【序列埠】，鮑率一樣設57600

  • 先用網頁序列埠來測試

    • 發現，\r、\n沒有被過濾掉，所以會出現問題，先不要用它來測試！

    • 但改用ArduinoIDE的序列埠監看視窗就沒有問題了！

三、利用網頁控制pixel:bit

  • 利用網頁建【幾個按鈕】來控制【pixel:bit+EZ Start Kit+】上LED燈的亮滅

  • 一樣都採用法蘭斯的積木，使用到【網頁元素】

  • 程式如下：

  • 結果

  • 也可嘗試用這些按鈕做成小車的控制鈕(如前進、後退、左轉、右轉、停止)

    • ATmega328P晶片，如03登月小車的小車程式

    • ESP32程式如下：

    • 結果如下：