Display Nextion com Arduino Uno

Já conhece o “display inteligente”? Pois, hoje, apresento a vocês o Display Nextion. O que ele tem de diferente dos demais? Além do controlador gráfico, possui um microcontrolador ligado na Uart TX RX. Um exemplo: quando eu quiser que apareça na tela a lâmpada (igual na imagem mostrada abaixo), eu não vou precisar desenhar esta lâmpada inteira, pois bastará eu gravar tal desenho no display e printar seu ID. Isso difere dos displays tradicionais, no quais tenho que executar os desenhos desejados, pixel por pixel. Portanto, neste “display inteligente”, todo processamento gráfico é feito pelo próprio Nextion. O microcontrolador, neste caso, um Arduino Uno, só fica mandando o código. Informação importante é que o Display Nextion usa o STM32.

Neste vídeo de hoje, então, nós vamos conhecer a IDE Nextion Editor, criar um exemplo simples sem microcontrolador e simular no simulador Nextion, além de criar um exemplo utilizando um microcontrolador e executar com o Nextion.

Montagem

No nosso projeto, temos um sensor DHT22 para leitura de valores, um Arduino Uno, bem como o Display Nextion, o qual só possui 4 fios: positivo, negativo, TX e RX. Este modelo ainda possui uma entrada de cartão SD, que serve, inclusive, para dar Boot e carregar as imagens em Bitmap a serem exibidas na tela. Na nossa montagem, que exibe no display informações de temperatura e umidade, também temos um Led.

Nextion

Existem vários modelos de Nextion e uma característica interessante deste display é que, para testá-lo, você não precisa ter um Arduino ligado nele, já que você pode utilizar um adaptador USB serial ligado ao próprio computador.

Nextion Editor

Você pode fazer o download do Nextion Editor através do link abaixo:

download: Nextion Editor

Na imagem abaixo nós temos uma visão geral do Nextion Editor, expondo o Menu Principal, Componentes, Bibliotecas de imagens e fontes, Área de exposição, Área de saída de compilação, Área de eventos, Área de páginas e Área de edição de atributos.

Menu Principal

·         File (criar/abrir/salvar/importar projeto, abrir pasta de construção)

·         Tools (gerador de fontes)

·         Setting (configurações, resetar layout)

·         Compile (compila o projeto)

·         Debug (abre o simulador para testar o programa) - *Não é necessário o Nextion físico para testar o projeto.

·         Upload (abre uma janela para fazer o upload do projeto para o Nextion) - *pode demorar

·         Device (abre as configurações de modelo de Nextion e orientação)

·         ID (exibir/esconder os IDs dos componentes na área de exposição)

Componentes

Os componentes listados abaixo poderão ser utilizados no projeto. Basta clicar sobre o componente desejado e este irá direto para a área de exposição.

Font Generator

Para utilizar componentes de texto, precisamos criar alguma fonte.

Acesse o menu: Tools >> Font Generator

Escolha o tipo de fonte, tamanho e estilo, e dê um nome a ela.

Ao clicar em Generate Font, abrirá uma janela para salvar um arquivo com extensão .zi.

Esse arquivo será utilizado para importar a fonte para o projeto.

Imagem

Para importar uma imagem para seu inventário, basta clicar no menu: add, e escolher a imagem.

Área de Exposição

Abaixo a imagem da área de exposição com os componentes PICTURE e BUTTON inseridos.

Área de Páginas

PAGE é o equivalente a cada “tela” que teremos em nosso projeto.

1.       Adicionar nova página ao final da lista

2.       Remover página

3.       Inserir página (entre páginas)

4.       Mover página ordem acima

5.       Mover página ordem abaixo

6.       Copiar página

7.       Importar/exportar página

Área de Edição de Atributos

Ao clicar em um componente, podemos editar seus atributos. Aqui vemos os atributos da “picture” e do “button” que adicionamos na área de exposição.

Área de Saída de Compilação

Ao clicar no botão de compilação teremos os resultados na área de saída.

Área de Eventos

Na área de eventos, podemos configurar os eventos dos componentes (touch press, touch release...) e também adicionar códigos para execução ao ocorrer o evento.

A imagem acima mostra que, ao ocorrer o evento release, a “página 1” será chamada, ou seja, a page1, então, será mostrada em tela. Importante notar que o número 1 refere-se ao ID da página destino.

Debug

Ao clicar no menu Debug, uma janela para simularmos nosso projeto será aberta. Podemos utilizar o microcontrolador com o código e esse simulador, por exemplo. Não precisamos necessariamente de um dispositivo físico do Nextion. 

1.       Área para envio de comandos para o simulador

2.       Área de retorno do simulador

3.       Área de comandos do microcontrolador

4.       Modo de entrada de comandos (keyboard Input ou User MCU Input)

5.       Destino do comando (Simulador, Nextion, Simulador e Nextion)

Debug com Microcontrolador

Ao clicar na opção User MCU Input, dois novos campos de configurações são abertos, um para definir a porta COM do microcontrolador e outro para definir a velocidade de comunicação. A partir daí, os comandos serão enviados pelo microcontrolador e o simulador receberá.

Simulando com o Debug

Upload

Para gravar o projeto no Nextion, podemos fazer de duas maneiras:

1.       Menu Upload

Com Port: ou você escolhe a porta COM do seu Nextion, ou deixa em Auto search, que o programa se encarrega de testar todas e em diferentes velocidades.

Baud Rate: escolha a velocidade de upload. Caso a escolha da Com Port tenha sido Auto search, o programa tentará todas as velocidades disponíveis até encontrar a correta.

2.       Upload através do SD Card

Acesse o menu File >> Open build folder

Copie o arquivo do seu projeto (extensão .tft) e, então, cole dentro do seu SD Card que utilizará no Nextion.

Observação 1: no SD deve estar apenas o arquivo do seu projeto.

Observação 2: depois de copiado o arquivo dentro do SD Card, coloque-o no Nextion. Ao ser alimentado, ele identificará o arquivo e, então, fará o “upload” para sua memória. Feito isso, aguarde a mensagem de sucesso e, então, retire o SD Card.

Novo Projeto

Ao criar um novo projeto as seguintes janelas aparecerão: na primeira (1) você escolhe o modelo de Nextion e, na segunda (2), a orientação das telas.

1

2 

Exemplo

Faremos agora um exemplo com duas telas: uma mostrará os dados de um sensor DHT22 e a outra para controlarmos um LED e seu PWM.

page0

page1

Projeto

O arquivo do projeto pode ser baixado através do link abaixo:

download:grafico_dht_light.HMI

Basta abri-lo pelo Nextion Editor para visualizá-lo.

Bibliotecas

Adicione biblioteca “ITEADLIB_Arduino_Nextion-master”.

Acesse o link e faça download da biblioteca.

Descompacte o arquivo e cole na pasta de bibliotecas da IDE do arduino.

C:/Program Files (x86)/Arduino/libraries

Observação

Antes de iniciarmos a codificação através da IDE Arduino devemos realizar uma pequena alteração no arquivo NexConfig.h da biblioteca.

* Comente o debug serial

 #define DEBUG_SERIAL_ENABLE —> //#define DEBUG_SERIAL_ENABLE

* Modifique a definição de Serial2 como padrão Serial

 #define nexSerial Serial2  —> #define nexSerial Serial

Código para o Microcontrolador

Vamos incluir as bibliotecas para comunicação com o display Nextion e para comunicação com o DHT22. Definimos ainda as variáveis que armazenam os dados do DHT22, de controle do Led, entre outras.

#include "Nextion.h" //biblioteca para comunicação com o display NEXTION
#include <SimpleDHT.h> //biblioteca para comunicação com o DHT22

SimpleDHT22 dht22;
static int pinDHT22 = 7; //pino que ligamos o DATA do DHT22 no arduino

//variáveis que armazenam os dados do DHT22
float temperature = 0;
float humidity = 0;

uint8_t pinLED = 3; //pino que ligamos o LED no arduino

bool isPage0 = true; //variável de controle para saber se é a página ZERO que está em tela
bool isLedOn = false; //variável de controle para saber se o LED está aceso

char buffer[100] = {0}; //buffer para armazenar dados string

//variáveis de controle de tempo, para funcionar como um cronômetro
long previousMillis = 0;
const int maxTime = 1000;

Declaramos aqui os objetos do Nextion. Temos ainda o array, no qual declaramos os objetos Nextion que terão interação de eventos touch.

/* DECLARAÇÕES DOS OBJETOS DO NEXTION: [pageID, componentID, componentName] */
NexProgressBar progTemp  = NexProgressBar(0, 1, "prog_temp"); //Progress Bar temperatura
NexProgressBar progHumid = NexProgressBar(0, 16, "prog_humid"); //Progress Bar umidade
NexButton btnNext        = NexButton(0, 3, "btn_next"); //botão da página 0
NexText txtTemp          = NexText(0, 2, "txt_temp"); //texto com o valor da temperatura
NexText txtHumid         = NexText(0, 5, "txt_humid"); //texto com o valor da umidade
NexWaveform waveform     = NexWaveform(0, 6, "waveform"); //componente do gráfico de temperatura e umidade

NexDSButton btnLight     = NexDSButton(1, 1, "btn_light"); //botão de duplo estado para controlar o LED
NexSlider slider         = NexSlider(1, 2, "slider_pwm"); //slider que controlará o PWM do LED
NexText statusPWM        = NexText(1, 4, "status_pwm"); //texto com o status do pwm
NexVariable valueSlider  = NexVariable(1, 5,"valueSlider"); //(objeto do nextion) variável que guarda o valor do slider
NexButton btnBack        = NexButton(1, 3, "btn_back"); //botão da página 1

NexPage page0 = NexPage(0, 0, "page0");
NexPage page1 = NexPage(1, 0, "page1");

//Nesse array, declaramos os objetos Nextion que terão interação de eventos touch
NexTouch *nex_listen_list[] = 
{
      &btnLight,
      &slider,
      &valueSlider,
      &btnNext,
      &btnBack,
      NULL
};

Setup e Loop

No Setup, inicializamos a comunicação com o Nextion. Já no Loop, trabalhamos como um listener para os eventos de press e release dos objetos utilizados no display.

nexLoop(nex_listen_list);

void setup() {
     Serial.begin(9600);
     pinMode(pinLED, OUTPUT);

     nexInit(); //inicializa a comunicação com o nextion

     btnNext.attachPop(btnNextPopCallback, &btnNext); //callback para o evento de release do botão btnNext
     btnBack.attachPop(btnBackPopCallback, &btnBack); //callback para o evento de release do botão btnBack
     slider.attachPop(sliderPopCallback); //callback para o evento de release do slider
     btnLight.attachPop(btnLightPopCallback, &btnLight); //callback para o evento de release do botão de dois estados (btnLight)
}

void loop() {
       //essa função trabalha como um listener para os eventos de press e release dos objetos utilizados no NEXTION
     nexLoop(nex_listen_list);
     //verifica se a página atual é a ZERO(inicial)
     //caso seja, verifica se o tempo passado entra a última passagem e a atual, foi de 1 segundo
     //e então chama a atualização do gráfico de temperatura e umidade
     if(isPage0)
     {
          if(millis() - previousMillis >= maxTime)
          {
               previousMillis = millis();
               updateDHTInfo(); //pega os valores do DHT22 e então manda para o NEXTION
          }  
     } 
}

updateDHTInfo

Esta função recupera os valores de temperatura e umidade do DHT22 e, através dos objetos do Nextion, seta as informações.

//função que recupera os valores de temperatura e umidade do DHT22
//e através dos objetos do NEXTION seta as informações
void updateDHTInfo()
{
     int status = dht22.read2(pinDHT22, &temperature, &humidity, NULL);//faz a leitura dos dados do DHT22 //se conseguiu ler os dados corretamente
     if (status == SimpleDHTErrSuccess) 
     {
          progTemp.setValue(temperature); //progress bar da temperatura
          memset(buffer, 0, sizeof(buffer));
          itoa(temperature, buffer, 10); 
          txtTemp.setText(buffer); //texto que indica a temperatura

          progHumid.setValue(humidity); //progress bar da umidade
          memset(buffer, 0, sizeof(buffer));
          itoa(humidity, buffer, 10); 
          txtHumid.setText(buffer); //texto que indica a umidade

          waveform.addValue(0, temperature); //envia o valor da temperatura para o gráfico
          waveform.addValue(1, humidity); //envia o valor da umidade para o gráfico
     }
}

CALLBACKS

Callback do SLIDER: quando o evento de release acontecer essa função é chamada.

//callback do SLIDER, quando o evento de release acontecer essa função é chamada
void sliderPopCallback(void *ptr)
{
     //se o LED está ligado, busca o valor da variável que guarda o valor do slider e então seta o PWM do LED
     if(isLedOn) 
     {
          uint32_t number = 0;
          valueSlider.getValue(&number); //pega o valor atual da variável nextion
          int value = map(number, 0,100,0,255);
          analogWrite(pinLED, value);
          memset(buffer, 0, sizeof(buffer));
          itoa(value, buffer, 10); 
          statusPWM.setText(buffer); 
     }
}
//callback do botão btnNext
void btnNextPopCallback(void *ptr)
{
     page1.show();
     isPage0 = false;
     sliderPopCallback(ptr); //chama o callback do slider para reconfigura-lo
}
//callback do botão btnBack 
void btnBackPopCallback(void *ptr)
{
     page0.show();
     isPage0 = true;
}

Já aqui temos o Callback do botão de dois estados.

/* Callback do botão de dois estados */
void btnLightPopCallback(void *ptr)
{
     uint32_t dual_state;

     /* recupera o valor do estado de botão de dois estados */
     btnLight.getValue(&dual_state);
     if(dual_state) 
     {
         isLedOn = true;
         sliderPopCallback(ptr);
     }
     else
     {
        statusPWM.setText("DESLIGADO");
        digitalWrite(pinLED, LOW);
        isLedOn = false;
     }
}

Faça o download dos arquivos:

PDF
INO