如何給第三方模塊自定義Mixly圖形塊

02-05

本文為開源硬體實驗室原創文章，轉載此文章請註明出處（開源硬體實驗室知乎專欄）。

前言：

以下教程以Mixly0.96版本為例說明，你需要的基本技能是會寫Arduino庫文件。Mixly裡面我們需要修改的代碼語言大部分為JavaScript，本人嘗試修改Mixly以前也沒接觸過這門語言，全靠對裡面現成例子的模仿和複製粘貼。

感謝：

由衷感謝傅騫老師和其帶領的團隊對國內創客教育的無私奉獻。

一、總體框架步驟說明

Mixly的基本原理是把圖形化的模塊直接翻譯為C語言，這個翻譯機制現在還不是很智能，做的事情只是把模塊預先對應的C語言原原本本的替換而已，所以先搞明白這點，你已經離成功不遠了。

接著說下需要改動的幾個地方，後面會用實際事例一一說明：

1. Mixly0.96company 增加xxx.XML文件，文件里定義了模塊名稱、種類、相關文件的路徑

2. Mixly0.96arduino-1.7.8libraries 添加自己的arduino庫，這個不多說了，不懂Google。

3. Mixly0.96blocklyblockscompany 添加xxx.js文件，文件定義了你定製的圖形化模塊的樣子。

4. Mixly0.96blocklygeneratorsarduinocompany 添加翻譯到arduino語言的 xxx.js

5. Mixly0.96blocklymedia 添加模塊圖片，也可以不需要，看你了。

6. Mixly0.96blocklymsgjs 添加翻譯字元功能的 xxx.js文件，主要修改中文，繁體，英文，西班牙幾種。

二、開干

下面我們以一個LED模塊為例，帶你快速的走一遍。這裡需要說明一點，你可能覺得一個LED，不是直接就可以用Mixly的輸入輸出裡面的模塊就可以了嗎，為什麼還要搞自己的模塊。這裡我說下我的幾點看法：

1. 以StarLab的Nova模塊為例，Nova模塊的主控板兼容Arduino UNO，但是在管腳布局上做了優化和更改，定義了自己的埠屬性。所以從大局上看，為了統一風格，每個模塊都做了自己的封裝。

2. 麻雀雖小，但五臟俱全。了解了怎麼設計自己的LED模塊後，其它模塊，你都知道大方向了。

下面我們把寫好的Arduino庫添加好，我們先看下我們Nova模塊的LED庫頭文件的函數定義。定義了開和關兩個函數，申明對象時需要選擇埠。

然後我們看下我們在Arduino IDE下的使用常式，LED模塊可以接在A0、A1、A2、A3、S0、S1、S2、S3八個埠的其中一個上。

好，接下來我們要實現如下圖所示的Mixly功能模塊

對應的Arduino代碼如下圖：

首先，我們在Mixly0.96company 增加Nova.XML

代碼如下：

說明：

第1行：模塊名稱

第2、3行：另外兩個重要文件的相對路徑

第4、5、6行：定義了一個Nova的分類，裡面有一個LED模塊，顯示顏色為40，注意這個顏色不是模塊的顏色，是如下圖中這一小塊的顏色。

至於為什麼40是土黃色， Mixly中有一段注釋如下

* Convert a hue (HSV model) into an RGB hex triplet.

* @param {number} hue Hue on a colour wheel (0-360).

所以你可以查一下HSV模式的顏色值。或者你隨便填一個值，看下實際出來什麼顏色。又或者參看其它模塊的顏色值設置自己喜歡的顏色。推薦在線顏色最好的在線配色器網頁配色在線配色

接著：

我們就要寫生成

這個模塊的代碼了。

代碼如下：

說明：

前三段不做解釋，依樣畫葫蘆就行。

第7行：定義埠，到時的效果就是，你可以點擊選擇用哪一個埠。

["S0", "S0"] 第一個S0是模塊選擇框里顯示的名稱，第二個S0是實際的函數名，這裡用另外一個定義，或許你能看的明白

12行和17行：模塊的顏色值。

18行到24行之間為一個this語句，最後以分好結尾，中間不加標點符號。

18行：定義一個輸入選項

19行：顯示模塊名稱Blockly.LKL_NOVA_LED在翻譯的文件中定義為「LED燈」。

20行：顯示模塊圖片， 37, 32表示的是圖片中心點像素坐標

21行：顯示「埠」類似第19行

22行：顯示下拉選擇框

23行：顯示「設為」類似19行

24行：顯示下拉框，讓你選擇函數功能

最後兩行，依樣畫葫蘆，作用為上下兩個模塊銜接時的一些處理。

最後，我們寫一個怎麼把模塊翻譯成Arduino語言的文件。

代碼如下：

說明：

前三段不做解釋，依樣畫葫蘆就行。

第9行：定義一個變數保存前面我們選擇的「PIN」值

第10行：定義一個變數保存前面我們選擇的「STAT」

第11行：生成#include "Nova.h"注意所有不是變數的代碼都需要用『』單引號括起來。

第12行：申明一個對象，所有變數用++兩個加號括起來。

第13行：生成語句，最後添上n這樣代碼能回車換新行。

在放一下生成的代碼圖片，和上面的代碼一一比對下。

好了，我們啟動Mixly看下有什麼變化。

後記：

添加其它模塊，注意多看看Mixly自帶寫好的一些模塊，多參考下他們的寫法，依樣畫葫蘆就是，畫多了，也就熟練了。

另外需要注意的是，剛開始記得每次改一點點，然後保存，重啟Mixly,看下效果，一點點的改，需要的只是耐心而已。