当前位置： 文江博客话题详情

在 ESP32 客户端和服务器之间发送数据

发布于 2025-01-16 04:36:05 字数 5438 浏览 1 评论 0原文

我正在尝试创建一个简单的 Web 界面，以通过接入点托管客户端的 ESP32 控制 NeoPixel 条带。到目前为止，我在网上找到的每个示例都演示了如何通过将状态附加到 URL 标头来切换 LED 的开/关，然后在服务器端使用该信息来调用切换物理 LED 的函数，但是，我正在尝试做一些更独特的事情。

我找不到一种方法将从 HTML 颜色选择器中检索到的 #hex 值通过 HTTP 传递回服务器，然后使用它来设置 NEOPIXEL 颜色。

我所做的与许多示例不同的一件事是，我让服务器通过使用此函数发送 HTML 页面来处理客户端，据我所知，该函数获取包含 HTML 代码的 index.h 文件并将其发送到服务器到客户端。但我不确定如何“逆转”这个过程，特别是对于“文本/变量”

这是我的服务器代码：

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <Adafruit_NeoPixel.h>

//HTML code header for the web page
#include "index.h"

#define PIN 13

//Initialize the web client server
WebServer server(80);

//Initialize NeoPixels
Adafruit_NeoPixel strip = Adafruit_NeoPixel(12, PIN, NEO_GRB + NEO_KHZ800);

const char* ssid = "ESP32NeoPixelInterface";
const char* password = "password";

//temporary string to hold the HEX value of the color picker received from the web client
String header = "";

//Current time
unsigned long currentTime = millis();
//Previous time
unsigned long previousTime = 0;
//Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() {
  String s = MAIN_page; //Read HTML contents
  server.send(200, "text/html", s); //Send web page
}

void UpdateNeoPixels() {

}

void setup(void) {
  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting Sketch...");

  strip.begin();
  strip.setBrightness(25);

  //Connect to Wi-Fi network with SSID and password
  Serial.print("Setting AP (Access Point)…");
  //Remove the password parameter, if you want the AP (Access Point) to be open
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);

  //Start server
  server.on("/", handleRoot);      //This is display page
  server.begin();
  Serial.println("HTTP server started");

  //Set pixel #1 to green to show that an active access point connection has been made
  strip.setPixelColor(1, 100, 0, 0);
  strip.show();
}

//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void loop(void) {
  server.handleClient();
}

这是客户端的头文件：

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
  <head>
    <title>ESP32 NeoPixel Web Control</title>
  </head>
    <style>
      .button {
      display: inline;
      padding: 10px 10px;
      font-size: 2em;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 10px;
      box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.5);
      }
      .button:hover {background-color: #3e8e41}
      .button:active {
      background-color: #3e8e41;
      box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
      transform: translateY(2px);
      }
      .p1 {
      font-family: "Monaco", monospace;
      color: white;
      font-size: 1em;
      }
      .container{ 
      position: absolute;
      }
      .center1{
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
      .center2{
      margin: auto;
      position: absolute;
      top: 60%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
    </style>
    <body bgcolor="#282c34">
      <h1 class="p1">This web page is hosted remotley by an ESP32 server, change the color of the LED NeoPixels using the color picker and press "SUBMIT".</STYLE></h1>
      <hr height="10px"/>
      <div class="containter">
        <div class="center1">
          <input type="color" id="myColor" value="#ff0080"> 
        </div>
        <div class="center2">
          <button class="button button1" align="center" onclick=SendColorValue()>SUBMIT</button>
        </div>
      </div>
    <script>
      function SendColorValue() {
        var x = document.getElementById("myColor");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        
        };
        //Send a request from client to server saying "hey update the color of the NeoPixels!"
        xhttp.open("POST", "ColorValue", true);
        xhttp.send(x.value);
      }
    </script>
    </body>
</html>
)=====";

我基本上需要找到一种发送 x.value 的方法这是从颜色选择器框中检索回服务器的颜色值，并使用该值来设置 neopixel 颜色。

我见过的大多数示例仅涉及从客户端向服务器发送“布尔”类型数据，如下所示：

// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
  Serial.println("GPIO 26 on");
  output26State = "on";
  digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
  Serial.println("GPIO 26 off");
  output26State = "off";
  digitalWrite(output26, LOW);
}

作为参考，这就是我的客户端的样子： esp 客户端

原文

I am trying to create a simple web interface to control a NeoPixel strip from an ESP32 hosting a client over an access point. Every example I've found on the web so far demonstrates how you can toggle LED's ON/OFF by appending the state to the URL header and then using that info on the server-side to then call a function that toggles the physical LEDs, however, I'm trying to do something a little more unique.

I cannot find a way to pass the #hex value retrieved from my HTML color picker over the HTTP back to the server and use this to set the NEOPIXEL color then.

One thing I'm doing differently than many examples out there is I'm letting the server handle the client by sending the HTML page using this function, which I understand takes my index.h file which contains the HTML code and sends it over the server to the client. But I'm not sure how to "reverse" this process, especially for a "text/variable"

This is my server code:

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <Adafruit_NeoPixel.h>

//HTML code header for the web page
#include "index.h"

#define PIN 13

//Initialize the web client server
WebServer server(80);

//Initialize NeoPixels
Adafruit_NeoPixel strip = Adafruit_NeoPixel(12, PIN, NEO_GRB + NEO_KHZ800);

const char* ssid = "ESP32NeoPixelInterface";
const char* password = "password";

//temporary string to hold the HEX value of the color picker received from the web client
String header = "";

//Current time
unsigned long currentTime = millis();
//Previous time
unsigned long previousTime = 0;
//Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() {
  String s = MAIN_page; //Read HTML contents
  server.send(200, "text/html", s); //Send web page
}

void UpdateNeoPixels() {

}

void setup(void) {
  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting Sketch...");

  strip.begin();
  strip.setBrightness(25);

  //Connect to Wi-Fi network with SSID and password
  Serial.print("Setting AP (Access Point)…");
  //Remove the password parameter, if you want the AP (Access Point) to be open
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);

  //Start server
  server.on("/", handleRoot);      //This is display page
  server.begin();
  Serial.println("HTTP server started");

  //Set pixel #1 to green to show that an active access point connection has been made
  strip.setPixelColor(1, 100, 0, 0);
  strip.show();
}

//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void loop(void) {
  server.handleClient();
}

and this is the header file for the client:

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
  <head>
    <title>ESP32 NeoPixel Web Control</title>
  </head>
    <style>
      .button {
      display: inline;
      padding: 10px 10px;
      font-size: 2em;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 10px;
      box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.5);
      }
      .button:hover {background-color: #3e8e41}
      .button:active {
      background-color: #3e8e41;
      box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
      transform: translateY(2px);
      }
      .p1 {
      font-family: "Monaco", monospace;
      color: white;
      font-size: 1em;
      }
      .container{ 
      position: absolute;
      }
      .center1{
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
      .center2{
      margin: auto;
      position: absolute;
      top: 60%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
    </style>
    <body bgcolor="#282c34">
      <h1 class="p1">This web page is hosted remotley by an ESP32 server, change the color of the LED NeoPixels using the color picker and press "SUBMIT".</STYLE></h1>
      <hr height="10px"/>
      <div class="containter">
        <div class="center1">
          <input type="color" id="myColor" value="#ff0080"> 
        </div>
        <div class="center2">
          <button class="button button1" align="center" onclick=SendColorValue()>SUBMIT</button>
        </div>
      </div>
    <script>
      function SendColorValue() {
        var x = document.getElementById("myColor");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        
        };
        //Send a request from client to server saying "hey update the color of the NeoPixels!"
        xhttp.open("POST", "ColorValue", true);
        xhttp.send(x.value);
      }
    </script>
    </body>
</html>
)=====";

I basically need to find a way to send x.value which is the color value retrieved from the color picker box back to the server and use this value to set the neopixel color.

Most examples I've seen only deal with sending "boolean" type data to the server from the client such as this:

// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
  Serial.println("GPIO 26 on");
  output26State = "on";
  digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
  Serial.println("GPIO 26 off");
  output26State = "off";
  digitalWrite(output26, LOW);
}

For reference, this is what my client-side looks like:
esp client

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

骷髅 2025-01-23 04:36:05

为了处理从客户端发送的 POST 路由，您需要在服务器上执行以下操作：

 server.on("/ColorValue", HTTP_POST, []() { ... });

然后您必须处理参数（十六进制值），

String newColorValue = server.arg("ColorValue");

将其交给例程来分割十六进制并设置 Led

setLedColor(newColorValue);

并响应客户端，例如

server.send(200, "text/plain", "Color changed");

所以整个事情看起来像：

server.on("/ColorValue", HTTP_POST, []() {
  String newColorValue = server.arg("ColorValue");
  setLedColor(newColorValue);
  server.send(200, "text/plain", "Color changed");
});

子例程 setLedColor 看起来像

void setLedColor (String rgbHexValue) {
  char hexValue[3] =  {'\0'};
  uint8_t tenV;
  uint8_t oneV;
  // split and convert the String to uint8_t
  // code -> get first two letters via substring, process and convert to uint8_t
  rgbHexValue.substring(0, 2).toCharArray(hexValue, 2);
  tenV = (hexValue[0] <= '9') ? hexValue[0] - '0' : hexValue[0] - '7';
  oneV = (hexValue[1] <= '9') ? hexValue[1] - '0' : hexValue[1] - '7';
  uint8_t greenValue = (16 * tenV) + oneV;
  //pseudocode pretty much the same as above changes in the comments
  uint8_t redValue = ... //pseudocode -> second two letters via rgbHexValue.substring(2, 4) and from hex to uint see above
  uint8_t blueValue = ... //pseudocode -> last two letters via rgbHexValue.substring(4) and from hex to uint see above
  // Set pixel #1 to new color
  strip.setPixelColor(1, greenValue, redValue, blueValue); // check if correct
  strip.show();
}

Comments （也适用于其他读者）：
我个人不使用 ESP8266/ESP32 的 String 类，因为从长远来看（有时是几分钟）它会整理内存碎片并使设备崩溃。
因此，您应该从一开始就学习使用 char 数组和 char 处理来实现稳定使用，因此我建议使用以下代码：

在 setup(): 之前定义一个全局 char 数组：

static char newColorValue[7] =  {'\0'};

并从客户端获取值

strcpy(newColorValue, webServer.arg("ColorValue").c_str());

，这会导致以下路线：

server.on("/ColorValue", HTTP_POST, []() {
  strcpy(newColorValue, webServer.arg("ColorValue").c_str());
  setLedColor(newColorValue);
  server.send(200, "text/plain", "Color changed");
});

然后 setLedColor 定义如下：

void setLedColor () { // Convert routine for rgbHex to uint values
  char hexValue[3] =  {'\0'}; // holds a 2 digit hex value eg A9
  uint8_t tenV;    // first digit value eg A
  uint8_t oneV;    // second digit value eg 9
  // split and process the char array newColorValue
  // split and convert the first two digits
  strncpy(hexValue,newColorValue, 2); 
  tenV = (hexValue[0] <= '9') ? hexValue[0] - '0' : hexValue[0] - '7';
  oneV = (hexValue[1] <= '9') ? hexValue[1] - '0' : hexValue[1] - '7';
  uint8_t greenValue = (16 * tenV) + oneV;

  // second two digits
  strncpy(hexValue,newColorValue + 2, 2);
  ...
  uint8_t redValue = ...

  // Last two digits
  strncpy(hexValue,newColorValue + 4, 2);
  ...
  uint8_t blueValue = ... 
}

希望这个解决方案对您的项目有所帮助 - 并记住“字符串是邪恶的”;-)

For processing the POST route you send from your client you need something on the server like:

 server.on("/ColorValue", HTTP_POST, []() { ... });

then you have to process the argument (the hex value)

String newColorValue = server.arg("ColorValue");

hand it over to a routine for splitting the hex and setting the Led

setLedColor(newColorValue);

and respond to the client like

server.send(200, "text/plain", "Color changed");

so the whole thing would look like:

server.on("/ColorValue", HTTP_POST, []() {
  String newColorValue = server.arg("ColorValue");
  setLedColor(newColorValue);
  server.send(200, "text/plain", "Color changed");
});

The sub-routine setLedColor looks something like

void setLedColor (String rgbHexValue) {
  char hexValue[3] =  {'\0'};
  uint8_t tenV;
  uint8_t oneV;
  // split and convert the String to uint8_t
  // code -> get first two letters via substring, process and convert to uint8_t
  rgbHexValue.substring(0, 2).toCharArray(hexValue, 2);
  tenV = (hexValue[0] <= '9') ? hexValue[0] - '0' : hexValue[0] - '7';
  oneV = (hexValue[1] <= '9') ? hexValue[1] - '0' : hexValue[1] - '7';
  uint8_t greenValue = (16 * tenV) + oneV;
  //pseudocode pretty much the same as above changes in the comments
  uint8_t redValue = ... //pseudocode -> second two letters via rgbHexValue.substring(2, 4) and from hex to uint see above
  uint8_t blueValue = ... //pseudocode -> last two letters via rgbHexValue.substring(4) and from hex to uint see above
  // Set pixel #1 to new color
  strip.setPixelColor(1, greenValue, redValue, blueValue); // check if correct
  strip.show();
}

Comments (also for other readers):
I personally do not use String class with ESP8266/ESP32 because on the long run (which is sometimes a few minutes) it defragments the memory and crashes the device.
So you should learn from the start to use char arrays and char handling for stable usage so I would propose the following code:

Define a global char array before setup():

static char newColorValue[7] =  {'\0'};

and getting the value from the client like

strcpy(newColorValue, webServer.arg("ColorValue").c_str());

which leads to the following route:

server.on("/ColorValue", HTTP_POST, []() {
  strcpy(newColorValue, webServer.arg("ColorValue").c_str());
  setLedColor(newColorValue);
  server.send(200, "text/plain", "Color changed");
});

and the setLedColor is then defined as follows:

void setLedColor () { // Convert routine for rgbHex to uint values
  char hexValue[3] =  {'\0'}; // holds a 2 digit hex value eg A9
  uint8_t tenV;    // first digit value eg A
  uint8_t oneV;    // second digit value eg 9
  // split and process the char array newColorValue
  // split and convert the first two digits
  strncpy(hexValue,newColorValue, 2); 
  tenV = (hexValue[0] <= '9') ? hexValue[0] - '0' : hexValue[0] - '7';
  oneV = (hexValue[1] <= '9') ? hexValue[1] - '0' : hexValue[1] - '7';
  uint8_t greenValue = (16 * tenV) + oneV;

  // second two digits
  strncpy(hexValue,newColorValue + 2, 2);
  ...
  uint8_t redValue = ...

  // Last two digits
  strncpy(hexValue,newColorValue + 4, 2);
  ...
  uint8_t blueValue = ... 
}

Hope this solution helps your project - and remember "Strings are evil" ;-)

回复 原文
~没有更多了~

关于作者

匿名的好友

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

尘曦

文章 0 评论 0

在梵高的星空下

文章 0 评论 0

善良天后

文章 0 评论 0

韬韬不绝

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

不美如何

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文