TU:bit Block積木-客製化積木
想要在本機的軟體中增加擴展，要先找到軟體的安裝路徑中， external-resources 下的 extensions 資料夾，先複製一份 TUBITV2_BUTTON
C:\TubitBlockApp
└─ external-resources
└─ extensions
└─ TUBITV2_BUTTON // 資料夾名稱並無影響
├─ assets // 這裡存放擴展的 png 圖檔，大小為 600×372
├─ lib // 這裡存放標頭檔
├─ blocks.js
├─ generator.js
├─ index.js
├─ msg.json
├─ toolbox.js
└─ translations.js
接下來介紹每份檔案的功能，以及修改檔案的注意事項
index.js
定義了擴展的基本資料，請注意 extensionId 是全域的，須與 module 的名稱相應，在同個擴展中廣泛地使用，因此請確保其唯一性
const tubitv2b = formatMessage => ({
name: formatMessage({
id: 'tubitv2b.name',
default: 'TUBIT V2 BUTTON'
}),
extensionId: 'tubitv2b',//擴展ID
version: '1.5.0',//擴展版本
supportDevice: [ 'arduinoEsp32'],//支援板子
author: 'HONG TU 鴻兔科技', //作者名稱
iconURL: `assets/TUBITV2.jpg`, //顯示該擴展的圖片
description: formatMessage({
id: 'tubitv2.description',
default: 'For TU:bit V2 Control board.'//說明欄位
}),
featured: true,
hide: true,
blocks: 'blocks.js',
generator: 'generator.js',
toolbox: 'toolbox.js',
translations: 'translations.js',
library: 'lib',
official: true,
tags: ['kit'],
helpLink: 'https://www.trgreat.com'//該擴展幫助連結
});
module.exports = tubitv2b;
msg.js
所有語言的預設顯示內容，目前捨棄使用，以相同格式重新定義在 translations.js
{ "TUBITV2_BUTTON_CATEGORY": "TUBITV2_Button", "TUBITV2_BUTTON": "ReadButton", "TUBITV2_BUTTON_A": "A", "TUBITV2_BUTTON_B": "B" }
translations.js
經翻譯後的在地化顯示內容，目前可使用的語言有 : 繁體中文 ( zh-tw )、簡體中文 ( zh-cn ) 、英文 ( en )
function getInterfaceTranslations () { return { "en": { "tubitv2b.name": "TUBIT V2 BUTTON", "tubitv2b.description": "For TU:bit V2 Control board." } }; } function registerScratchExtensionTranslations () { return {}; } function registerBlocksMessages (Blockly) { Object.assign(Blockly.ScratchMsgs.locales["en"], { "TUBITV2_BUTTON_CATEGORY": "Button", "TUBITV2_BUTTON": "TUBIT ReadButton", "TUBITV2_BUTTON_A": "A", "TUBITV2_BUTTON_B": "B" } ); Object.assign(Blockly.ScratchMsgs.locales["zh-cn"], { "TUBITV2_BUTTON_CATEGORY": "按键", "TUBITV2_BUTTON": "TUBIT 读取按键", "TUBITV2_BUTTON_A": "A", "TUBITV2_BUTTON_B": "B" } ); Object.assign(Blockly.ScratchMsgs.locales["zh-tw"], { "TUBITV2_BUTTON_CATEGORY": "按鈕", "TUBITV2_BUTTON": "TUBIT 讀取按鈕", "TUBITV2_BUTTON_A": "A", "TUBITV2_BUTTON_B": "B" } ); return Blockly; } if (typeof module !== 'undefined') { module.exports = {getInterfaceTranslations}; } exports = registerScratchExtensionTranslations; exports = registerBlocksMessages;
定義積木與工具箱
更詳細的設定可以參考 Google Blockly – Define Blocks
blocks.js
定義積木外觀與樣式
function registerBlocks (Blockly) { const color = '#16A07A';//該積木顏色 Blockly.Blocks.tubitv2_button = { init: function () { this.jsonInit({ message0: Blockly.Msg.TUBITV2_BUTTON, message1: '%1', args1: [ { type: 'field_dropdown',//積木樣式 (該積木有下拉選單功能 name: 'TUBIT_BUTTON',//該積木名稱 options: [//選項(下拉選單) [Blockly.Msg.TUBITV2_BUTTON_A, 'Button_A'], [Blockly.Msg.TUBITV2_BUTTON_B, 'Button_B'] ] } ], colour: color, extensions: ['output_boolean'] }); } }; return Blockly; } exports = registerBlocks;
generator.js
定義積木對應的程式碼，以及該積木的相應的回呼。積木在這裡被真正轉換為程式碼
function registerGenerators (Blockly) { Blockly.Arduino.tubitv2_button = function (block) { const tubitbutton = block.getFieldValue('TUBIT_BUTTON'); //得到該選單數值 const code = `tubit.readButton(${tubitbutton})`; //將數值帶入code內 return [code, Blockly.Arduino.ORDER_ATOMIC]; }; return Blockly; } exports = registerGenerators;
toolbox.js
透過 <category> 定義工具箱，然後經由 <block> 將放進工具箱
function registerToolboxs () { return ` <category name="%{BKY_TUBITV2_BUTTON_CATEGORY}" id="TUBITV2_BUTTON_CATEGORY" colour="#16A07A" secondaryColour="#16A07A"> <block type="tubitv2_button" id="tubitv2_button"></block> </category>`; } exports = registerToolboxs;
基本錯誤排除
若編寫完積木開啟TU:bitBlock錯誤(積木擠在一起、程式碼未正常顯示、積木無法正常堆疊)，請按下ctrl+shift+i 檢查錯誤訊息，若有無法解決問題請與我們聯絡!