Remove "blink screen" effect by pressing a button!

Asked

Viewed 109 times

0

I’m doing a project - with Arduino - together with controls on a page web made in HTML, is all right. However, by pressing a button of this application web, the page is reloaded, giving a "blink" effect to the screen, as I can take this effect ?

Follows excerpt from the code:

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()
html html5 button

  • Your button has the type property this way: <button type="button"></button> ?

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><a href='http://192.168.0.100/0200'><botao>Iluminação</botao></ a> </p1>-->

<button onclick="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 html without having to reload only the element page, I recommend that you take a look at Ajax This can help you do what you want. Here is a link that will help you study: http://api.jquery.com/jquery.ajax/.
If you would like to clarify what you wish to ask only in the comments.

EDIT: I added an excerpt of code that can do what you want

  • What is the reason for the negativity? am I wrong? please explain yourself

  • Lucas good night, thank you very much, I’ve been doing a research, how can I implode the ajax in this case ? I edited the question with a code snippet

  • I added code to the answer, see if it suits what you need

Browser other questions tagged html html5 button

You are not signed in. Login or sign up in order to post.