asynchronous web controlled thermostat

ESP32异步网络控制恒温器

这个项目来自我与Yves Bourdon的讨论，在随机书呆子教程实验室论坛上，如何实现更新的Web界面来控制ESP32，而无需重新加载整个页面或提交表单。换句话说，这里的想法是从客户端浏览器中执行异步请求，以查询微控制器有关要显示的数据状态，然后在收到ESP32提供的数据后立即执行用户界面的本地更新。

有几种技术可以实现这一目标，包括使用Websocket，我更喜欢依靠Ajax的传统方法。然而，伊夫想了解如何使用Ajax实施这项技术。这是该项目的目的。另一个将遵循，以说明如何进行WebSocket ...

项目概述

为了回答Yves对连接恒温器的初始请求，我选择设置一个具有ESP32和DHT11温度传感器的相当简单的电路（但是任何传感器都可以完成工作）。当导航器询问ESP32以获得当前温度时，我还添加了一个LED来指示闪光的瞬间。控制ESP32的用户界面与任何现代浏览器都兼容。特别是在智能手机上：

Web界面允许用户调整恒温器的温度范围。一旦更改了一个阈值，就会将异步HTTP请求发送到ESP32，以将新的温度范围存储在其EEPROM内存中。这样，如果ESP32出于任何原因（例如，在功率故障之后）重新启动，则将以最后记录的温度范围初始化恒温器。 Reboot按钮允许通过在命令上重新启动ESP32来测试此功能。

每次进行当前温度读数时，接口都会完全透明，而无需重新加载页面。温度显示会自动通过更改颜色来自动适应这种情况，以指示一切都很好还是是否超出了允许的范围。传感器上也可能发生读数错误。该显示将考虑到：

初步阅读

为了充分了解我们在这里做什么，建议您查看以下关于随机书呆子教程的教程：

ESP32/ESP8266恒温器网络服务器 - 基于温度的控制输出

如果您不熟悉Spiffs的使用，我鼓励您也阅读本教程：

ESP32 Web服务器使用SPIFFS（SPI Flash文件系统）

所需零件

• 1 ESP32
• 1 DHT11温度传感器
• 1 LED
• 2个电阻（220Ω和4.7kΩ）

接线图和引脚

• GPIO23连接到LED的阳极
• LED的阴极通过220Ω电阻连接到地面
• GPIO32连接到DHT11温度传感器的数据引脚
• DHT11在其数据引脚上带有4.7kΩ电阻

代码

我使用paltformio IDE和Visual Studio代码编辑器开发了代码。因此，主程序称为main.cpp ，位于src目录中。如果您使用的是Arduino IDE，则必须将此程序移至项目的根源并将其重命名：

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

代码结构

该代码分为三个目录：

• src包含用于编译和上传到ESP32的C ++代码
• data包含Web用户界面源代码上传到ESP32 SPIFFS
• scss包含SCSS格式的CSS样式表的源代码

Web用户界面将以5个单独的文件存储在ESP32闪存文件系统上：

• index.html （接口结构）
• index.css （接口的图形布局）
• index.js （动态接口管理程序）
• D7MR.woff2 （用于数字显示的字体）
• favicon.ico （浏览器的小图标）

Web界面由CSS样式表格图形格式。源代码以SCSS（SASSY CSS）格式编写，并使用sass程序编译以获取CSS文件。请参阅官方的SASS网站以了解更多信息。

通常，SCSS语法非常接近CSS。如果您想修改源文件，则需要安装sass工具并将CSS文件重新编译如下：

 sass -t compressed --sourcemap=none --update scss:data

但是，如果您不想安装其他工具，也可以直接修改CSS文件。

AJAX实现

我在这里提出了两种技术，可以在客户端浏览器和在ESP32上运行的Web服务器之间实现异步交换：

• 使用JavaScript的XMLHttpRequest对象的经典方法
• 一种更现代的方法，它使用JavaScript的异步/等待协议

因此，您可以选择使用一个或另一个。

我已经仔细评论了整个代码，以使您更容易理解。不要犹豫，通过回答该项目的这篇文章来在论坛上提出问题。

学分

• 我特别要感谢我，这是奇妙的ESP32ASYNCWEBSERVER库的作者，这使我们的生活变得更加轻松，当我们想通过Web应用程序与ESP32互动。

• 我还要感谢Keshikan用于界面数字显示的DSEG7 Modern Mini常规字体。