[BlocklyDuino] 自製Blockly積木教學，以Linux、 windows10系統製作積木

本文說明Blocklyduino 的檔案架構以及範例：如何自製一個弧度轉角度的數學指令。 ※此例為使用Windows 10 操作  

作者/攝影	翁偉傑
時間	1小時
成本	無
難度	*  *  *  *
材料表	Linux or Windows10作業環境 7697BlocklyDuino環境

環境需求：

• win執行需運行Ubuntu Linux 的Bash Shell
• mac可直接在terminal執行
• 需安裝Python且須使用7以前的版本，需要import lxml 函式庫(Python) 在shell輸入pip install lxml，此函式庫可處理xml & html格式資料 。
• blockly/apps/blocklyduino/index.html & offline-editor/main.html

切勿手動修改，會被覆蓋可能引發錯誤  

BlocklyDuino檔案架構：

1.   首先請用 git 來下載 MediaTek-Labs的Github。下載完成後，解壓縮到任何你知道的位置。 2.   解壓縮之後有許多資料夾，簡述如下：

• blockly：是我們主要新增使用到的資料夾
• example：範例程式，每個資料夾都會有一個同名的 .ino 與 .xml 檔。Blocklyduino 可匯入這個 .xml檔來開啟範例。

• offline-editor：是將blocklyduino作為Chrome的擴充套件
• html：會連結至blockly/apps/blocklyduino/index.html，可離線執行網頁版blocklyduino
• sh：重新編譯時要用到本指令

3. 進入blockly/blocks資料夾中，在此有對應設定Blocks外觀之程式碼，可以定義版型、顏色、積木連結位置、輸入... (與arduino程式無關，但在此須設定參數以及其類型 )

例如開啟 dht.js 即可看到 dht溫濕度感測器相關指令

常用的函數指令：

• setHelpUrl：說明文件網址，在IDE中對某指令點選右鍵->說明（HELP）即可進入。
• setColour：Block的色調
• setPreviousStatement & this.setNextStatement：決定本指令的上與下是否能再接受其他Block
• appendDummyInput()：告訴程式此處要塞字串
  • appendField 則是引導程式到字串的地方
    • 延伸用法:appendField(new Blockly.FieldDropdown(OPERATORS), ‘OP’);
    • 可以插入圖片 如下：　.appendField(new Blockly.FieldImage(Blockly.Blocks.servo.image, 64, 64))
    • 可以輸入值 如下：.appendField(new Blockly.FieldTextInput("255"),"TOHIGH");
  • setCheck：確認資料型別
  • setAlign：確認邊界
  • setTooltip：是將blocky\msg資料夾中相關的說明訊息映射至Block中供使用者可以在IDE中參閱。將滑鼠放置某個block上即會顯示，如下圖。

• FieldDropdown：建立下拉式選單
  • 以appendField(new Blockly.FieldDropdown(OPERATORS), ‘OP’)為例，OPERATORS是變數名稱。在Logic裡面的範例中，OPERATOR會引導到在同一個Block的Tooltip變數中，再轉換成字串

例如數學中的 + 實際上是六個指令的集合，可以透過下拉式選單來切換

• setOutput：變成Data Block，從右邊插入其他Block
• setPreviousStatement：上方可接其他Block
• setNextStatement：下方可接其他Block

• appendValueInput：允許該block右側產生輸入欄位你讓Data Block從右邊插入
  • appendValueInput(“VariableName”)：VariableName 可在寫轉換Arduino code時使用
  • .setcheck：則是決定輸入的資料型態。 Number, string ...

可以允許多個setcheck，不允許的資料型態將無法放入該輸入欄位中。  

• appendDummyInput：沒有讓Data Block從右邊插入的功能，但是可以讓你繼續增加Block內部的文字字串，不需要在appendDummyinput()裡面宣告特定的文字，也可以塞一些選項
  • 可加入上述 appendField()之各種用法

  4.      blockly/generators/arduino資料夾：此資料夾下皆是負責將blocks轉換為Arduino code，Generator 會生成對應 Blocks 的 Arduino code，因此在 BlocklyDuino\blockly\Blocks 資料夾下的檔案或 function，在 Generator 端都要有一個同樣函數名稱的對應。

• 注意：Blocks['function name'] 務必要注意兩邊function name的名稱要相同
• 最後要 return，以顯示在 IDE 之 Arduino 頁面
• 還有要注意的是，在同一個Block中，function name 的部分要避免使用相同的名字，否則在轉為Arduino Code中的時候將會產生後宣告的function覆蓋掉前面的同名Function的情形。
• 關於Arduino.ORDER_ATOMIC，則是會告訴 Blockyduino 現在即將要進到下一個 Block 而不是進到子Block運行。

  Example:

• 當item=1000 賦值完畢後，function將會return Blockly.Arduino.ORDER_ATOMIC，並開始執行下一個Block的指令。

5.     blockly/msg資料夾：msg目錄下的js檔案，此功能為將blocks資料下的變數名稱對映到實際的block上，在js資料夾下還有en.js & zh-hant.js需一併更改，功能為將變數名稱改為不同語系。 ※在blockly/blocks與blockly/generators中的js檔創建block時，選擇哪個js檔或自行創建js檔案並不會影響在實際使用blocklyduino時的位置，block位置皆是由category.xml設定之。  

自製一個弧度轉角度的數學指令

1.   更新 Windows 10 ： Build 14316  微軟從 Windows 10 開始加入原生的 Ubuntu Linux 環境，Linux 的開發者現在可以在 Windows 10 系統中直接使用 bash shell 2.      安裝 bash： 點選Wins 10開始 → 更新與安全性 → 開發人員專用 → 選擇開發人員模式 回到設定首頁 → App → 應用程式與功能 → 程式與功能 → 左側點選開啟或關閉 Windows功能 → 將"適用於Linux的Windows的子系統(搶鮮版(Beta))"勾選 → Windows 點選重新開機 重新開機後 → 開啟cmd → 在cmd輸入"bash" → 依照指示步驟安裝Ubuntu   3.      設定block外觀： 於/blockly/blocks 新增該 block 的外觀定義，以本指令來說要加在 math.js 中的最底部，(※注意不要放在任何括號中)，如下： [pastacode lang="java" manual="Blockly.Blocks%5B'math_radian_to_degree'%5D%20%3D%20%7B%0A%20init%3A%20function()%20%7B%0A%20%20%20this.setHelpUrl(Blockly.Msg.MATH_RADIAN_TO_DEGREE_HELPURL)%3B%0A%20%20%20this.setColour(Blockly.Blocks.math.HUE)%3B%0A%20%20%20this.appendValueInput(%22RADIAN%22)%0A%20%20%20%20%20.setCheck(%22Number%22)%0A%20%20%20%20%20.appendField(Blockly.Msg.MATH_RADIAN_TO_DEGREE_TITLE)%3B%0A%20%20%20this.appendDummyInput()%0A%20%20%20%20%20.appendField(Blockly.Msg.MATH_RADIAN_TO_DEGREE_APPEND)%3B%0A%20%20%20this.setInputsInline(true)%3B%0A%20%20%20this.setOutput(true%2C%20%22Number%22)%3B%0A%20%20%20this.setTooltip(Blockly.Msg.MATH_RADIAN_TO_DEGREE_TOOLTIP)%3B%0A%20%7D%0A%7D%3B%0A" message="" highlight="" provider="manual"/]

4.      設定block之Arduino轉換碼： 於/blockly/generator/arduino資料夾中，新增該 block的邏輯。以本指令來說要加在 math.js 中的最底部（※注意非3. 的math.js，且不要貼於任何括號中） ，如下： [pastacode lang="java" manual="Blockly.Arduino%5B'math_radian_to_degree'%5D%20%3D%20function(block)%20%7B%0A%20Blockly.Arduino.definitions_%5B'const_pi'%5D%20%3D%20'const%20float%20__MPI%20%3D%20'%20%2B%20Math.PI%20%2B%20'%3B'%3B%0A%0A%20var%20code_radiansFromDegree%20%3D%20'%5Cn'%20%2B%0A'float%20__radiansFromDegree(float%20radians)%20%7B%5Cn'%2B%0A'%20%20return%20radians%20*%20360%20%2F%202%20%2F%20__MPI%3B%5Cn'%20%2B%0A'%7D%5Cn'%3B%0A%20Blockly.Arduino.definitions_%5B'radiansFromDegree'%5D%20%3D%20code_radiansFromDegree%3B%0A%0A%20var%20argument0%20%3D%20Blockly.Arduino.valueToCode(block%2C%20'RADIAN'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Blockly.Arduino.ORDER_NONE)%20%7C%7C%200%3B%0A%20console.log(Math.PI)%3B%0A%20var%20code%20%3D%20'__radiansFromDegree('%20%2B%20argument0%20%2B%20')'%3B%0A%20return%20%5Bcode%2C%20Blockly.Arduino.ORDER_NONE%5D%3B%0A%7D%3B%0A" message="" highlight="" provider="manual"/]   5.      更改block上顯示語言： 更改在msg目錄下的js檔案，此功能為將blocks資料下的變數名稱對映到實際的block上，在js資料夾下還有en.js & zh-hant.js需一併更改，功能為將變數名稱改為不同語系。 先依第1步驟搜尋MATH_DEGREE，接著在第2步的位置放入程式碼，英文版亦同。 [pastacode lang="java" manual="Blockly.Msg.MATH_RADIAN_TO_DEGREE_HELPURL%20%3D%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FRadian%22%3B%0ABlockly.Msg.MATH_RADIAN_TO_DEGREE_TITLE%20%3D%20%22Radian%22%3B%0ABlockly.Msg.MATH_RADIAN_TO_DEGREE_APPEND%20%3D%20%22turn%20into%20degree%22%3B%0ABlockly.Msg.MATH_RADIAN_TO_DEGREE_TOOLTIP%20%3D%20%22%22%3B%0A" message="" highlight="" provider="manual"/] [pastacode lang="java" manual="Blockly.Msg.MATH_RADIAN_TO_DEGREE_HELPURL%20%3D%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FRadian%22%3B%0ABlockly.Msg.MATH_RADIAN_TO_DEGREE_TITLE%20%3D%20%22%E5%BC%A7%E5%BA%A6%22%3B%0ABlockly.Msg.MATH_RADIAN_TO_DEGREE_APPEND%20%3D%20%22%E8%BD%89%E6%8F%9B%E7%82%BA%E8%A7%92%E5%BA%A6%22%3B%0ABlockly.Msg.MATH_RADIAN_TO_DEGREE_TOOLTIP%20%3D%20%22%22%3B%0A" message="" highlight="" provider="manual"/] 6.      加入製作的block至目錄： 將新增的Block加入blockly/apps/blocklyduino/category.xml，這裡的順序、category位置就是實際顯示順序。type名稱需與定義block版型之名稱相同。請注意我們在<category math>標籤中加入了一個新的 block： [pastacode lang="java" manual="%20%3Cblock%20type%20%3D%20%E2%80%9Cmath_radian_to_degree%E2%80%9D%3E%3C%2Fblock%3E" message="" highlight="" provider="manual"/]   7.      build檔案 ： 最後請開啟cmd 輸入bash 輸入cd BlocklyDuino-for-LinkIt-master    進入資料夾 輸入ls    確定資料夾內有make.sh 輸入sh make.sh     去建立檔案   make.sh 要沒有 error 才會正確產生所有檔案 目前Github最新版本的資料 為 @x43x61x69 修改後之版本 修改過 make.sh 和其他 script 會檢查所需的 command 是否存在 之前的版本沒有檢查 [pastacode lang="java" manual="bash%0Acd%20BlocklyDuino-for-LinkIt-master%20%0Als%0Ash%20make.sh%0A" message="" highlight="" provider="manual"/]

成功建立之畫面

  Blocklyduino畫面   Blocklyduino轉Arduino code畫面

常見問題：

1. 找不到新增的block：可能在xml新增的位置有問題。

或是如果再terminal看到ERROR訊息寫"NameError: name 'lxml' is not defined" or “ImportError: No module named lxml.html”，則需要將lxml安裝後，在重新輸入sh make.sh。

2. block全部重疊在一起：如下圖，可能有更動到html檔，以至於覆蓋掉原本的code導致出錯，請使用sh make.sh重新建立一次。

  相關文章：

• [LinkIt 7697開發板教學]PWM類比模擬控制-Blocklyduino圖形化開發環境
• [LinkIt 7697開發板教學]BlocklyDuino圖形化介面 – 環境建置與介面
• [課程紀錄]170615,16 國中小自造者教育師資培訓營@日新國小