今天，我想我會(huì)確切地解釋我如何使用一些 JavaScript ， Processing，和 Arduino 來(lái)實(shí)現(xiàn)這一目標(biāo)。我將概述該方法不需要以太網(wǎng)屏蔽你的Arduino，我會(huì)提供完整的代碼樣品供您還可以使用

要求：

Arduino

點(diǎn)亮以控制Arduino上的適當(dāng)電路；看到您的PC或Mac

網(wǎng)站托管

基本的編碼技巧我周圍背光從上周部件的電路圖和故障教程。

處理軟件使用JavaScript和PHP，盡管我將提供您可以自定義的完整代碼。

Arduino設(shè)置

首先，請(qǐng)參考上周的Arduino方面的教程?hào)|西我們將使用的代碼是相同的，因?yàn)槲沂褂玫氖窍嗤腞GB LED燈帶控制電路，因此在此不再贅述?？偠灾珹rduino將通過(guò)USB串行連接讀取RGB值到計(jì)算機(jī)。

處理應(yīng)用

我們將要使用的處理應(yīng)用非常簡(jiǎn)單（PASTEBIN）；它采用了基本的 loadStrings（）函數(shù)讀取存儲(chǔ)在遠(yuǎn)程網(wǎng)絡(luò)地址的文本文件 - 在這種情況下，我使用的 http://jamesbruce.me/lights/LED.txt 。在您的虛擬主機(jī)上創(chuàng)建一個(gè)示例文本文件進(jìn)行測(cè)試，然后進(jìn)行相應(yīng)調(diào)整。文本文件應(yīng)僅為R，G和B的3行值。

您還需要將串行端口更改為USB連接的端口。和以前一樣，應(yīng)用程序要做的第一件事是將串行端口列表輸出到控制臺(tái)–選中要使用的串行端口，然后重新運(yùn)行。

Arduino Web控件

在Web控件方面，我選擇了一個(gè)名為Spectrum的simplecolorpicker jQuery插件；還有其他人，但是我覺(jué)得這很簡(jiǎn)單，可以在移動(dòng)設(shè)備上進(jìn)行觸摸操作，而其他我卻沒(méi)有。將在 spectrum.js 和 spectrum.css 在同一個(gè)目錄中的一切文件的（我做了一個(gè)/lightssub-directoryon我的服務(wù)器，以保持干凈的東西）。 我們將使用PHP既顯示web控制，并處理的 LED.txt 文件寫入如果變量是在POST請(qǐng)求中給出。當(dāng)用戶訪問(wèn)此頁(yè)面并選擇一種顏色時(shí)，它會(huì)向AAAX請(qǐng)求發(fā)送一個(gè)帶有顏色變量的顏色。這將整個(gè)內(nèi)容保留在一個(gè)文件中。完整的PHP/HTML可以在此pastebin （連同其他文件保存在子目錄中的 index.php ）中找到，但是讓我簡(jiǎn)要介紹一下

PHP ：檢測(cè)是否存在名為“ colors”的發(fā)布變量。如果是這樣，請(qǐng)打開(kāi)LED.txt文件進(jìn)行寫入，然后用post變量覆蓋。

HTML ：導(dǎo)入 jQuery ， Spectrum.js 下，和 Spectrum.css

的的JavaScript ：的getRGB函數(shù)返回逗號(hào)的陣列分離RGB值給出各種不同的CSS色彩格式，例如 #aaaaa

的的JavaScript ：創(chuàng)建頻譜控制，并附加AJAX調(diào)用選擇的顏色已更改的事件。 Ajax調(diào)用由控制給出的RGB值這個(gè)處理程序文件。

最后，確保您的 LED.txt 文件是可寫的由服務(wù)器。應(yīng)該具有 655 或 777 權(quán)限。啟動(dòng)文件，并給它一展身手;處理應(yīng)用程序?qū)⑿枰\(yùn)行，并將每秒刷新一次文件。如果頁(yè)面上沒(méi)有出現(xiàn)顏色選擇器，請(qǐng)檢查JavaScript控制臺(tái)是否有錯(cuò)誤。

陷阱和進(jìn)一步的工作

正如我所提到的，此方法不是故意使用以太網(wǎng)屏蔽的，所以任何人基本的網(wǎng)站托管服務(wù)可以使其設(shè)置非常快速且成本低廉。但是，這確實(shí)意味著我們需要使用Processing應(yīng)用程序作為獲取數(shù)據(jù)的網(wǎng)關(guān)。如果沒(méi)有運(yùn)行PC，它將無(wú)法正常工作。通過(guò)添加以太網(wǎng)orWiFishield的，我們可以將Arduino的任何地方而不被拴在PC，并在遠(yuǎn)端讀取命令或直推他們到Arduino一點(diǎn)點(diǎn)端口轉(zhuǎn)發(fā)。我改天再說(shuō)。還有并發(fā)的問(wèn)題 - 我們把它設(shè)置方式是，該文件將僅僅是overwrittenevery timesomeone選擇一個(gè)新的顏色，顏色的變化之間的延遲的處理代碼決定。如果要讓許多用戶不斷調(diào)整顏色，則帶有數(shù)據(jù)庫(kù)的排隊(duì)系統(tǒng)可能更合適；如果更新的發(fā)生頻率高于刷新文件的頻率，則使用平面文件存儲(chǔ)值可能會(huì)導(dǎo)致某些更改被忽略。然后，當(dāng)然，除非您正在觀看我們的現(xiàn)場(chǎng)直播，否則您無(wú)法知道它是否還可以正常工作。理想情況下，應(yīng)該在控制頁(yè)面上設(shè)置并嵌入一個(gè)網(wǎng)絡(luò)攝像頭。不過(guò)，作為技術(shù)演示，我認(rèn)為這很棒。我希望您能看到通過(guò)Arduino遠(yuǎn)程控制互聯(lián)網(wǎng)上任何東西的潛力。賈斯汀建議我們移交對(duì)我的烤箱的控制權(quán)；我拒絕了您是否有任何有趣的項(xiàng)目對(duì)您有幫助？
責(zé)任編輯：wv