1

EDIT: Added "web page source" ("In the end", :D )

(Please, sorry if this question isn't in the right place, feel free to move it to that place)

Here I have a problem:

In my house I have a self-arming alarm (through hour(RTC) ) made by me, using an Arduino Nano, an RTC1307 and some sensors (PIRs and magnetic). It works well, with its buttons, relays and LEDs to indicate.

All right, now I want to pass it to a esp8266, to be able to manage the alarm from the local network of my house using HTML and some structures. I'm stuck in the construction part of the website, I mean: I already have the web page, at least opening the website from the browsers of the PC and my smartphone (locally), the question comes when I put the site inside the esp8266, It does not do what it has to do.

I have my webpage sectioned into 3 pieces using the HTML tags and some CSS styles, to see the sections in the form of tabs but when I load them to the esp8266 it is as if I do not recognize the tabs, it does not let me click them.

I leave you the code here... please help:

String getPage(){
  String page = "<!DOCTYPE HTML>";
  page += "<html>";
  page += "<head>";
  page += "<meta charset=\"utf-8\">";
  page += "<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0\">";

  page += "<title>Alarma</title>";
  ///////////////
  ////ESTILOS////
  //////////////
  page += "<style>"; 
   page += "html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }";
   page += "body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }";

   page += ".well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px;}";
   page += "section { display: block; }";

   page += ".section { display: none;  padding: 20px 0 0;  border-top: 1px solid #ddd; }";

   page += "h1 { margin: .67em 0; font-size: 2em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}";
   page += ".col-sm-2{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }";
   page += "@media (min-width: 768px) { .col-sm-2 { float: left; width: 16.66666667%;} }";
   page += ".row { margin-right: -15px; margin-left: -15px;}";
   page += ".container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} ";
   page += ".container:before, .container:after,.row:before,.row:after{ display: table;  content: \" \";}";
   page += ".container:after,.row:after{ clear: both; }";
   page += "*, *:before, *:after { margin: 0;  padding: 0; box-sizing: border-box; }";
   page += ".input { display: none;}";
   page += "label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px;font-weight: 600; text-align: center; color:  #079fc9; border: 1px solid transparent;}";
   page += "label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px;}";
   page += "label[for*='1']:before { content: '\f1cb'; }";
   page += "label[for*='2']:before { content: '\f17d'; }";
   page += "label[for*='3']:before { content: '\f16b'; }";
   page += "label:hover { color: #888; cursor: pointer;}";
   page += "input:checked + label { color: #555; border: 1px solid #ddd; border-top: 2px solid #079fc9; border-bottom: 1px solid #fff; }";
   page += "#sensores:checked ~ #Sensores_activados, #hora_interna:checked ~ #Hora_interna, #hora_activacion:checked ~ #Hora_activacion  {  display: block;}";
   page += "@media screen and (max-width: 400px) {  label { padding: 15px; text-align: center; } }";

  page += "</style>";
  page += "</head>";

  ///////////////
  ////BODY  ////
  //////////////
  page += "<body>";
  page += "<section class=\"container\">";
  page += "<section class=\"well\">";
  page += "<h1>Página de configuración de la Alarma</h1>";
  page += "</section>";


  page += "<section class=\"well\">";
  page += "<input class=\"input\" id=\"sensores\" type=\"radio\" name=\"tabs\" checked>";
  page += "<label for=\"sensores\">Sensores activados</label>";

  page += "<input class=\"input\" id=\"hora_interna\" type=\"radio\" name=\"tabs\">";
  page += "<label for=\"hora_interna\">Hora Interna</label>";

  page += "<input  class=\"input\" id=\"hora_activacion\" type=\"radio\" name=\"tabs\">";
  page += "<label for=\"hora_activacion\">Hora de Auto-Armado/Desarmado</label>";

  page += "<section class=\"section\" id=\"Sensores_activados\">";
  //Formulario para sensores
  page += "<FORM action=\"/\" method=\"post\">";
  page += "Sensores activados<br>";
  page += "<p><input type=\"checkbox\" name=\"M1\" id=\"M1\"";
  if (m1 == true){
    page += "checked";}
  page += "> M1<br>";
  page += "<input type=\"checkbox\" name=\"M2\" id=\"M2\"";
  if (m2 == true){
    page += "checked";}
  page += "> M2<br>";
  page += "<input type=\"checkbox\" name=\"M3\" id=\"M3\"";
  if (m3 == true){
    page += "checked";}
  page += "> M3<br>";
  page += "<input type=\"checkbox\" name=\"M4\" id=\"M4\"";
  if (m4 == true){
    page += "checked";}
  page += "> M4<br>";
  page += "<input type=\"checkbox\" name=\"PIR\" id=\"PIR\"";
  if (pir == true){
    page += "checked";}
  page += "> PIR<br>";
  page += "<INPUT class=\"btn\" type=\"submit\" value=\"Enviar\"> <INPUT class=\"btn\" type=\"reset\" value=\"Resetear\">";
  page += "</FORM>";
  page += "</section>";

  page += "<section class=\"section\" id=\"Hora_interna\">";
  //Formulario para PONER la hora
  page += "<FORM action=\"/\" method=\"post\">";
  page += "<p>Hora interna: <input type=\"time\" name=\"poner_hora\" id=\"poner_hora\" value=\"";
    if (hora_interna < 10){
      page += "0";
      }
  page += hora_interna;
  page += ":";
    if (minutos_interna < 10){
      page += "0";
      }
  page += minutos_interna;
  page += ":00\" size=\"5%\" max=\"23:59\" min=\"00:00\">";
  page += "<INPUT class=\"btn\" type=\"submit\" value=\"Enviar\"> <INPUT class=\"btn\" type=\"reset\" value=\"Resetear\">";
  page += "</FORM>";
  page += " </section>";

  page += "<section class=\"section\" id=\"Hora_activacion\">";
  //Formulario para hora de auto-armado
  page += "<FORM action=\"/\" method=\"post\">";
  page += "<section class=\"row\">";
  page += "<div class=\"col-sm-2\">Activación: <input type=\"time\" name=\"ontime\" id=\"ontime\" value=\"";
    if (hora_activacion < 10){
       page += "0";}
   hora_activacion;
   page += ":"; 
    if (minutos_activacion < 10){
       page += "0";}
   minutos_activacion;
   page += ":00 size=\"5%\" max=\"23:59\" min=\"00:00\"> </div>"; 
   page += "<div class=\"col-sm-2\">Desactivación: <input type=\"time\" name=\"offtime\" id=\"offtime\" value=\""; 
    if (hora_desactivacion < 10){
       page += "0";
      }
   hora_desactivacion;
   page += ":"; 
    if (minutos_desactivacion < 10){
      page += "0"; 
      }
   minutos_desactivacion;
   page += ":00 size=\"5%\" max=\"23:59\" min=\"00:00\"> </div></section><br>";
  page += "<INPUT class=\"btn\" type=\"submit\" value=\"Enviar\"> <INPUT class=\"btn\" type=\"reset\" value=\"Resetear\">";
  page += "</FORM>";
  page += "</section>";
  page += "</section>";
  page += "</section>";


  page += "</body>";
  page += "</html>";
  return page;
  }

What I see in my browser locally: What I see in my browser locally

What I see in my browser when I load the page from the esp8266: What I see in my browser when I load the page from the **esp8266**

I already check for the "checked" tag, in the tag...

The "web page source" (apparently the browser put some "3D" before the quotes ("), any reason for that?)

From: <Saved by Blink>
Subject: Alarma
Date: Wed, 5 Jun 2018 21:28:15 -0000
MIME-Version: 1.0
Content-Type: multipart/related;
    type="text/html";
    boundary="----MultipartBoundary--T8oNZJiKHmz7Uqtp7zBLZVTRAAqlj41o9li9KHDGiV----"

------MultipartBoundary--T8oNZJiKHmz7Uqtp7zBLZVTRAAqlj41o9li9KHDGiV----
Content-Type: text/html
Content-ID: <frame-2-73f97ce7-1d30-423c-a8b1-c57104e83c66@mhtml.blink>
Content-Transfer-Encoding: quoted-printable
Content-Location: http://192.168.43.5/

<!DOCTYPE html><html><head><meta http-equiv=3D"Content-Type" content=3D"tex=
t/html; charset=3DUTF-8"><meta name=3D"viewport" content=3D"width =3D devic=
e-width, initial-scale =3D 1.0"><title>Alarma</title><style>html { -webkit-=
text-size-adjust: 100%; -ms-text-size-adjust: 100%; }body { font-family: He=
lvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1=
.42857143; color: #333; background-color: #fff; }.well { min-height: 20px; =
padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px =
solid #e3e3e3; border-radius: 4px;}section { display: block; }.section { di=
splay: none;  padding: 20px 0 0;  border-top: 1px solid #ddd; }h1 { margin:=
 .67em 0; font-size: 2em; font-family: inherit; font-weight: 500; line-heig=
ht: 1.1; color: inherit;}.col-sm-2{ position: relative; min-height: 1px; pa=
dding-right: 15px; padding-left: 15px; }@media (min-width: 768px) { .col-sm=
-2 { float: left; width: 16.66666667%;} }.row { margin-right: -15px; margin=
-left: -15px;}.container { padding-right: 15px; padding-left: 15px; margin-=
right: auto; margin-left: auto;} .container:before, .container:after,.row:b=
efore,.row:after{ display: table;  content: " ";}.container:after,.row:afte=
r{ clear: both; }*, *:before, *:after { margin: 0;  padding: 0; box-sizing:=
 border-box; }.input { display: none;}label { display: inline-block; margin=
: 0 0 -1px; padding: 15px 25px;font-weight: 600; text-align: center; color:=
  #079fc9; border: 1px solid transparent;}label:before { font-family: fonta=
wesome; font-weight: normal; margin-right: 10px;}label[for*=3D'1']:before {=
 content: '=0C1cb'; }label[for*=3D'2']:before { content: '=0C17d'; }label[f=
or*=3D'3']:before { content: '=0C16b'; }label:hover { color: #888; cursor: =
pointer;}input:checked + label { color: #555; border: 1px solid #ddd; borde=
r-top: 2px solid #079fc9; border-bottom: 1px solid #fff; }#sensores:checked=
 ~ #Sensores_activados, #hora_interna:checked ~ #Hora_interna, #hora_activa=
cion:checked ~ #Hora_activacion  {  display: block;}@media screen and (max-=
width: 400px) {  label { padding: 15px; text-align: center; } }</style></he=
ad><body><section class=3D"container"><section class=3D"well"><h1>P=C3=A1gi=
na de configuraci=C3=B3n de la Alarma</h1></section><section class=3D"well"=
><input class=3D"input" id=3D"sensores" type=3D"radio" name=3D"tabs" checke=
d=3D""><label for=3D"sensores">Sensores activados</label><input class=3D"in=
put" id=3D"hora_interna" type=3D"radio" name=3D"tabs"><label for=3D"hora_in=
terna">Hora Interna</label><input class=3D"input" id=3D"hora_activacion" ty=
pe=3D"radio" name=3D"tabs"><label for=3D"hora_activacion">Hora de Auto-Arma=
do/Desarmado</label><section class=3D"section" id=3D"Sensores_activados"><f=
orm action=3D"http://192.168.43.5/" method=3D"post">Sensores activados<br><=
p><input type=3D"checkbox" name=3D"M1" id=3D"M1" checked=3D""> M1<br><input=
 type=3D"checkbox" name=3D"M2" id=3D"M2" checked=3D""> M2<br><input type=3D=
"checkbox" name=3D"M3" id=3D"M3" checked=3D""> M3<br><input type=3D"checkbo=
x" name=3D"M4" id=3D"M4" checked=3D""> M4<br><input type=3D"checkbox" name=
=3D"PIR" id=3D"PIR" checked=3D""> PIR<br><input class=3D"btn" type=3D"submi=
t" value=3D"Enviar"> <input class=3D"btn" type=3D"reset" value=3D"Resetear"=
></p></form></section><section class=3D"section" id=3D"Hora_interna"><form =
action=3D"http://192.168.43.5/" method=3D"post"><p>Hora interna: <input typ=
e=3D"time" name=3D"poner_hora" id=3D"poner_hora" value=3D"10:40" size=3D"5%=
" max=3D"23:59" min=3D"00:00"><input class=3D"btn" type=3D"submit" value=3D=
"Enviar"> <input class=3D"btn" type=3D"reset" value=3D"Resetear"></p></form=
> </section><section class=3D"section" id=3D"Hora_activacion"><form action=
=3D"http://192.168.43.5/" method=3D"post"><section class=3D"row"><div class=
=3D"col-sm-2">Activaci=C3=B3n: <input type=3D"time" name=3D"ontime" id=3D"o=
ntime" value=3D"10:40" size=3D"5%" max=3D"23:59" min=3D"00:00"> </div><div =
class=3D"col-sm-2">Desactivaci=C3=B3n: <input type=3D"time" name=3D"offtime=
" id=3D"offtime" value=3D"=08:40&quot;" size=3D"5%" max=3D"23:59" min=3D"00=
:00"> </div></section><br><input class=3D"btn" type=3D"submit" value=3D"Env=
iar"> <input class=3D"btn" type=3D"reset" value=3D"Resetear"></form></secti=
on></section></section></body></html>
------MultipartBoundary--T8oNZJiKHmz7Uqtp7zBLZVTRAAqlj41o9li9KHDGiV------

I´ll add my entire code:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

//Definir el led
#define LED 2 

//Variables de apoyo
bool m1 = true;
bool m2 = true;
bool m3 = true;
bool m4 = true;
bool pir = true;



//SSID and Password of your WiFi router
const char* ssid = "asd";
const char* password = "12345678";

ESP8266WebServer server(80);


//////////////////////////////////////////////
//                 Index                    //
/////////////////////////////////////////////
String getPage(){
  String page = "<!DOCTYPE HTML>";
  page += "<html>";
  page += "<head>";
  page += "<meta charset=\"utf-8\">";
  page += "<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0\">";

  page += "<title>Alarma</title>";
  ///////////////
  ////ESTILOS////
  //////////////
  page += "<style>"; 
   page += "html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }";
   page += "body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }";

   page += ".well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px;}";
   page += "section { display: block; }";

   page += ".section { display: none;  padding: 20px 0 0;  border-top: 1px solid #ddd; }";

   page += "h1 { margin: .67em 0; font-size: 2em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}";
   page += ".col-sm-2{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }";
   page += "@media (min-width: 768px) { .col-sm-2 { float: left; width: 16.66666667%;} }";
   page += ".row { margin-right: -15px; margin-left: -15px;}";
   page += ".container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} ";
   page += ".container:before, .container:after,.row:before,.row:after{ display: table;  content: \" \";}";
   page += ".container:after,.row:after{ clear: both; }";
   page += "*, *:before, *:after { margin: 0;  padding: 0; box-sizing: border-box; }";
   page += ".input { display: none;}";
   page += "label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px;font-weight: 600; text-align: center; color:  #079fc9; border: 1px solid transparent;}";
   page += "label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px;}";
   page += "label[for*='1']:before { content: '\f1cb'; }";
   page += "label[for*='2']:before { content: '\f17d'; }";
   page += "label[for*='3']:before { content: '\f16b'; }";
   page += "label:hover { color: #888; cursor: pointer;}";
   page += "input:checked + label { color: #555; border: 1px solid #ddd; border-top: 2px solid #079fc9; border-bottom: 1px solid #fff; }";
   page += "#sensores:checked ~ #Sensores_activados, #hora_interna:checked ~ #Hora_interna, #hora_activacion:checked ~ #Hora_activacion  {  display: block;}";
   page += "@media screen and (max-width: 400px) {  label { padding: 15px; text-align: center; } }";

  page += "</style>";
  page += "</head>";

  ///////////////
  ////BODY  ////
  //////////////
  page += "<body>";
  page += "<section class=\"container\">";
  page += "<section class=\"well\">";
  page += "<h1>Página de configuración de la Alarma</h1>";
  page += "</section>";


  page += "<section class=\"well\">";
  page += "<input class=\"input\" id=\"sensores\" type=\"radio\" name=\"tabs\" checked>";
  page += "<label for=\"sensores\">Sensores activados</label>";

  page += "<input class=\"input\" id=\"hora_interna\" type=\"radio\" name=\"tabs\">";
  page += "<label for=\"hora_interna\">Hora Interna</label>";

  page += "<input  class=\"input\" id=\"hora_activacion\" type=\"radio\" name=\"tabs\">";
  page += "<label for=\"hora_activacion\">Hora de Auto-Armado/Desarmado</label>";

  page += "<section class=\"section\" id=\"Sensores_activados\">";
  //Formulario para sensores
  page += "<FORM action=\"/\" method=\"post\">";
  page += "Sensores activados<br>";
  page += "<p><input type=\"checkbox\" name=\"M1\" id=\"M1\"";
  if (m1 == true){
    page += "checked";}
  page += "> M1<br>";
  page += "<input type=\"checkbox\" name=\"M2\" id=\"M2\"";
  if (m2 == true){
    page += "checked";}
  page += "> M2<br>";
  page += "<input type=\"checkbox\" name=\"M3\" id=\"M3\"";
  if (m3 == true){
    page += "checked";}
  page += "> M3<br>";
  page += "<input type=\"checkbox\" name=\"M4\" id=\"M4\"";
  if (m4 == true){
    page += "checked";}
  page += "> M4<br>";
  page += "<input type=\"checkbox\" name=\"PIR\" id=\"PIR\"";
  if (pir == true){
    page += "checked";}
  page += "> PIR<br>";
  page += "<INPUT class=\"btn\" type=\"submit\" value=\"Enviar\"> <INPUT class=\"btn\" type=\"reset\" value=\"Resetear\">";
  page += "</FORM>";
  page += "</section>";

  page += "<section class=\"section\" id=\"Hora_interna\">";
  //Formulario para PONER la hora
  page += "<FORM action=\"/\" method=\"post\">";
  page += "<p>Hora interna: <input type=\"time\" name=\"poner_hora\" id=\"poner_hora\" value=\"";
    if (hora_interna < 10){
      page += "0";
      }
  page += hora_interna;
  page += ":";
    if (minutos_interna < 10){
      page += "0";
      }
  page += minutos_interna;
  page += ":00\" size=\"5%\" max=\"23:59\" min=\"00:00\">";
  page += "<INPUT class=\"btn\" type=\"submit\" value=\"Enviar\"> <INPUT class=\"btn\" type=\"reset\" value=\"Resetear\">";
  page += "</FORM>";
  page += " </section>";

  page += "<section class=\"section\" id=\"Hora_activacion\">";
  //Formulario para hora de auto-armado
  page += "<FORM action=\"/\" method=\"post\">";
  page += "<section class=\"row\">";
  page += "<div class=\"col-sm-2\">Activación: <input type=\"time\" name=\"ontime\" id=\"ontime\" value=\"";
    if (hora_activacion < 10){
       page += "0";}
   hora_activacion;
   page += ":"; 
    if (minutos_activacion < 10){
       page += "0";}
   minutos_activacion;
   page += ":00 size=\"5%\" max=\"23:59\" min=\"00:00\"> </div>"; 
   page += "<div class=\"col-sm-2\">Desactivación: <input type=\"time\" name=\"offtime\" id=\"offtime\" value=\""; 
    if (hora_desactivacion < 10){
       page += "0";
      }
   hora_desactivacion;
   page += ":"; 
    if (minutos_desactivacion < 10){
      page += "0"; 
      }
   minutos_desactivacion;
   page += ":00 size=\"5%\" max=\"23:59\" min=\"00:00\"> </div></section><br>";
  page += "<INPUT class=\"btn\" type=\"submit\" value=\"Enviar\"> <INPUT class=\"btn\" type=\"reset\" value=\"Resetear\">";
  page += "</FORM>";
  page += "</section>";
  page += "</section>";
  page += "</section>";


  page += "</body>";
  page += "</html>";
  return page;
  }



//////////////////////////////////////////////
//          REDIRECCIONAMIENTO             //
/////////////////////////////////////////////
void handleNotFound(){
  server.sendHeader("Location", "/",true);   //Redirect to our html web page  
  server.send(302, "text/plane","");
}

//////////////////////////////////////////////
//      handleSubmit                        //
/////////////////////////////////////////////
void handleSubmit(){
  //Atencion a sensores
  if (server.arg("M1") == "on"){
      m1 = !m1;
      Serial.println("Se activo el sensor M1");
      }
  if (server.arg("M2") == "on"){
      m2 = !m2;
      Serial.println("Se activo el sensor M2");
      }
  if (server.arg("M3") == "on"){
      m3 = !m3;
      Serial.println("Se activo el sensor M3");
      }
  if (server.arg("M4") == "on"){
      m4 = !m4;
      Serial.println("Se activo el sensor M4");
      }
  if (server.arg("PIR") == "on"){
      pir = !pir;
      Serial.println("Se activo el sensor PIR");
    }

  //Atencion a establecimiento de la hora
//  if (server.hasArg("poner_hora")){
//    Serial.println(server.arg("poner_hora"));
//    }

  server.send(200, "text/plain", getPage());       //Response to the HTTP request

}  


//////////////////////////////////////////////
//      handleRoot                          //
/////////////////////////////////////////////
void handleRoot() {
 Serial.println("You called root page");

  if (!server.args() ) {
    Serial.println("Hay algun argumento valido");
    handleSubmit();
    } else {
      server.send(200, "text/html", getPage());  
      }
}



//////////////////////////////////////////////
//                SETUP                     //
/////////////////////////////////////////////

void setup() {
  delay(1000);
  Serial.begin(115200);
  Serial.println("Sistema iniciando");

  //Initialize AP Mode
  WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");

  //Onboard LED port Direction output
  pinMode(LED,OUTPUT); 
  //Power on LED state off
  digitalWrite(LED,HIGH);

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);

  server.begin();
  Serial.print("Conectate a ");
  Serial.println(WiFi.localIP());
}


//////////////////////////////////////////////
//                LOOP                      //
///////////////////////////////////////////// 
void loop() {
  server.handleClient();         //Handling of incoming requests
}
  • 1
    But have you checked the page source? – Ignacio Vazquez-Abrams Jun 5 '18 at 19:21
  • Yeap, at first I see some garbage (I also checked other webpage to make sure), something like "ContentType" and stuff like that... – k.Cyborg Jun 5 '18 at 19:52
  • please post the "web page source" from the esp8288 – jsotola Jun 6 '18 at 7:16
  • Don't use Strings. Save the file in the SPIFFS. Make it static, and fetch dynamic data using JavaScript. – tttapa Jun 6 '18 at 9:09
  • What is SPIFFS? Let me do some research – k.Cyborg Jun 6 '18 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.