ESP8266 - A Pequena Maravilha para Comunicação WIFI

lucianolcoa · 19 de dezembro de 2016

@Papibakigrafo ^,^ graças a voce eu finalmente consegui terminar meus planos ambiciosos em relaçao ao esp8266, entretanto, não acho justo fazer algo sem o seu concentimento, haja vista que 95% do código foi de autoria, pesquisa sua.... Então, como faria direito para comercializar??? voce quer algum tipo de royalts pela venda??? mençao sobre sua autoria no código? os dois?

Pabi, outra coisa que eu queria te perguntar, eé como voce colocar java script no código do arduino. voce teria algum tipo de norte pra me ensinar a como usar javascript com arduino? para eu aprender também?

Papibakigrafo · 19 de dezembro de 2016

@lucianolcoa eu melhorei um pouco já esse meu código (interface), pois o meu projeto ano que vem é abrir uma Startup e vender o produto final. Pode usar sem problemas, e o código não foi todo de minha autoria, apenas a interface mesmo kkkk

Achei alguns exemplos do @ViniciusKruz e do blog do Renato Aloi, que me ajudaram muito! Eu apenas fui "juntando" as peças! =D

Minha interface atual é essa abaixo. Provavelmente, ainda mudarei algumas coisas! ^^

lucianolcoa · 19 de dezembro de 2016

SO me tira umas duvidas por favor,. voce fez duas paginas html uma igualzinha a outra de acordo com o código? pra que? eu tentei apenas jogar os botões com o comando a href mas no meu caso não ia, sempre bugava, como voce fez pra upar os botões no código? tem algum lugar que de pra estudar javascript junto com arduino para os iniciantes?

ViniciusKruz · 19 de dezembro de 2016

12 horas atrás, Papibakigrafo disse:

com a sua ajuda e paciência, consegui fazer. Mas eu achei ele beeem lento, e acabou não lendo meus icones direito, pois uso o Font Awesome. Talvez faltou algum arquivo que não vi!

Como eu te disse outro dia, o tamanho dos arquivos tem que ser o mínimo possível, afinal, segundo os desenvolvedores do nodemcu, o ESP não foi feito para interface gráfica, pega leve com ele rsrsrs.

Dá um print do monitor serial pra eu ver seus arquivos, preciso saber se são muito grandes.

adicionado 5 minutos depois

@Papibakigrafo Show suas telas hein, parabéns!!

Papibakigrafo · 19 de dezembro de 2016

@ViniciusKruz Só a noite agora kkkk, mas assim que chegar em casa eu posto!

Então @lucianolcoa, eu tive que fazer pois estão fazendo os botões via GET, e não ajax como fez o Vinicius. Eu irei mexer nisso outro dia.

Na verdade, o BOTÃO é um LINK com a CSS do bootstrap, ele tem aparência de botão ^^

Como está via GET, quando você clica no botão, ele vai para a página /rele. Essa página /rele tem que ser idêntica à página root. Se você colocar apenas o botão, irá aparecer apenas o botão!

Uma coisa que quero tentar fazer, é criar uma variavel string global, com um HEADER e um FOOTER, tipo em PHP/HTML. Mas as 2x que tentei dava falha e não achava a variável.

Usando o meu código de exemplo, seria assim:

String header = "<html><head><title>On Home</title>";
  header += "<meta http-equiv='Content-Type' content='charset=utf-8'>";
  header += "<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>";
  header += "<meta name='apple-mobile-web-app-status-bar-style' content='black'>";
  header += "<meta name='apple-mobile-web-app-capable' content='yes' />";
  header += "<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>";
  header += "<link rel='icon' href='http://www.blocodochapolin.com.br/arduino/img/icone.png' type='image/x-icon' />";
  header += "<link rel='apple-touch-icon-precomposed' href='http://www.blocodochapolin.com.br/arduino/img/icone.png'>";
  header += "<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>";
  header += "<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>";
  header += "</head>";
  header += "<style>.navbar-header { width:100%;  height:50px; } .navbar-brand{ width:100%; }</style>";

Depois, lá no handleRoot:

......... código restante html ......
server.send(200, "text/html", header);
server.send(200, "text/html", html);

Ainda não consegui, mas vou tentar melhor! ^^

Se mais alguém qusier tentar essa solução, seria ótimo!!

lucianolcoa · 19 de dezembro de 2016

@ViniciusKruz Tem algum site pra eu começar a aprender ajax para implementar com nodemcu? javascript?

Papibakigrafo · 19 de dezembro de 2016

@lucianolcoa o ideial seria começar com Javascript, e depois ao Ajax. Ficaria mais fácil para entender!

Eu comecei a aprender por aqui: http://www.w3schools.com/js/default.asp

ViniciusKruz · 19 de dezembro de 2016

@lucianolcoa Nos exemplos que já passei tem boas explicações a respeito, dá uma pesquisada aí quevai encontrar, já serve de pontapé inicial por ser relacionado com ESPs.

lucianolcoa · 19 de dezembro de 2016

mano nao é duvidando da capacidade de vocês, mas os codigos em javascripts são muito locos, grandes até o talo. Como vocês fazem pra decorar tudo isso? o recurso auto completar do eclipse ajuda nessa tarefa?

Papibakigrafo · 19 de dezembro de 2016

@lucianolcoa uahuAHAuaHUahA acho que você está confundindo! Os arquivos JS (.js) são padrões. Precisamos desses arquivos para podermos escrever o NOSSO CÓDIGO em JS ou AJAX.

Sem esses "arquivos padrões", não funcionaria o código do @ViniciusKruz , como no exemplo dele.

O framework que usei (Bootstrap), precisa do arquivo padrão em JS (jquery_min.js / bootstrap.min.js) para poder funcionar corretamente.

lucianolcoa · 19 de dezembro de 2016

@Papibakigrafo Por exemplo esse codigo aqui:

html += "var a=document.getElementsByTagName('a');";

eu levaria uns 3 dias inteiros pra memorizar isso de cabeça, fora outros exemplos. Tem algum macete pra programar isso?

Papibakigrafo · 19 de dezembro de 2016

Se você não souber o básico, você não vai conseguir mesmo @lucianolcoa!

E esse script está comentado, que é apenas para quem usa o bootstrap + tela de inicio do Safari (iphone / ipad). Se não for usar, pode apagar esse script!

var a=document.getElementsByTagName('a');

Todos os elementos <a> da página, ele declara como variável a.

ViniciusKruz · 19 de dezembro de 2016

1 hora atrás, lucianolcoa disse:

eu levaria uns 3 dias inteiros pra memorizar isso de cabeça, fora outros exemplos. Tem algum macete pra programar isso?

Não se preocupe em memorizar, basta você ir pesquisando e fazendo seu sistema funcionar, desta forma naturalmente vai ficando memorizado. A única preocupação que você tem que ter nesse momento é em compreender o que o código faz e não decorar.

Papibakigrafo · 19 de dezembro de 2016

Alguém saberia me dizer como criar um botão automático, com o clique de um botão e salvar na EEPROM?

ViniciusKruz · 20 de dezembro de 2016

@Papibakigrafo

Para enviar dados com um botão tem que criar um Form ou então uma função javascript que pega o elemento e envia para onde você quiser, ou ainda, você pode também juntar os dois(JS+form). O interessante de usar o JS é poder capturar uma resposta do servidor(ESP), seja de sucesso ou de erro.

adicionado 1 minuto depois

Desculpa, não havia entendido sua pergunta rsrsrs.

Você fala criar automático, em tempo de execução?

Papibakigrafo · 20 de dezembro de 2016

@ViniciusKruz criar em até sei com o append. Mas por exemplo, no código tem um padrão! Queria fazer algo aromático, vamos supor: eu conectar um relê numa GPIO qualquer e aparecer um botão no HTML. Tem como fazer isso ou seria bem complicado?

alexandre.mbm · 20 de dezembro de 2016

12 horas atrás, lucianolcoa disse:

@papibakigrafo por exemplo esse codigo aqui:

html += "var a=document.getelementsbytagname('a');";

eu levaria uns 3 dias inteiros pra memorizar isso de cabeça, fora outros exemplos. tem algum macete pra programar isso?

treine fora do ambiente embarcado. ou melhor, prototipe a tela. só html, javascript e css. sem ter de colocar pra rodar em microcontrolador.

adicionado 1 minuto depois

@papibakigrafo , você quis dizer "automágico"!

ViniciusKruz · 20 de dezembro de 2016

@Papibakigrafo Tem como você fazer uma função JS que a cada segundo envia uma requisição para o ESP e ele informa quais botões estão "online", uma vez que a função tenha esta informação, ela pode fazer o que você quiser, inclusive o botão já pode até esmo existir na página, só que fica oculto se o GPIO estiver livre, isso na parte do cliente(navegador), já na parte do ESP, você teria que arranjar uma forma de detectar esse relé, ou chave, ou seja lá o que for. Daria por exemplo pra colocar um GPIO para acionar o relé e outro GPIO que ficaria em circuito-aberto, mas ao conectar o relé, esse circuito fecharia. Seria uma ideia né, não sei se seria das melhores, mas pode dar certo.

Papibakigrafo · 20 de dezembro de 2016

kkkkkk seria mais ou menos isso! Não sei, mas existe, algum comando ou exemplo que "leia" os pinos? Se quando há algo conectado, ele tem um valor, e quando não tem, exibe um outro valor?

ViniciusKruz · 20 de dezembro de 2016

@Papibakigrafo Com certeza kkkkk, é a mesma coisa de ligar um botão em um GPIO, o ESP fica chegando o tempo todo se mudou de estado, pega um exemplo qualquer aí de um botão físico que será o mesmo princípio.

Papibakigrafo · 20 de dezembro de 2016

@ViniciusKruz ahh sim, entendi. Mas no caso, dele apenas estando ligado no GPIO5, por exemplo, ele nao tem um valor diferente não ne?

alexandre.mbm · 20 de dezembro de 2016

Talvez um valor analógico pudesse ser diferenciado.

Mas porque você não pensa um "AND lógico" com outro pino que serviria apenas para sinalizar a presença? Caso você tenha dois conjuntos, um poderia ser identificado por nível alto e outro por nível baixo (ou ausência). O que acha? Imagine que seu módulo de sensor teria um pino sempre ON, só para indicar a presença de si.

Qual seria a corrente mínima para a detecção de INPUT de nível lógico alto?

Citação

Input pins make extremely small demands on the circuit that they are sampling, equivalent to a series resistor of 100 megohm in front of the pin.

Fonte: Properties of Pins Configured as INPUT

Citação

And to clarify, you do not "input" current into a pin. The pin decides how much current to draw in response to an applied voltage. If your applied voltage is in the range 0V-5V then the amount of current that will flow into the pin is very close to 0. Just make sure you configure the analog pin as an input, and not an output.

Fonte: Maximum Current/Voltage into an analog pin on an Arduino Uno

Ou seja, você praticamente não estaria consumindo energia extra...

Se não se incomoda em gastar um pino analógico, poderia identificar seus módulos regulando a tensão identificadora de cada um possível.

Papibakigrafo · 20 de dezembro de 2016

@alexandre.mbm meu nivel não me permite tal programação kkkkkkk

Eu até pensei em algo mais "fácil"... vou ver se consigo hoje e depois posto aqui!

ViniciusKruz · 20 de dezembro de 2016

7 horas atrás, Papibakigrafo disse:

ahh sim, entendi. mas no caso, dele apenas estando ligado no gpio5, por exemplo, ele nao tem um valor diferente não ne?

é possível sim, mas isso seria uma tremenda gambiarra, usar um único gpio, imagina só o caso de uso:

situação sem o relé conectado:

o gpio deve ficar configurado como entrada e lendo um estado "aterrado" e ao conectar o relé, a base do transistor deve retornar uma pequena carga positiva, assim , estado "aterrado" seria alterado para "positivo", daí é só você mudar o estado do gpio para "saída" e acionar o relé, só que no meu entendimento, só seria possível checar se ele estiver conectado se ele não estiver atracado(ligado), porque não seria possível o gpio checar se tem o relé conectado uma vez que o mesmo está acionado, pra isso teria que desligar o gpio para mudar ele para entrada e verificar se tem relé, entendeu? resumindo, olha a imagem em anexo que deve entender melhor a gambiarra.

adicionado 1 minuto depois

na teoria seria isso, mas na prática é que tem que ver se funciona.

Papibakigrafo · 20 de dezembro de 2016

É, deixa quieto! Já resolvi o que irei fazer: irei deixar a opção de escolher a quantidade de relês, e de acordo com essa quantidade, ele pega a variável e com JS, ele cria os botões com o append! =)