運用 html網頁(內嵌micropython標籤tag)的button按鈕功能 在 WiFiBoy32(打開AP mode) 上點亮 LED-16

動機：可否運用 html網頁(內嵌micropython標籤tag)的button按鈕功能 在 WiFiBoy32(打開AP mode) 上點亮 LED-16 呢?!

準備環境：
1.Macbook筆電
2.WiFiBoy32(需連接USB數據線)

實作步驟：
1.首先，下載 MicroPython Firmware for ESP32 ( http://micropython.org/resources/firmware/esp32-20180104-v1.9.3-238-g42c4dd09.bin ) 並燒錄至 WiFiBoy32，指令如下：
esptool.py --port /dev/cu.SLAB_USBtoUART erase_flash
esptool.py --chip esp32 --port /dev/cu.SLAB_USBtoUART write_flash -z 0x1000 esp32-20180104-v1.9.3-238-g42c4dd09.bin
(esptool要事先安裝，可 參攷1. 的安裝步驟)

執行畫面，如下圖

2.其次，請依據 參攷4. 安裝 minicom，並依據 參攷1. 連接 WiFiBoy32 並執行 Hello World Sample ...指令如下：
minicom --baudrate 115200 --device /dev/cu.SLAB_USBtoUART

執行畫面，如下圖
( 要離開 monicom，是先按下 control+A 再按 X )

3.接著，在 REPL模式測試 LED Blink Sample (依 參攷1.)，WiFiBoy32 的測試是在 LED-16，指令如下圖

執行結果，如下圖

4.接下來，安裝 Adafruit MicroPython tool (ampy) 如下圖

(在Windows平台可以使用DFRobot出品的 uPyCraft 好用的GUI工具，在MacOS平台我還沒找到好用的非指令式工具...)

5.再來，製作 blink.py，我利用 nano 來製作，如下圖

上傳至 WiFiBoy32 及 執行畫面，如下圖
此時，可看見 WiFiBoy32 的 LED-16 是閃亮的...

6.開啟 WiFiBoy32 的 AP mode，並製作成 boot.py 讓 WiFiBoy32 每次開機會自動執行，如下圖


利用 minicom 進入 WiFiBoy32 來檢查連線狀態，如下圖
此時在 MacBook筆電的 WiFi清單 中可看見~ ESP32-WiFiBoy32-AP_IF

7.再來，就是本篇的重點了，我 參攷1. 作者無法試成功的~ MicroWebSrv (Not working yet for me) 而我測試成功，如下：
(a)下載 MicroWebSrv 範例碼，指令：git clone https://github.com/jczic/MicroWebSrv
(b)進入該目錄，指令：cd MicroWebSrv
(c)上傳程式，如下圖
我測試成功的關鍵是上傳了作者的 main.py，指令如下
ampy --port /dev/cu.SLAB_USBtoUART put main.py
(d)MacBook筆電連線~ ESP32-WiFiBoy32-AP_IF
(e)以Chrome瀏覽器連線 192.168.4.1 測試網頁，如下圖
(f)再連結我寫的WiFiBoy32's LED-16點燈測試網頁，如下圖

操作影片，如下

作者真是厲害～利用 WebSockets 內嵌 micropython 標籤的網頁，就可以快樂執行了...

 提供網頁源碼，如下：
blink.pyhtml


 ledon.pyhtml


 ledoff.pyhtml


後記：利用 Wi-Fi + micropython 來玩 WiFiBoy32 是件快樂的事...


參攷：
1.Getting Started with MicroPython on ESP32 – Hello World, GPIO, and WiFi, https://www.cnx-software.com/2017/10/16/esp32-micropython-tutorials/
3.MicroPython downloads/Firmware for ESP32 boards, http://micropython.org/download#esp32
4.Install minicom on Mac OSX, http://macappstore.org/minicom/

留言

張貼留言