第1步:什么是伏特以及如何安裝。
在最新版本中,involt已從Chrome應用程序移動到Node Webkit。安裝已更改,并且框架如何工作。
什么是Involt?
Involt已準備好用于具有內置串行和藍牙功能的應用模板通信,可編輯的用戶界面元素和高級用戶的JQuery方法。您可以控制Arduino僅編寫幾行代碼。如果內置的UI套件不能滿足您的需求,則該框架將提供JQuery支持,并且可以像其他JQuery插件一樣使用。
當然,還有其他使用Javascript和Arduino的方法,但關鍵是盡可能使Involt變得簡單。
安裝
從http://nwjs.io/
下載Node-webkit *。
下載Involt并將其解壓縮到Node-webkit根文件夾中。
打開NW應用。
第2步:電路
這是基本示例,因此您只需要讀取/發送數據即可。
將電位計連接到引腳A0。
步驟3:Arduino草圖
有兩個Involt的工作流程-它取決于項目何時以草圖或HTML代碼開始,對于此示例,第一步是編輯Arduino草圖。
Involt的作用就像軟件和硬件之間的橋梁,因此與設備的通信是自動管理,但需要從雙方編寫代碼。這不是缺點,因為它簡化了許多事情。要與Arduino通信,您需要從arduino文件夾中上傳Involt草圖。要完全了解它是如何工作的,請閱讀入門頁面。
要從傳感器(A0)讀取值并將其發送給Involt,您需要將此函數添加到void循環中:
void loop() {
//receive data from your app
involtReceive();
involtSend(0, analogRead(A0));
}
從App接收到的值存儲在involtPin數組中。要在引腳3上切換值,請添加以下內容:
。..
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創建App可以輕松處理其他HTML框架。每個UI元素的參數都是使用CSS類定義的。要自定義界面,可以添加或編輯CSS文件。
在index.html中的正文部分添加兩行代碼。第一行負責顯示引腳A0值,第二行是用于在0/1之間切換數字引腳值的按鈕(0是啟動應用時的起始值)。
Involt基本語法:
ard [功能] [pin] [值] [您的類]
看看您能做什么使用Involt檢查參考頁
更多功能
您還可以發送PWM值。將切換按鈕更改為兩個具有PWM值的按鈕(或toggle-pwm按鈕)。這是將值255發送到引腳3的按鈕示例:
Click me
要創建自定義界面或更多高級交互,可以使用JQuery。例如-將值123發送到引腳5看起來像這樣:
$(this).pinDefine(“P5”).sendValue(123);
因為這是基本教程,所以我只使用了基本功能。請記住,有很多方法可以執行相同的操作。
測試
要檢查結果,請打開應用程序,選擇設備端口,您應該會看到與附件類似的內容圖片。
有關文件和更多示例,請查看Involt頁面上的其他教程。
第5步:結束。
恭喜!現在您已經了解了Involt框架的基礎知識。
責任編輯:wv
-
HTML
+關注
關注
0文章
278瀏覽量
35538 -
Arduino
+關注
關注
188文章
6471瀏覽量
187243
發布評論請先 登錄
相關推薦
評論