_Negativo_pn.png)
Neste blog, vamos usar uma placa de desenvolvimento baseada em ESP32 para piscar um LED (diodo emissor de luz), com uma interface Web para enviar os dados do cliente para o servidor.
Porém, a novidade para muitos leitores será a forma como iremos programar a ESP32. Não iremos usar programação em linguagem C/C++, tipicamente abordada em IDE’s como Arduino, VS Code etc.
Faremos uso de ferramentas e conceitos de uma metodologia de desenvolvimento rápido de projeto técnicos em engenharia de sistemas, a qual é chamada de Model-Based Design (MBD), ou seja, o projeto baseado em modelos.
Sumário
1. Conhecendo a topologia do sistema
O nosso objetivo é enviarmos o estado ‘ON’ ou ‘OFF’ do LED, via uma interface de navegador Web. Assim, o cliente (navegador web e usuário na interface web) irá enviar um comando, via método POST, com o protocolo HTTP para a ESP32, que aqui está desempenhando a função de servidor web. A ESP32, ao receber esse valor (zero para desligado e um para ligado), irá convertê-lo em uma sinal digital de tensão elétrica, e assim teremos o controle do estado LED com uma interface de cliente comum nos dias atuais, a de navegadores web. Um esquemático da topologia pode ser visto abaixo:
2. Entendendo a geração automática de código para ESP32
É aqui que entra o Model-Based Design propriamente dito. O sistema mostrado acima pode ser programado em C/C++ a nível de servidor (ESP32), porém, esse método tradicional pode gerar resultados negativos quando a necessidade é a entrega rápida da solução. Sendo assim, vams abstrair o código embarcado, trabalhando em uma camada mais alta do sistema. Para isso, nós da MCBTI temos a nossa própria biblioteca de desenvolvimento, a Waijung 2. Com ela, podemos configurar todas as interfaces a ESP32, podemos gerar o algoritmo do controle do brilho do LED e podemos gravar esse código na ESP32 sem termos contato com a linguagem de baixo-nível, C/C++, para sistemas microcontrolados.
Dito isso, o modelo do sistema é representado dentro de um diagrama de blocos no Simulink, conforme a figura abaixo:
No bloco de Setup do chip, as informações básicas de qual versão da ESP32 estamos usando, assim como a interface USB para programar o chip estão presentes:
No bloco de Setup da memória SPIFFS, estão as informações necessárias para uso desse recurso do chip:
Nesse bloco, indicamos pelo ‘Folder path’ onde estão os arquivos .html e .js que a ESP32 (servidor) usará para enviar ao cliente (navegador web), a fim de que a página possa ser renderizada (.html) e os recursos utilizados (.js).
Os blocos de Setup do acesso da ESP32 à rede Wi-Fi já existente (Wi-Fi station mode) são apenas blocos de conversão de strings:
Feito isso, o Wi-Fi Setup block se encarrega de programar a ESP32 para se conectar à rede desejada, conforme a seguinte configuração da minha rede interna:
No caso, o endereço ‘192.168.3.50’ é o IP que a ESP32 terá ao se conectar na rede desejada, cujo endereço de gateway é ‘192.168.3.1’.
Por fim, após essa conexão ser feita, entramos no subsistema chamado ‘HTTP server subsystem’, o qual explicaremos abaixo.
No bloco ‘HTTP Server’, configuramos a ESP32( servidor) para ouvir a porta 80 da nossa interface de rede. No bloco ‘HTTP GET HANDLER’, configuramos a ESP32 para ler os arquivos html e JavaScript necessários para que o cliente consiga renderizar a página corretamente. No caso, para a implementação das funcionalidades que queremos, dividimos o projeto em 3 arquivos:
index.html, contendo o texto do HTML a ser lido pelo navegador web.
script.js, contendo a função JavaScript que irá enviar ao servidor se o botão de ON/OFF está ligado ou desligado, e isso permitirá ligar o LED.
E esses arquivos são gravados na memória SPIFFS da ESP32. Para isso, a configuração pelo bloco ‘HTTP GET HANDLER’ é necessária:
Assim, quando for requisitado o acesso à página inicial pelo navegador web, a ESP32 irá ler o arquivo index.html e enviar para o cliente. Quando a função JavaScript ‘postData’ for chamada pela página do clientes, a ESP32 irá ler o arquivo postData.js e ver o que veio de informação (LED ON ou OFF). Esse valor é convertido em um nível lógico alto ou baixo, pelos GPIOs da ESP32, a fim de controlar o LED.
3. Resultados
Nós utilizamos o ‘Simulink - Embeeded Coder’ para gerar o código embarcado customizado para a ESP32, com base nos modelos de diagramas de bloco que mostramos nas etapas acima.
Essa geração é automática, e a gravação no chip da ESP32 também, de modo que o desenvolvedor não precisa se preocupar com as etapas mais baixo nível de gravar o código na placa.
Ao digitar o IP do nosso servidor ESP32, ‘192.168.3.50’ na barra de endereços do navegador, a seguinte página é renderizada:
Agora, o usuário clica no botão a fim de controlar o LED ligado à saída digital, GPIO3, da ESP32:
Na imagem acima, a placa de controle do LED é baseada em um microcontrolador ESP32, sendo que o fio preto está ligado ao GND analógico e o fio laranja está ligado ao GPIO3 da ESP32.
Autor: Renato Giugni