Greetings, first of all say that I'm not good at programming and I know almost nothing.
I have a project in hand, I would say it is simple. Turn on a led through a NodeMCU, the problem comes when writing the HTML code, when I click on a button, the page is reloaded and I do not want this to happen, I tried to fix it with another method, "radio". I've tried it but it does not work, I'm pretty sure it's wrong because "a href", if someone can help me, I'd really appreciate it.
#include <ESP8266WiFi.h>
const char* ssid = "RED";
const char* password = "coonttraseña";
;
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
pinMode(D0, OUTPUT);
digitalWrite(D0, LOW);
// conecta el wifi
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");
// inicia servidor
server.begin();
Serial.println("Server started");
// la IP
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// mira si el cliente se ha conectado
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
//lee la primera linea de peticion
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// si encuentra:
if (request.indexOf("/light1on") > 0) {
digitalWrite(D0, HIGH);
}
if (request.indexOf("/light1off") >0) {
digitalWrite(D0, LOW);
}
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(""); //no borrar
client.println("<!DOCTYPE HTML>");
client.println(F("<meta name='MobileOptimized' content='320'>"));
client.println(F("<meta name='HandheldFriendly' content='True'>"));
client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
client.println("<html>");
client.println("<style>");
client.println("fieldset{");
client.println("-moz-border-radius:11px; ");
client.println("border-radius: 11px; ");
client.println("-webkit-border-radius: 11px;");
client.println("border: \"#c1c1c1\" solid 3px;");
client.println("}");
client.println("body {");
client.println("background: \"#007d7d\";");
client.println("filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#007d7d', EndColorStr='#005697');");
client.println("background: -moz-linear-gradient(top, \"#007d7d\", \"#005697\");");
client.println("background: -webkit-gradient(linear, left top, left bottom, from(\"#007d7d\"), to(\"#005697\"));");
client.println("background: -o-linear-gradient(\"#007d7d, \"#005697\");");
client.println("background: linear-gradient(top, \"#007d7d\", \"#005697\");");
client.println("width: 100\"%\";");
client.println("height: 100\"%\";");
client.println("}");
client.println("h1{font:40px 'Times New Roman', Times, serif;}");
client.println("h2{font:20px 'Verdana', Times, serif;}");
client.println("</style>");
client.println("<head>");
client.println("</head>");
client.println("<body>");
client.println("<hr/><hr>");
client.println("<h1><center> NodoMCU PRUEBAS EN HTML CON C++ </center></h1>");
client.println("<hr/><hr>");
client.println("
");
client.print("<form method=post>");
client.println("<div style='color: black;'>");
client.println("<fieldset>");
client.println("<legend><h2><center> ESTADO DEL LED </center></h2></legend>");
client.println("<input type=\"radio\" name=Estado onclick='<a href=\"/light1on\"\"></a>'/> Encendido.
");
client.println("<input type=\"radio\" name=Estado onclick='<a href=\"/light1off\"\"></a>'/> Apagado.
");
client.println("</fieldset>");
client.println("</div>");
client.println("</form> ");
client.println("
");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}