ESP32上Autonomus汽车的HTML界面_Html_Esp32

ESP32上Autonomus汽车的HTML界面

html

ESP32上Autonomus汽车的HTML界面,html,esp32,Html,Esp32,我正在尝试为我的自动GPS汽车项目构建一个Web界面。我想输入坐标，并分配另外两个按钮，当按下时，将执行两个不同的功能，我尝试了不同的解决方案，从网络，但不能混合输入坐标和按钮。下面给出了获取坐标的代码，请建议更改，以便我可以有两个具有特定功能的按钮 #include <Arduino.h> #include <WiFi.h> #include <AsyncTCP.h> #include <ESPAsyncWebServer.h> doub

我正在尝试为我的自动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() {

}

#include”）；
});
onNotFound（notFound）；
server.begin（）；
}
void循环（）{
}

方法1 将html更改为


自主GPS机器人车
提交你的目的地坐标


航路点1纬度：




航路点1经度：





航路点2纬度：




航路点2经度：

现在，根据单击表单中的哪个按钮，参数“提交”将发生更改

所以只要读一下就可以了

commitParam=request->getParam（“commit”）->value（）；

并根据其值进行逻辑运算


如果（commitParam==“go”）{
Serial.println（“GO”）；
}否则如果（commitParam==“停止”）{
Serial.println（“停止”）；
}否则{
Serial.println（“无”）；
}

这将提交表单，但根据您按下的按钮，您可以通过读取commit参数进行区分

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

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


自主GPS机器人车
提交你的目的地坐标
....
....

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

#include”）；
});
onNotFound（notFound）；
server.begin（）；
}
void循环（）{
}

它不起作用，它只是提交，我在“if命令”中给出的任何东西都不起作用。我给出了

else if（request->hasParam（PARAM_COMMIT））{commitType=request->getParam（PARAM_COMMIT）->value（）；if（commitType==“Go”）{Serial.println（“YOYYYYO”）}else if（commitType==“Clear”）{Serial.println（“fdfghgh”）}

我已经更改了HTML代码中的go和clear，还有哪些是

Serial.println（commitType）；

输出？没有，没有输出，坐标仍在工作，但是有一个错误，你错过了

）

和

；

在每个

服务器的末尾。在旧代码中的上