第1步：什么是伏特以及如何安裝。

在最新版本中，involt已從Chrome應(yīng)用程序移動到Node Webkit。安裝已更改，并且框架如何工作。

什么是Involt？

Involt已準(zhǔn)備好用于具有內(nèi)置串行和藍(lán)牙功能的應(yīng)用模板通信，可編輯的用戶界面元素和高級用戶的JQuery方法。您可以控制Arduino僅編寫幾行代碼。如果內(nèi)置的UI套件不能滿足您的需求，則該框架將提供JQuery支持，并且可以像其他JQuery插件一樣使用。

當(dāng)然，還有其他使用Javascript和Arduino的方法，但關(guān)鍵是盡可能使Involt變得簡單。

安裝

從http://nwjs.io/

下載Node-webkit *。

下載Involt并將其解壓縮到Node-webkit根文件夾中。

打開NW應(yīng)用。

第2步：電路

這是基本示例，因此您只需要讀取/發(fā)送數(shù)據(jù)即可。

將電位計連接到引腳A0。

將帶有220歐姆電阻的LED連接到引腳3

步驟3：Arduino草圖

有兩個Involt的工作流程-它取決于項目何時以草圖或HTML代碼開始，對于此示例，第一步是編輯Arduino草圖。

Involt的作用就像軟件和硬件之間的橋梁，因此與設(shè)備的通信是自動管理，但需要從雙方編寫代碼。這不是缺點，因為它簡化了許多事情。要與Arduino通信，您需要從arduino文件夾中上傳Involt草圖。要完全了解它是如何工作的，請閱讀入門頁面。

要從傳感器（A0）讀取值并將其發(fā)送給Involt，您需要將此函數(shù)添加到void循環(huán)中：

void loop（） {

//receive data from your app

involtReceive（）;

involtSend（0， analogRead（A0））;

}

從App接收到的值存儲在involtPin數(shù)組中。要在引腳3上切換值，請?zhí)砑右韵聝?nèi)容：

。..

void setup（）{

Serial.begin（57600）;

pinMode（3， OUTPUT）; //required for digitalWrite to work correctly

}

void loop（） {

//receive data from your app

involtReceive（）;

digitalWrite（3， involtPin［3］）;

involtSend（0， analogRead（A0））;

delay（2）;

}

。..

步驟4：HTML和用戶界面。

User界面

正如我之前提到的那樣-使用Involt創(chuàng)建App可以輕松處理其他HTML框架。每個UI元素的參數(shù)都是使用CSS類定義的。要自定義界面，可以添加或編輯CSS文件。

在index.html中的正文部分添加兩行代碼。第一行負(fù)責(zé)顯示引腳A0值，第二行是用于在0/1之間切換數(shù)字引腳值的按鈕（0是啟動應(yīng)用時的起始值）。

Involt基本語法：

ard ［功能］ ［pin］ ［值］ ［您的類］

看看您能做什么使用Involt檢查參考頁

更多功能

您還可以發(fā)送PWM值。將切換按鈕更改為兩個具有PWM值的按鈕（或toggle-pwm按鈕）。這是將值255發(fā)送到引腳3的按鈕示例：

Click me

要創(chuàng)建自定義界面或更多高級交互，可以使用JQuery。例如-將值123發(fā)送到引腳5看起來像這樣：

$（this）.pinDefine（“P5”）.sendValue（123）;

因為這是基本教程，所以我只使用了基本功能。請記住，有很多方法可以執(zhí)行相同的操作。

測試

要檢查結(jié)果，請打開應(yīng)用程序，選擇設(shè)備端口，您應(yīng)該會看到與附件類似的內(nèi)容圖片。

有關(guān)文件和更多示例，請查看Involt頁面上的其他教程。

第5步：結(jié)束。

恭喜！現(xiàn)在您已經(jīng)了解了Involt框架的基礎(chǔ)知識。

責(zé)任編輯：wv