前言

Mixly自從2015年問世以來，就深受國內創客、中小學教師喜愛，如今已經成為國內最好用的Arduino圖形化軟件之一。Mixly最大的優點就是其開放性，Mixly建立了一個生態圈，這個生態圈歡迎所有人的加入，不限制廠家，不限制硬件。因此，任何一個掌握規則的人都可以為Mixly開發第三方庫，來豐富Mixly的功能。

Mixly基本原理

Mixly是一款圖形化編程軟件，即使用戶不懂C語言的語法，也可以利用圖形化程序編寫Arduino程序。Mixly的基本原理是將圖形化程序轉化成C語言，再利用Arduino IDE上傳到硬件中。在我們動手編寫第三方庫之前，先來了解Mixly是如何將圖形化程序轉化成C語言的。

各文件作用的流程如下圖所示。

根目錄下的xxx.xml文件定義了圖形塊的基本信息，比如類別、名稱，ID等。block/xxx.js文件定義了每個圖形塊的樣式，比如顏色、文字、圖標等。generator/xxx.js文件是將圖形塊程序轉化成C語言的關鍵部分。language/xxx/en.js等文件是語言文件，en.js是英文語言文件，zh-hans.js是簡體中文語言文件，zh-hant.js是繁體中文語言文件。該類文件定義了圖形塊程序中每一個字段顯示的文字內容。

整個庫的目錄中有以下的文件

• xxx.xml文件

  • 定義了圖形塊的基本信息，比如類別、名稱，ID等。

• block/xxx.js文件，

  • 定義了每個圖形塊的樣式，比如顏色、文字、圖標等。

• generator/xxx.js文件

  • 將圖形塊程序轉化成C語言的關鍵部分。

• language/xxx/en.js等文件

  • 語言文件，en.js是英文語言文件，zh-hans.js是簡體中文語言文件，zh-hant.js是繁體中文語言文件。該類文件定義了圖形塊程序中每一個字段顯示的文字內容。

文件結構如下：

└─xxx // 項目根目錄├─ xxx.xml // 本用戶庫的配置文件│├─ block │ xxx.js // 圖形化樣式文件│├─ generator │ xxx.js // 圖形塊轉C語言文件│└─ language└─xxxzh-hans.js // 簡體中文語言文件

實驗過程

1. 編寫xxx.xml文件（定義圖形塊的基本信息）

此文件是定義圖形塊的基本信息，比如類別、名稱，ID等（此腳本為全局路徑配置，注意方法和變量的名稱）。

具體代碼如下：

<!--該注釋為!!!路徑!!!,此為剛需!type="company" block="block/OLED.js" generator="generator/OLED.js" --> <script type="text/javascript" src="../../blocks/company/OLED.js"></script> <script type="text/javascript" src="../../generators/arduino/company/OLED.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><!--配置構造函數模塊--><block type="config" name="U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2"></block><!--開啟 U8g2驅動模塊--><block type="initOled"></block><!--中文輸入模塊--><block type="displayCN"><value name="disCN"><shadow type="text"><field name="_text">textOled</field></shadow></value></block> </category>

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

2. 編寫block/xxx.js文件（定義圖形塊的外觀樣式）

此文件定義了每個圖形塊的外觀樣式，比如顏色、文字、圖標等。

具體代碼如下：

//下列三行代碼,為剛需,此提供了下列所有代碼的入口 'use strict';goog.provide('Blockly.Blocks.OLED');//注意腳本類別及路徑名稱goog.require('Blockly.Blocks');// ---OLED模塊圖形配置---//include模塊 Blockly.Blocks.U8g2lib_include = {init: function() {this.setColour(120);//模塊圖形顏色this.appendDummyInput("")//此行代碼剛需,為模塊創建提供入口.appendField("#include <") //代碼塊上的文字內容.appendField(new Blockly.FieldTextInput('U8g2lib'), 'INCLUDE')//創建文本輸入對象.appendField(".h>");this.setPreviousStatement(true);//是否可以與上一模塊連接this.setNextStatement(true);//是否可以與下一模塊連接} };//配置構造函數模塊 Blockly.Blocks.config = {init: function() {this.setColour(120);this.appendDummyInput("").appendField("配置構造函數").appendField("U8g2 SSD1306 128X64")this.setPreviousStatement(true, null);this.setNextStatement(true, null);this.setInputsInline(false);//是否開啟模塊單行顯示(true為單行,false為多行)} };//開啟 U8g2驅動模塊 Blockly.Blocks.initOled = {init: function() {this.setColour(120);this.appendDummyInput("").appendField("開啟U8g2驅動程序")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);//開啟模塊右側可連接this.setPreviousStatement(true, null);this.setNextStatement(false, null);} };

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

3. 編寫generator/xxx.js文件（定義圖形塊與C語言的轉化）

此文件是將圖形塊程序轉化成C語言的關鍵部分，定義了每一個圖形化模塊對應的 Arduino C語言代碼。

具體代碼如下：

//下列三行代碼,為剛需,此提供了下列所有代碼的入口 'use strict';goog.provide('Blockly.Arduino.OLED');//注意腳本類別及路徑名稱goog.require('Blockly.Arduino');// ---OLED模塊圖形轉代碼---//include模塊Blockly.Arduino.U8g2lib_include = function() {var INCLUDE = this.getFieldValue('INCLUDE');//使用INCLUDE 變量來存儲,block文件夾中的OLED.js腳本,文本輸入對象的值Blockly.Arduino.definitions_['define_'+INCLUDE] = '#include <'+INCLUDE+'.h>';//嚴格函數,固定寫法(轉include調用內容)return ''; };//配置構造函數模塊Blockly.Arduino.config = function() {Blockly.Arduino.definitions_['define_'] = 'U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0,SCL,SDA);\n';return ''; };//開啟 U8g2驅動模塊Blockly.Arduino.initOled = function() {Blockly.Arduino.setups_['setup_intOled'] = 'u8g2.begin();\n';//嚴格函數固定寫法(轉setup函數中代碼)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);';};

• 圖形塊轉化C語言的原理為首先要獲取圖形塊中設置的各參數，然后利用字符串拼接等手段“拼湊”出C語言代碼。

4. 其他配置文件

資源配置就是除了上面三個必要的文件外，如有用到的庫則放置在XXX文件夾里；語言文件則放置在language文件夾里（en.js是英文語言文件，zh-hans.js是簡體中文語言文件，zh-hant.js是繁體中文語言文件）；硬件引腳的文件放置在companypin文件夾里；如硬件的引腳不同需要在此文件重新定義；音效、圖片等文件放置在media文件夾里。
這里我用到的是u8g2OLED庫，在根文件夾下新建一個OLED文件夾，將的u8g2OLED的庫文件放至即可

測試結果

1. Mixly導入第三方庫

打開Mixly軟件，單擊【導入庫】，然后選擇【本地導入】，在文件對話框中選擇第三方庫根目錄中XXX.xml文件。如下圖所示：

導入后可以在左下角看見已導入的第三方庫，已有相應的積木塊，如下圖所示：

2. 硬件部分接線

Arduino UNO ----- OLED顯示模塊3.3v ----- VCCGND ----- GNDA2 ----- SDAA3 ----- SCL

3. 上傳代碼
拖拉積木編寫程序，然后燒錄。如下圖所示：

組合積木塊會自動生成相應的代碼。

效果如下圖所示：

• 本項目用戶庫的源碼：點此下載

總結

以上是生活随笔為你收集整理的Mixly第三方库开发——OLED库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。