ESP32, Waijung 2 e Model-Based Design

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. A arquitetura desejada do sistema final

2. Entendendo a geração automática de código para ESP32

3. Resultados

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