步驟1：電路和安裝

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

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

下載Involt（github鏈接）

打開Chrome》設置》擴展程序，然后切換開發人員模式。

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

現在，您可以從列表中打開應用程序，使用Chrome App Launcher或在桌面上創建快捷方式。

啟動應用程序后，您應該可以看到加載程序。從項目文件夾打開index.html在瀏覽器中將無法使用。

步驟2：Arduino草圖

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

。..

//Change only this to true inside sketch

boolean directMode = true;

。..

沒有此模式，只需編寫AnalogWrite（involtDigital ［index］），其中index是目標引腳號。值會自動更新。

現在不建議使用此方法。

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

第3步：Involt HTML Rangesliders

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

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

要了解Involt的工作原理，請查看入門頁面。

現在打開應用程序，選擇arduino端口并檢查結果。您應該看到與所附圖片相同的內容。對于基本用法，這是本教程的結尾。下一步是添加不需要工作的基于JQuery的顏色顯示。

步驟4：顯示顏色

I希望我的應用顯示所選顏色，因為……為什么不呢？ ：）為此，我添加了帶有“ display-color”類的html div。

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

.display-color{

background： rgb（0，0，0）;

width： 100px;

height： 100px;

}

在用戶界面事件時進入Arduino的involt的值在involtPin ［］數組中（對于字符串，非數字值則在involtString中）。 Arduino草圖中的involtPin ［］數組中的值相同。對于JQuery，當Rangeslider的值更改時，我將僅使用.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+‘）’）;

}

}）;

}）;

再次打開應用程序并查看結果。我對布局進行了小的視覺更改。最終的項目文件位于最后一步。

第5步：結束

您可以看到，本教程可以在10分鐘內完成而無需任何操作

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

感謝您閱讀我的教程。我希望你喜歡我的項目。查看我的其他教程或訪問Involt網站以獲取更多信息。

隨時向我提問@ ernestwarzocha@gmail.com