22 表單製作及影像擷取

(2020/12/03)

原來在凱比機器人(或Web:Bit教育版的怪獸舞台)也可以製作表單(如將凱比做成一個點餐機器人)，而且很簡單就可上手，但官方並沒有提供這方面的積木，真是太可惜了。上週六，去跟法蘭斯學了一些簡單的表單製作方法，使用法蘭斯自訂積木，老師教的非常多，但吸收有限，這兩天僅就一些簡單好用的功能做測試，如下，供參

一、新增(移除)法蘭斯自訂積木的【遊戲元素】積木

• 新增積木的方法：

  • 進入凱比平台 https://kebbi.webduino.io/

  • 在上方中間的區域按右鍵 / 檢查

  • 點擊Console，並將新增遊戲元素積木加入

• 新增積木

  • Code.customTab.$__add__('積木設定json檔網址');

  • 新增【遊戲元素】積木

    • Code.customTab.$__add__('https://fustyles.github.io/webduino/GameElements_20190131/blockly.json');

• 移除積木

  • Code.customTab.$__remove__('積木設定json檔網址');

  • 移除【遊戲元素】積木

    • Code.customTab.$__remove__('https://fustyles.github.io/webduino/GameElements_20190131/blockly.json');

• 法蘭斯自訂積木清單

  • https://github.com/fustyles/webduino/blob/master/CustomBlock.txt

二、製作【表單】，利用【google試算表】存資料

• 建立一個Google試算表檔案來存放資料

  • 教學：01 Google試算表

• 利用表單建立學生資料

  • 呈現畫面如下：用到【下拉選單】、【文字欄位】及【按鈕】等積木

  • 程式：程式連結

• • 執行結果

    • 輸入資料

    • 資料上傳到試算表，第一次測試成功

• 利用表單查詢學生資料

  • 同上面作品，增加一個【查詢學生資料】的按鈕

  • 假設Google試算表，已有如下4筆資料，且不重覆

  • 【查詢學生資料】按鈕的程式如下：程式連結

• • 程式如下：程式連結

  • 下拉選單的程式同上，不再列出

  • 只列出圖片的部份

  • 利用此，可以將前面的學生資料，增加學生的相片，增加一個文字欄，那欄可以輸入學生相片的網址，當然試算表就會多一欄

四、利用【攝影機】截圖

• 利用攝影機來截圖，並顯示出來

  • • 程式：程式連結

• • 呈現結果

• 利用攝影機來截圖，並將編碼上傳到Google試算表

  • 程式，程式連結

    • 但很奇怪，上面的程式編碼值無法上傳到試算表

    • (事後解決)法蘭斯說：原來是因為Google儲存格最多存50000個字元，影像大的時候隨便就超過了而無法儲存或儲存不完整。如果把解析度改成150x100就會成功了！

    • 另外，官方積木在上傳base64編碼好像有問題，採用法蘭斯的上傳積木比較沒問題！

      • 顯示字元大小，程式連結

• • 直接將截圖(不是編碼)，上傳到試算表

    • 程式，程式連結

    • 結果，成功

• • 把上傳到到試算表的編碼下載，並將圖片顯示在屏幕上

    • 程式，程式連結 (法蘭斯馬上修改積木)

      • 法蘭斯說：原來是因為Google儲存格最多存50000個字元，影像大的時候隨便就超過了而無法儲存或儲存不完整。如果把解析度改成150x100就會成功了！

    • 結果，成功

• • • 結果，成功