Carregue sua página da Web de configuração do Arduino / ESP a partir da nuvem: 7 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Ao criar um projeto Arduino / ESP (ESP8266 / ESP32), você pode simplesmente codificar tudo. Porém, com mais frequência, algo acontece e você acaba reconectando seu dispositivo IoT ao IDE novamente. Ou você apenas tem mais pessoas acessando a configuração e deseja fornecer uma IU em vez de esperar que eles entendam o funcionamento interno.

Este instrutível dirá como colocar a maior parte da IU na nuvem em vez de no Arduino / ESP. Fazendo dessa maneira, você economiza espaço e uso de memória. Um serviço que fornece páginas da web estáticas gratuitas é particularmente adequado como "nuvem", como o GitHub Pages, mas outras opções provavelmente funcionarão também.

Construir a página da web dessa forma requer que o navegador do usuário passe por 4 etapas:

1. Solicite o URL raiz do Arduino / ESP
2. Receba uma página da web muito simples, informando para:
3. Solicite um arquivo JavaScript da nuvem
4. Receba o código que constrói a página real

Este Instructable também explicará como interagir com o Arduino / ESP assim que a página estiver pronta de acordo com as etapas acima.

O código criado neste instrutível também pode ser encontrado no GitHub.

Pré-requisitos

Este instrutível pressupõe que você tenha acesso a certos materiais e algum conhecimento prévio:

• Um Arduino (com acesso à rede) / ESP
• Um computador para conectar o acima
• Acesso WiFi conectado à internet
• O IDE Arduino instalado (também para o ESP32)
• Você sabe como fazer o upload de um esboço para o seu dispositivo IoT
• Você sabe como usar Git e GitHub

Etapa 1: começando com um esboço de servidor da web simples

Começaremos o mais simples possível e deixaremos crescer a partir de agora.

#incluir

const char * ssid = "yourssid"; const char * password = "yourpasswd"; Servidor WiFiServer (80); void setup () {// Inicializar serial e esperar a porta abrir: Serial.begin (115200); while (! Serial) {; // aguarde a conexão da porta serial. Necessário apenas para porta USB nativa} WiFi.begin (ssid, senha); while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serial.print ("."); } Serial.println ("WiFi conectado."); Serial.println ("endereço IP:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// escuta os clientes de entrada WiFiClient client = server.available (); // escuta os clientes de entrada bool sendResponse = false; // definido como verdadeiro se quisermos enviar uma resposta String urlLine = ""; // faça uma String para conter a URL solicitada if (client) // se você obtiver um cliente, {Serial.println ("New Client."); // imprime uma mensagem pela porta serial String currentLine = ""; // faz uma String para conter os dados de entrada do cliente enquanto (client.connected ()) // faz um loop enquanto o cliente está conectado {if (client.available ()) // se há bytes para ler do cliente, {char c = client.read (); // lê um byte, então if (c == '\ n') // se o byte é um caractere de nova linha {// se a linha atual está em branco, você tem dois caracteres de nova linha em uma linha. // esse é o fim da solicitação HTTP do cliente, então envie uma resposta: if (currentLine.length () == 0) {sendResponse = true; // está tudo bem! pausa; // interromper o loop while} else // se você obteve uma nova linha, limpe currentLine: {if (currentLine.indexOf ("GET /")> = 0) // esta deve ser a linha de URL {urlLine = currentLine; // salve para uso posterior} currentLine = ""; // redefine a string da linha atual}} else if (c! = '\ r') // se você obteve qualquer outra coisa além de um caractere de retorno de carro, {currentLine + = c; // adiciona-o ao final da currentLine}}} if (sendResponse) {Serial.print ("Cliente solicitado"); Serial.println (urlLine); // Os cabeçalhos HTTP sempre começam com um código de resposta (por exemplo, HTTP / 1.1 200 OK) // e um tipo de conteúdo para que o cliente saiba o que está por vir, em seguida, uma linha em branco: client.println ("HTTP / 1.1 200 OK"); client.println ("Tipo de conteúdo: texto / html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // se o URL for apenas "/" {// o conteúdo da resposta HTTP segue o cabeçalho: client.println ("Hello world!"); } // A resposta HTTP termina com outra linha em branco: client.println (); } // feche a conexão: client.stop (); Serial.println ("Cliente desconectado."); }}

Copie o código acima ou baixe-o do commit no GitHub.

Não se esqueça de alterar o SSID e a senha para corresponder à sua rede.

Este esboço usa o conhecido Arduino

configurar()

e

ciclo()

funções. No

configurar()

a conexão serial para IDE é inicializada, assim como o WiFi. Assim que o WiFi estiver conectado ao SSID, o IP é impresso e o servidor web é iniciado. Em cada iteração do

ciclo()

a função do servidor web é verificada para clientes conectados. Se um cliente estiver conectado, a solicitação é lida e a URL solicitada é salva em uma variável. Se tudo parecer bem, uma resposta do servidor ao cliente é realizada com base na URL solicitada.

AVISO! Este código usa a classe Arduino String para mantê-lo simples. Otimizações de string não estão dentro do escopo deste instrutível. Leia mais sobre isso no instrutivo sobre Arduino String Manipulation Using Minimal Ram.

Etapa 2: Criação do JavaScript remoto

O Arduino / ESP dirá ao navegador do visitante para carregar esse arquivo. Todo o resto será feito por este código JavaScript.

Neste Instructable faremos uso do jQuery, isso não é estritamente necessário, mas tornará as coisas mais fáceis.

Este arquivo precisa estar acessível a partir da web, um servidor de páginas estáticas é suficiente para fazer isso funcionar, por exemplo, páginas do GitHub. Então você provavelmente vai querer fazer um novo repositório GitHub e criar um

gh-pages

filial. Coloque o seguinte código dentro de um

.js

arquivo no repositório no branch correto.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // criar um elemento script.src = cdnjsURL + 'jquery / 3.2.1 / jquery.min.js'; // definir o src = "" attribute script.onload = function () // função de retorno de chamada, chamada assim que o arquivo jquery é carregado {$ = window.jQuery; // torna jQuery acessível como a $ variável global init (); // chama a função init}; documento. getElementsByTagName ('head') [0].appendChild (script); // adicione a tag criada ao documento, isso iniciará o carregamento do jQuery lib}) (); function init () {// Concluído o carregamento do jQuery, adicionarei o código aqui mais tarde …}

Copie o código acima ou baixe-o do commit no GitHub.

Verifique se o seu arquivo está acessível. No caso das páginas do GitHub, vá para https://username.github.io/repository/your-file.j… (substitua

nome do usuário

,

repositório

e

your-file.js

para os parâmetros corretos).

Etapa 3: Carregando o arquivo JavaScript remoto no navegador de visitantes

Agora que temos tudo configurado, é hora de fazer a página da Web carregar o arquivo JavaScript remoto.

Você pode fazer isso alterando a linha 88 do esboço de

client.println ("Olá, mundo!"); t

client.println ("");

(mudar o

src

para apontar para seu próprio arquivo JavaScript). Esta é uma pequena página da web html, tudo o que faz é carregar o arquivo JavaScript no navegador do visitante.

O arquivo alterado também pode ser encontrado no commit correspondente no GitHub.

Faça upload do esboço ajustado para o seu Arduino / ESP.

Etapa 4: Adicionando novos elementos à página

Uma página vazia é inútil, então agora é hora de adicionar um novo elemento à página da web. Por enquanto, este será um vídeo do YouTube. Neste exemplo, alguns códigos jQuery serão usados para fazer isso.

Adicione a seguinte linha de código ao

iniciar()

função:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({largura: '608px', altura: '342px'}). AppendTo ('corpo');

Isso criará um

iframe

elemento, defina o correto

src

atribua e defina o tamanho usando css e adicione o elemento ao corpo da página.

O jQuery nos ajuda a selecionar e alterar facilmente os elementos da página da web, algumas coisas básicas a saber:

• $ ('corpo')

• seleciona qualquer elemento já existente, outros seletores css também podem ser usados

• $(' ')

  cria um novo

• elemento (mas não o adiciona ao documento)

• .appendTo ('. main')

• anexa o elemento selecionado / criado a um elemento com classe css 'main'

• Outras funções para adicionar elementos são

  .acrescentar()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .inserir()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .depois de()

  ,

  .antes()

Dê uma olhada no commit correspondente no GitHub se algo não estiver claro.

Etapa 5: elementos interativos

Um vídeo é divertido, mas o objetivo deste instrutível é interagir com o Arduino / ESP. Vamos substituir o vídeo por um botão que envia informações ao Arduino / ESP e também aguarda uma resposta.

Vamos precisar de um

$('')

para adicionar à página e anexar um ouvinte de eventos a ela. O listener de eventos chamará a função de retorno de chamada quando o evento especificado acontecer:

$ (''). text ('um botão'). on ('click', function ()

{// o código aqui será executado quando o botão for clicado}). appendTo ('body');

E adicione uma solicitação AJAX à função de retorno de chamada:

$.get ('/ ajax', função (dados)

{// o código aqui será executado quando a solicitação AJAX for concluída});

Assim que a solicitação for concluída, os dados retornados serão adicionados à página:

$('

').text (data).appendTo (' body ');

Em resumo, o código acima cria um botão, adiciona-o à página da web, quando o botão for clicado uma solicitação será enviada e a resposta também será adicionada à página da web.

Se esta é sua primeira vez usando callbacks, você pode querer verificar o commit no GitHub para ver como tudo está aninhado.

Etapa 6: responder ao elemento interativo

Claro, a solicitação AJAX requer uma resposta.

Para criar a resposta correta para o

/ ajax

url, precisamos adicionar um

else if ()

logo após o colchete de fechamento da instrução if que verifica o

/

url.

else if (urlLine.indexOf ("GET / ajax")> = 0)

{client.print ("Oi!"); }

No commit do GitHub, também adicionei um contador para mostrar ao navegador que cada solicitação é única.

Etapa 7: Conclusão

Este é o fim deste instrutível. Agora você tem um Arduino / ESP servindo uma pequena página da Web que informa ao navegador do visitante para carregar um arquivo JavaScript da nuvem. Depois que o JavaScript é carregado, ele cria o restante do conteúdo da página da Web, fornecendo uma IU para o usuário se comunicar com o Arduino / ESP.

Agora fica por conta da sua imaginação criar mais elementos na página web e salvar as configurações localmente em algum tipo de ROM (EEPROM / NVS / etc).

Obrigado por ler e sinta-se à vontade para enviar seus comentários!