HTML ESP32 上自动驾驶汽车的接口

Question

我正在尝试为我的自主 GPS 汽车项目构建一个 Web 界面。我想输入坐标并分配另外两个按钮，当按下它们时将执行两个不同的功能，我尝试了来自网络的不同解决方案但不能混合输入坐标和按钮。下面给出了获取坐标的代码，请大家指点修改，让我多出两个特定功能的按钮。

#include <Arduino.h>
  #include <WiFi.h>
  #include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
double lati1;
double logi1;
double lati2;
double logi2;
AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "******";
const char* password = "*******";

const char* PARAM_INPUT_1 = "input1";
const char* PARAM_INPUT_2 = "input2";
const char* PARAM_INPUT_3 = "input3";
const char* PARAM_INPUT_4 = "input4";


// HTML web page to handle 3 input fields (input1, input2, input3)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <h2>Autonomus GPS Robot Car<h2>
  <h3> Submit your Destination coordinates</h3>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <form action="/get">
    <br> 
    Waypoint 1 Latitude : <input type="text" name="input1">
     <br>
   <br>
    Waypoint 1 Longitude: <input type="text" name="input2">
  <br><br>
    <br> 
    Waypoint 2 Latitude : <input type="text" name="input3">
     <br>
   <br>
    Waypoint 2 Longitude: <input type="text" name="input4">
  <br><br>
   <input type="submit" value="Submit">

        </form>

</body></html>)rawliteral";

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Send a GET request to <ESP_IP>/get?input1=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String latitude1;
    String latitude1Param;
    String longitude1;
    String longitude1Param;
    String latitude2;
    String latitude2Param;
    String longitude2;
    String longitude2Param;
    if (request->hasParam(PARAM_INPUT_2)||request->hasParam(PARAM_INPUT_1) ) {
    // GET input1 value on <ESP_IP>/get?input1=<latitude>

      latitude1 = request->getParam(PARAM_INPUT_1)->value();
      latitude1Param = PARAM_INPUT_1;

    // GET input2 value on <ESP_IP>/get?input2=<longitude>

       longitude1 = request->getParam(PARAM_INPUT_2)->value();
       longitude1Param = PARAM_INPUT_2;

// GET input3 value on <ESP_IP>/get?input3=<latitude>

      latitude2 = request->getParam(PARAM_INPUT_3)->value();
      latitude2Param = PARAM_INPUT_3;

    // GET input4 value on <ESP_IP>/get?input4=<longitude>

       longitude2 = request->getParam(PARAM_INPUT_4)->value();
       longitude2Param = PARAM_INPUT_4;
  }
    else {
      latitude1 = "No message sent";
      latitude1Param = "none";
      longitude1 = "No message sent";
      longitude1Param = "none";
      latitude2 = "No message sent";
      latitude2Param = "none";
      longitude2 = "No message sent";
      longitude2Param = "none";

    }
    Serial.println(latitude1);
    Serial.println(longitude1);
    Serial.println(latitude2);
    Serial.println(longitude2);
    lati1=(latitude1.toFloat());
    logi1=(longitude1.toFloat());
    lati2=(latitude2.toFloat());
    logi2=(longitude2.toFloat());
    //Serial.println(lati,6);
    //Serial.println(logi,6);
    request->send(200, "text/html", "Coordinates sent to the robot with Waypoint 1 latitude: " + latitude1 +
                                     "   longitude: " + longitude1 + "<br>" "Waypoint 2 latitude: " + latitude2 +
                                     "   longitude: " + longitude2 +"<br><a href=\"/\">Return to Home Page</a>");
  });
  server.onNotFound(notFound);
  server.begin();
}

void loop() {

}

Answer 1

方法 1

将html改成这个

<!DOCTYPE HTML>
<html>
   <head>
      <h2>Autonomus GPS Robot Car<h2>
      <h3> Submit your Destination coordinates</h3>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <form action="/get">
        <br> 
        Waypoint 1 Latitude : <input type="text" name="input1">
         <br>
       <br>
        Waypoint 1 Longitude: <input type="text" name="input2">
      <br><br>
        <br> 
        Waypoint 2 Latitude : <input type="text" name="input3">
         <br>
       <br>
        Waypoint 2 Longitude: <input type="text" name="input4">
      <br><br>
       <input type="submit" value="submit" name="commit">
       <input type="submit" value="go" name="commit">
       <input type="submit" value="stop" name="commit">
       </form>

    </body>
</html>

现在，根据单击表单中的哪个按钮，参数 commit 将发生变化

所以简单地阅读它

commitParam = request->getParam("commit")->value();

并根据其值做逻辑


      if(commitParam == "go"){
        Serial.println("GO");
      } else if (commitParam == "stop"){
        Serial.println("STOP");
      } else {
        Serial.println("NOTHING");
      }

这将提交表单，但根据您按下的按钮，您可以通过阅读提交参数来区分。

这是一种方法，或者您可以尝试为两个按钮创建两条不同的路由，并在单击按钮时重定向页面，然后您可以在按钮的 GET 上执行您的逻辑方法

方法 2

将两个按钮设为链接（如果需要，您可以添加一些 css 使其看起来像一个按钮）

<head>
      <h2>Autonomus GPS Robot Car<h2>
      <h3> Submit your Destination coordinates</h3>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
<form action="/get" >
....
....
    <a href="/go" >GO</a>
    <a href="/clear" >CLEAR</a>
</form>
</body>
</html>

在代码中添加两个新的路由监听器

#include <Arduino.h>
  #include <WiFi.h>
  #include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
double lati1;
double logi1;
double lati2;
double logi2;
AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "******";
const char* password = "*******";

const char* PARAM_INPUT_1 = "input1";
const char* PARAM_INPUT_2 = "input2";
const char* PARAM_INPUT_3 = "input3";
const char* PARAM_INPUT_4 = "input4";


// HTML web page to handle 3 input fields (input1, input2, input3)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <h2>Autonomus GPS Robot Car<h2>
  <h3> Submit your Destination coordinates</h3>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <form action="/get">
    <br> 
    Waypoint 1 Latitude : <input type="text" name="input1">
     <br>
   <br>
    Waypoint 1 Longitude: <input type="text" name="input2">
  <br><br>
    <br> 
    Waypoint 2 Latitude : <input type="text" name="input3">
     <br>
   <br>
    Waypoint 2 Longitude: <input type="text" name="input4">
  <br><br>
   <input type="submit" value="Submit">

        </form>

</body></html>)rawliteral";

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

/////////  ADD IT HERE
  server.on("/go", HTTP_GET, [] (AsyncWebServerRequest *request) {
   //logic for go here
   request->redirect("/");
  });

  server.on("/clear", HTTP_GET, [] (AsyncWebServerRequest *request) {
    //logic for clear here
    request->redirect("/");
  });

  // Send a GET request to <ESP_IP>/get?input1=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String latitude1;
    String latitude1Param;
    String longitude1;
    String longitude1Param;
    String latitude2;
    String latitude2Param;
    String longitude2;
    String longitude2Param;
    if (request->hasParam(PARAM_INPUT_2)||request->hasParam(PARAM_INPUT_1) ) {
    // GET input1 value on <ESP_IP>/get?input1=<latitude>

      latitude1 = request->getParam(PARAM_INPUT_1)->value();
      latitude1Param = PARAM_INPUT_1;

    // GET input2 value on <ESP_IP>/get?input2=<longitude>

       longitude1 = request->getParam(PARAM_INPUT_2)->value();
       longitude1Param = PARAM_INPUT_2;

// GET input3 value on <ESP_IP>/get?input3=<latitude>

      latitude2 = request->getParam(PARAM_INPUT_3)->value();
      latitude2Param = PARAM_INPUT_3;

    // GET input4 value on <ESP_IP>/get?input4=<longitude>

       longitude2 = request->getParam(PARAM_INPUT_4)->value();
       longitude2Param = PARAM_INPUT_4;
  }
    else {
      latitude1 = "No message sent";
      latitude1Param = "none";
      longitude1 = "No message sent";
      longitude1Param = "none";
      latitude2 = "No message sent";
      latitude2Param = "none";
      longitude2 = "No message sent";
      longitude2Param = "none";

    }
    Serial.println(latitude1);
    Serial.println(longitude1);
    Serial.println(latitude2);
    Serial.println(longitude2);
    lati1=(latitude1.toFloat());
    logi1=(longitude1.toFloat());
    lati2=(latitude2.toFloat());
    logi2=(longitude2.toFloat());
    //Serial.println(lati,6);
    //Serial.println(logi,6);
    request->send(200, "text/html", "Coordinates sent to the robot with Waypoint 1 latitude: " + latitude1 +
                                     "   longitude: " + longitude1 + "<br>" "Waypoint 2 latitude: " + latitude2 +
                                     "   longitude: " + longitude2 +"<br><a href=\"/\">Return to Home Page</a>");
  });
  server.onNotFound(notFound);
  server.begin();
}

void loop() {

}

HTML ESP32 上自动驾驶汽车的接口

HTML interface for a Autonomus car on ESP32

html

esp32

方法 1

方法 2