ESP32 Web Server Help

Using Arduino Programming Questions
1

Hi Everyone,

I'm trying to run a web server to control some servos for some fine tuning of servo position. I've mixed and matched some tutorials of web servers to get to this

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <ESP32Servo.h>

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

Servo YAxis;
Servo XAxis;

int XPos = 90; 
int YPos = 90;
int inc = 1;

// HTML web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
  <head>
    <title>Servo Controller</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
      .button {
        padding: 10px 20px;
        font-size: 24px;
        text-align: center;
        outline: none;
        color: #fff;
        background-color: #2f4468;
        border: none;
        border-radius: 5px;
        box-shadow: 0 6px #999;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      }  
      .button:hover {background-color: #1f2e45}
      .button:active {
        background-color: #1f2e45;
        box-shadow: 0 4px #666;
        transform: translateY(2px);
      }
    </style>
  </head>
  <body>
    <h1>Control Web Server</h1>
    <button class="button" onclick="SendPos('XP1')" >XAxis + 1</button>
    <button class="button" onclick="SendPos('XM1')" >XAxis - 1</button>
    <button class="button" onclick="SendPos('YP1')" >YAxis + 1</button>
    <button class="button" onclick="SendPos('YM1')" >YAxis - 1</button>
    <script>
    function SendPos(x){
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/" + x, true)
      xhr.send();
    }
    <\script>
  </body>
</html>)rawliteral";

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

AsyncWebServer server(80);

void handle_OnConnect(){
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    XPos = 90;
    YPos = 90;
    Serial.print("XAxis = ");
    Serial.print(XPos);
    Serial.print("  YAxis = ");
    Serial.println(YPos);
    request->send_P(200, "text/html", index_html);
  });
}

void handle_XP1(){
  server.on("/XP1", HTTP_GET, [] (AsyncWebServerRequest *request) {
    XPos = XPos + inc;
    Serial.print("XAxis Update +1 > ");
    Serial.println(XPos);
    request->send(200, "text/plain", "ok");
  });
}

void handle_XM1(){
  server.on("/XM1", HTTP_GET, [] (AsyncWebServerRequest *request) {
    XPos = XPos - inc;
    Serial.print("XAxis Update -1 > ");
    Serial.println(XPos);
    request->send(200, "text/plain", "ok");
  });
}

void handle_YP1(){
  server.on("/YP1", HTTP_GET, [] (AsyncWebServerRequest *request) {
    YPos = YPos + inc;
    Serial.print("YAxis Update +1 > ");
    Serial.println(YPos);
    request->send(200, "text/plain", "ok");
  });
}

void handle_YM1(){
  server.on("/YM1", HTTP_GET, [] (AsyncWebServerRequest *request) {
    YPos = YPos - inc;
    Serial.print("YAxis Update -1 > ");
    Serial.println(YPos);
    request->send(200, "text/plain", "ok");
  });
}

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("ESP IP Address: http://");
  Serial.println(WiFi.localIP());
  
  handle_OnConnect();
  handle_XP1();
  handle_XM1();
  handle_YM1();
  handle_YP1();

  server.onNotFound(notFound);
  server.begin();
}

void loop() {

}

I'm almost certain the issue is with the buttons and how I've made them but I can't figure out what the issue is...

    <button class="button" onclick="SendPos('XP1')" >XAxis + 1</button>
    <button class="button" onclick="SendPos('XM1')" >XAxis - 1</button>
    <button class="button" onclick="SendPos('YP1')" >YAxis + 1</button>
    <button class="button" onclick="SendPos('YM1')" >YAxis - 1</button>
    <script>
    function SendPos(x){
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/" + x, true)
      xhr.send();
    }

I have no prior experience with HTML or Javascript so I am very lost and all but certain this is riddled with issues. The on connect handler does work but the rest do not. Any help would be amazing.

2

FYI, navigating to the URL's does work... For e.g going to 192.168.1.***/XP1 runs the function so the issue seems to be with linking the url to button... I would have assumed this would had to have been done in the loop...When I try this it doesn't work either.

3

This is a bad idea if you don't know all the details.
You should start with a working example and then do very small changes and immitiately test again if it works as expected

Another approach that is quite easy to handle because all the html is done in the backround
is

best regards Stefan

4

Thanks Stefan!

I've managed to get it working with ESP-DASH for now while I get my knowledge up with the web server tutorial :slight_smile:
Thanks again!

5

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.