Mixly第三方庫(kù)開(kāi)發(fā)的兩種方法——U8g2庫(kù)二次開(kāi)發(fā)

• 前言
• 方法一：自定義庫(kù)
• • 1、創(chuàng)建庫(kù)文件夾
  • 2、開(kāi)始編程
  • • 2.1、定義圖形塊的基本信息
    • 2.2、定義圖形塊的外觀樣式
    • 2.3、定義圖形塊與C語(yǔ)言的轉(zhuǎn)化
    • 2.4、資源配置
  • 3、使用自定義的Mixly第三方庫(kù)編程
• 方法二：使用make庫(kù)進(jìn)行自定義庫(kù)
• • 1、下載和安裝make庫(kù)
  • 2、導(dǎo)入make庫(kù)
  • 3、使用make庫(kù)

前言

Mixly自從2015年問(wèn)世以來(lái)，就深受?chē)?guó)內(nèi)創(chuàng)客、中小學(xué)教師喜愛(ài)，如今已經(jīng)成為國(guó)內(nèi)最好用的Arduino圖形化軟件。Mixly最大的優(yōu)點(diǎn)就是其開(kāi)放性，Mixly建立了一個(gè)生態(tài)圈，這個(gè)生態(tài)圈歡迎所有人的加入，不限制廠家，不限制硬件。因此，任何一個(gè)掌握規(guī)則的人都可以為Mixly開(kāi)發(fā)第三方庫(kù)，來(lái)豐富Mixly的功能。

Mixly基本原理：Mixly的基本原理是將圖形化程序轉(zhuǎn)化成C語(yǔ)言，即設(shè)計(jì)好對(duì)應(yīng)的圖形模塊樣式，再將模塊與C代碼進(jìn)行對(duì)應(yīng)。
Mixly作用：讓使用者通過(guò)拖拉拽的積木方式實(shí)現(xiàn)C程序的編寫(xiě)，使一些不懂C語(yǔ)言語(yǔ)法但是想進(jìn)行Arduino等MCU開(kāi)發(fā)的初學(xué)者也能玩轉(zhuǎn)單片機(jī)，比如應(yīng)用于少兒編程。

本博客使用Arduino UNO開(kāi)發(fā)板+OLED顯示模塊+U8g2庫(kù)實(shí)現(xiàn)一個(gè)可顯示中文的自定義Mixly第三方庫(kù)。我使用的Mixly版本為1.2.2。Mixly官網(wǎng)

方法一：自定義庫(kù)

1、創(chuàng)建庫(kù)文件夾

1）理論
Mixly第三方庫(kù)的基本文件結(jié)構(gòu)如下：

│— XXX // 項(xiàng)目名稱，以下文件或文件夾的XXX都需修改為項(xiàng)目名稱│— block│— XXX.js│— companypin│— XXX│— pin.js│— generator│— XXX.js│— language│— XXX│— zh-hans.js //簡(jiǎn)體中文│— zh-hant.js //繁體中文│— en.js //英語(yǔ)│— spa.js //西班牙語(yǔ)│— media│— XXX│— XXX //文件夾，放置一些庫(kù)文件（.h和.cpp）│— XXX.xml

①XXX.xml文件：處于根目錄下。此文件定義了圖形塊的基本信息，比如類別、名稱，ID等。
②block/XXX.js文件：此文件定義了每個(gè)圖形塊的外觀樣式，比如顏色、文字、圖標(biāo)等。
③generator/XXX.js文件：此文件是將圖形塊程序轉(zhuǎn)化成C語(yǔ)言的關(guān)鍵部分，定義了每一個(gè)圖形化模塊對(duì)應(yīng)的 Arduino C語(yǔ)言代碼。
④其他文件：language/xxx/en.js(zh-hans.js)等文件是語(yǔ)言文件（en.js是英文語(yǔ)言文件，zh-hans.js是簡(jiǎn)體中文語(yǔ)言文件，zh-hant.js是繁體中文語(yǔ)言文件），該類文件定義了圖形塊程序中每一個(gè)字段顯示的文字內(nèi)容；companypin文件夾中的文件一般不需要，除非硬件引腳不同；media文件夾中主要放置程序塊包含的音效、圖片等；XXX文件夾放置庫(kù)文件。
注：①②③點(diǎn)的文件是必須的；其他文件是非必須的。

2）實(shí)現(xiàn)
構(gòu)建庫(kù)文件結(jié)構(gòu)如下圖所示：

2、開(kāi)始編程

共分為3個(gè)部分，也是必須要編寫(xiě)的3個(gè)必要的腳本，分別為XXX.xml文件、block/XXX.js文件、generator/XXX.js文件。

注意：方法和變量的名稱在以下三個(gè)腳本中必須嚴(yán)格保持一致，且大小寫(xiě)敏感。

2.1、定義圖形塊的基本信息

1）理論
此文件定義了圖形塊的基本信息，比如類別、名稱，ID等（此腳本為全局路徑配置，注意方法和變量的名稱）。打開(kāi)根文件夾下的XXX.xml 腳本，模板如下：

<!-- type="company" block="block/XXX.js" generator="generator/XXX.js" media="media/XXX/" language="language/XXX/" companypin="companypin/XXX/pin.js" --> //標(biāo)出各個(gè)文件/文件夾的所在位置。XXX為項(xiàng)目名稱，需修改。<script type="text/javascript" src="../../blocks/company/XXX.js"></script> <script type="text/javascript" src="../../generators/arduino/company/XXX.js"></script> <category id="ID？" name="名字？" colour="#1296DB"><block type = "xxxxx"> //與block/XXX.js文件溝通的橋梁<value name="名稱？"><shadow type="類型？"></shadow> <!--type = 類型，具體含義如下：Type（類型） 含義 對(duì)應(yīng)端口（UNO為例，具體硬件具體分析）pins_digital 數(shù)字管腳 0 ~ 13,A0 ~ A7pins_analog 模擬輸入管腳 A0 ~ A7pins_pwm 模擬輸出管腳 3,6,9,10,11,13pins_interrupt 中斷管腳 0,1,2,3,7 --></value></block> </category>

• block 節(jié)點(diǎn)：用于定義一個(gè)新的圖形塊，type的值為圖形塊的名稱。
• value節(jié)點(diǎn)：用于容納選擇框。
• shadow節(jié)點(diǎn)：表示下拉框，是專門(mén)用于下拉選擇的節(jié)點(diǎn)。type類型表示該下拉框可以選擇的類型。

2）實(shí)現(xiàn)
可使用代碼編輯工具編寫(xiě)，也可以使用記事本打開(kāi)再編寫(xiě)。具體代碼如下：

<!-- type="company" block="block/Mixly_u8g2.js" generator="generator/Mixly_u8g2.js" --><script type="text/javascript" src="../../blocks/company/Mixly_u8g2.js"></script> <script type="text/javascript" src="../../generators/arduino/company/Mixly_u8g2.js"></script><category id="kivin OLED demo" name="OLED中文顯示" colour= 20><!-- OLED模塊 --><!--include模塊--><block type="U8g2lib_include"><value name="String"><shadow type="text"> <!--可編輯文本--><field name="_text">U8g2lib.h</field></shadow></value></block><!--配置構(gòu)造函數(shù)模塊--><block type="config" name="U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2"></block><!--開(kāi)啟 U8g2驅(qū)動(dòng)模塊--><block type="initOled"></block><!--中文輸入模塊--><block type="displayCN"><value name="disCN"><shadow type="text"><field name="_text">textOled</field></shadow></value></block> </category>

2.2、定義圖形塊的外觀樣式

1）理論
此文件定義了每個(gè)圖形塊的外觀樣式，比如顏色、文字、圖標(biāo)等。打開(kāi)block文件夾下的xxx.js腳本，模板如下：

'use strict'; goog.provide('Blockly.Blocks.XXX'); goog.require('Blockly.Blocks'); //前三行是一些初始化信息，是Mixly庫(kù)開(kāi)發(fā)的規(guī)范開(kāi)頭，只需改動(dòng)XXX（項(xiàng)目名稱）即可。//注意：這里的xxxxx要與根目錄下的XXX.xml文件中的block節(jié)點(diǎn)的type是相同的，這是在兩個(gè)文件中建立溝通的橋梁. Blockly.Blocks.xxxxx = {init: function() {this.appendDummyInput("")...this.setColour();this.setPreviousStatement();this.setNextStatement();this.setInputsInline();...} };

• setColour()：表示設(shè)置圖形塊顏色，顏色值是HUE格式，范圍為0~360，具體顏色值可通過(guò)網(wǎng)絡(luò)查找。（0: 紅色120: 綠色240: 藍(lán)色300: 紫色）
• setPreviousStatement()：表示設(shè)置是否可以跟上一模塊連接。（true: 可以 false：不可以）
• setNextStatement()：表示設(shè)置是否可以跟下一模塊連接。（true: 可以 false：不可以）
• setInputsInline()：表示設(shè)置模塊為單行或多行，當(dāng)模塊輸入?yún)?shù)較多時(shí)可以設(shè)為false（false為多行）。
• setTooltip()：表示設(shè)置模塊說(shuō)明文字，可以直接輸入文本，或者通過(guò)語(yǔ)言變量定義。
• setOutput(Boolean, type)：表示設(shè)置是否為輸出模式。當(dāng)參數(shù)Boolean為true時(shí)則該模塊的左側(cè)有個(gè)連接點(diǎn)，該模塊可以放到其他模塊的輸入框中。為了控制該模塊輸出的數(shù)據(jù)類型，可以通過(guò)參數(shù)type來(lái)定義。type可選值有Number（數(shù)值），String（字符串），Boolean（布爾型），Array（數(shù)組）， ‘IPAddress’（IP地址）等。多類型可用[Number, Boolean]這樣的形式表示。

• 官方語(yǔ)言變量
  官方的語(yǔ)言變量以【Blockly.MIXLY_】為前綴。
  Mixly已經(jīng)定義了一部分常用的語(yǔ)言變量，比如Blockly.MIXLY_PIN的中文含義是“管腳”，英文含義是“PIN”。如需使用，可以直接調(diào)用。其他官方語(yǔ)言變量可以參考Mixly0.996_WIN\blockly\msg\js\zh-hans.js文件。

• 自定義語(yǔ)言變量
  自定義變量采用【Blockly.自定義庫(kù)名稱_變量名】的形式。如在第三方庫(kù)中定義一個(gè)語(yǔ)言變量，可在language/XXX/zh-hans.js文件中編寫(xiě)自定義的語(yǔ)言變量，如下所示：

Blockly.MAKER_LED_SWITCH="LED開(kāi)關(guān)"; Blockly.MAKER_LED_SWITCH_TOOLTIP="用于控制LED開(kāi)關(guān)。" Blockly.MAKER_LED_OPEN="開(kāi)"; Blockly.MAKER_LED_OFF="關(guān)";

2）實(shí)現(xiàn)
具體代碼如下：

'use strict'; goog.provide('Blockly.Blocks.Mixly_u8g2'); goog.require('Blockly.Blocks');// ---OLED模塊圖形配置--- //include模塊 Blockly.Blocks.U8g2lib_include = {init: function() {this.setColour(120);//模塊圖形顏色this.appendDummyInput("")//此行代碼剛需,為模塊創(chuàng)建提供入口.appendField("#include <") //代碼塊上的文字內(nèi)容.appendField(new Blockly.FieldTextInput('U8g2lib'), 'INCLUDE')//創(chuàng)建文本輸入對(duì)象.appendField(".h>");this.setPreviousStatement(true);//是否可以與上一模塊連接this.setNextStatement(true);//是否可以與下一模塊連接} };//配置構(gòu)造函數(shù)模塊 Blockly.Blocks.config = {init: function() {this.setColour(120);this.appendDummyInput("").appendField("配置構(gòu)造函數(shù)").appendField("U8g2 SSD1306 128X64")this.setPreviousStatement(true, null);this.setNextStatement(true, null);this.setInputsInline(false);//是否開(kāi)啟模塊單行顯示(true為單行,false為多行)} };//開(kāi)啟 U8g2驅(qū)動(dòng)模塊 Blockly.Blocks.initOled = {init: function() {this.setColour(120);this.appendDummyInput("").appendField("開(kāi)啟U8g2驅(qū)動(dòng)程序")this.setPreviousStatement(true, null);this.setNextStatement(true, null);} };//中文輸入模塊 Blockly.Blocks.displayCN = {init: function() {this.setColour(50);this.appendDummyInput("").appendField("輸入字符串...")this.appendValueInput("VALUE", String).setCheck([String,Number]).setAlign(Blockly.ALIGN_RIGHT);//開(kāi)啟模塊右側(cè)可連接this.setPreviousStatement(true, null);this.setNextStatement(false, null);} };

2.3、定義圖形塊與C語(yǔ)言的轉(zhuǎn)化

1）理論
此文件是將圖形塊程序轉(zhuǎn)化成C語(yǔ)言的關(guān)鍵部分，定義了每一個(gè)圖形化模塊對(duì)應(yīng)的 Arduino C語(yǔ)言代碼。打開(kāi)generator文件夾下的XXX.js腳本，模板如下：

圖形塊轉(zhuǎn)化C語(yǔ)言的原理為首先要獲取圖形塊中設(shè)置的各參數(shù)，然后利用字符串拼接等手段“拼湊”出C語(yǔ)言代碼。

'use strict'; goog.provide('Blockly.Arduino.XXX'); goog.require('Blockly.Arduino'); //前三行是一些初始化信息，是Mixly庫(kù)開(kāi)發(fā)的規(guī)范開(kāi)頭，只需改動(dòng)XXX（項(xiàng)目名稱）即可。//函數(shù)的定義，轉(zhuǎn)化過(guò)程就在該函數(shù)中 Blockly.Arduino.xxxxx = function() {//利用getFieldValue()方法獲取圖形塊中設(shè)置的數(shù)值var A = this.getFieldValue('與block/XXX.js中設(shè)置的相關(guān)名稱相同A');var B = this.getFieldValue('與block/XXX.js中設(shè)置的相關(guān)名稱相同B');//用于編寫(xiě)C語(yǔ)言的setup部分，setup部分程序有固定格式，將setup內(nèi)的程序賦值給Blockly.Arduino.setups_['setup_output_' + A]。setup程序內(nèi)容可用字符串拼接的方式組成。如：pinMode(13, OUTPUT);Blockly.Arduino.setups_['setup_output_' + A] = 'pinMode(' + A + ', OUTPUT);';//用于編寫(xiě)C語(yǔ)言中的loop函數(shù)，采用字符串拼接的方式將管腳、狀態(tài)等參數(shù)放入C語(yǔ)言代碼中。如：digitalWrite(13,HIGH);var code = 'digitalWrite(' + A + ',' + B + ');\n'return code;//用return code;將編寫(xiě)的代碼傳回Mixly。//如要對(duì)獲取的數(shù)值進(jìn)行字符串操作、邏輯運(yùn)算、數(shù)學(xué)運(yùn)算等操作可以直接使用js語(yǔ)法進(jìn)行運(yùn)算，運(yùn)算完成后再輸出成C語(yǔ)言。 };

2）實(shí)現(xiàn)
具體代碼如下：

'use strict'; goog.provide('Blockly.Arduino.Mixly_u8g2');//注意腳本類別及路徑名稱 goog.require('Blockly.Arduino');// ---OLED模塊圖形轉(zhuǎn)代碼---//include模塊Blockly.Arduino.U8g2lib_include = function() {var INCLUDE = this.getFieldValue('INCLUDE');//使用INCLUDE 變量來(lái)存儲(chǔ),block文件夾中的OLED.js腳本,文本輸入對(duì)象的值Blockly.Arduino.definitions_['define_'+INCLUDE] = '#include <'+INCLUDE+'.h>';//嚴(yán)格函數(shù),固定寫(xiě)法(轉(zhuǎn)include調(diào)用內(nèi)容)return ''; };//配置構(gòu)造函數(shù)模塊Blockly.Arduino.config = function() {Blockly.Arduino.definitions_['define_'] = 'U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0,SCL,SDA);\n';return ''; };//開(kāi)啟 U8g2驅(qū)動(dòng)模塊Blockly.Arduino.initOled = function() {Blockly.Arduino.setups_['setup_intOled'] = 'u8g2.begin();\n';//嚴(yán)格函數(shù)固定寫(xiě)法(轉(zhuǎn)setup函數(shù)中代碼)return ''; };//中文輸入模塊Blockly.Arduino.displayCN=function(){var value = Blockly.Arduino.valueToCode(this, 'VALUE', Blockly.Arduino.ORDER_ATOMIC) || '\"\"';return 'u8g2.firstPage();' + '\n' + 'do {' + '\n' + 'u8g2.setFont(u8g2_font_unifont_t_chinese1);' + '\n' + 'u8g2.drawUTF8(0,15,' +value+ ');' + '\n' + '} while ( u8g2.nextPage() );' + '\n' + 'delay(1000);';};

2.4、資源配置

資源配置就是除了上面三個(gè)必要的文件外，如有用到的庫(kù)則放置在XXX文件夾里；語(yǔ)言文件則放置在language文件夾里（en.js是英文語(yǔ)言文件，zh-hans.js是簡(jiǎn)體中文語(yǔ)言文件，zh-hant.js是繁體中文語(yǔ)言文件）；硬件引腳的文件放置在companypin文件夾里；音效、圖片等文件放置在media文件夾里。

這里我用到u8g2庫(kù)，在Mixly_u8g2根文件夾下新建一個(gè)Mixly_u8g2文件夾，將下載的庫(kù)文件解壓至此，如下圖所示：

3、使用自定義的Mixly第三方庫(kù)編程

1）Mixly導(dǎo)入第三方庫(kù)
打開(kāi)Mixly軟件，單擊【導(dǎo)入庫(kù)】，然后選擇【本地導(dǎo)入】，最后在彈出的文件對(duì)話框中選擇第三方庫(kù)根目錄中XXX.xml文件。這里我的為Mixly_u8g2.xml，如下圖所示：

導(dǎo)入后可以在左下角看見(jiàn)已導(dǎo)入的第三方庫(kù)，如下圖所示：

2）硬件部分接線

Arduino UNO（IIC） ----- OLED顯示模塊3.3v ----- VCCGND ----- GNDA4 ----- SDAA5 ----- SCL

3）實(shí)現(xiàn)
拖拉積木編寫(xiě)程序，然后燒錄（Mixly上燒錄成功后沒(méi)有反應(yīng)或燒錄不成功的，可以把代碼復(fù)制到Arduino IDE上燒錄）。如下圖所示：

效果如下圖所示：

方法二：使用make庫(kù)進(jìn)行自定義庫(kù)

1、下載和安裝make庫(kù)

參考
make庫(kù)是一個(gè)制作Mixly圖形化模塊的第三方庫(kù)，其源碼已托管到gitee和github上。

2、導(dǎo)入make庫(kù)

Make庫(kù)下載完成后，進(jìn)入Mixly，單擊【導(dǎo)入庫(kù)】。導(dǎo)入完成后，把滑動(dòng)條拖到最下方，就可以看到剛剛導(dǎo)入的make庫(kù)，這個(gè)庫(kù)的結(jié)構(gòu)和下圖相似。

3、使用make庫(kù)

make庫(kù)結(jié)構(gòu)介紹：

使用說(shuō)明：
①顯示界面：用于查看制作出的圖像化模塊的外觀。
②輸入：用于定義圖形化模塊的輸入接口。
③類型：用于在三個(gè)輸入接口左側(cè)添加不同的數(shù)據(jù)輸入類型。包含：文本塊、文本輸入塊、長(zhǎng)文本輸入塊、數(shù)字輸入塊、角度輸入塊、下拉框塊、檢查框塊、顏色塊、圖片塊。
④顏色：用于定義圖形化模塊的顏色，此分類下有三種顏色圖形化模塊（色表、度數(shù)選擇器、字符串輸入框）供我們選擇。
⑤編輯生成代碼：用于編輯圖形化模塊所要生成的代碼。
⑥定義塊外觀/代碼：用于制作塊外觀和查看塊在三個(gè)文件(xxx.xml、block/xxx.js、generator/xxx.js)下的代碼。
⑦轉(zhuǎn)換工具(block→block+zh_hans)：用于讓制作出的庫(kù)可以支持多種語(yǔ)言。
⑧基礎(chǔ)塊：用于制作庫(kù)中的各個(gè)分類。
⑨示例：是分類⑧(基礎(chǔ)塊)的一個(gè)例子。
⑩測(cè)試：是一個(gè)測(cè)試界面，對(duì)于一些不太確定代碼是否正確的塊可以先放入這個(gè)界面來(lái)調(diào)試。

總結(jié)

以上是生活随笔為你收集整理的Mixly第三方库开发的两种方法——U8g2库二次开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。