Go Down

Topic: Receiving an arduino variable on a web server and toggling javascript checkbox (Read 437 times) previous topic - next topic

puelon

Greetings, i would like to request help on a problem that i have had a for a while now. Im sucessfully communicating my Arduino UNO with a NodeMCU ESP8266-01 via SerialSoftware. There, i send a char which enables a LED on my NodeMCU, what i wanna do is grab this variable via javascript and use it to toggle 3 checkboxes, simply make the 3 of them get checked. Here's what i've tried:

Code: [Select]
     client.println("<!DOCTYPE html>");
            client.println("<html>");
            client.println("<head>");
            client.println("<title>Smartcine</title>");
            client.println("</head>");
            client.println("<body>");                      //<------ALTERADO
            client.println("<br/>");
 
            client.println("<br/><br/>");
 
            client.println("<input type=\"text\" value=\"10\" id=\"countdown\" / > ");
            client.println("<input type=\"button\" value=\"Start\" onclick=\"startTimer(\'countdown\')\"/>");
            client.println("<input type=\"button\" value=\"Stop\" onclick=\"stopTimer(\'countdown\')\"/><br/>");
            client.println("<input type=\"checkbox\" name=\"smartcine\" value=\"led-01\"/>led-01<br/>");
            client.println("<input type=\"checkbox\" name=\"smartcine\" value=\"led-02\"/>led-02<br/>");
            client.println("<input type=\"checkbox\" name=\"smartcine\" value=\"led-03\"/>led-03<br/>");
            client.println("<script type=\"text/javascript\">");
            client.println("var intervalID;");
            client.println("function startTimer(Id){");
            client.println("var cbox = document.getElementsByName('smartcine');");
            client.println("var control = document.getElementById(Id);");
            client.println("var seconds = control.value;");
            client.println("seconds = seconds - 1;");
            if (led1) { // nodeMcu variable that reads from serial and enables a led and becomes true, in which case it sshould be true;
              client.println("cbox[0].checked = true;");
              client.println("cbox[1].checked = true;");
              client.println("cbox[2].checked = true;");
            }
            client.println("if(seconds == 0 && cbox[0].checked && cbox[1].checked && cbox[2].checked){");
            client.println("control.value = 'done';");
            client.println("document.write('<iframe width=\"420\" height=\"345\" src=\"https://www.youtube.com/embed/fJ9rUzIMcZQ?autoplay=1\"></iframe>');");
            client.println("return 1;");
            client.println("}");
            client.println("else");
            client.println("{");
            client.println("control.value = seconds;");
            client.println("}");
            client.println("if(seconds > 0 && (!cbox[0].checked || !cbox[1].checked || !cbox[2].checked)){");
            client.println("window.alert('erro, ligue os leds primeiro!');");
            client.println("control.value = 10;");
            client.println("return false;");
            client.println("}");
            client.println("intervalID = setTimeout(function(){startTimer(\"countdown\")}, 1000);");
            client.println("}");
            client.println("function stopTimer(){");
            client.println("clearTimeout(intervalID);");
            client.println("}");
            client.println("</script>");
            client.println("</body>");
            client.println("</html>");



This is how i read from serial to check if im receiving the required char value to toggle my led

Code: [Select]
void loop()
{
  // INÍCIO DO SERVIÇO DE SERVIDOR
  WiFiClient  client = server.available();
 
  if (Serial.available() > 0)
  {
    char data = Serial.read();
    if (data == '1')
    {
      digitalWrite(4, HIGH);
      led1 = true;
    }
    if (data == '0')
    {
      digitalWrite(4, LOW);
      led1 = false;
    }
  }


In order to simply my post and make it easy to understand, i've uploaded on pastebin the whole code here: https://pastebin.com/4rc7AhjB

Just to make it clear what i am trying to do: I want to read the boolean state from led1 with javascript and use it to trigger those 3 checkboxes, and i really have no idea how to do it.

ieee488

If you are working with just LEDs there is no reason to use both the Arduino and the NodeMCU module.


In the situation you described you write a sketch to make the NodeMCU a web server.
You access it via the web brower on your smartphone or on your PC.

There should be an example sketch for Web Server for the ESP8266 Arduino Core.


.

Go Up