Remove "flashing screen" effect at the push of a button! [closed]

Navigation
0

I'm doing a project - with Arduino - along with controls in a web HTML page, that's all right. However, when you press a button on the web application, the page is reloaded, giving a "flicker" effect to the screen, how do I get that effect?

Here's some code snippet: 

void loop()
{
  acionamentos(); //Vai para a função que executa o acionamento dos botões
  EthernetClient client = server.available();// Verifica se tem alguém conectado
  if (client)
  {
    boolean currentLineIsBlank = true; // A requisição HTTP termina com uma linha em branco Indica o fim da linha
    String valPag;
    while (client.connected())
    {
      if (client.available())
      {
        char c = client.read(); //Variável para armazenar os caracteres que forem recebidos
        valPag.concat(c); // Pega os valor após o IP do navegador ex: 192.168.1.2/0001  

        if(valPag.endsWith("0201"))
        {
          cont=2;     
        }
        if (c == '\n' && currentLineIsBlank)
        {

          if (cont==1){
          //Inicia página HTML
          client.println(F("HTTP/1.1 200 OK"));
          client.println(F("Content-Type: text/html"));
          client.println();
          client.print(F("<HTML> "));

          client.print(F("<head>"));
          client.print(F("<meta charset='utf-8' name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/> <title>Automação</title>"));
          client.print(F( "<style>"));
          client.print(F(  "body{"));
          client.print(F(   "text-align: right;"));
          client.print(F("font-family: sans-serif;"));
          client.print(F( "font-size:12px;"));
          client.print(F(    "padding: 10px;"));
          client.print(F(    "background-color: #777;"));
          client.print(F(  "}"));
          client.print(F(  "a{text-decoration: none;padding: 0px;}"));
          client.print(F(  "p{"));
          client.print(F(    "color:#444; text-align: center; padding: 0px;"));
          client.print(F(   "}"));

          client.print(F(   "button{"));
          client.print(F(     "outline: none;"));
          client.print(F(     "border: 2px solid #2e75b6;"));
          client.print(F(     "border-radius:12px;"));
          client.print(F(     "background-color:#FFF;"));
          client.print(F(     "color: #2e75b6;"));
          client.print(F(     "padding: 8px 25px;"));
          client.print(F(   "}"));
          client.print(F(   "button:active{"));
          client.print(F(     "color: #fff;"));
          client.print(F(     "background-color:#2e75b6;"));
          client.print(F(   "}"));

          client.print(F(   "botao{"));
          client.print(F(     "font-size:10px;"));
          client.print(F(     "border: 1px solid #ccc;"));
          client.print(F(     "border-radius:5px;"));
          client.print(F(     "background-color:#ccc;"));
          client.print(F(     "color: #000;"));
          client.print(F(     "padding: 5px 8px;"));
          client.print(F(   "}"));

          client.print(F(   "botao2{"));
          client.print(F(     "font-size:10px;"));          
          client.print(F(     "border: 1px solid #ccc;"));
          client.print(F(     "border-radius:5px;"));
          client.print(F(     "background-color:#fff;"));
          client.print(F(     "color: #000;"));
          client.print(F(     "padding: 5px 8px;"));
          client.print(F(   "}"));

          client.print(F( "</style>"));
          client.print(F( "</head>"));
          client.print(F( "<body>"));

          client.print(F( "<p1><a href='http://192.168.0.100/0200'><botao>Iluminação</botao></ a> </p1>"));                 
          client.print(F( " <p1><a href='http://192.168.0.100/0201'><botao2>Controle</botao2></ a></p1>"));   
          client.print(F("<BR><BR><BR>"));     
          client.print(F( "<p><a href='http://192.168.0.100/0100'><button>Lâmpada 1</button></a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0300'><button>Lâmpada 2</button></a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0400'><button>Lâmpada 3</button></a></p>"));
          client.print(F( "</body>"));
          client.println(F("</HTML>"));



          break;
          }


          else if (cont==2){
//Inicia página HTML
          client.println(F("HTTP/1.1 200 OK"));
          client.println(F("Content-Type: text/html"));
          client.println();
          client.print(F("<HTML> "));

          client.print(F("<head>"));
          client.print(F("<meta charset='utf-8' name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/> <title>Automação</title>"));
          client.print(F( "<style>"));
          client.print(F(  "body{"));
          client.print(F(   "text-align: right;"));
          client.print(F("font-family: sans-serif;"));
          client.print(F( "font-size:12px;"));
          client.print(F(    "padding: 10px;"));
          client.print(F(    "background-color: #777;"));
          client.print(F(  "}"));
          client.print(F(  "a{text-decoration: none;padding: 0px;}"));
          client.print(F(  "p{"));
          client.print(F(    "color:#444; text-align: center; padding: 0px;"));
          client.print(F(   "}"));

          client.print(F(   "button{"));
          client.print(F(     "outline: none;"));
          client.print(F(     "border: 2px solid #2e75b6;"));
          client.print(F(     "border-radius:12px;"));
          client.print(F(     "background-color:#FFF;"));
          client.print(F(     "color: #2e75b6;"));
          client.print(F(     "padding: 8px 25px;"));
          client.print(F(   "}"));
          client.print(F(   "button:active{"));
          client.print(F(     "color: #fff;"));
          client.print(F(     "background-color:#2e75b6;"));
          client.print(F(   "}"));

          client.print(F(   "button2{"));
          client.print(F(     "outline: none;"));
          client.print(F(     "border: 2px solid #ddd;"));
          client.print(F(     "border-radius:12px;"));
          client.print(F(     "background-color:#ddd;"));
          client.print(F(     "color: #ddd;"));
          client.print(F(     "padding: 8px 25px;"));
          client.print(F(   "}"));
          client.print(F(   "button:active{"));
          client.print(F(     "color: #fff;"));
          client.print(F(     "background-color:#ddd;"));
          client.print(F(   "}"));

          client.print(F(   "botao{"));
          client.print(F(     "font-size:10px;"));
          client.print(F(     "border: 1px solid #ccc;"));
          client.print(F(     "border-radius:5px;"));
          client.print(F(     "background-color:#ccc;"));
          client.print(F(     "color: #000;"));
          client.print(F(     "padding: 5px 8px;"));
          client.print(F(   "}"));

          client.print(F(   "botao2{"));
          client.print(F(     "font-size:10px;"));          
          client.print(F(     "border: 1px solid #ccc;"));
          client.print(F(     "border-radius:5px;"));
          client.print(F(     "background-color:#fff;"));
          client.print(F(     "color: #000;"));
          client.print(F(     "padding: 5px 8px;"));
          client.print(F(   "}"));

          client.print(F( "</style>"));
          client.print(F( "</head>"));
          client.print(F( "<body>"));

          client.print(F( "<p1><a href='http://192.168.0.100/0200'><botao2>Iluminação</botao2></ a> </p1>"));                 
          client.print(F( " <p1><a href='http://192.168.0.100/0201'><botao>Controle</botao></ a></p1>")); 
          client.print(F("<BR><BR><BR>"));       
          client.print(F( "<p><a><button2>   </button2><a> <a><button2>    </button2><a>  <a><button>ON/OFF</button></a></p>"));           
          client.print(F( "<p><a href='http://192.168.0.100/0110'><button>Vol +</button><a> <a href='http://192.168.0.100/0901'><button> ˄ </button><a> <a href='http://192.168.0.100/0111'><button>Can +</button><a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0902'><button> < </button><a> <a href='http://192.168.0.100/0903'><button> OK </button><a> <a href='http://192.168.0.100/0904'><button> > </button><a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0112'><button>Vol  -</button><a> <a href='http://192.168.0.100/0113'><button> ˅ </button><a> <a href='http://192.168.0.100/0113'><button>Can  -</button><a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0101'><button>1</button><a> <a href='http://192.168.0.100/0102'><button>2</button><a>  <a href='http://192.168.0.100/0103'><button>3</button></a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0104'><button>4</button><a> <a href='http://192.168.0.100/0105'><button>5</button><a>  <a href='http://192.168.0.100/0106'><button>6</button></a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0107'><button>7</button><a> <a href='http://192.168.0.100/0108'><button>8</button><a>  <a href='http://192.168.0.100/0109'><button>9</button></a></p>"));
          client.print(F( "<p><a href='http://192.168.0.100/0119'><button>0</button></a></p>"));
          client.print(F( "</body>"));
          client.println(F("</HTML>"));

          break;
          }
        } //Fecha if (c == '\n' && currentLineIsBlank)

      } //Fecha if (client.available())

    } //Fecha While (client.connected())

    delay(3);// Espera um tempo para o navegador receber os dados
    client.stop(); // Fecha a conexão

  } //Fecha if(client)

} //Fecha loop

void acionamentos()
    
asked by anonymous 22.08.2018 / 01:18

1 answer

-1

function chamaArduino(id){
  var botao = $("#"+id).value;
  $.ajax({
    type: "POST",
    url: botao,
    success:function(data){
      console.log(data);
    },
   error:function(xhr, status, error) {
      var err = JSON.parse(xhr.responseText);
      alert(err.Message);
  }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--<p1><ahref='http://192.168.0.100/0200'><botao>Iluminação</botao></a></p1>--><buttononclick="chamaArduino(this.id);" id="1" value = "http://192.168.0.100/0200">Botão</button>

<button onclick="chamaArduino(this.id);" id="2" value = "http://192.168.0.100/0200">Botão</button>

<button onclick="chamaArduino(this.id);" id="3" value = "http://192.168.0.100/0200">Botão</button>

<button onclick="chamaArduino(this.id);" id="4" value = "http://192.168.0.100/0200">Botão</button>

If you want to make changes to the html without reloading the element only page, I recommend that you take a look at Ajax so it can help you do what you want. Here is a link that will help you study: link .
If you want to clarify what you want to ask only in the comments.

EDIT: I added a snippet of code that can do what you want

    
22.08.2018 / 15:54
Look for integer value in DB Child element behind parent