How to set command on a button in HTTP web server

Projects General Guidance
1

Hi

I have created a HTTP web server and I define some button for turning on and turning of som LEDs

I want to know how can I set a command on this Buttons to set value 1 to When I push the button and send 1 via USART of my ESP8266 Module.

in my web server I can see the button but I want to set command for that button.

My code of defining Button is here:

.button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; }

.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}

Animated Button - Ripple Effect

Click Me

2
3

Thanks

But how can I send this message to the USART of my module??

4

How did you create the Web server sketch? What library you use? Look at the examples of that library. Your web server must handle a HTTP GET request from the HTML with your button.

Actually right now I started creating a web page with a button which sends command to my sketch. Morning I will have some examples. But I use WiFi Link library with WiFi Link firmware in ESP.

5

I am using WiFiESP8266 library

Ok

So

I will go to use Get method

Thanks

6

You write a sketch for the ESP?

7

Yes

But the problem is that when I use the form I cant see anything

I think this is because I dont know how to put this line in to string:

8

I mean that only shows the tabs not buttuns

but before I use the form everything was Ok

I think I make a mistake somewhere in using form but I dont know where?

s+="";
s+="<div class="tab">";
s+="<button class="tablinks" onclick="openCity(event, 'Lights')">Lights";
s+="<button class="tablinks" onclick="openCity(event, 'Home Accessories')">Home Accessories";
s+="<button class="tablinks" onclick="openCity(event, 'Other')">Other";
s+="";
s+="<div id="Lights" class="tabcontent">";
s+="";
s+="

On/Off

";
s+="<form action="/action_page.php">";
s+="
";
s+="<input class="button" type="submit" name="Turn On" value="Turn On">";
s+="
";
s+="
";
s+="<input class="button" type="submit" name="Turn Off" value="Turn Off">";
s+="
";
s+="";
s+="";
s+="";
s+="<div id="Home Accessories" class="tabcontent">";
s+="";
s+="

TV

";
s+="<form action="/action_page.php">";
s+="
";
s+="<input class="button" type="submit" name="Turn On" value="Turn On">";
s+="
";
s+="
";
s+="<input class="button" type="submit" name="Turn Off" value="Turn Off">";
s+="
";
s+="";
s+="";
s+="";
s+="

Refrigerator

";
s+="<form action="/action_page.php">";
s+="
";
s+="<input class="button" type="submit" name="Turn On" value="Turn On">";
s+="
";
s+="
";
s+="<input class="button" type="submit" name="Turn Off" value="Turn Off">";
s+="
";
s+="";
s+="";
s+="";
s+="<div id="Other" class="tabcontent">";
s+="";
s+="

Microwave

";
s+="<form action="/action_page.php">";
s+="
";
s+="<input class="button" type="submit" name="Turn On" value="Turn On">";
s+="
";
s+="
";
s+="<input class="button" type="submit" name="Turn Off" value="Turn Off">";
s+="
";
s+="";
s+="";
s+="";
s+="

Washing

";
s+="<form action="/action_page.php">";
s+="
";
s+="<input class="button" type="submit" name="Turn On" value="Turn On">";
s+="
";
s+="
";
s+="<input class="button" type="submit" name="Turn Off" value="Turn Off">";
s+="
";
s+="";
s+="";
s+="";
s+="";

This is my code but only tabs are visible

9

  1. With ESP you can put static files into it's file system SPIFFS. There is a tool in the IDE which uploads the content of subfolder data to ESP. So you don't need send the html as small strings. SPIFFS

  2. Use F12 in browser to debug web pages

10

Find a library.
Use the library.
Look at the example.
They easily show the HTTP GET format.

11

Oh

Thanks Juraj

12

for inspiration and copy/paste WiFi Link WebServer.ino

13

#include <ESP8266WiFi.h>
#include "FS.h"

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

WiFiServer server(80);

void setup() {

Serial.begin(115200);
delay(10);

Serial.println();
Serial.println();
Serial.print("Connecting to");
Serial.println(ssid);

WiFi.begin(ssid,password);

while(WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");

}
Serial.println("");
Serial.println("WiFi connected");

server.begin();
Serial.println("Server Started");
Serial.println(WiFi.localIP());//give us a IP that we can use it into web browser
}

void loop() {
WiFiClient client = server.available();
if(!client){
return;
}
Serial.println("new client");
while(!client.available()){
delay(1);
}
String req = client.readStringUntil('\r');
Serial.println(req);
client.flush();
SPIFFS.begin();
File WebServer = SPIFFS.open("/C:\Users\Amir\Desktop\sketch_aug04a\data\WebServer.html", "r");
if (!WebServer) {
Serial.println("file open failed");
}

delay(1);
Serial.println("Client disconnected");

}

This is my code but the web server cant load :frowning: :frowning: :frowning: :frowning:

14

Are you using the ESP8266 as a web server or a PC? You mean UART? Is your ESP8266 going to be connected to your computer?

You need to be a lot more clear about your setup to get relevant help.

1 Like
15

No

I want to use it as a web server

and I can run a webserver in a browser like the attachment

but it does not run on my esp module

16

What's this

SPIFFS.open("/C:\Users\Amir\Desktop\sketch_aug04a\data\WebServer.html", "r");

17

there are no folders in SPIFFS. specify only the filename.
as for the rest of the code, sorry I can't tell, I never did write a sketch for the ESP.

18
body {font-family: "Lato", sans-serif;}

div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

div.tab button:hover {
background-color: #ddd;
}

div.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}

Lights Home Accessories Other

On/Off

Turn On

Turn Off

TV

Turn On

Turn Off

Refrigerator

Turn On

Turn Off

Splitter

Turn On

Turn Off

Microwave

Turn On

Turn Off

Washing

Turn On

40 Min

*_

* *

19

Please use code tags and stop making new threads. Go read some other threads with code that doesn't look like yours to see what it should look like.

I still have no idea what you want to do.
If you are making the ESP a web server, are you doing local? If going over internet, there are router firewall settings that need to change. Don't expect solutions to all possibilities. Explain your setup.