Jump to content
Yiuky

Retorno ao index a partir do código

Recommended Posts

Olá tenho esse código abaixo e a parte em vermelho é um HTML carregado pelo meu Arduíno, e como podem ver, ao clicar no botão LIGAR/DESLIGAR é enviado um retorno pelo <a href> porém eu gostaria de saber como posso apenas coletar esse retorno /L OU /H e carregar a pagina index / (barra vazia)? Ou se posso clicar no LIGAR/DESLIGAR e adicionar algo para que a pagina "atualize" ou vá para a /?

 

// \r\n no final de todos os códigos AT para pular linhas e reconhecer comando
#include "SDHT.h"
#include "WiFiEsp.h" //INCLUSÃO DA BIBLIOTECA
#include <SoftwareSerial.h>

//Pino do Tx no 6, pino Rx no 7
SoftwareSerial esp8266(6, 7);
SDHT dht;

char ssid[] = "2.4_GAMBATESHIMA"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO
char pass[] = "FACA2010";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO
//char ssid[] = "Ali"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO
//char pass[] = "01010101";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO
WiFiEspServer server(81); //CONEXÃO REALIZADA NA PORTA 80
RingBuffer buf(8); //BUFFER PARA AUMENTAR A VELOCIDADE E REDUZIR A ALOCAÇÃO DE MEMÓRIA
#define DEBUG true

  int statusLed = LOW; //VARIÁVEL QUE ARMAZENA O ESTADO ATUAL DO LED (LIGADO / DESLIGADO)
  String temperatura;
  String umidade;
  
  int status = WL_IDLE_STATUS;
  
void lerTempUmi(){
  dht.broadcast(DHT11, A1);
  delay(500);
  temperatura = String (dht.celsius, 0);
  umidade = String (dht.humidity, 0);
   }
  
void setup() 
{
    Serial.begin(9600);
    esp8266.begin(9600);
    WiFi.init(&esp8266);   // initialize ESP module
    pinMode(12, OUTPUT);
    digitalWrite(12, statusLed);

  if (WiFi.status() == WL_NO_SHIELD)  // check for the presence of the shield 
  {
    Serial.println("WiFi shield not present");
    // don't continue
    while (true);
  }

  // attempt to connect to WiFi network
  while ( status != WL_CONNECTED) {
    Serial.print("Attempting to connect to WPA SSID: ");
    Serial.println(ssid);
    // Connect to WPA/WPA2 network
    status = WiFi.begin(ssid, pass);
  }

  Serial.println("You're connected to the network");
  printWifiStatus();
  

  while ( status != WL_CONNECTED) {
    Serial.print("Attempting to connect to WPA SSID: ");
    WiFi.init(&esp8266);
    WiFi.begin(ssid, pass);
    Serial.println(ssid);
    // Connect to WPA/WPA2 network
    status = WiFi.begin(ssid, pass);
  }
  //sendData("AT+RST\r\n", 2000, DEBUG); // rst
  //sendData("AT+CWMODE=1\r\n",2000, DEBUG); 
  //sendData("AT+CWJAP=\"2.4_GAMBATESHIMA\",\"FACA2010\"\r\n", 5000, DEBUG);

      
  //sendData("AT+CIFSR\r\n", 2000, DEBUG);//You will get the IP Address of the ESP8266 from this command. 
  //sendData("AT+CIPMUX=1\r\n", 2000, DEBUG);
  //sendData("AT+CIPSERVER=1,80\r\n", 2000, DEBUG);

  //sendData("AT+CIPSTART=0,\"TCP\",\"192.168.0.120\",37777\r\n",1000, DEBUG);                          // escolhe entre conexao TCP ou UDP 
  //delay(1000); 

  //sendData("AT+CWDHCP=1,0\r\n",1000, DEBUG);                                                        // configura ESP8266 para receber um IP do roteador conectado
  //delay(1000);

  //sendData("AT+CIPSTA_DEF=\"192.168.2.5\",\"192.168.2.1\",\"255.255.255.0\"\r\n",1000, DEBUG);      // configura novo IP a ser escolhido - IP fixo, IP do roteador, Mascara da Rede (lembrando que o IP a ser escolhido deve estar na mesma faixa do roteador);
  //delay(1000);   

  //sendData("AT+CIFSR\r\n", 1000, DEBUG);                                                              // Mostra o endereco IP
  //delay(3000);
  
  // Configura para multiplas conexoes
  //sendData("AT+CIPMUX=1\r\n", 1000, DEBUG);                                                           // Abre multiplas conexoes
  //delay(2000);

  //sendData("AT+CIPSERVER=1,80\r\n", 1000, DEBUG);
  delay(1000);
  server.begin();
  
}

void loop() 
{
       WiFiEspClient client = server.available(); //ATENDE AS SOLICITAÇÕES DO CLIENTE
      if (client) { //SE CLIENTE TENTAR SE CONECTAR, FAZ
      buf.init(); //INICIALIZA O BUFFER
      boolean currentLineIsBlank = true;
      while (client.connected()){ //ENQU
      if(client.available()){ //SE EXISTIR REQUISIÇÃO DO CLIENTE, FAZ
        char c = client.read(); //LÊ A REQUISIÇÃO DO CLIENTE
        buf.push(c); //BUFFER ARMAZENA A REQUISIÇÃO
         //IDENTIFICA O FIM DA REQUISIÇÃO HTTP E ENVIA UMA RESPOSTA
        if(buf.endsWith("\r\n\r\n") && currentLineIsBlank) {
 //         lerTempUmi();
          WebPage2(client);
          break;
        }else if(buf.endsWith("GET /H")){ //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "H", FAZ 
            digitalWrite(12, HIGH); //ACENDE O LED
            statusLed = HIGH; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO)
        }else if (buf.endsWith("GET /L")) { //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "L", FAZ
                  digitalWrite(12, LOW); //APAGA O LED
                  statusLed = LOW; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO)
             }
             }
             
             }
             delay(10);
      client.stop();
//sendData("AT+CIPCLOSE=0\r\n", 1000, DEBUG);
              }
if (status != WL_CONNECTED) {
  setup();}
}
void WebPage2(WiFiEspClient client){
  client.print(
    "HTTP/1.1 200 OK\r\n"
    "Content-Type: text/html\r\n"
 //   "Connection: close\r\n"  // the connection will be closed after completion of the response
    "\r\n");
  client.println("");
  client.println(F("<!DOCTYPE HTML>")); //INFORMA AO NAVEGADOR A ESPECIFICAÇÃO DO HTML
  client.println(F("<html><head><meta charset=\"utf-8\">")); //ABRE A TAG "html"
  client.println(F("<link rel='stylesheet' type='text/css' href='http://blogmasterwalkershop.com.br/arquivos/artigos/sub_wifi/webpagecss.css' />\n"
  "<link rel=\"icon\" type=\"image/png\" href=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&amp;pid=Api&amp;P=0&amp;w=300&amp;h=300.png\">\n"
"  <title>GAMBATESHIMA ARDUINO WORK</title>"));
  
  //AS LINHAS ABAIXO CRIAM A PÁGINA HTML
  client.println(F("<body class=\"htmlNoPages\">\n"
"  <img alt=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&amp;pid=Api&amp;P=0&amp;w=300&amp;h=300.png\" style=\"width: 150px; height: 150px; margin-top: 50px;\">\n"
"  <p style=\"line-height: 2;\" class=\"gwd-p-pzi3\"><font>WEBSERVER GAMBATESHIMA</font></p><p>ESTADO ATUAL DO LED: \n"));
    if (statusLed == HIGH) {
client.println(F(" <strong><font color=\"green\">LIGADO</font></strong></p>\n"
      "<a href=\"/L\" style=\"margin-bottom:50px;\">DESLIGAR</a>\n"));
    }else {
      if (statusLed == LOW) {
client.println(F(" <strong><font color=\"red\">DESLIGADO</font></strong></p>\n"
      "<a href=\"/H\" style=\"margin-bottom:50px;\">ACENDER</a>\n"));
    }}
          lerTempUmi();
client.println(F( 
"  <hr width=\"250\">\n"
"  <p style=\"line-height: 0;\"><font color=\"red\">TEMPERATURA: </font>"));
client.print(temperatura);
client.println(F(" ºC</p>\n <hr width=\"250\">\n"
"  <p style=\"line-height: 0;\"><font color=\"red\">UMIDADE: </font>"));
client.print(umidade);
client.println(F(" %</p>\n <hr width=\"250\">\n"
"<a href=\"/\">ATUALIZAR</a>\n"

"</body>\n"
"</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vcapelli
      Eu sei o que eu vou pedir é meio loucura mas espero que ao menos seja possível. É o seguinte: eu quero fixar um valor X e sempre depois das 18 horas esse valor atualizasse aumentando ou diminuindo de acordo com a bolsa de valores. Exemplo:
      Orçamento 100bi, hoje a bolsa fechou em queda de 2,73% então ela atualizaria para 97,27bi.
      Eu sei que é loucura mas se for possível realizar agradeceria imensamente, não precisam ter pressa também
    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digimons</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="CSS/Style.css"> </head> <body class="container"><!-- INICIO DA NOTÍCIA --> <div> <center> <h1><a href=''>Noobmon - Portal de informações de digimons</a></h1> </center> <div class='place'> <center><h4>Gigadramon(ギガドラモン)</h4></center> <img src='IMG/IMG1.jpg' alt="Titulo da foto aqui"> <p> Gigadramon is an Android Digimon. It is a dark dragon Digimon that was developed at the same time as Megadramon. As a combat dragon that was armed to the teeth by further remodeling, its existence is the epitome of a fiendish computer virus. Its arms are equipped with the "Giga Hands". </p> <p> Gigadramon is a purple dragon with purple hair and yellow eyes. It has robotic wings and two arms, and wears a black helmet and black gauntlets on its arms. <a href='noticia.html'>Ler Mais.</a> </p> </div> </div><!-- FIM DA NOTÍCIA --> <div class='sidenote'><!-- INICIO DO MENU LATERAL --> <form class="form-inline my-2 my-lg-0"><!-- BOTÃO PESQUISA --> <input class="form-control mr-sm-2" type="search" placeholder="Digite Aqui" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button> </form><!-- FIM DO BOTÃO PESQUISA --> <hr> <ol> <li>Noticia 01</li> <li>Noticia 02</li> <li>Noticia 03</li> <li>Noticia 04</li> <li>Noticia 05</li> </ol> </div><!-- FINAL DO MENU LATERAL --> <div class="alert alert-dark tamanho"><!-- BOTÕES DAS NOTÍCIAS --> <center><form> <input type="button" value="Voltar" onClick="history.go(-1)"> <input type="button" value="Atualizar" onClick="history.go(0)"> <input type="button" value="Avançar" onCLick="history.forward()"> </form></center><!-- FIM DO BOTÃO DAS NOTÍCIAS --> </div> <div class='footer clear'><!-- FOOTER --> <p>Footer é aqui"</p> </div> </body> </html> CSS:
      body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .container { margin: 0 auto; } .place h4 { border-bottom: 1px dashed #7E9F19; margin: 0; } body { background: #FFF1D6 url(images/noise.png); font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .place { margin-right: 35%; background-color: #FFF; border: 1px solid #CCC; border-color: #CCC #999 #999 #CCC; margin-bottom: 20px; padding: 10px; } .tamanho { margin-right: 35%; margin-bottom: 20px; padding: 10px; } .place a { color: #2C88A7; font-weight: bold; } h1 a { color: #7E9F19; text-decoration: none; } /*h1 a:hover { background-color: #7E9F19; color: #FFF; }*/ .place img { border: 1px solid #7E9F19; float: left; margin: 10px 10px 0 0; padding: 2px; } .clear { clear: both; } .footer { font-size: 12px; text-align: center; } .sidenote h3 { font-size: 14px; margin-top: 0; } .sidenote ol { font-size: 12px; } .menulateral { float: right; width: 660px; } .sidenote { float: right; width: 30%; background-color: #FFFBE4; border: 1px solid #C9BC8F; padding: 10px; width: 345px; } #btn-noticia { float: right; padding-bottom: 0%; } #newn { padding-bottom: 2px; } Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.