ESP8266 AP server with 2 push buttons Html Code

Other Hardware Home Automation
1

Hello everyone ,

I have a esp8266 to control 2 relais on GPIO0 and GPIO2 and need 2 push buttons on the webserver to click the relais to open or close a gate.

I'm not so familiar with the HTML code and found a code for one push button what works fine.


Do some one has more experience or have HTML code for 2 buttons ?



/*
 * ESP8266 Single push button op GPIO0  , APoint
 * Standard AP IP:192.168.4.1
*/

  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>

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

const int output = 0;

// HTML web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
  <head>
    <title>ESP Pushbutton Web Server</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: #fc0905;
        box-shadow: 0 4px #666;
        transform: translateY(2px);
      }
    </style>
  </head>
  <body>
    <h1>ESP Pushbutton Web Server</h1>
    <button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON</button>
   <script>
   function toggleCheckbox(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 setup() {
  Serial.begin(115200);
    
  WiFi.softAP(ssid,password);
  
  pinMode(output, OUTPUT);
  digitalWrite(output, LOW);
  
  // Send web page to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Receive an HTTP GET request
  server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
    digitalWrite(output, HIGH);
    request->send(200, "text/plain", "ok");
  });

  // Receive an HTTP GET request
  server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
    digitalWrite(output, LOW);
    request->send(200, "text/plain", "ok");
  });
  
  server.onNotFound(notFound);
  server.begin();
}

void loop() {
 
}
2

You will need to make them 'Active LOW' if either of those GPIO's are pulled LOW during boot, the esp will not go into it's normal boot mode

3

Hi

Just add another button and make both of them check if the first(or second) button was pressed.
A bit of a "dirty" solution but should do the trick.

But if you don't mind me asking why bother with pressing 2 buttons instead of just 1 button to activate?

4

Yes I know , That is not the problem.

I need the second push button in the HTML code.

Thanks.

5

I need 2 push buttons to Open , and close the gate. It must be push buttons what closed on press , and open on release. Then the relais contacts can be paralel on the fysick press contacts on the gate.

one relais is already working in the code , but I'm not a html guro the draw a second button , and check it with a second function to send the state , the function can just be copeid i think but wit variable"y" instead of X I think and the checkbox with on1/off1 instead of on/off

6

Not 100% sure i understand what you are trying to do but this should work it just uses checkboxes instead of buttons haven't tested it:

html:
<form action="/get">
    button1<input type="checkbox" name="button1" ><br>
    button2<input type="checkbox" name="button2" ><br>
    <input type="submit" value="Submit">
</form>

put this in your setup function
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", wifi_creds_index_html);
    button1 = request->getParam("button1")->value();
    button2 = request->getParam("button2")->value();
   //add your logic of checking if both buttons have a value here and then do the gate stuff

  });
7

OK , it is nice to test , but i first needs html code to have the second button on the webpage .....

8 
<button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON2</button>

<button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON1</button>
9

It was much easyer then I tought ,

add one more html button , and a new /on1 - /off1 set

it is working now. Thanks boys

ESP Pushbutton Web Server

LED1 PUSHBUTTON LED2 PUSHBUTTON )rawliteral";

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

AsyncWebServer server(80);

void setup() {
Serial.begin(115200);

WiFi.softAP(ssid,password);

pinMode(output, OUTPUT);
digitalWrite(output, LOW);
pinMode(output1, OUTPUT);
digitalWrite(output1, LOW);

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

// Receive an HTTP GET request
server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output, HIGH);
request->send(200, "text/plain", "ok");
});

// Receive an HTTP GET request
server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output, LOW);
request->send(200, "text/plain", "ok");
});

// Receive an HTTP GET request
server.on("/on1", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output1, HIGH);
request->send(200, "text/plain", "ok");
});

// Receive an HTTP GET request
server.on("/off1", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output1, LOW);
request->send(200, "text/plain", "ok");
});

10

Hello,
sorry about my broken enlish but normaly I am on the german Page.

About your problem
I think you need to toggle the status for the relais to on/off in the ESP sketch. If you do do the toggle on the HTML page it is possible that the Information is oposide to the real status on ESP side.

one way can be to change the HTML String depend on the toggle status for each button by e.g the color or the text and send the complete HTML Page again as request including the actual status for on/off Information e.g color or text. Another way create two buttons for each Relay on / off

an more better option is to use a static HTML page and the Fetch API to change the variable informations.
her you will find many Example

or here Fips but this is in german

Heinz

11

Thank you ,

that is interresting page.

I have my code working now with 2 buttons , and it is no high level emergency system where it is wired in , so working good enough.

But I see in the example also that it is posible to send var. data , so i go to study it.

I'm not jet a Rentner so have to find some time :slight_smile:

12

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