步驟1：您需要什么

我為要使用ESP8266上的html頁面控制arduino的用戶構建了這個項目。該項目的目標是創建一個簡單的方法，使用javascript函數設置arduino上的pin值。對于樣板onclick =“ SetPin（12，1，0）”會將您的arduino上的Pin 12設置為High。

對于本教程，您將需要以下各項才能準確進行。但是，我認為它應該適用于大多數arduino和ESP8266組合。但是，要完全按照我在這里的內容進行操作，您將需要以下組件。

Arduino Uno-應與具有串行Rx Tx的任何arduino兼容產品一起使用

Adafruit Huzzah接線板

USB至串行電纜

4個低功耗LED的

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

Wire

Wifi路由器

帶有移動瀏覽器的手機

Arduino庫。

第2步：準備Arduino ID

該項目需要一個新的arduino庫和一些配置，以節省時間。我不會在每個屏幕上都放一個鏡頭，而只是要遍歷您需要配置并使其運行的所有內容。我試圖使它對用戶來說盡可能容易。

代碼使用許多庫來工作。首先，我們將專注于為ESP8266設置arduino，在本示例中，我將使用Adafruit Huzzah，因為我發現adafruit產品是最可靠的，并獲得最佳支持。只要您不嘗試從Adafruit Discord服務器獲得支持即可。在支持論壇上獲得幫助會更好。

無論如何，我在ESP8266上使用以下庫

ESP8266WiFi

WiFiClient

ESP8266WebServer

ArduinoJSON

這不是有關如何下載的教程然后安裝庫，這些是HUZZAH上使用的庫。因此，請找到并安裝它們。

您還需要安裝HUZZAH的板定義，因此，如果轉到FILE》首選項

在顯示“其他板管理器URL”的框中，請添加以下

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

如果您已經在此字段中添加了某些內容，則請確保在其中添加逗號以添加其他面板URL。單擊確定，然后單擊確定。

工具》開發板》開發板管理器

比通過ESP8266社區安裝ESP8266來搜索ESP8266。

現在很棒，請確保我們具有使arduino代碼正常工作所需的一切。一個arduino端arduino本身在本教程中僅使用2個庫。

SoftwareSerial

ArduinoJSON

您應該已經具備。

步驟3：準備ESP8266

現在，我們將代碼放到ESP8266（Adafruit HUZZAH）上并進行準備它用于連接到Arduino。解壓縮HUZZAH的代碼，然后打開草圖。在第11和12行上，將ssid和密碼更改為本地網絡上的WIFI連接的密碼。您會注意到，草圖文件和index.h文件有2個文件。 index.h文件是html的存儲位置，它將在您的手機中顯示。

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

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

步驟4：準備Arduino

要將代碼加載到arduino，請將板定義更改為Arduino/Genuino Uno。比解壓縮附加到此步驟的文件。然后將其上傳到ardunio。確實很簡單，所有的辛苦工作已經為您完成。我已經經歷了一個錯誤處理的試驗，因此您所要做的就是上傳代碼。

步驟5：一起布線

好，所以對于布線，我上面有一張上面的圖片。

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

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

我在arduino的引腳2和3上創建了另一個串行插座，以釋放默認的串行控制臺。

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

將GND連接到arduino的GND

在您的LED的arduino線上的引腳12，11，9，8上，我在這里使用了低功耗LED，因為它們消耗的電流可能過多為了使此實驗簡單起見，會消耗太多功率。

比起arduino上的A0模擬引腳0，我已經插入了Turpitity測試儀的輸出線。但是，您可以插入幾乎任何會提供模擬讀數的傳感器的輸出。

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

第6步：訪問網頁

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

但是，如果找不到此IP地址，則可以從arduino拔下插頭，然后再次使用串行電纜運行它。如果您在設備上打開串行控制臺，它將在串行控制臺中將IP地址打印到該設備，以防您無法找到其他方式。

無論如何，一旦您用手機連接到同一Wifi網絡。而不是將您的移動Web瀏覽器指向Huzzah的IP地址。看起來可能與此類似。 http://192.168.0.107或類似的東西。

我在其中放置了一個基本頁面，該頁面允許您打開和關閉4個LED以及讀取模擬傳感器的值。

步驟7：使用Javascipt

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

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

這會將數字引腳12的值設置為高

SetPin（ 4，0，0）;

這會將數字引腳4的值設置為低

SetPin（A2，439，1）

這會將模擬引腳2的值設置為439

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

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

這將向arduino發送請求，要求其提供模擬引腳0的值，并將結果返回給ID為resp_i的Div

GetJSON（12，0，‘mydiv’）;

這將詢問arduino獲取數字引腳0的值并將結果返回到具有mydiv和id的html元素

步驟8：支持

我希望我的腳本幫助想要使用它的人。我在這里使用了一個非常基本的html示例，希望其他人可以探索它無法實現的所有功能。但是，這應該演示如何在沒有html頁面加載和類似性質的情況下使用ajax控制arduino。

責任編輯：wv