步驟1：電路和安裝

所需的硬件僅是Arduino和RGB帶220歐姆電阻的LED。只需按照?qǐng)D中的方式連接引腳即可。

從軟件角度來(lái)看，您需要下載Involt并將其安裝為Chrome打包應(yīng)用（因此需要Google Chrome瀏覽器）：

下載Involt（github鏈接）

打開(kāi)Chrome》設(shè)置》擴(kuò)展程序，然后切換開(kāi)發(fā)人員模式。

單擊“加載未打包的擴(kuò)展名。..”，然后選擇www文件夾。

現(xiàn)在，您可以從列表中打開(kāi)應(yīng)用程序，使用Chrome App Launcher或在桌面上創(chuàng)建快捷方式。

啟動(dòng)應(yīng)用程序后，您應(yīng)該可以看到加載程序。從項(xiàng)目文件夾打開(kāi)index.html在瀏覽器中將無(wú)法使用。

步驟2：Arduino草圖

由于本教程是最簡(jiǎn)單的方法，因此在Arduino草圖中（從Involt/Arduino文件夾中）唯一要做的就是將directMode更改為true 。此模式將直接將值從應(yīng)用發(fā)送到引腳。對(duì)于如此簡(jiǎn)單的互動(dòng)，可以使用它。請(qǐng)記住，在特定硬件上工作時(shí)，請(qǐng)勿使用此功能。

。..

//Change only this to true inside sketch

boolean directMode = true;

。..

沒(méi)有此模式，只需編寫(xiě)AnalogWrite（involtDigital ［index］），其中index是目標(biāo)引腳號(hào)。值會(huì)自動(dòng)更新。

現(xiàn)在不建議使用此方法。

直接模式不可用受支持并且在新版本中，involtDigital已更改為involtPin

第3步：Involt HTML Rangesliders

現(xiàn)在是時(shí)候進(jìn)行HTML部件了，就像上一步一樣簡(jiǎn)單。 Involt為每個(gè)UI元素翻譯CSS類(lèi)，以使它們與硬件通信。您需要定義哪個(gè)UI元素與哪個(gè)引腳（或要發(fā)送哪個(gè)變量）以及基本參數(shù)（如value或它們的范圍）進(jìn)行通信。對(duì)于RGB滑塊，我們需要在index.html中添加三個(gè)rangelider，其CSS類(lèi)如下所示：

P9，P10，P11數(shù)字代表目標(biāo)pwm引腳。 Rangeslider的默認(rèn)起始值為0，范圍為0-255，因此在此示例中不必包括其他參數(shù)。要設(shè)置自定義屬性，只需將它們添加為另一個(gè)CSS類(lèi)。

要了解Involt的工作原理，請(qǐng)查看入門(mén)頁(yè)面。

現(xiàn)在打開(kāi)應(yīng)用程序，選擇arduino端口并檢查結(jié)果。您應(yīng)該看到與所附圖片相同的內(nèi)容。對(duì)于基本用法，這是本教程的結(jié)尾。下一步是添加不需要工作的基于JQuery的顏色顯示。

步驟4：顯示顏色

I希望我的應(yīng)用顯示所選顏色，因?yàn)椤瓰槭裁床荒兀?：）為此，我添加了帶有“ display-color”類(lèi)的html div。

將基本CSS屬性添加到core/framework.css文件中，或者將您自己的文件添加到index.html頭中部分。

.display-color{

background： rgb（0，0，0）;

width： 100px;

height： 100px;

}

在用戶界面事件時(shí)進(jìn)入Arduino的involt的值在involtPin ［］數(shù)組中（對(duì)于字符串，非數(shù)字值則在involtString中）。 Arduino草圖中的involtPin ［］數(shù)組中的值相同。對(duì)于JQuery，當(dāng)Rangeslider的值更改時(shí)，我將僅使用.css（）方法作為背景色。您需要將此腳本添加到自己的文件中，并將其包含在html頭部分中。

$（document）.ready（function（） {

$（“.slider”）.on（{

slide： function（）{

//This is the tricky way to update the rgb value of background

var background = involtPin［11］+“，”+involtPin［10］+“，”+involtPin［9］;

$（“.display-color”）.css（‘background’， ‘rgb（’+background+‘）’）;

}

}）;

}）;

再次打開(kāi)應(yīng)用程序并查看結(jié)果。我對(duì)布局進(jìn)行了小的視覺(jué)更改。最終的項(xiàng)目文件位于最后一步。

第5步：結(jié)束

您可以看到，本教程可以在10分鐘內(nèi)完成而無(wú)需任何操作

僅當(dāng)您要在Involt UI工具包之外創(chuàng)建自定義交互時(shí)，才需要有關(guān)JQuery的知識(shí)。 Framework是基于JS/JQuery的，因此在使用CSS和DOM操作創(chuàng)建接口時(shí)非常靈活。

感謝您閱讀我的教程。我希望你喜歡我的項(xiàng)目。查看我的其他教程或訪問(wèn)Involt網(wǎng)站以獲取更多信息。

隨時(shí)向我提問(wèn)@ ernestwarzocha@gmail.com