Controlando seu Arduino com HTML / Javascript da maneira mais fácil: 8 etapas

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

Este tutorial mostra como controlar um arduino com um retorno de chamada ajax de um adafruit Huzzah usando apenas funções javascript. Basicamente, você pode usar javascript na página html que permitirá que você escreva facilmente interfaces html com funções javascript simples que utilizam um retorno de chamada ajax. Para permitir que o ESP8266 se comunique com o arduino. Portanto, todos os pinos podem ser definidos a partir de uma função javascript. Da mesma forma, também podemos ler o valor de qualquer pino usando uma função javascript. Espero que isso ajude a tornar mais fácil controlar um arduino a partir de um documento html. Percebi que existem muitas pessoas por aí que podem escrever html. A maioria dos quais não quer se incomodar em tentar fazer um aplicativo para celular com java ou xcode ou algum outro framework. Isso tornará tudo mais fácil para as pessoas, porque tudo o que precisam fazer é usar uma função javascript para definir e ler os valores dos pinos. Por exemplo, não é muito mais fácil de escrever

Ligar

Para ativar um botão. A beleza é que não há outra programação arduino envolvida além de declarar o pinMode (12, INPUT); Em sua função de configuração. Contanto que o pino seja declarado, o javascript pode ser usado para todo o resto.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Isso é tudo que você precisa fazer para obter o valor do pino analógico 0 e retornar o resultado para o div. Portanto, esta deve ser uma maneira fácil para as pessoas criarem páginas html que controlem o arduino. Além de criar uma interface para que os pinos do Arduino possam ser configurados e lidos com javascript.

Etapa 1: O que você precisa

Construí este projeto para usuários que desejam controlar seu arduino com uma página html em um ESP8266. O objetivo deste projeto é criar um método simples para definir os valores dos pinos em seu arduino com uma função javascript. Para examplate, onclick = "SetPin (12, 1, 0)" definirá o pino 12 em seu arduino como alto.

Para este tutorial, você precisará dos seguintes itens para seguir exatamente o mesmo. No entanto, presumo que ele deva funcionar na maioria das combinações de arduino e ESP8266. No entanto, para acompanhar exatamente o que tenho aqui, você precisará dos seguintes componentes.

Arduino Uno - Deve funcionar com qualquer arduino compatível que tenha uma serial Rx TxAdafruit Huzzah Breakout Board USB para cabo serial 4 LED de baixa potência Analog Turpidity testor - qualquer sensor analógico que forneça saída analógica fará Wire Wifi Router Cell Phone With Mobile Browser Arduino Libraries.

Etapa 2: Preparando o ID do Arduino

Este projeto requer novas bibliotecas do arduino e algumas configurações e por uma questão de tempo. Não vou colocar uma captura de tela de cada tela e vou apenas percorrer o que você precisa para configurar isso e colocá-lo em execução. Tentei tornar isso o mais fácil possível para o usuário.

O código usa várias bibliotecas para funcionar. Primeiro, vamos nos concentrar na configuração do arduino para o ESP8266. Estou usando o Adafruit Huzzah neste exemplo, porque considero os produtos da adafruit os mais confiáveis e têm o melhor suporte. Contanto que você não tente obter suporte do servidor Adafruit Discord. Você terá muito mais sorte se conseguir ajuda nos fóruns de suporte.

De qualquer forma, estou usando as seguintes bibliotecas no ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONeste não é um tutorial sobre como baixar e instalar bibliotecas, no entanto, essas são as bibliotecas usadas no HUZZAH. Portanto, encontre-os e instale-os. Você também precisará instalar as definições de placa para o HUZZAH, então se você for em ARQUIVO> Preferências Na caixa que diz URLs adicionais do gerenciador de placas, adicione o seguintehttps://arduino.esp8266.com/stable/package_esp8266c… se você já tiver algo neste campo, certifique-se de adicionar uma vírgula para adicionar um URL de placa adicional. Clique ok agora

Ferramentas> Placa> Gerenciador de placas Em seguida, procure o ESP8266 e instale o ESP8266 pela comunidade ESP8266.

Ótimo, agora vamos ter certeza de que temos tudo o que precisamos para fazer o código do Arduino funcionar. No lado do arduino, o próprio arduino usa apenas 2 bibliotecas para este tutorial.

SoftwareSerialArduinoJSONQue você já deveria ter.

Etapa 3: Preparando o ESP8266

Agora vamos colocar o código no ESP8266 (Adafruit HUZZAH) e prepará-lo para conexão com o Arduino. Descompacte o código do HUZZAH e abra o esboço. Nas linhas 11 e 12, altere o SSID e a senha de sua conexão WIFI na rede local. Você notará que existem 2 arquivos, o arquivo de esboço e o arquivo index.h. O arquivo index.h é onde o html é armazenado e será exibido em seu telefone.

Depois de definir o SSID e a senha corretos para o seu wi-fi, você pode compilar o código e carregá-lo no ESP8266. No HUZZAH você deve manter pressionado o botão rotulado como GPIO0 e clicar no botão Rest, depois soltar o botão GPIO0 para colocar o chip no modo bootloader. Se o chip foi colocado no modo bootloader com sucesso, uma luz vermelha acenderá indicando que o chip está no modo bootloader.

Para conectar ao ESP8266, você precisará de um cabo serial ou USB para adaptador serial ou chip FDTI. Neste caso, estou usando o cabo da adafruit conforme indicado nas instruções. No entanto, você pode se conectar ao chip de várias maneiras, usando TTL nos pinos Tx e Rx. Espero que as pessoas que estão vendo isso saibam como conectar-se ao chip para carregar o código nele. De qualquer forma, vá em frente e atualize o chip com o código no arquivo zip que está anexado a esta etapa.

Etapa 4: Preparando o Arduino

Para carregar o código no arduino, altere a definição da placa para Arduino / Genuino Uno. Em seguida, descompacte o arquivo que está anexado a esta etapa. Em seguida, carregue-o no ardunio. Muito simples, na verdade, todo o trabalho árduo já foi feito para você. Eu já passei por um processo de tentativa e erro, então tudo que você precisa fazer é enviar o código.

Etapa 5: conectando tudo junto

Ok então para a fiação eu tenho uma foto acima do que tenho aqui.

Conecte Tx no Huzzah ao pino 2 no arduino. Connect Rx no Huzzah ao pino 3 no arduino. Criei outro soquete serial nos pinos 2 e 3 no arduino para liberar o console serial padrão.

Conecte o Pin V + e En a 5v do arduino. - O adafruit Huzzah tem um regulador de voltagem de 3,3 V integrado, portanto, conectar esses pinos desta forma pode não funcionar com todos os módulos ESP8266. Você pode precisar conectar seu próprio regulador de tensão. Eu recomendo usar o Huzzah se você quiser apenas fazer a coisa funcionar facilmente. Conecte o GND ao GND do arduino

Nos pinos 12, 11, 9, 8 no fio arduino em seus LEDs, usei LEDs de baixa potência aqui porque os que consomem muita corrente podem consumir muita energia para manter este experimento simples.

Do que no pino 0 analógico A0 no arduino, conectei a linha de saída do meu testador de turbidez. No entanto, você pode conectar a saída de basicamente qualquer sensor que forneça uma leitura analógica. Isso é tudo que você precisa fazer para conectar isso.

Etapa 6: Acessando a página da web

Agora que você tem o arduino conectado e tudo carregado em suas placas, você precisa ser capaz de visualizar o html em seu telefone celular. Agora quero que você se conecte ao mesmo roteador wi-fi para o qual configurou o SSID e a senha no código do Huzzah. Em seguida, você precisa descobrir o endereço IP que o seu roteador atribuiu ao seu dispositivo. Normalmente, se você efetuar login na configuração dos roteadores, deverá haver uma lista de clientes. Isso mostra os endereços IP de todos os dispositivos conectados à sua conexão Wifi. No entanto, se você não conseguir encontrar esse endereço IP, poderá desconectá-lo do arduino e executá-lo com o cabo serial novamente. Se você abrir o console serial no dispositivo, ele imprimirá o endereço IP do dispositivo no console serial, caso você não consiga localizá-lo de outra forma. De qualquer forma, uma vez que você está conectado à mesma rede Wifi com seu telefone celular. Em seguida, aponte seu navegador móvel para o endereço IP do Huzzah. O que provavelmente se parece com algo semelhante a isso. https://192.168.0.107 ou algo muito semelhante. Aí coloquei uma página básica que permitirá ligar e desligar os 4 Leds bem como ler o valor do sensor analógico.

Etapa 7: Usando Javascipt

No arquivo denominado index.h no esboço do ESP8266Code, ele deve aparecer como uma guia separada no editor do Arduino. Você pode ver o exemplo básico que fiz aqui. Basicamente, a forma como funciona é assim.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}, {IsAnalog 1 Yes 0 No})

Isso definirá o valor do pino digital 12 para alto

SetPin (4, 0, 0);

Isso definirá o valor do pino digital 4 para baixo

SetPin (A2, 439, 1) Isso definirá o valor do pino analógico 2 para 439

Da mesma forma, a função GetJSON retornará um valor solicitado de um pino e o colocará em um html eliminado com o ID de div especificado.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element to return result})

Isso enviará uma solicitação ao arduino solicitando o valor do pino analógico 0 e retorne o resultado em Div com ID resp_iGetJSON (12, 0, 'mydiv'); Isso irá pedir ao arduino para obter o valor do pino digital 0 e retornar o resultado em um elemento html com um Id de mydiv

Etapa 8: Suporte

Espero que meu script ajude aqueles de vocês que desejam usá-lo. Usei um exemplo de html muito básico aqui com a esperança de que outras pessoas explorem todos os recursos dele que eu não posso. No entanto, isso deve demonstrar como o ajax pode ser usado para controlar um arduino sem carregamentos de página html e coisas dessa natureza.

Se você tiver algum comentário, sinta-se à vontade para me perguntar que farei o melhor que puder para responder. Eu gostaria de expandir a funcionalidade disso um pouco mais, mas fiquei sem tempo e dinheiro. No entanto, estou trabalhando em uma implementação mais robusta disso, que armazena os arquivos em um servidor da web normal, em vez de no ESP8266.

Obrigado por dedicar seu tempo para ver meu código.

John Anderson me mande um e-mail

Vermont Internet Design LLC

www.vermontinternetdesign.com