Gianfranco Longo asked 1 week ago
Rui and Sara Hi, I’m trying to apply CSS styling of your ESP32 async web server to your ESP32 web server without success.
ESP32 web server seem more stable and reliable.
Any TIP/suggestion
thanks
Gianfranco
https://randomnerdtutorials.com/esp32-async-web-server-espasyncwebserver-library/
https://randomnerdtutorials.com/esp32-web-server-arduino-ide/
Sara Santos Staff answered 1 week ago
Hi.
Do you just want to use the CSS to style the button?
What have you tried so far?
Regards,
Sara
Gianfranco Longo answered 1 week ago
Hi Sara, thanks for replaying. Yes I would like to use CSS styling switch instead of button. this because switch is more expressive in status applied on remote device.
I have tried to arrange proposed CSS Async Web server styling to Web server project. result attached.
Any Tip?
Thanks
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = “ssid”;
const char* password = “pass”;
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output26State = “off”;
String output27State = “off”;
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
// Connect to Wi-Fi network with SSID and password
Serial.print(“Setting AP (Access Point)…”);
// Remove the password parameter, if you want the AP (Access Point) to be open
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print(“AP IP address: “);
Serial.println(IP);
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println(“New Client.”); // print a message out in the serial port
String currentLine = “”; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client’s connected
if (client.available()) { // if there’s bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == ‘\n’) { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that’s the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what’s coming, then a blank line:
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-type:text/html”);
client.println(“Connection: close”);
client.println();
// turns the GPIOs on and off
if (header.indexOf(“GET /26/on”) >= 0) {
Serial.println(“GPIO 26 on”);
output26State = “on”;
digitalWrite(output26, HIGH);
} else if (header.indexOf(“GET /26/off”) >= 0) {
Serial.println(“GPIO 26 off”);
output26State = “off”;
digitalWrite(output26, LOW);
} else if (header.indexOf(“GET /27/on”) >= 0) {
Serial.println(“GPIO 27 on”);
output27State = “on”;
digitalWrite(output27, HIGH);
} else if (header.indexOf(“GET /27/off”) >= 0) {
Serial.println(“GPIO 27 off”);
output27State = “off”;
digitalWrite(output27, LOW);
}
// Display the HTML web page
client.println(“<!DOCTYPE html><html><head>”);
client.println(“<title>Atomizzatore 4.0</title>”);
client.println(“<meta name=\”viewport\” content=\”width=device-width, initial-scale=1\”>”);
client.println(“<link rel=\”icon\” href=\”data:,\”>”);
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println(“<html> {font-family: Arial; display: inline-block; text-align: center;}”);
client.println(“body {max-width: 300px; margin:0px auto; padding-bottom: 50px;}”);
client.println(“.switch {position:relative; display:inline-block; width: 120px; height: 68px}”);
client.println(“.switch input { display: none;”);
client.println(“.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}”);
client.println(“.slider:before {position: absolute; content: “”; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}”);
client.println(“input:checked + .slider {background-color: #b30000;}”);
client.println(“input:checked + .slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px);}”);
client.println(“.switch + .switch { margin-left: 50px;}”);
client.println(“</style></head>”);
// Web Page Heading
client.println(“<body><h1>Atomizzatore 4.0</h1>”);
// Display current state, and ON/OFF buttons for GPIO 26
client.println(“<p>Sinistra———————-Destra” “</p>”);
// client.println(“<p>GPIO 27 – State ” + output27State + “</p>”);
// If the output26State is off, it displays the ON button
if (output26State==”off”) {
client.print(“<label class=\”switch\”><input type=\”checkbox\”><span class=\”slider\”></span></label>”);
} else {
client.print(“<label class=\”switch\”><input type=\”checkbox\” checked><span class=\”slider\”></span></label>”);
}
// Display current state, and ON/OFF buttons for GPIO 27
// client.println(“<p>GPIO 27 – State ” + output27State + “</p>”);
// If the output27State is off, it displays the ON button
if (output27State==”off”) {
client.print(“<label class=\”switch\”><input type=\”checkbox\”><span class=\”slider\”></span></label>”);
} else {
client.print(“<label class=\”switch\”><input type=\”checkbox\” checked><span class=\”slider\”></span></label>”);
}
client.println(“</body></html>”);
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = “”;
}
} else if (c != ‘\r’) { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = “”;
// Close the connection
client.stop();
Serial.println(“Client disconnected.”);
Serial.println(“”);
}
}
Sara Santos Staff answered 7 days ago
Your problem is that you are not creating the toggle switches properly.
Look at the section of the tutorial that shows how toggle switches work. You need to create a callback function that will run when you switch the button. In this case, you’re not adding any callback function, which means that it you’ll only change the appearance of the buttons. They are not doing anything. They are not sending any request to the ESP32.
Using something like this should solve the issue:
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head>");
client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<title>Atomizzatore 4.0</title>");
client.println("<style>");
client.println("html { font-family: Arial; display: inline-block; margin: 0px auto; text-align: center; }");
client.println("body { max-width: 600px; padding-bottom: 50px; }");
client.println("h1 { color: #0F3376; }");
client.println(".switch { position: relative; display: inline-block; width: 120px; height: 68px; }");
client.println(".switch input { display: none; }");
client.println(".slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ca2222; transition: .4s; border-radius: 34px; }");
client.println(".slider:before { position: absolute; content: \"\"; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: white; transition: .4s; border-radius: 50%; }");
client.println("input:checked + .slider { background-color: #2ab934; }");
client.println("input:checked + .slider:before { transform: translateX(52px); }");
client.println(".slider-label { font-size: 24px; vertical-align: middle; margin-left: 10px; }");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println("<h1>Atomizzatore 4.0</h1>");
// GPIO 26 Toggle Switch
client.println("<p><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this, 26)\" " + String(output26State == "on" ? "checked" : "") + "><span class=\"slider\"></span></label>");
client.println("<span class=\"slider-label\">Sinistra</span></p>");
// GPIO 27 Toggle Switch
client.println("<p><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this, 27)\" " + String(output27State == "on" ? "checked" : "") + "><span class=\"slider\"></span></label>");
client.println("<span class=\"slider-label\">Destra</span></p>");
client.println("<script>");
client.println("function toggleCheckbox(element, output) {");
client.println(" var xhr = new XMLHttpRequest();");
client.println(" var state = element.checked ? 'on' : 'off';");
client.println(" xhr.open('GET', '/' + output + '/' + state, true);");
client.println(" xhr.send();");
client.println("}");
client.println("</script>");
client.println("</body></html>");
Sara Santos Staff answered 7 days ago
Here’s the complete fixed code:
https://gist.github.com/sarasantos/6c6c7f7f64e994605b951dca8380fd6d
Regards,
Sara
Gianfranco Longo answered 6 days ago
Hi Sara.
Great job. many thanks to You and Rui.
Have nice day
Gianfranco