Nos últimos dias, estive trabalhando em um projeto IoT, buscando uma forma fácil de exibir imagens à minha escolha e poder alterá-las com praticidade.
Inicialmente, só consegui gravar as imagens na memória do ESP8266, mas era muito chato e demorado trocá-las, pois dependia de regravar a ROM “firmware” do dispositivo. Além disso, a conversão das imagens era trabalhosa e demorada, exigindo que eu redimensionasse e convertesse as imagens manualmente em alguns sites online. Falei mais sobre isso neste artigo.
Para resolver esse problema, conectei o ESP8266 à minha rede local e criei um serviço web para cadastrar as imagens e servir como API para o dispositivo.
Desafios
Redimensionamento e conversão para o formato correto
Para solucionar esse problema, criei uma página dedicada a essas alterações, permitindo obter o código já traduzido para o Arduino!
Servidor para consulta
Precisei desenvolver uma API para que o ESP8266 pudesse buscar as imagens conforme eu quisesse alterá-las. Para isso, criei uma API simples em PHP 7.4 e utilizei o SQLite como banco de dados.
Página de cadastro
Criei uma página simples para cadastrar e modificar as configurações do display, utilizando JavaScript puro, HTML e CSS. Para a estilização, usei o Bootstrap 5.
Problemas ao longo do processo
Espaço na memória RAM
Durante o desenvolvimento, tive problemas ao tentar buscar as imagens e gravá-las na memória do ESP8266. Como ele tem pouca RAM, travava ao buscar os dados e tentar convertê-los de JSON para salvar na memória FLASH. Para resolver isso, implementei paginação no endpoint que entrega os dados das imagens, permitindo que o ESP8266 obtenha apenas o máximo que consegue processar sem travar e salve na FLASH. Isso resolveu o problema de RAM, mas gerou outro desafio no servidor.
Cloudflare e negação de serviço
Como minha API passava pelo Cloudflare, ele interpretava as requisições do ESP8266 como um ataque DDoS sempre que muitas imagens eram solicitadas de uma vez. Para resolver esse problema, eu poderia adicionar esse endpoint nas configurações do próprio Cloudflare, mas meu plano não permitia essa alteração. Então, decidi criar um subdomínio exclusivo para essa finalidade e configurei o Cloudflare para encaminhar o tráfego sem proxy, evitando que ele monitorasse e limitasse a quantidade de requisições feitas à API.
Erros de sobrecarga
Mesmo após essa mudança, meu servidor ainda recebia muitas requisições consecutivas e apresentava alguns erros na paginação dos dados. O problema era que, para paginar cada imagem, o sistema fazia consultas repetidas ao banco de dados a cada requisição, aumentando a sobrecarga.
A solução foi criar um cache na memória do servidor. Para isso, utilizei o Redis, permitindo armazenar as imagens temporariamente na memória. Assim, enquanto as imagens estiverem sendo usadas na paginação, elas permanecem em cache, eliminando a necessidade de acessar o banco de dados constantemente.
Próximos passos
Facilitar o cadastro de imagens
Atualmente, o cadastro é muito trabalhoso, pois exige que eu converta as imagens, obtenha os dados em RGB565 e cadastre manualmente na biblioteca de imagens. Quero simplificar esse processo para que o sistema automaticamente redimensione, converta e cadastre as imagens ao selecioná-las.
Melhorar a forma de buscar dados pelo ESP8266
Quero otimizar o código para buscar os dados com mais frequência, pois, atualmente, as informações só são atualizadas após o carrossel de imagens terminar. Para isso, preciso implementar melhorias no codigo que utilizo no ESP8266.
Esse é mais um dos meus projetos, espero que tenha gostado da leitura.
Se ficou alguma duvida ou tem uma sugestão, deixe ai nos comentarios!