06 web:bit的使用

  （2023／01／18、2023／03／01再修）

• 本教材短網址：http://gg.gg/0308ss 

• 研習時間：2023/03/08 下午1:30~4:30

• 地點：新上國小三樓電腦教室一

• 講師：黃文玉老師

Web:Bit這塊開發板是高雄市很多國中小都有的開發板，為了讓這塊板子有更多的用途，這單元我們利用microblock來寫程式來玩玩Web:Bit，目前只適用Web:Bit V1的板子，V2不適用。

一、認識Web:bit

• 官方(Webduino，慶奇科技)資料

  • Web:Bit教學手冊：https://webbit.webduino.io/tutorials/doc/zh-tw/education/index.html 

  • Web:Bit教育版

    •  線上版網址：https://webbit.webduino.io/blockly/?demo=default   (免註冊登入)

    • 安裝版下載：https://ota.webduino.io/WebBitInstaller/WebBitSetup.exe 

  • Web:Bit腳位的介紹：最下方有V1腳位介紹 https://webbit.webduino.io/tutorials/doc/zh-tw/education/index.html 

    • 全彩 LED 矩陣：A10 ( GPIO 4 )

    • 光敏感應器：左上 A0 ( GPIO 36 )、右上 A3 ( GPIO 39 )

    • 按鈕開關：按鈕 A P5 ( GPIO 35 )、按鈕 B P11 ( GPIO 27 )

    • 溫度感應器：A6 ( GPIO 34 )

    • 蜂鳴器：P0 ( GPIO 25 )

    • 九軸感測器 MPU-9250：P20 ( GPIO 21 )、P19 ( GPIO 22 )

• 其他參考資料：

  • Web:Bit V1的核心是ESP32晶片，有關ESP32晶片介紹如下

    • https://sites.google.com/site/wenyunotify/24-microblock/20221015%E9%AB%98%E7%A7%91%E5%A4%A7%E5%BE%AE%E5%AD%B8%E5%88%86%E7%A0%94%E7%BF%92%E4%B8%80 

    • 註：Web:Bit V2的處理器： ESP32-S2，暫不適用目前的microblock IDE

  • 以前利用法蘭斯積木及BlocklyDuino F2來玩Web:Bit的文章：https://sites.google.com/site/wenyunotify/03-webbit%E9%9B%A2%E7%B7%9A%E7%89%88/01-%E6%B3%95%E8%98%AD%E6%96%AF%E7%A9%8D%E6%9C%A8%E6%B8%AC%E8%A9%A6 

二、認識microBlock IDE

• 詳細內容參考：01 認識microBlock IDE

• 利用積木程式來寫 ESP32 MicroPython 程式

• microblock.app 官網：https://microblock.app/     (泰國網站)

• 台灣推廣網站：

  • 由陳豐生先生 (Mason Chen)及蔡亞柏老師維護

  • ESP Gyro擴充板：https://sites.google.com/view/esp-gyro/mblock 

• microBlock IDE中文版下載：

  • 從【ESP Gyro擴充板】官網，下載客制化的 microBlock IDE中文版：https://reurl.cc/ZAyVEl （目前為microBlock.IDE.V2.2.0_Gyro_V1.7）

    • 我另外提供【V1.7+Web:Bit積木】整合版供下載，如下：https://educase.kh.edu.tw/navigate/a/#/s/F07F5803AF8D4F1CBCCDDA1E91FD5D536BL 

  • 為 windows 的離線版本，解壓後(儘可能放至根目錄下(C:或D:)，路徑不要太長) 

  • 打啟 microBlock IDE.exe ，可在桌面做此檔的捷徑

• 安裝Web:Bit的驅動程式

  • 如果電腦沒有抓到Web:Bit，再安裝以下驅動程式(可從【裝置管理員】得知是否有抓到)

  • CH340 ：

    • https://educase.kh.edu.tw/navigate/a/#/s/DD4DC31A1D644C08ABA3F695BC1F63506BL

    • 【ESP Gyro擴充板】官網：https://reurl.cc/ZAyVEl 

    • 安裝官方的【安裝版】，就會順便安裝CH340了

• 使用前的準備工作

• 第一件事是【更新ESP32的韌體】( 「更新韌體」就是在ESP32上安裝python程式及相關檔案） 

• 先玩玩Python的基本語法

• 先開啟終端機模式

  • 在終端機模式無法複製貼上

  • 如果程式碼很多，直接複製到code程式碼模式

• 點擊： 01.Python 語法 (1) - 變數、判斷式、邏輯、迴圈.ipynb 

  • 單行註解

    • 使用#字號 

    • #print("hello")

  • 多行註解

    • 使用一組 三個雙引號包起來

      • """

      • aaa

      • bbb

      • ccc

      • """

  • 斷行處理

    • \n 斷行

      • print("hello\nworld")

  • 輸入

    • score = input("請輸入你的成績：")

    • score = int(score)

    • if score >= 60:

    •    print("及格")

    • else:

    •    print('不及格')

三、玩玩Web:bit內建元件或感測器

1. 全彩 LED 矩陣：A10 ( GPIO 4 )

   • 全彩 LED 矩陣是採用WS2812晶片，25顆燈只使用到一個腳位GPIO4

   • 通常第一個程式會寫讓LED燈閃爍，但這邊沒有外接LED燈，所以直接控制讓屏幕上的全部LED燈閃爍

   • 程式如下：點擊下方的「上傳程式」，就會把檔案上傳到Web:Bit (並把上傳檔案的檔名改成main.py，這樣就可離線執行)，按reset鍵即可再執行一次

• 還有很多燈條的積木，可自行探索

2.光敏感應器：

1. • 使用腳位：

     • 左上 A0 ( GPIO 36 )、右上 A3 ( GPIO 39 )

   • 利用終端機顯示左上及右上的亮度值

   • 程式如下：發現越暗值越小、越亮值越大、0～4095間

3.按鈕開關：

1. • 使用腳位：

     • 按鈕 A P5 ( GPIO 35 )、按鈕 B P11 ( GPIO 27 )

   • 顯示按鍵的數位值：

     • 程式如下：

     • 發現：未按下為1、按下時為0

1. • 使用按鍵積木：

     • 按A鍵開燈、按B鍵關燈

     • 程式如下：

       • 發現：

         • 用按鍵積木取得的值，未按下為0，按下為1

         • 如下面右方程式的按鍵積木放在迴圈下方，這兩個積木沒有作用

4.蜂鳴器：

1. • 使用腳位：P0 ( GPIO 25 )

   • 按A鍵播放全家便利商店歡迎音樂，按B鍵播其他音樂

     • 全家歡迎音樂簡譜：3 1 5(低音) 1  /  2 5~ 2  /   3 2 5(低音) 1

     • 所使用的頻率：330、262、196、262、294、392、294、330、294、196、262

     • 有兩種積木可用：

     • 程式如下：

四、使用亞柏老師設計的Web:Bit積木

1. 使用Web:Bit積木

   • 下載亞柏老師設計的Web:Bit積木(WebBit_v14.zip)，已放在根目錄下

   • 安裝說明：解開後有三個資料夾

     • webbit_png中webbit子目錄整個複製至 microBlock.IDE.V2.2.0_Gyro_V1.6b\resources\app\microBlock-IDE\images

     • webbit-v1-board整個複製至 microBlock.IDE.V2.2.0_Gyro_V1.6b\resources\app\microBlock-IDE\boards  (此項建議不要做，避免不同板子的檔案打不開)

     • WebBit-extension-master 整個複製至 microBlock.IDE.V2.2.0_Gyro_V1.6b\resources\app\extension

2. Web:Bit積木內容，如下圖

   • 之前積木無法達到的功能

     • 在屏幕上顯示文字、數字等功能

     • 顯示【溫度】，可哈氣測試溫度有無改變

   • 其他積木的使用都很簡單

     • 按鍵：未按下為False、按下為True

     • 亮度只顯示一個值

     • MPU9250(九軸感測器)積木還未完善

       • 欠缺各式翻轉及roll、pitch、yaw積木

       • 等亞柏老師有空時再增加其功能

• 測試MPU9250積木

  • 加速度計：測試X、Y、Z各軸加速度值的變化

    • 程式如下

• • 姿態角度

    • 姿態角度主要透過加速度計和陀螺儀的數據，組合成可以偵測Web:Bit開發板前後翻轉(roll)、左右翻轉(pitch)和水平旋轉(yaw)

      • 陀螺儀(3軸) → 通常做為主要姿態的計算，優點是反應快，但缺點是誤差容易累積

      • 加速度計(3軸)  → 可以透過重力加速度來校正陀螺儀，運動加速度部分也可以用來計算位移與速度等

      • 磁力計(3軸)  → 同樣也是輔助、校正陀螺儀，解決重力加速度無法檢測到水平角度旋轉的問題

    • 這邊無相關的前後翻轉(roll)、左右翻轉(pitch)和水平旋轉(yaw)積木可用，也不知其計算方式如何？透過如下程式來控制儀表板上的飛機

五、使用OLED來顯示訊息

1. 外接OLED屏幕(或使用EZ Start kit+的擴展板，免擴展板供電)

   • Web:Bit要使用擴展板，並找到SCL及SDA腳位

   • 使用腳位：I2C腳位（SCL：GPIO22、SDA：GPIO21）

   • 解析度：128＊64 ；0.96吋

   • 在屏幕上顯示Hello World

   • 程式如下：

2.測試大小字型

1. • 發現：

     • 座標起點為文字的左上角

     • 【英文及數字】積木，每個字寛度8，且只顯示一行，最多16個數字或英文字母，超過的部份不會出現

     • 【大型數字】積木，每個字寛度20，每行可顯示6個數字或7個英文字（輸入小寫也會顯示大寫），超過一行時會往下一行

1. • 顯示圖片

   • 顯示中文字

     • 可參考下文最下方資料 https://sites.google.com/site/wenyunotify/24-microblock/20221015%E9%AB%98%E7%A7%91%E5%A4%A7%E5%BE%AE%E5%AD%B8%E5%88%86%E7%A0%94%E7%BF%92%E4%B8%80

     • 找到  \resources\app\extension\2e-OLED-extension-8\modules的fetch_big5_word及fetch_big5_word24，把所需的中文字變成圖片

   • 顯示QRCode，改用【反白】(填滿OLED螢幕像素積木)，但我的手機掃不成功！

六、登月小車的測試

1. 登月小車使用到的腳位

   • 請參考 03 登月小車離線版 

   • 右輪1：GPIO12、右輪2：GPIO18；左輪1：GPIO16、左輪2：GPIO19

   • 循跡感測器：右方：GPIO23、左方：GPIO5

   • 超音波測距感測器：TRIG：GPIO13、ECHO：GPIO17

   • 補光燈：GPIO27

   • WS2812：GPIO26

   • 紅外線接收器：GPIO32

2. 小車前進、後退、原地左轉、原地右轉基本測試

3. 檔案下載：https://drive.google.com/file/d/1LVIqhcCbLvJYteM-RrGm8W4icfZXSqfw/view?usp=share_link 

2.小車避障測試

• 測試【超音波測距感測器】

  • 發現：當距離超過一定範圍後，其值顯示-1

  • 修正超音波模組積木沒有13及17腳位 （研習的電腦已修改好了）

    • 方法一：使用文字模式來修改

• • • 方法二：修改積木的原始程式，找到resources\app\extension\2c-Ultrasonic-extension-2\blocks下的blocks_hcsr04_lang.js，用記事本來修改

• 小車避障規則

  • 當前方20公分內有障礙物時，會隨機左右轉0.5~1秒鐘，否則就向前進

  • 檔案下載：https://drive.google.com/file/d/11FKwYRIGIt1ekXN9cjr7bnCgFxpKVpBO/view?usp=share_link 

3.循跡小車測試

• 測試【循跡感測器】

  • 發現：

    • 車右邊感測器的腳位5、車左邊感測器的腳位23

    • 感測器在白線上：感應燈滅、數位值為0

    • 感測器在黑線上：感應燈亮、數位值為1

• 測試後，發現很奇怪，只要裝上Web:Bit開發板，右邊的感應燈就會亮起，也導致循跡比較有問題！！

• 所以，圓形路徑時，順時針巡跡會成功；逆時針時，把重心向前，讓車頭朝下就會成功！

4.紅外線遙控測試

• 測試【紅外線接收器】

七、小車的其他遙控

1. 藍牙+V7RC(手機APP)

   • 手機V7RC APP安裝

     • 支援android及IPhone手機

     • 傳輸原理，連接後一直傳輸訊息出去，如下：

1. • V7RC

     • 連結方式：選藍牙，找到自己的小車(先執行完下面程式)，就會看到了

     • 控制界面：選【車輛】，如困要使用到4個CH，就選【坦克】

   • 登月小車程式：https://drive.google.com/file/d/16qvN7iywJTctKKpQueNcchZ2jARf7lcX/view?usp=share_link 

2. Wifi+UDP伺服器+V7RC(手機APP)

1. • 手機V7RC APP安裝同上

   •  Wifi連網

     • STATION模式(去連別人的AP)

     • IP位址：隨著所連AP不同而有不同，可連上Internet

1. • • SoftAP模式(自己擔任AP，供別人連線，但無法連上internet)

       • IP位址：192.168.4.1

1. • 啟動UDP伺服器，程式如下

     • 若主板採用自己擔任AP模式(要設定自己的AP名稱及密碼)

     • 若開手機熱點供主板連網時，先取得主板IP，再將此IP填入UDP伺服器的IP

     • 檔案下載：https://drive.google.com/file/d/13YwUwOJ6Vy7GscevKtfZ1XYH1hi-bp_y/view?usp=share_link 

1. • 使用【Sokit】軟體來傳輸資料到UDP伺服器 (同一網域)

     • Sokit(簡易TCP/UDP測試工具)

       • 軟體介紹  https://dotblogs.com.tw/DizzyDizzy/2019/02/15/sokit  

       • 模擬TCP/UDP server (字串或是Hex皆可)

       • 模擬TCP/UDP Client (字串或是Hex皆可)

       • 轉發功能

       • 方便小學生的使用

       • 軟體下載 https://mega.nz/file/1l9AzS4Q#Q-D9Slf4O52bOtmkjYawedvQR4GxyfRi0hj7svkUHR4   

3. Wifi+網頁伺服器

1. •  網頁伺服器及網頁內容建置

   • 檔案下載：https://drive.google.com/file/d/1ctYbCitb1uKZEYlUQZob3KLJJfoHHX9a/view?usp=share_link 

4. MQTT應用

1. • 20230316因使用時有一些問題，後方有更新版 

   • 不限同一網域，要連上可上internet的AP

   • MQTT的架構：

     • MQTT由三種角色構成，分別是Publisher(發布者)、 Broker(代理人)和Subscriber(訂閱者)

     • 相當於youtube的訂閱機制(youtuber為【發布者】、youtube網站為【Broker】、你我為【訂閱者】)

   • MQTT程式基本架構及遠端控制小車運動

     • Web:Bit開發板當接收端(訂閱者)

     • 使用尤大大的mqttgo.io MQTT Broker(MQTT 伺服器)

     • 傳送的資料為Bytes格式('b'XXX')，再轉為UTF-8格式(XXX)

     • 檔案下載：https://drive.google.com/file/d/1RiaSwtm74mfzJ0sCfU0e8uaM1zNZ1X0g/view?usp=share_link 

• 使用尤大大的mqttgo.io的網頁平台當發送端(發布者)

  • • https://mqttgo.io  或  https://broker.mqttgo.io/  

  • 使用電腦當發布者

    • MQTTBox

    • MQTTlen

  • 使用手機APP

    • IoT OnOff

      • 請參考 https://sites.google.com/site/wenyunotify/05-esp32/03-%E7%B6%B2%E8%B7%AF%E6%87%89%E7%94%A8  

5. MQTT應用二

1. •  與官方的Web:Bit互動，模擬器也可以

   • 官方MQTT Broker資料：

     • Websocket Port：

       • ws://mqtt1.webduino.io/mqtt (預設80port)

       • wss://mqtt1.webduino.io/mqtt(預設443port)

       • Username： webduino

       • Passeord： webduino

     • 測試後發現好像也有提供TCP Port：1883 

       • 網址mqtt1.webduino.io

     • 檔案下載：https://drive.google.com/file/d/1PMc6AeyTGDw0g7DALw-jq7CapBsFi-P6/view?usp=share_link 

   • 發現：放久了，好像會掛掉，需重新RESET

1. • 官方Web:Bit教育版：

     • 線上版網址：https://webbit.webduino.io/blockly/?demo=default   (免註冊登入)

     • 教育版程式如下：https://webbit.webduino.io/blockly/#7RprPdWBAGM3r 

     • 兩方可進行互動

     • 另外，可使用下面網頁界面來互動

       • 萬用遙控器：https://www.oxxostudio.tw/webduino-remote/ 

       • 法蘭斯Webduino MQTT：https://fustyles.github.io/webduino/webduino_mqtt.html 

1. • (20230316)因使用時有一些問題，此為更新版：

     • 研習時在使用MQTT 的積木時有一些問題，研習後我跟亞柏老師反應mqtt積木使用起來有些問題，原本亞柏老師也沒信心能解決這問題！但很快的亞柏老師就把這問題解決了，使用v1.9的韌體，再加上新設計的MQTT積木，今天我測試一整天都沒問題

     • 1.9版韌體下載：https://drive.google.com/file/d/1ZpNcfNgXAh8urY_44iGt3VQ8ul2gCMqD/view?usp=share_link 

     • 新版MQTT積木下載：https://drive.google.com/file/d/1wNm0pNh19aulR6z45nKrcbSvO4M1hojQ/view?usp=share_link 

     • 測試程式如下(一樣與官方的模擬器互動)，程式下載：https://drive.google.com/file/d/1WwskurEz6lm2IEnGquuGdF9n5zo697Nw/view?usp=share_link 

八、回復Web:Bit官方的原廠韌體

1. • 要使用Web:Bit教育版的安裝版(不能用線上版)

   • 線上版只有線上更新韌體，沒有【回復原廠韌體】

九、用microBlock IDE玩樹莓派的pico W

1. • 無縫接軌

   • 過一陣子，Mason會釋出整合版，除可玩ESP32外，也可玩pico W

   • 參考資料：https://sites.google.com/site/wenyunotify/08-%E6%A8%B9%E8%8E%93%E6%B4%BE/09-pico-w-%E8%87%AA%E7%B5%84%E5%B0%8F%E8%BB%8Amicroblock