步驟1：您需要什么

我為要使用ESP8266上的html頁(yè)面控制arduino的用戶(hù)構(gòu)建了這個(gè)項(xiàng)目。該項(xiàng)目的目標(biāo)是創(chuàng)建一個(gè)簡(jiǎn)單的方法，使用javascript函數(shù)設(shè)置arduino上的pin值。對(duì)于樣板onclick =“ SetPin（12，1，0）”會(huì)將您的arduino上的Pin 12設(shè)置為High。

對(duì)于本教程，您將需要以下各項(xiàng)才能準(zhǔn)確進(jìn)行。但是，我認(rèn)為它應(yīng)該適用于大多數(shù)arduino和ESP8266組合。但是，要完全按照我在這里的內(nèi)容進(jìn)行操作，您將需要以下組件。

Arduino Uno-應(yīng)與具有串行Rx Tx的任何arduino兼容產(chǎn)品一起使用

Adafruit Huzzah接線(xiàn)板

USB至串行電纜

4個(gè)低功耗LED的

模擬濁度測(cè)試儀-任何提供模擬輸出的模擬傳感器都可以使用

Wire

Wifi路由器

帶有移動(dòng)瀏覽器的手機(jī)

Arduino庫(kù)。

第2步：準(zhǔn)備Arduino ID

該項(xiàng)目需要一個(gè)新的arduino庫(kù)和一些配置，以節(jié)省時(shí)間。我不會(huì)在每個(gè)屏幕上都放一個(gè)鏡頭，而只是要遍歷您需要配置并使其運(yùn)行的所有內(nèi)容。我試圖使它對(duì)用戶(hù)來(lái)說(shuō)盡可能容易。

代碼使用許多庫(kù)來(lái)工作。首先，我們將專(zhuān)注于為ESP8266設(shè)置arduino，在本示例中，我將使用Adafruit Huzzah，因?yàn)槲野l(fā)現(xiàn)adafruit產(chǎn)品是最可靠的，并獲得最佳支持。只要您不嘗試從Adafruit Discord服務(wù)器獲得支持即可。在支持論壇上獲得幫助會(huì)更好。

無(wú)論如何，我在ESP8266上使用以下庫(kù)

ESP8266WiFi

WiFiClient

ESP8266WebServer

ArduinoJSON

這不是有關(guān)如何下載的教程然后安裝庫(kù)，這些是HUZZAH上使用的庫(kù)。因此，請(qǐng)找到并安裝它們。

您還需要安裝HUZZAH的板定義，因此，如果轉(zhuǎn)到FILE》首選項(xiàng)

在顯示“其他板管理器URL”的框中，請(qǐng)?zhí)砑右韵?/p>

http：//arduino.esp8266。 com/stable/package_esp8266c 。..

如果您已經(jīng)在此字段中添加了某些內(nèi)容，則請(qǐng)確保在其中添加逗號(hào)以添加其他面板URL。單擊確定，然后單擊確定。

工具》開(kāi)發(fā)板》開(kāi)發(fā)板管理器

比通過(guò)ESP8266社區(qū)安裝ESP8266來(lái)搜索ESP8266。

現(xiàn)在很棒，請(qǐng)確保我們具有使arduino代碼正常工作所需的一切。一個(gè)arduino端arduino本身在本教程中僅使用2個(gè)庫(kù)。

SoftwareSerial

ArduinoJSON

您應(yīng)該已經(jīng)具備。

步驟3：準(zhǔn)備ESP8266

現(xiàn)在，我們將代碼放到ESP8266（Adafruit HUZZAH）上并進(jìn)行準(zhǔn)備它用于連接到Arduino。解壓縮HUZZAH的代碼，然后打開(kāi)草圖。在第11和12行上，將ssid和密碼更改為本地網(wǎng)絡(luò)上的WIFI連接的密碼。您會(huì)注意到，草圖文件和index.h文件有2個(gè)文件。 index.h文件是html的存儲(chǔ)位置，它將在您的手機(jī)中顯示。

為wifi設(shè)置正確的SSID和密碼后，您可以編譯代碼并將其加載到ESP8266上。在HUZZAH上，您必須按住標(biāo)有GPIO0的按鈕，然后單擊“ rest”按鈕，然后放開(kāi)GPIO0按鈕以使芯片進(jìn)入引導(dǎo)加載程序模式。如果芯片已成功進(jìn)入引導(dǎo)加載程序模式，則紅燈會(huì)亮起，指示芯片處于引導(dǎo)加載程序模式。

要連接到ESP8266，您需要使用串行電纜或USB到串行適配器，或者FDTI芯片。在這種情況下，我將按照說(shuō)明中的說(shuō)明使用adafruit的電纜。但是，您可以通過(guò)Tx和Rx引腳上的TTL通過(guò)幾種方式連接到芯片。我希望查看此內(nèi)容的人知道如何連接到芯片以將代碼加載到芯片上。無(wú)論如何，繼續(xù)執(zhí)行此步驟，并使用zip文件中的代碼刷新芯片。

步驟4：準(zhǔn)備Arduino

要將代碼加載到arduino，請(qǐng)將板定義更改為Arduino/Genuino Uno。比解壓縮附加到此步驟的文件。然后將其上傳到ardunio。確實(shí)很簡(jiǎn)單，所有的辛苦工作已經(jīng)為您完成。我已經(jīng)經(jīng)歷了一個(gè)錯(cuò)誤處理的試驗(yàn)，因此您所要做的就是上傳代碼。

步驟5：一起布線(xiàn)

好，所以對(duì)于布線(xiàn)，我上面有一張上面的圖片。

將Huzzah上的Tx連接到arduino的Pin2。

將Huzzah上的Rx連接到arduino的Pin 3。

我在arduino的引腳2和3上創(chuàng)建了另一個(gè)串行插座，以釋放默認(rèn)的串行控制臺(tái)。

將arduino的引腳V +和En連接到5v。 -adafruit Huzzah內(nèi)置有一個(gè)3.3v穩(wěn)壓器，因此像這樣插入這些引腳可能不適用于所有ESP8266模塊。您可能需要連接自己的穩(wěn)壓器。如果您只是想讓事情輕松進(jìn)行，我建議您使用Huzzah。

將GND連接到arduino的GND

在您的LED的arduino線(xiàn)上的引腳12，11，9，8上，我在這里使用了低功耗LED，因?yàn)樗鼈兿牡?a href="http://m.sdkjxy.cn/tags/電流/" target="_blank">電流可能過(guò)多為了使此實(shí)驗(yàn)簡(jiǎn)單起見(jiàn)，會(huì)消耗太多功率。

比起arduino上的A0模擬引腳0，我已經(jīng)插入了Turpitity測(cè)試儀的輸出線(xiàn)。但是，您可以插入幾乎任何會(huì)提供模擬讀數(shù)的傳感器的輸出。

這就是您要做的所有事情。

第6步：訪(fǎng)問(wèn)網(wǎng)頁(yè)

現(xiàn)在，您已經(jīng)連接了arduino，并將所有內(nèi)容加載到板上，您需要能夠查看手機(jī)上的html。現(xiàn)在，我希望您連接到在Huzzah的代碼中設(shè)置了SSID和密碼的同一WiFi路由器。不需要確定路由器已分配給設(shè)備的IP地址。通常，如果您登錄路由器配置，則應(yīng)該有一個(gè)客戶(hù)端列表。這顯示了連接到Wifi連接的所有設(shè)備的IP地址。

但是，如果找不到此IP地址，則可以從arduino拔下插頭，然后再次使用串行電纜運(yùn)行它。如果您在設(shè)備上打開(kāi)串行控制臺(tái)，它將在串行控制臺(tái)中將IP地址打印到該設(shè)備，以防您無(wú)法找到其他方式。

無(wú)論如何，一旦您用手機(jī)連接到同一Wifi網(wǎng)絡(luò)。而不是將您的移動(dòng)Web瀏覽器指向Huzzah的IP地址?？雌饋?lái)可能與此類(lèi)似。 http://192.168.0.107或類(lèi)似的東西。

我在其中放置了一個(gè)基本頁(yè)面，該頁(yè)面允許您打開(kāi)和關(guān)閉4個(gè)LED以及讀取模擬傳感器的值。

步驟7：使用Javascipt

在ESP8266Code草圖中名為index.h的文件中，它應(yīng)作為arduino編輯器中的單獨(dú)選項(xiàng)卡出現(xiàn)。您可以在這里看到我做的基本示例。基本上它的工作方式是這樣的。

SetPin（12，1，0）; SetPin（{Pin Number}，{Value 1 High 0 Low}，{IsAnalog 1 Yes 0 No}）

這會(huì)將數(shù)字引腳12的值設(shè)置為高

SetPin（ 4，0，0）;

這會(huì)將數(shù)字引腳4的值設(shè)置為低

SetPin（A2，439，1）

這會(huì)將模擬引腳2的值設(shè)置為439

同樣，函數(shù)GetJSON將從引腳返回請(qǐng)求的值，并將其放入以指定div ID表示的html中。

GetJSON（‘A0’，1，‘resp_i’）GetJSON（{Pin Number}，{IsAnalog 1是0否}，{要返回結(jié)果的HTML元素的ID}）

這將向arduino發(fā)送請(qǐng)求，要求其提供模擬引腳0的值，并將結(jié)果返回給ID為resp_i的Div

GetJSON（12，0，‘mydiv’）;

這將詢(xún)問(wèn)arduino獲取數(shù)字引腳0的值并將結(jié)果返回到具有mydiv和id的html元素

步驟8：支持

我希望我的腳本幫助想要使用它的人。我在這里使用了一個(gè)非常基本的html示例，希望其他人可以探索它無(wú)法實(shí)現(xiàn)的所有功能。但是，這應(yīng)該演示如何在沒(méi)有html頁(yè)面加載和類(lèi)似性質(zhì)的情況下使用ajax控制arduino。

責(zé)任編輯：wv