05 營隊課程

• 本教材的短網址：http://gg.gg/0724big 

一、認識Web:AI

• Web:AI 使用 AI 晶片 ( K210 ) 以及 Wi-Fi 晶片 ( ESP8285 )，能夠做出人臉追蹤、影像分類、物件追蹤、語音辨識、QRcode 掃描等應用，讓教師與學生只需要一塊板子就能夠讓 AI 人工智慧融入生活。

• 官方教學網站：https://resource.webduino.io/docs/webai   

• 積木程式撰寫平台：

  • Webduino 教育平台 

  • 線上版：https://webai.webduino.io/  (先免註冊帳號) 天(要使用chrome瀏覽器)

  • 安裝版：從上面網站的【更多】/【下載安裝】

• 安裝驅動程式(Web:AI使用CH340晶片)

  • 下載網址：https://educase.kh.edu.tw/navigate/a/#/s/DD4DC31A1D644C08ABA3F695BC1F63506BL 

• 第一次使用Web:AI 要做如下的動作

  • 更新韌體(要透過USB連線來執行)

    • 線上版：【更多】/【更新韌體】 (更新韌體至 1.10.0 版) (按照畫面操作即可更新韌體)

    • 安裝版：【工具】/【更新韌體】

  • 設定WIFI (要透過USB連線來執行)

    • 線上版：【更多】/【WIFI設定】(輸入SSID及密碼後，就直接設定好了)(一定要先用USB連接)

      • 發現：設定錯誤的WIFI資料也沒關係，也可以開機成功！！

    • 安裝版：【更多】/【WIFI設定】(輸入SSID及密碼後，會產生一個QRCODE，再重新開機web:Ai，按右鍵來掃描QRCODE)

• 原則上這次上課採用線上版，如果線上版跑不動，再使用安裝版！！(最後這次上課都是用網頁版+USB連線)

• 未來科技的重點

  • 大人物

    • 大數據(BIG DATA)

    • 人工智慧(AI)

    • 物聯網(IoT：Internet of Things)

二、Web:AI 初體驗

• 開機畫面

• 按右鍵進入掃描畫面 (要在開機倒數5秒鐘內完成)，即使沒有WIFI連線成功也可以使用！！

• 拿出有QRCODE的卡片進行掃描，卡片一共有

  • 人臉追蹤

  • 口罩偵測

  • 語音互動(1.你好嗎？  2.自拍  3.你是誰？)

  • 小怪獸追蹤 (放4隻小怪獸的卡片供辨識)

  • 登月小車小怪獸追蹤  (先不做，等到使用登月小車時再玩)

  • 萬用遙控器控制登月小車 (先不做，等到使用登月小車時再玩)

• 要重玩時，請按背後左上角重置(RST)的按鍵

• 上面QRCODE內容的程式，我們後面也都會教

三、利用範例學程式

• Web:AI 小畫家 

  • 這部份主要是認識【LCD螢幕】積木及認識【座標】的使用

  • 範例

    • 臉

    • 臉紅

    • 貓

    • 星星

    • 房子

    • 車子

    • 向日葵

    • 眼睛

  • 使用【LCD螢幕】積木

    • LCD解析度：320X240

    • 積木有：

      • 畫圓：起點為圓心

      • 畫直線：起點座標到終點座標

      • 畫橢圓：中心點、寛、高、旋轉角度

      • 畫矩形：起點為矩形左上角座標

      • 也可以加上文字(用【第幾行第幾個字】來呈現文字)或畫文字(用【座標】來呈現文字)

  • 練習一下

    • 請大家發揮創意做一張畫

    • 請畫出【魷魚遊戲邀請卡】

      • 將3個圖形分3等份  https://webai.webduino.io?hashid=bmN3OqGL55 

• 基本功能範例

  • 左顧右盼

    • 顯示內建圖案：讀取本機的圖片

    • 只使用到【LCD螢幕】積木

    • 內建圖案：

      • logo：Webduino Logo

      • m01：笑臉

      • m02：閉眼

      • mleft：向左看

      • mright：向右看

      • mrun：>o<

      • green：綠色怪獸

      • red：紅色怪獸

      • yellow：黃色怪獸

      • blue：藍色怪獸
        
        

  • 在LCD螢幕上一直顯示鏡頭畫面 (範例沒這個，我自己加的)

• • 以下這幾個範例主是認識【檔案讀寫】積木的使用

    • 網路圖片顯示

      • 先將網路上的圖片下載到本機，含重新命名

      • 使用到【檔案讀寫】積木

    • 拍照上傳小口袋

      • 小口袋可以看成是雲端硬碟

      • 把拍攝的相片上傳到雲端，並設定檔案名稱，及取得網址(URL)

      • 使用到【檔案讀寫】積木

      • 使用小怪獸時，要開啟【更多】/【網頁互動】

    • 小口袋圖片顯示

      • 將自己雲端的檔案下載到本機

      • 使用到【檔案讀寫】積木

  • 遠端遙控秀圖

    • 認識【萬用遙按器】(【更多】/【萬用遙控器】)

    • 把頻道名稱改為自己的英文名字(應該沒有同名字?)

    • 使用到【擴充功能】/【網路廣播】積木

    • 建議先不用【萬用遙控器】，改用法蘭斯的MQTT網頁更方便

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

  • 電子鐘

    • 在屏幕上顯示文字(畫文字)或圖形

    • 最重要的是【取得現在的日期及時間) (在【進階功能】的【偵測】積木)

  • 跑馬燈

    • 文字跑馬燈

• 進階功能範例

  • 【按鍵開關】積木的使用

    • 剪刀石頭布的遊戲 (範例內無此範例)

• • 自拍機

    • 我覺得原始程式並不好，我自己改寫  https://webai.webduino.io?hashid=VQx1DPDXE0  (開啟新程式後，記得把舊平台視窗關閉掉，免得一直占著USB埠)

    • 但【取得按鍵狀態】積木，按下按鍵時其值為0
      
      
      

  • 練習一下：

    • (B班)按下左鍵時，會隨機產生一個骰子圖案 https://webai.webduino.io?hashid=bXrE4E8jM0 

    • (C班)按下左鍵時，會隨機產生一個骰子圖案，按右鍵會累加之前的點數 https://webai.webduino.io?hashid=v17nkn5K2j

• AI的應用

• • 掃描QRCODE

    • 使用積木主要在【掃描條碼】的積木內

    • 第一次，老師會帶大家拉積木

    • 此掃描QRCODE積木，如果沒有成功掃描到一個QRCODE，它就會一直處於掃描QRCODE的狀態

    • 掃描小卡片上的QRCODE，掃描時光線要充足

• 顏色追蹤：紅色

  • 使用積木主要在【顏色追蹤】的積木內

  • 使用筆電的鏡頭來選顏色

  • 選色器的使用

    • 利用所選的顏色面積大小(如>10)來判斷是否要呈現該顏色

  • 選到的顏色會用白框框住

  • 同時有2個該顏色，一次只會框住面積較大的那個

• 人臉追蹤

  • 使用積木主要在【人臉追蹤】的積木內

  • 偵測到人臉時，會用白色矩形框住人臉的部份，座標為矩形的左上角(多張人臉時，好像顯示最後一張的座標)

  • 可同時偵測多張人臉

  • 如果沒有偵測到人臉時，其取得的x及y座標分別為0 (但我覺得設取得的長度寛度分別為0 比較好)

• 口罩偵測

  • 使用積木主要在【人臉追蹤】的積木內

  • 判別速度很快

• 語音辨別

  • 錄製語音(錄製關鍵字)

    • 只用到一個積木就可以把聲音錄製下來

    • 【語音錄製單詞】積木在【語音辨別】的積木，一共可錄製10個單詞，同一編號，後者會把前者蓋掉，【名稱】只是標識用，實際上沒有作用

    • 錄製語音時，如果沒有聲音，會一直等待下去

  • 辨別語音

    • 先把【語音辨別精確度】設低一點

    • 【當聽到】積木在【語音辨別】的積木，【名稱】一樣只是標識用，實際上沒有作用

    • 識別時如果沒有聲音，會一直等待下去

    • 可連續識別的範例：https://webai.webduino.io?hashid=v17nknMzmR
      
      

• 影像分類：

  • 影像訓練：

    • https://webduino.io/platform.html 

    • https://vision.webduino.io/     (訪客共用一個帳號，建議註冊帳號來使用 )

• • 使用範例的【影像分類】(結合自己所完成的模型)

    • 發現：只有老師示範有成功，學生的畫面是一片黑，沒有出現攝影畫面，不知是不是大家都使用訪客帳號的原因？

• • 其功能類似Teachable Machine

    • Teachable Machine 網址： https://teachablemachine.withgoogle.com/ 

    • Teachable Machine需要用到筆電鏡頭
      
      

• 物件追蹤：綠色小怪獸

  • 模型：物件追蹤使用的模型。

  • 分類：模型中的分類，使用半形逗號「,」分隔。

  • 辨識門檻：物件追蹤的精準度，門檻越高代表偵測越像才會辨識成功，預設為 0.5。

  • 鏡頭反轉：在使用特定外殼時會有前後鏡頭功能，因此需要勾選讓鏡頭反轉，避免畫面上下顛倒。

  • 內建「小怪獸模型」，使用的尺寸：

    • 寬：320

    • 高：224

  • Webduino 影像訓練平台 訓練的模型，使用的尺寸：

    • 寬：224

    • 高：224

四、Web:AI與登月小車的結合

• 為方便操作，這邊採用的連線方式一樣採用USB連線，將程式寫入Web:AI後，再結合登月小車，進行離線操作！！

• 範例檔 

  1. 正方形路徑

     • 採用重複4次來完成應該會更好

     • 無AI的使用

     • https://webai.webduino.io?hashid=b9j303lqjQ 

  2. 小怪獸控制速度  (如果沒有使用WIFI連線，這範例可不做)

     • 透過點擊小怪獸來控制車速

     • 無AI的使用

  3. 鍵盤遙控車  (如果沒有使用WIFI連線，這範例可不做)

     • 透過鍵盤的方向鍵及空白鍵來控制車子的運動及停止

     • 無AI的使用

  4. 街景車  (如果沒有使用WIFI連線，這範例可不做)

     • 除上方遙控車的功能外，增加拍照的功能

     • 無AI的使用，但使用到攝影鏡頭

  5. 循跡自走 

     • 利用【兩路巡跡感測器】，來判斷是否在線上

     • 原理如下：

     • 無AI的使用

6.小怪獸紅綠燈 

• 遇到【綠色小怪獸】可前進

• 遇到【紅色小怪獸】則停止

• 使用【物件追蹤】的功能

• 啟動【循跡】後，可先加入一前進的積木

• 關閉【循跡】後，可先加入一停止的積木

7.追蹤藍色小怪獸

• 看到藍色小怪獸則向前走

• 沒有看到藍色小怪獸則停止

• 小怪獸的X座標，也會影響向左或向右彎一點

• 使用【物件追蹤】的功能

8.車距控制系統 

• 使用超音波測距感測器

  • 蝙蝠、雷達或聲納的應用

• 無AI的使用

• 可直接改成【避障車】來玩

  • https://webai.webduino.io?hashid=b4JlrlkB7N 

9.小車彈琴 

• 使用到小車的蜂鳴器

• 要知道各節拍的頻率值

• 按右鍵播放全家便利商店歡迎音樂

  • 簡譜：3 1 5(低音) 1 / 2 5~ 2 / 3 2 5(低音) 1

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

  • https://webai.webduino.io?hashid=v17npGJPk0 

10.循環燈 

• 車上燈條的使用

11.小怪獸物件追蹤控制 LED

• 追蹤到什麼顏色的小怪獸，車上燈條上的顏色也跟著改變為該色

12.顏色偵測

• 使用小車的【顏色傳感器】來偵測顏色

• 小車有附上顏色卡

13.循跡紅色停止

• 偵測到紅色就停止循跡

• 後續範例要搭配【9 張交通號誌卡】(未操作)

14.按喇叭

15.迴轉

16.開亮頭燈

17.停車再開

18.左右轉

19.辨識與循跡