如何使用javascript函数通过adafruit Huzzah的ajax回调来控制arduino

步骤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