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類)，再進行訓練

• 點擊右上角的【匯出模型】

• 並在Tensorflow.js下，點擊【上傳模型】

• 最後，將模型網址複製下來，如下：https://teachablemachine.withgoogle.com/models/hctD4PyM4/，待會到TM2MQTT下使用

• 使用洪銘恩老師的TM2MQTT

  • 下載網址：https://github.com/YisrealHung/TM2MQTT

  • 下載及解壓縮

• 執行Index-image.html網頁

  • 先建立MQTT伺服器的資料

• 再到Web:Bit教育版寫程式

  • 新增法蘭斯的MQTT積木(如上面的說明)

  • 寫一簡單程式，如下：

• 完成後，執行時，看TM2MQTT有沒有收到相關的訊息

• 再回到TM2MQTT進行測試

  • 點擊TM2MQTT下的【Webcam】，開啟攝影機

  • 測試如下：

    • 在TM中的第1個類別其發送的值(payload)為1

    • 在TM中的第2個類別其發送的值(payload)為2

    • 在TM中的第3個類別其發送的值(payload)為3

• 測試成功，發現同一個狀態只會發送5筆資料