ESP8266 - A Pequena Maravilha para Comunicação WIFI

aphawk · 20 de outubro de 2016

É exatamente que eu quis dizer !!!!! Fica fácil de associar as coisas !

Paulo

rodrigocirilo · 20 de outubro de 2016

@aphawk Então, estou com a referencia aberta em outra aba... mas não imaginei que tivesse esse comando, na verdade nunca passou pela minha cabeça que haveria de ter um comando pra saber o comprimento de uma variavel..

Estou me virando bem hehe, mas a qualquer momento volto pedir ajuda aqui hehe quando enguiça em algum ponto..

aphawk · 20 de outubro de 2016

@rodrigocirilo ,

kkkkk

Lembre dos comandos de string do Bascom ....

Paulo

ViniciusKruz · 20 de outubro de 2016

2 horas atrás, Papibakigrafo disse:

poderia ter a página de login aqui? Caso o login fosse certo, redirecionava para a principal!

Sua página principal deve ser a handleRoot(). Pode mudar o nome para "principal" se quiser, aí ficaria assim: server.on("/", principal); daí cria-se a rotina referente a ela: void principal(){};

Funciona assim:

a linha: server.on("/", handleRoot);

é a "raiz do site", é a página inicial, quando ela é acessada, verifica se é um cliente logado:

if (!is_authentified()){
    String header = "HTTP/1.1 301 OK\r\nLocation: /login\r\nCache-Control: no-cache\r\n\r\n";
    server.sendContent(header);
    return;
  }

Como pode ver no código acima, caso não esteja ainda logado, redireciona para a página de login("Location: /login"), que contêm o form de acesso:

void handleLogin(){
  String msg;
  if (server.hasHeader("Cookie")){   
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
  }
  if (server.hasArg("DISCONNECT")){
    Serial.println("Disconnection");
    String header = "HTTP/1.1 301 OK\r\nSet-Cookie: ESPSESSIONID=0\r\nLocation: /login\r\nCache-Control: no-cache\r\n\r\n";
    server.sendContent(header);
    return;
  }
  if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")){
    String _user = server.arg("USERNAME");
    String _pwd = server.arg("PASSWORD");
    
    Serial.println("Usuario gravado:");
    Serial.println(user);
    Serial.println("Senha gravada:");
    Serial.println(pwd);
    
    if (_user.equals(user)  &&  _pwd.equals(pwd)){
      String header = "HTTP/1.1 301 OK\r\nSet-Cookie: ESPSESSIONID=1\r\nLocation: /\r\nCache-Control: no-cache\r\n\r\n";
      server.sendContent(header);
      Serial.println("Logado com sucesso");
      return;
    }
  msg = "Login incorreto.";
  Serial.println("Log in Failed");
  }

  String content = "<html><body> <title>ESP-Control</title>";
  content+="<meta http-equiv='Content-Type' content='text/html; charset=utf-8'><br>";
  content+="<div class='reformed-form'>";
  content+="<form method='post' name='login' id='login' action='/login'><H1>ACESSO AO SISTEMA</H1>";
  content+="<dl><dt><label for='usuario'>Usuário</label></dt>";
  content+="<dd><input type='text' id='usuario' name='USERNAME' placeholder='Nome do usuário' /></dd></dl><dl><dt>";
  content+="<label for='senhalogin'>Senha</label></dt>";
  content+="<dd><input type='password' id='senhalogin' name='PASSWORD' placeholder='Senha' /></dd>";
  content+="</dl><div id='submit_buttons'><button type='submit'>Entrar</button></div></form></div>"+ msg +"<br>";
 
  content += "<a href='/inline'>Monitor</a></body></html>";
  server.send(200, "text/html", content);
}

Uma vez logado corretamente, um Cookie é salvo, a partir daí, toda página pode checar se o Cookie existe através da função:

bool is_authentified(){
  Serial.println("Enter is_authentified");
  if (server.hasHeader("Cookie")){   
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
    if (cookie.indexOf("ESPSESSIONID=1") != -1) {
      Serial.println("Authentification Successful");
      return true;
    }
  }
  Serial.println("Authentification Failed");
  return false;  
}

Se não existir o Cookie, não está logado, daí redireciona para a tela de login, trecho abaixo serve para fazer esta checagem:

if (!is_authentified()){
    String header = "HTTP/1.1 301 OK\r\nLocation: /login\r\nCache-Control: no-cache\r\n\r\n";
    server.sendContent(header);
    return;
  }

Pode acontecer também de você querer exigir a autenticação via post/get e não pelo Cookie, aí basta não colocar este trecho aí de cima e autenticar assim:

void estado(){//rotina para checar todos os status dos sensores
  //Autenticação exigida via POST(acessado por site externo)
  //readDS3231time();
  String content;
  int statusCode=0;
  Serial.println("Estado");
  if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")){
    Serial.println("Contem login");
    if (server.arg("USERNAME") == user &&  server.arg("PASSWORD") == pwd ){
      char val[17];
      Serial.println("login correto");
      if(server.hasArg("data_hora")){//pedido de status de data e hora
        sprintf(val,"%02d/%02d/%02d-%02d:%02d:%02d",intDia,intMes,intAno,intHora,intMinuto,intSegundo);
      }
      server.send(200, "text/html", val);
      Serial.println("Enviando data e hora:");
      //server.send(0, "application/json", content);
      return;
    }
  }
  
}

Este código acima, aceita requisição de sites externos, isso aí responde com a data/hora/min/seg. Estou usando uma página externa para fazer esta requisição via javascript/Ajax, funciona que é uma beleza. Note que a função verifica se tem o argumento "data_hora", caso sim, responde com os dados, mas poderia verificar outros argumentos também e informar outros dados.

1 hora atrás, lucianolcoa disse:

Vi que uns usam o WiFiServer server(80); e o outro, ESP8266WebServer server(80);.

Mas qual o motivo de se usar o segundo?

Depende da biblioteca usada, cada uma permite setar a porta de uma forma.

1 hora atrás, Papibakigrafo disse:

baixei o seu código agora e vi que você implementou o CSS e o JS todo no ESP. Seria mais simples hospedar os arquivos .js e .css na web, e puxar pelo <link> e <script>, mas acredito que foi para testar a "potência" no ESP!

Que potência que nada hehehe, eu sou novato com JS/Ajax/CSS... e depois que eu fiz este exemplo aí foi que um amigo me disse que podia linkar os arquivos kkkk, mas tá bom, isso era só um teste mesmo e como eu já havia penado um bocado e sem ter sucesso com JS, eu lavei a alma com esse simples exemplo.

2 horas atrás, Papibakigrafo disse:

Uma coisa: usando apenas a tag <script>, não funcionou ne? Por isso teve que colocar todos os dados da tag?

Exatamente, de outra forma não rodou.

2 horas atrás, Papibakigrafo disse:
Uma dúvida: qual a diferença entre os 2?
#include <ESP8266WebServer.h>
#include <ESP8266WiFi.h>;

A primeira é voltada para Web Server e tem funções para isto. Já a segunda tem funções para rede Wifi, como por exemplo, buscar redes disponíveis. São bibliotecas muito interessantes, convêm até estudar elas, dá pra aprender muita coisa mesmo.

Papibakigrafo · 20 de outubro de 2016

@ViniciusKruz Nossa, entendi bastante agora! Obrigado mesmo!

rodrigocirilo · 20 de outubro de 2016

Pessoal estou com um problema aqui, não manjo nada de html nem de programação de sites etc...então preciso da ajuda de vocês..

Essa tela é de um programinha que to testando, ocorre que ao acionar retenção (sim) preciso que seja impresso o estado do pino, ligado ou desligado; E para isso eu uso o comando wprint "ligado" ou wprint "desligado no caso o Wprint percebi que ele imprime na mesma linha ( vai imprimindo ao lado), só o print ele vai imprimindo sempre em uma nova linha, mas o meu problema é que nao queria que fosse imprimindo varios status,queria que por exemplo o ligado fosse substituido pelo desligado ao desligar o pino, mas que a variavel atualiza-se no mesmo lugar.

Usei um comando chamado returngui, ai ele faz o que quero, mas atualiza a pagina..e nao queria que atualizasse, como ele imprime sem atualizar penso que seja possivel imprimir no mesmo lugar.

as setas vermelhas é onde vai imprimindo!!

Edit:

Na programação a "impressão" ocorre quando desvio (goto) para a [label] que vai tratar o pino, se ligar o pino, seto a variavel (status) como "ligado" e se desligar o inverso, logo em seguida eu imprimo a variavel Status e ocorre o narrado acima!!

alexandre.mbm · 21 de outubro de 2016

11 horas atrás, lucianolcoa disse:

Alexandre, descobri um "norte" que solucionaria os nossos problemas em relaçao a usar comando de voz no ESPBASIC.... É um programa "rival" ao do app inventor, o TASKER.

Do que exatamente você está falando?

Tenho notícias desse Tasker, mas nunca o testei, porque precisa de ROOT.

9 horas atrás, lucianolcoa disse:

com ele é possivel fazer aquilo ao qual estamos tentando sem lograr exito.

Aquilo o que? Qual tinha sido minha última mensagem? Estou voando. Andei pesquisando comando de voz dias atrás, mas não estou conseguindo associar a lembrança com este tópico.

7 horas atrás, lucianolcoa disse:

Eu sempre frisei por evitar javascript pois achava o bagio imensamente complicado. Mas agora to afim de encarar o "demonio" de frente.

vocês que estão mesclando o nodemcu com java, por onde eu começo para aprender?

Javascript e Java são coisas diferentes...

7 horas atrás, Papibakigrafo disse:

@ViniciusKruz, baixei o seu código agora e vi que você implementou o CSS e o JS todo no ESP. Seria mais simples hospedar os arquivos .js e .css na web, e puxar pelo <link> e <script>

Fica dependente de conectividade com a Internet!

Deve existir biblioteca de template...

5 horas atrás, rodrigocirilo disse:

nunca passou pela minha cabeça que haveria de ter um comando pra saber o comprimento de uma variavel..

Comprimento de uma cadeia de caracteres. É comum. Não dá pra dizer que é particularidade de algumas linguagens.

ViniciusKruz · 21 de outubro de 2016

@rodrigocirilo

Não faço ideia de como fazer ou se tem como fazer o que vou dizer, no ESPBasic, mas em html, isso que você ta querendo, teria que identificar uma parte do código com uma ID, por exemplo uma div:

<div id="teste">
Texto que será mudado
</div>

daí com um javascript ou algo parecido, chama a função que vai mudar este elemento "teste":

document.getElementById("teste").innerHTML = retorno;

Acho que o ESPBasic não permite mexer no html.

adicionado 8 minutos depois

8 minutos atrás, alexandre.mbm disse:

Fica dependente de conectividade com a Internet!

Deve existir biblioteca de template...

Depende do objetivo do projeto, por exemplo, se a ideia for acessar o ESP "de fora", se não tiver internet não acessa, logo sub-entende-se que haverá problema.

alexandre.mbm · 21 de outubro de 2016

50 minutos atrás, ViniciusKruz disse:
document.getElementById("teste").innerHTML = retorno;

Isso chama-se acessar o DOM ‒ Modelo de Objeto de Documentos. Faz-se com várias linguagens.

Saiba mais em: Trabalhando com DOM em JavaScript

adicionado 13 minutos depois

53 minutos atrás, alexandre.mbm disse:

Deve existir biblioteca de template...

Eu prezo por engenharia de software, e isso quase sempre significa fazer as coisas em camadas. Acabo de achar duas formas de responder HTML usando templates, uma para Arduino e outra para ESP8266.

Exemplo de código Sming para este último:

void onIndex(HttpRequest &request, HttpResponse &response)
{
  TemplateFileStream *tmpl = new TemplateFileStream("index.html");
  auto &vars = tmpl->variables();
  vars["counter"] = String(counter);
  vars["IP"] = WifiStation.getIP().toString();
  vars["MAC"] = WifiStation.getMAC();
  response.sendTemplate(tmpl);
}

void onFile(HttpRequest &request, HttpResponse &response)
{
  String file = request.getPath();
  if (file[0] == '/')
    file = file.substring(1);

  response.setCache(86400, true);
  response.sendFile(file);
}

Outra coisinha interessante, que está mais nas bases: bblanchon/ArduinoJson

aphawk · 21 de outubro de 2016

@rodrigocirilo ,

Eu já postei dois programas aqui que fazem o posicionamento usando CSS . Procure por eles.

Paulo

alexandre.mbm · 21 de outubro de 2016

Não achei o outro.

aphawk · 21 de outubro de 2016

@alexandre.mbm ,

Nem eu .... kkkkk

Eu achei que publiquei um outro projetinho de 4 botões para ligar / desligar 4 saídas.... deixei o brinquedinho no meu escritório, amanhã eu pego ele e copio o código !

Mas esse post que você mostrou já tem os comandos CSS usados para o posicionamento.

Paulo

alexandre.mbm · 21 de outubro de 2016

Nada tem a ver de prático com o que tem sido buscado neste fórum, mas não quero deixar de apontar o Involt. Pelo que entendi, com muita praticidade a pessoa cria uma página web em HTML e CSS que servirá para comandar Arduino ligado à porta serial. Uma maneira elegante de dispensar botões, chaves, potenciômetros e preocupações com debounces quando prototipando em Arduino. Talvez nem valha à pena usar, por limitar o teste e guardar surpresas para final de projeto. Mas observem como GUI e sketch foram "plugados" por comunicação serial. É muito transparente! Algo assim poderia existir para plugar ESP8266 e aplicações Android.

Outra descoberta interessante — esta mais próxima do tópico — foi o site Starting Eletronics ensinando a aplicar AJAX com XML no Arduino, e a lançar mão de template de arquivo HTML acessado no módulo SD. Será que não haverá uma forma de dispensar o SD?!

Papibakigrafo · 21 de outubro de 2016

@alexandre.mbm rapaz, gostei desse involt! Vou dar uma lida e fazer uns testes em casa!

rodrigocirilo · 21 de outubro de 2016

@aphawk Vou testar esse posicionamento com CSS, No entanto eu ja havia usado os comando que você usou pra posicionar minha tela de login/senha no meio da pagina, ficou muito bom, fui alterando os numeros seguidos de px no comando e fui ajeitando, porém quando acessei pelo browser do celular a coisa ficou tosca, não posicionou no meio e sim muuuuuito a direita, tive que diminuir muito a pagina pra conseguir ver que estava lá a tela, inicialmente pensei que nao estivesse imprimindo!!!!

Sabes o porque no browser posicionou corretamente e no celular não( no celular uso o chrome)

adicionado 12 minutos depois

Outra coisa, no seu codigo exemplo, voce posiciona com o CSS objetos, no caso o slider, o meter e botões, como vou posicionar uma variavel?

Papibakigrafo · 21 de outubro de 2016

@rodrigocirilo você pode usar um framework. Uso o bootstrap, ele é responsivo, quer dizer, vai se adequar em qualquer celular, tablet ou computador.

Para o celular, use essa tag:

<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>

rodrigocirilo · 21 de outubro de 2016

11 minutos atrás, Papibakigrafo disse:
@rodrigocirilo você pode usar um framework. Uso o bootstrap, ele é responsivo, quer dizer, vai se adequar em qualquer celular, tablet ou computador.

Para o celular, use essa tag:
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>

Desculpe mas não faço ideia de como usar isso no espbasic.. nem como colocar minha variavel nisso ai hehehe

Papibakigrafo · 21 de outubro de 2016

@rodrigocirilo ahhh ta, ESPBasic! Desculpa, não tinha lido antes que era nessa linguagem! =/

aphawk · 21 de outubro de 2016

@Papibakigrafo E @rodrigocirilo

Isso não tem nada a ver com ESPBasic.... é posicionamento via HTML e CSS .

Existem comandos que fixam também a largura da tela, posicionam relativo ao ultimo objeto, ou a um canto, ou em função do tamanhona tela ..... tem tanta coisa que dá até tonteira de ver ....

Eu usei no Firefox, e funcionaram direitinho com minhas telas.

Rodrigo, o problema não é se você está usando Arduino, C , Basic, etc .... o problema é que agora você está programando uma tela em um browser de Internet !

Olha este pedaço que retireI de um programinha do Fórum do ESP8266Basic :

wprint "</td>"
wprint "<th</th></table><br>"
wprint "<table align='center' width='200' bgcolor='LIGHTBLUE' border='2' cellpadding='2'>"
wprint "<td>"
button "ROOM TEMP-C",[NIL]
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:200px"
wprint "<b>"
wprint "<center>"
wprint "<mark>" & htmlvar(outc) & "</mark>"
wprint "</center>"
wprint "</b>"
wprint "</td>"

Independente de qualquer linguagem, esses montes de comandos HTML e CSS tem de ser usados para posicionar o Button no local correto que o autor desejou, com as cores corretas e tudo, e depois ele posiciona novamente a saída da variável outc usando posicionamentos CSS junto com a instrução htmlvar(outc) .

Tem muito exemplo la no Fórum do ESP8266Basic, mas sem você saber o mínimo sobre HTML e CSS, fica impossível fazer uma boa tela na iNTERNET. Eu tive essa mesma dificuldade 30 dias atrás e tive de dar uma estudadinha rápida nisso ... e olha, depois de velho isso é um saco viu !

Estude o que fazem esses comandos , o WPRINT o HTMLVAR(), e principalmente o HTMLID() . Esses são mesmo comandos do ESPBASIC, mas que são usados com HTML e com CSS .

Paulo

lucianolcoa · 21 de outubro de 2016

6 horas atrás, alexandre.mbm disse:

Nada tem a ver de prático com o que tem sido buscado neste fórum, mas não quero deixar de apontar o Involt. Pelo que entendi, com muita praticidade a pessoa cria uma página web em HTML e CSS que servirá para comandar Arduino ligado à porta serial. Uma maneira elegante de dispensar botões, chaves, potenciômetros e preocupações com debounces quando prototipando em Arduino. Talvez nem valha à pena usar, por limitar o teste e guardar surpresas para final de projeto. Mas eu observem como GUI e sketch foram "plugados" por comunicação serial. É muito transparente! Algo assim poderia existir para plugar ESP8266 e aplicações Android.

Outra descoberta interessante, esta mais próxima do tópico, foi o site Starting Eletronics ensinando a aplicar AJAX com XML no Arduino, e a lançar mão de template de arquivo HTML acessado por módulo SD. Será que não haverá uma forma de dispensar o SD?!

Alexandre,ava me referindo ao javascript. Sei que os 2 são diferentes. javascript é um cão chupando manga, monte de requisições e tal, mas vou tentar aprender.

Sobre o tasker, então, lembra que voce tava me ajudando a tentar linkar a pagina do espbasic ao inventor pra acionar comando de voz? Então no tasker é possivel, conversei com um cara e da pra criar interfaces(vulgo app) que se comunicam com paginas especificas de browser, da ate mesmo pra configurar o "tom" da voz do celular, se vai ser uma voz masculina, feminina, ou até mesmo vozes de desenhos e filmes, como darth veider, etc.

adicionado 4 minutos depois

13 horas atrás, rodrigocirilo disse:

Pessoal estou com um problema aqui, não manjo nada de html nem de programação de sites etc...então preciso da ajuda de vocês..

Essa tela é de um programinha que to testando, ocorre que ao acionar retenção (sim) preciso que seja impresso o estado do pino, ligado ou desligado; E para isso eu uso o comando wprint "ligado" ou wprint "desligado no caso o Wprint percebi que ele imprime na mesma linha ( vai imprimindo ao lado), só o print ele vai imprimindo sempre em uma nova linha, mas o meu problema é que nao queria que fosse imprimindo varios status,queria que por exemplo o ligado fosse substituido pelo desligado ao desligar o pino, mas que a variavel atualiza-se no mesmo lugar.

Usei um comando chamado returngui, ai ele faz o que quero, mas atualiza a pagina..e nao queria que atualizasse, como ele imprime sem atualizar penso que seja possivel imprimir no mesmo lugar.

as setas vermelhas é onde vai imprimindo!!

Edit:

Na programação a "impressão" ocorre quando desvio (goto) para a [label] que vai tratar o pino, se ligar o pino, seto a variavel (status) como "ligado" e se desligar o inverso, logo em seguida eu imprimo a variavel Status e ocorre o narrado acima!!

Sei como resolver mas não de um modo esteticamente "agradavel".

Crie uma textbox e nela voce imprimie o status numa variavel let, vai imprimir sempre no mesmo lugar.

rodrigocirilo · 21 de outubro de 2016

@aphawk Ok, vou procurar sobre esses comandos...

xyko-2020 · 21 de outubro de 2016

SpiderBasic para criação de app.

@aphawk Qual a sua avaliação?

Demo "free" até 800 linhas.

lucianolcoa · 21 de outubro de 2016

agora, _xyko_ disse:

SpiderBasic para criação de app.

@aphawk Qual a sua avaliação?

Da pra linkar o bixim ao espbasic?

alexandre.mbm · 21 de outubro de 2016

@aphawk, esses exemplos usam a linguagem do Esp8266Basic para fazer CSS inline em HTML sem template. Os templates, até podemos deixar de canto, por enquanto, mas como "importar" um arquivo CSS não remoto? A dica de usar Bootstrap implica nisso.

@lucianolcoa, eu sei do Tasker como um ferramenta automatizadora de tarefas. Fiquei curioso para ver a funcionalidade que você menciona.