07 AI應用及MQTT積木

(2022/03/25)

最近在上課後社團的AI課程，玩了Google的Teachable Machine，不想只玩玩預覽，想利用此來做一些簡單應用，想說能不能控制電燈的亮或滅，又不想給學生玩實體的燈泡，因此想到能不能點亮Web:Bit模擬器的燈！剛好昨天法蘭斯新增了Web:Bit教育版的MQTT積木，再利用洪銘恩大師的TM2MQTT，因此就完成了此作品，內容如下，供參

一、在Web:Bit教育版安裝法蘭斯的MQTT積木

先進入安裝版的 Web:Bit教育版，點擊左上角的【系統】/【以瀏覽器開啟】
在程式碼右邊的空白處按右鍵 / 【檢查】

出現一新視窗，點擊【Console】
輸入新增QTT積木的指令：Code.customTab.$__add__('https://fustyles.github.io/webduino/MQTT_20220324/blockly.json');
- 如果要刪除此積木：Code.customTab.$__remove__('https://fustyles.github.io/webduino/MQTT_20220324/blockly.json');

這時在積木區就會出現【MQTT】的積木了

二、簡單寫一個測試程式

先利用法蘭斯預設的Broker，寫一測試程式，如下
- 按A鍵，屏幕會呈現笑臉及綠色怪獸說話(1)
- 按B鍵，屏幕會呈現哭臉及綠色怪獸說話(2)

利用其他Broker進行測試
- 可參考我另一篇文章：常見MQTTBroker測試
- 測試成功的主機網址如下：
  - EMQX
    - ws://broker.emqx.io:8083/mqtt
    - wss://broker.emqx.io:8084/mqtt (加密)
  - Webduino (官方)
    - ws://mqtt1.webduino.io/mqtt 帳號：webduino 、密碼：webduino
    - wss://mqtt1.webduino.io/mqtt 帳號：webduino 、密碼：webduino (加密)
  - HIVEMQ
    - ws://broker.hivemq.com:8000/mqtt 或 ws://broker.mqttdashboard.com:8000/mqtt
  - Mosquitto
    - ws://test.mosquitto.org:8080
    - wss://test.mosquitto.org:8081 (加密)
  - Eclipseprojects
    - ws://mqtt.eclipseprojects.io:80/mqtt
    - wss://mqtt.eclipseprojects.io:443/mqtt (加密)
利用其他MQTT平台進行測試
- 利用HiveMQ網頁工具(只適用Websocket) http://www.hivemq.com/demos/websocket-client/
  - 測試成功的如下：
    - EMQX (沒成功，下面資料無法連線成功，真奇怪！)
      - broker.emqx.io、8083
      - broker.emqx.io、8084、SSL加密
    - Webduino (成功)
      - mqtt1.webduino.io 、 80 帳號：webduino 、密碼：webduino
      - mqtt1.webduino.io 、 443 帳號：webduino 、密碼：webduino、SSL加密
    - HIVEMQ (成功)
      - broker.hivemq.com 或 broker.mqttdashboard.com 、8000
    - Mosquitto (成功)
      - test.mosquitto.org、8080
      - test.mosquitto.org、8081、SSL加密
    - Eclipseprojects (成功)
      - mqtt.eclipseprojects.io、80
      - mqtt.eclipseprojects.io、443、SSL加密
  - 利用洪銘恩老師的TM2MQTT網頁 https://github.com/YisrealHung/TM2MQTT
    - EMQX (成功)
      - Server: broker.emqx.io、Port:8083
      - Server: broker.emqx.io、Port:8084
    - Webduino (官方) (沒成功，因為此平台無法輸入帳、密)
      - Server: mqtt1.webduino.io、Port:80 帳號：webduino 、無輸入密碼的地方
      - Server: mqtt1.webduino.io、Port:443 帳號：webduino 、無輸入密碼的地方
    - HIVEMQ(成功)
      - Server: broker.hivemq.com 或broker.mqttdashboard.com、Port:8000
    - Mosquitto (成功)
      - Server: test.mosquitto.org、Port:8080
      - Server: test.mosquitto.org、Port:8081 (加密)
    - Eclipseprojects (成功)
      - Server: mqtt.eclipseprojects.io、Port:80
      - Server: mqtt.eclipseprojects.io、Port:443 (加密)
  - 利用MQTTBOX
    - EMQX (成功)
      - tcp、broker.emqx.io:1883
      - ws、broker.emqx.io:8083/mqtt
      - wss、broker.emqx.io:8084/mqtt (CA signed server certificate)
    - Webduino (官方) (成功)
      - ws、mqtt1.webduino.io/mqtt 帳號：webduino 、密碼：webduino
      - wss、mqtt1.webduino.io/mqtt 帳號：webduino 、密碼：webduino (CA signed server certificate)
    - HIVEMQ (成功)
      - tcp 、 broker.hivemq.com:1883
      - ws 、broker.hivemq.com:8000/mqtt 或 broker.mqttdashboard.com:8000/mqtt
    - Mosquitto
      - tcp 、 test.mosquitto.org:1883 (成功)
      - ws、test.mosquitto.org:8080 (沒成功，真奇怪，不知為何無法連線成功)
      - wss、test.mosquitto.org:8081 (沒成功，真奇怪，不知為何無法連線成功)
    - Eclipseprojects (成功)
      - tcp 、mqtt.eclipseprojects.io:1883
      - ws、mqtt.eclipseprojects.io:80/mqtt
      - wss://mqtt.eclipseprojects.io:443/mqtt (CA signed server certificate)

三、製作簡易應用

偵測有無戴口罩，並在Web:Bit的模擬器閃燈或發出聲音
使用的工具及軟體
- 利用到Teachable Machine (https://teachablemachine.withgoogle.com/ )
- 利用到洪銘恩老師的TM2MQTT (https://github.com/YisrealHung/TM2MQTT)
- 利用Web:Bit教育版的模擬器及法蘭斯的MQTT積木
- 註：因為【洪銘恩的TM2MQTT】無法連上有帳密的MQTT伺服器，所以無法連上Web:Bit官方的MQTT伺服器，所以採用法蘭斯的MQTT積木
先利用Teachable Machine來訓練模型
- 訓練如下：先蒐集樣本(有3類)，再進行訓練