04 表單設計

(2020/12/03)

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

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

      • 點擊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試算表檔案來存放資料

  • 利用表單建立學生資料

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

      • 執行結果

      • 輸入資料

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

  • 利用表單查詢學生資料

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

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

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

      • 呈現結果

三、利用【下拉選單】，呈現不一樣的圖片

  • 建立一個下拉式選單，隨著不同選項，呈現不同圖案，呈現結果如下：

    • 程式如下：程式連結

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

    • 只列出圖片的部份

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

四、利用【攝影機】截圖

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

      • 呈現結果

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

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

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

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

    • 如果不透過按鈕，好像就可以上傳資料到試算表

    • 程式，程式連結

      • 結果：

        • 上傳到試算表的編碼值被分割成兩欄

          • 下載回來的編碼值，無法顯示成圖案

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

        • 結果，成功

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

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

      • 結果，成功

  • 利用攝影機來截圖，並將截圖上傳到LINE

    • 雖然官方有LINE的積木，但沒有提供顯示影像功能，所以先加裝【LINE BOT】積木

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

    • LINE權杖申請

    • 程式，程式連結

      • 結果，成功