Construa o App Fridgeye com Display Nextion: Guia Passo a Passo

Componentes e Materiais

Componente	Quantidade
Arduino UNO	1
Fotoresistor (LDR)	1
Resistor 3,3 kΩ	1
Display Touch Nextion Enhanced 3,5"	1

Aplicativos e Serviços Online

• Nextion GUI Editor
• Arduino IDE
• GIMP (GNU Image Manipulation Program)

Sobre o Projeto

Em meados deste ano, alguns estudantes de design da Alemanha lançaram um Kickstarter satírico para prototipar o Fridgeye: um belo sensor de luz para sua geladeira. Dado que geralmente esperamos projetos de hardware absurdos no Kickstarter, combinado com o esforço da equipe em torná-lo parecer real, não é surpresa que as pessoas não soubessem o que pensar. Confesso que fui fã do projeto desde o início, não porque esteja morrendo de vontade de saber o que a luz da minha geladeira está fazendo. O Fridgeye é um projeto perfeitamente dimensionado para começar no mundo da Internet das Coisas (IoT), com potencial de crescimento.

Construa o Dispositivo Fridgeye

A maior parte deste guia foca em fazer o app Fridgeye rodar com o display touch Nextion conectado a um Arduino, mas antes precisamos de um dispositivo que realmente detecte luz. Sem problemas. Vamos levar 5 minutos para construir um. Prometo que não demora nem um segundo a mais. Tudo o que você precisa é: Arduino, protoboard, fotoresistor e resistor de 3,3 kΩ. Vamos ligar conforme o esquema abaixo. Por enquanto, ignore as conexões do display. Foque apenas no Arduino, resistor e fotoresistor.

Eu tinha um ProtoShield disponível, então coloquei uma mini protoboard nele para manter tudo em um pacote empilhado, mas ainda com a liberdade de uma protoboard. Ficou assim:

Ok, menti: levou uns 4 minutos. Use o minuto restante para carregar este sketch simples no Arduino e observar a saída serial do sensor de luz no Monitor Serial da Arduino IDE.

void setup() { Serial.begin(9600); }
void loop() {
  int val = analogRead(A0);
  Serial.println(val);
  delay(500);
}

Após gravar o Arduino, abra o Monitor Serial no menu Ferramentas. Certifique-se de que a taxa de transmissão (baud rate) está em 9600. Você verá um novo valor inteiro representando o nível de luz a cada meio segundo. Brinque um pouco: cubra o sensor, acenda e apague as luzes, tente apontar a lanterna do smartphone para ele. Observe os valores mudarem. Eles variam de quase 0 no escuro total a quase 1024 sob luz intensa.

O que é o App Fridgeye?

O app Fridgeye é o companheiro fiel do seu dispositivo Fridgeye. Acabaram os dias em que dispositivos funcionavam sozinhos. Hoje, no grandioso mundo da IoT, seu dispositivo não tem chance a menos que tenha um app para acompanhá. É como manteiga de amendoim e geleia, leite e cereal, ervilha e cenoura.

O app é bem simples. Se olharmos a página do Kickstarter, ele mostra literalmente a porcentagem de luz que o Fridgeye detecta, parecendo ser sempre 0 ou 100 por cento.

Tenho certeza de que podemos fazer melhor e usar aqueles 99 valores intermediários para que não se sintam excluídos. Vamos direto dos desenhos conceituais para o mundo real.

Primeiros Passos com o Display Nextion

Para este projeto, uso o display touch Nextion Enhanced 3,5". É um display touch resistivo completo, projetado para assumir o trabalho pesado de controle gráfico, permitindo que até dispositivos de entrada como o Arduino se comuniquem com ele via duas linhas seriais. Embora o display seja excelente, a documentação pode ser difícil de navegar, especialmente para iniciantes. Vamos caminhar juntos, passo a passo.

Modelo de Programação do Display

Se você já programou um Arduino para usar um display, provavelmente usou uma biblioteca gráfica simples que abstraía os comandos de baixo nível de desenho na tela. Embora úteis, essas bibliotecas ainda exigem que você faça muito do trabalho de "empurrar pixels" para desenhar coisas na tela. Os displays Nextion usam uma abordagem diferente, familiar se você conhece os padrões MVVM ou MVC. Essencialmente, a aparência do app é configurada inteiramente antecipadamente e armazenada no próprio display. Em tempo de execução, o Arduino referencia partes da UI usando IDs pré-atribuídos. O Arduino também recebe informações de volta do display, como eventos de toque, da mesma forma. Isso significa que, em vez de desenhar coisas em tempo de execução, o Arduino atua apenas como o maestro das views e controles. Se não fez sentido, aguarde mais um pouco enquanto avançamos.

Prepare a View

Como nosso app Fridgeye é simples, precisará de apenas uma página. O display Nextion, no entanto, suporta aplicações complexas com múltiplas páginas e transições. Seja para um app simples como o nosso ou um complexo, você usará o Nextion GUI Editor. É um editor WYSIWYG para a família de displays Nextion e nos ajudará a acertar o layout. Novamente, a documentação e a experiência inicial podem ser desafiadoras para iniciantes, mas uma vez que você pega o jeito, estará projetando layouts complexos rapidamente.

Antes de abrir o editor, precisamos preparar um ativo de background. Olhando nossa imagem de referência acima, vemos que a única coisa que mudará no display em tempo de execução é a porcentagem de luz detectada. O logo, cor de fundo e a barra verde na parte inferior são estáticos. Vamos criar uma imagem com esses itens para usar como background. Levei 5 minutos no GIMP e ficou assim:

O importante é fazer a imagem exatamente no tamanho necessário para sua tela. No meu caso, uso a tela de 3,5", que corresponde a 480 x 320 pixels. Foi exatamente esse o tamanho que fiz minha imagem no GIMP.

Usando o Editor Nextion

NOTA: O Editor Nextion requer o .NET Framework e atualmente só é suportado no Windows. Consegui rodá-lo sem problemas em uma Máquina Virtual Windows 10 via Parallels no meu MacBook. Não testei no Wine no Linux.

Os passos a seguir guiarão você na criação do layout do nosso app simples no Editor Nextion. Com o Editor aberto, execute:

1. Arquivo → Novo. Dê um nome e local ao projeto.
2. Uma janela pedirá para selecionar seu dispositivo. No meu caso, selecionei Enhanced e o modelo 3,5". NÃO CLIQUE EM OK. Continue no passo 3.
3. Clique na aba DISPLAY no canto superior esquerdo da janela. Selecione a direção de exibição 90 Horizontal.
4. Agora clique em OK.
5. Clique em Picture na Caixa de Ferramentas à esquerda. Isso adicionará o elemento p0 ao seu esboço.
6. No painel Picture/Font no canto inferior esquerdo, certifique-se de que a aba Picture está selecionada.
7. Clique no símbolo +.
8. Navegue até a imagem criada no GIMP que servirá de background para nosso app e clique em Abrir.
9. No painel de atributos à direita, dê duplo clique na área de valor do atributo pic. Uma janela de seleção de imagem abrirá com nosso background.
10. Selecione o background do app e clique em OK.
11. Clique em Text na Caixa de Ferramentas. Isso adicionará uma área de texto chamada t0 no canto superior esquerdo do display. Anote o valor do atributo id — você precisará depois ao programar o Arduino.
12. Arraste a área de texto para a posição desejada abaixo das palavras "Light Status" e redimensione-a para ocupar uma área grande.
13. Para corrigir o fundo branco, precisamos definir o background da área de texto como uma versão recortada do nosso background principal. Com t0 selecionado, altere o atributo sta no painel de atributos de cor sólida para crop image.
14. Dê duplo clique no valor do atributo picc da área de texto t0. Abrirá a janela de seleção de imagem. Selecione o background principal novamente e clique em OK. Isso torna o background da área de texto transparente.
15. Altere o atributo pco de t0 para a cor de fonte desejada. Usei uma cor personalizada: Vermelho 125, Verde 231, Azul 191.
16. No menu Ferramentas, selecione Font Generator.
17. Na janela Font Creator, selecione altura 96 e a fonte desejada. Usei Montserrat.
18. Dê um nome à fonte e clique em Generate Font. Salve em local fácil de lembrar — precisaremos novamente.
19. Feche o Font Creator. Será perguntado se deseja adicionar a fonte gerada. Clique em Sim. Essa fonte agora é referenciada como índice 0.
20. Adicione texto fictício a t0 para ver como ficará, alterando o atributo txt de t0 para 100%. Clique fora da área de valor para o editor atualizar.
21. Reposicione t0 a seu gosto.
22. Clique em Compile na barra de ferramentas superior.

Se tudo correu bem, você terá um arquivo TFT compilado pronto para uso, localizado em %AppData%\Nextion Editor\bianyi.

Atualize o Display

Existem algumas formas de colocar nosso novo design no display. Se você tem um conversor USB-para-TTL, pode conectar diretamente ao display pelo Nextion IDE e fazer upload do arquivo TFT compilado. Caso contrário, precisará copiar o arquivo TFT compilado para um cartão micro SD, que pode ser inserido diretamente no slot na parte traseira da tela. O cartão SD DEVE estar formatado em FAT32 e conter um único arquivo TFT, ou ocorrerão erros. O Editor Nextion coloca arquivos compilados com sucesso no seguinte diretório no Windows:

C:\Users\[seu_usuario]\AppData\Roaming\Nextion IDE\bianyi\[nome_do_projeto].tft

Nota: talvez precise ativar a visualização de arquivos ocultos, pois a pasta AppData é marcada como oculta.

Com o arquivo TFT no cartão SD, execute:

• Certifique-se de que o display está desligado
• Insira o cartão SD no display
• Ligue o display. A tela mostrará que está atualizando.
• Após a atualização terminar, desligue o display
• Remova o cartão SD. Não esqueça este passo — o display não rodará sua view com o cartão ainda inserido.
• Ligue o display novamente. Você deve ver nosso belo app Fridgeye. A única coisa faltando é o valor do sensor de luz.

Ensine o Arduino a Falar Nextion

Agora que o display tem nossa view, precisamos escrever código no Arduino para interagir com ele e definir a porcentagem de status de luz.

Instale a Biblioteca Nextion

1. Baixe a versão mais recente da biblioteca Nextion para Arduino.
2. Copie a pasta inteira ITEADLIB_Arduino_Nextion para a pasta de bibliotecas do Arduino. No Windows: C:\Users\[seu_usuario]\Documents\Arduino\libraries. No Mac: ~/Documents/Arduino/libraries.
3. Se estiver usando Arduino Mega, pule para o passo 7.
4. Se estiver usando Arduino Uno, abra o arquivo NexConfig.h dentro da pasta ITEADLIB_Arduino_Nextion que você copiou.
5. Comente as seguintes linhas:

   // #define DEBUG_SERIAL_ENABLE
   // #define dbSerial Serial
   

6. Altere o #define para nexSerial para Serial em vez de Serial2. Isso permite conectar o display diretamente nos pinos RX e TX do UNO.

   #define nexSerial Serial
   

7. Reinicie a Arduino IDE se estiver aberta. Isso fará a biblioteca aparecer nos menus.
8. No menu Arquivo, selecione Novo para criar um novo sketch.
9. Substitua o código padrão pelo seguinte:

#include "Nextion.h"
long lastUpdate;
int SENSOR = A0;
NexText t0 = NexText(0, 2, "t0");

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

Análise do Código

Se seu conhecimento de Arduino permite entender esse sketch, pode pular esta seção. Se é novo em código Arduino, não se assuste. Vamos analisar peça por peça.

#include "Nextion.h"

Indica nossa intenção de usar a biblioteca Nextion. Não precisamos fazer mais nada, pois a Arduino IDE sabe onde encontrá-la desde que a colocamos na pasta libraries.

long lastUpdate;

Variável para controlar a frequência de atualização da tela.

int SENSOR = A0;

Damos ao pino A0 do Arduino um nome mais legível no código. Não é essencial neste sketch, pois é o único pino I/O usado, mas é um bom hábito para quando tiver muitas coisas conectadas.

NexText t0 = NexText(0, 2, "t0");

Criamos um objeto no sketch que referencia o elemento de texto criado no GUI. Lembre-se que o nomeamos como "t0". O primeiro argumento é o número da página (0 no nosso caso) e o segundo é o ID do componente, que vimos antes ser 2. Se esqueceu de anotar, volte ao Editor Nextion, clique no elemento t0 e veja o ID no painel de atributos.

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

A função checkSensor() é o coração do app. Na primeira linha, fazemos duas operações. Primeiro, analogRead(SENSOR) retorna um inteiro representando a tensão no pino A0 (chamamos de SENSOR). No Arduino UNO, o retorno varia de 0 a 1024, mas queremos mapear para 0 a 100 por cento. O Arduino tem a função map() que permite especificar um valor seguido de [intervalo de origem] e [intervalo de destino]. Convertemos esse int para String e adicionamos o sinal %. Por fim, chamamos setText() no nosso objeto NexText t0 criado antes.

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

Função setup padrão do Arduino, executada antes de qualquer outro código. Inicializamos lastUpdate com o tempo atual via millis(), configuramos o pino A0 como entrada e inicializamos a biblioteca Nextion.

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

No Arduino, loop() roda continuamente até desligar ou resetar. Precisamos atender a biblioteca Nextion chamando nexLoop(). O parâmetro NULL significa que não estamos ouvindo eventos de toque. Então, verificamos se passaram mais de 100 ms desde a última leitura. Se sim, chamamos checkSensor() e atualizamos lastUpdate com millis().

É isso. Menos de 30 linhas de código para interagir com o display Nextion a partir de um Arduino.

Conecte o Display

Antes de conectar o display ao Arduino, envie o sketch para o Arduino clicando na setinha na barra superior ou Ctrl+U.

O display não pode estar conectado durante o upload, pois no Arduino UNO as mesmas linhas seriais que o display usa são necessárias pela IDE para gravar novos sketches. Se estiver usando Arduino Mega, não precisa se preocupar com isso.

Agora, com o código gravado, vamos conectar o display. Não esqueça de remover a alimentação do Arduino primeiro. Veja o diagrama Fritzing para as conexões.

Ao ligar o Arduino novamente, seu app Fridgeye deve mostrar felizmente a leitura atual do sensor de luz.

Conclusão

Ufa! Chegamos lá. Talvez você esteja pensando com um toque de raiva: "PARA QUE ISSO SERVE? Tenho que colocar tudo na geladeira e nem vou ver a tela." Você é um aluno perspicaz, mas nunca disse que isso era útil, apenas divertido de construir e aprender.

Se quiser ir além, desafio você a levar este projeto um passo adiante e descobrir como colocar o sensor na geladeira e o display em outro lugar. Existem muitas formas: Wi-Fi, Bluetooth, Zigbee, transmissores de rádio genéricos. Muitas opções e muito para aprender. Se tentar, me avise no Twitter @KevinSidwar ou por e-mail (Kevin at sidwar dot com). Adoraria ouvir suas aventuras na IoT. Até a próxima, happy hacking!

Se gostou do post e quer aprender mais sobre como começar na IoT, pode se interessar por um curso que estou criando em torno do conceito Fridgeye. Se não, agradeço de verdade por ter lido até o fim. Tenha um dia incrível. Você merece.