本文說明Blocklyduino 的檔案架構以及範例:如何自製一個弧度轉角度的數學指令。
※此例為使用Windows 10 操作
作者/攝影 | 翁偉傑 |
時間 | 1小時 |
成本 | 無 |
難度 | * * * * |
材料表 |
|
環境需求:
- 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:重新編譯時要用到本指令
- 進入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上即會顯示,如下圖。
- appendField 則是引導程式到字串的地方
- 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 中的最底部,(※注意不要放在任何括號中),如下:
4. 設定block之Arduino轉換碼:
於/blockly/generator/arduino資料夾中,新增該 block的邏輯。以本指令來說要加在 math.js 中的最底部(※注意非3. 的math.js,且不要貼於任何括號中) ,如下:
5. 更改block上顯示語言:
更改在msg目錄下的js檔案,此功能為將blocks資料下的變數名稱對映到實際的block上,在js資料夾下還有en.js & zh-hant.js需一併更改,功能為將變數名稱改為不同語系。
先依第1步驟搜尋MATH_DEGREE,接著在第2步的位置放入程式碼,英文版亦同。
6. 加入製作的block至目錄:
將新增的Block加入blockly/apps/blocklyduino/category.xml,這裡的順序、category位置就是實際顯示順序。type名稱需與定義block版型之名稱相同。請注意我們在<category math>標籤中加入了一個新的 block:
7. build檔案 :
最後請開啟cmd
輸入bash
輸入cd BlocklyDuino-for-LinkIt-master 進入資料夾
輸入ls 確定資料夾內有make.sh
輸入sh make.sh 去建立檔案
make.sh 要沒有 error 才會正確產生所有檔案
目前Github最新版本的資料
為 @x43x61x69 修改後之版本
修改過 make.sh 和其他 script
會檢查所需的 command 是否存在
之前的版本沒有檢查
成功建立之畫面
Blocklyduino畫面
Blocklyduino轉Arduino code畫面
常見問題:
- 找不到新增的block:可能在xml新增的位置有問題。
或是如果再terminal看到ERROR訊息寫”NameError: name ‘lxml’ is not defined” or “ImportError: No module named lxml.html”,則需要將lxml安裝後,在重新輸入sh make.sh。
- block全部重疊在一起:如下圖,可能有更動到html檔,以至於覆蓋掉原本的code導致出錯,請使用sh make.sh重新建立一次。
相關文章:
- [LinkIt 7697開發板教學]PWM類比模擬控制-Blocklyduino圖形化開發環境
- [LinkIt 7697開發板教學]BlocklyDuino圖形化介面 – 環境建置與介面
- [課程紀錄]170615,16 國中小自造者教育師資培訓營@日新國小
請問如果要自己建立一個Arduino block該怎麼做有文章可以參考嗎?
可以與您聯絡嗎?[急]
我的聯絡方式:cnyntg927@gmail.com
編寫中,請稍候喔
不好意思~請教一下,我按照上面的流程去做,還是會產生重疊的情況,請問這部分是有其他解法?
我的聯絡方式:only0715@gmail.com
jack 你好:
目前在BlocklyDuino積木的環境裡,不管是自製積木或是讀取檔案都會重疊舊積木,這問題目前還是要手動喔