Visão geral sobre uma IHM

Operar máquinas e equipamentos através de dispositivos físicos como botões e lâmpadas já teve um importante papel no início da automatização de processos ao longo das primeiras revoluções industriais. Porém, imagine a seguinte situação: você tem a missão  de automatizar um painel de controle de um sistema de resfriamento residencial. Deve-se então,  substituir todos os antigos acionamentos como botões e indicadores  por telas, onde é possível definir todas as configurações de temperatura e conforto do ambiente. Qual seria então o melhor ponto de partida? A resposta será explorada ao longo do presente texto, onde vamos mostrar uma pequena introdução ao uso do display Nextion para uso em IHM´s.

A automação vista em uma nova tela!

Em princípio, é necessário utilizar uma IHM , sigla de  Interface Homem-Máquina. Com a evolução da eletrônica e dos sistemas de automação e computação, muitas facilidades vieram com o uso de telas e janelas. De fato, pode-se configurar rapidamente vários dispositivos ou máquinas, como por exemplo: um computador através das telas de um sistema operacional, um dispositivo móvel através da tela sensível ao toque, um caixa eletrônico de banco ou mesmo uma máquina industrial através de uma IHM, que é o ponto focal do nosso post.

Resumidamente, no ponto de vista de facilidade de operação,  as IHM´s ganham vantagens significativas em relação aos antigos painéis e mesas de comando, ao passo que tornam possíveis a geração de dados de tendência, permitem também a operação e monitoramento rápido de processos, acompanhamento em tempo real de dados de produção, além de permitir o rápido diagnóstico de falhas.  Uma IHM pode ser usada também em automação residencial, como mostrado na figura 3,  para controle de cortinas.

Porém, na maioria dos casos práticos, uma IHM é usada em aplicações industriais como a representação de um ambiente de fabricação, como mostrado na Figura 4.

A próxima estrela do elenco: Nextion

Em linhas gerais, existem várias formas de criar uma IHM. Em outros posts do presente blog já foram feitas diversas aplicações utilizando um display nokia 5110 , display oled e mesmo um simples  display de lcd. Porém, um novo personagem tem se destacado no palco das IHM´s: a série de displays Nextion®, do fabricante ITEAD.

Mas o que um display Nextion tem de diferente? Existem vários pontos:

• Um display Nextion possui uma solução de IHM que tem como diferencial um microcontrolador interno do tipo STM32G0 ARM® Cortex®-M0 de 64MHz ;
• Adicionalmente, o display possui também uma memória interna para gravação de arquivos e um ambiente de programação gráfica (GUI) bem intuitivo e com excelente curva de aprendizagem;
• As telas possuem propriedade de toque (touchscreen) e possuem tamanhos que variam de 2.4 a 10.1 polegadas;

Em outras palavras, o microcontrolador  ou CLP (controlador lógico programável) que comunicam com o Nextion não precisam enviar imagem por imagem, já que ele também realiza toda a computação e dinâmica por conta própria. Ou seja, todo o processamento realiza-se internamente através instruções  no lado do display, garantindo assim uma interação via comunicação serial simples com o mínimo de informação necessária sendo enviada.

Tipos de display Nextion

Os displays Nextion possuem várias séries, que podem ser acessadas diretamente no site do fabricante:

• Basic;
• Discovery;
• Enhanced;
• Intelligent;

Por exemplo, na tabela 1 são mostradas as especificações técnicas dos displays da série Basic.

Ligações físicas do display

Além disso,  o display Nextion possui um outro diferencial: não é necessário comprar o display para programar a sua interface e até mesmo simular a comunicação com um microcontrolador ou CLP. Ou seja, a própria IDE do programa, chamada Nextion Editor, pode ser usada para simular a comunicação e testar os botões e outros elementos gráficos. Desta forma, se possuir o display, deve-se utilizar um adaptador serial/usb para programação conforme mostrado na Figura 5 e Figura 6.

 

 

Nextion Editor – Conceitos básicos

Em linhas gerais, a interface de programação é bem intuitiva, onde o primeiro passo é instalação do programa Next Editor no site do fabricante. Por exemplo, a figura 7 mostra as funções da IDE do programa Nextion Editor.

Em resumo, seguem as partes principais da tela do Next Editor

1. Barra de menus: por exemplo, abrir, criar, carregar e atualizar um TFT existente;
2. Painel toolbox: Aqui estão os elementos principais que estão na tela. Desta forma, cada elemento possui um id diferente;
3. Barra de ferramentas: Open abre um arquivo existente e New cria um novo. Sempre compilar (Compile) o programa antes de gravar (Upload) na IHM;
4. Fontes de letras e imagens: Carrega as fontes de letras e as imagens dentro da IHM, além de outros elementos;
5. Saída do console: Por exemplo, mostra mensagens de erros e avisos quando o compilador, debug ou upload estão selecionados;
6. Códigos de eventos: Mostra uma visão geral dos eventos;
7. Painel de páginas: Toda IHM precisa ter pelo menos uma página. As páginas serão adicionadas, apagadas e copiadas nesta parte da IDE;
8. Painel de atributos:Em resumo, mostra a lista de componentes incluídos no programa junto com as suas atribuições;
9. Área dos componentes visuais: Área principal onde estão os componentes visuais e de toque da tela.

Criando uma Interface simples

Nesta etapa vamos criar uma tela para monitoramento de uma variável pelo display Nextion. Neste caso, vamos construir uma barra deslizante, conhecida como slider, simulando a variação de uma grandeza física, registrando posteriormente em um gráfico de linha.

Vale ressaltar que não é preciso comprar o display físico para construir esta interface, já que é possível simular pelo próprio editor do componente, porém, caso deseje fazer algo real, segue a lista de componentes desta prática:

1. Display Nextion 2,4″
2. Adaptador serial usb

Configurações iniciais

Inicialmente, deve-se selecionar no menu principal a opção “new” e posteriormente nomear um arquivo no disco local. Posteriormente, deve-se selecionar o tipo de IHM de acordo com o tamanho e a série do display Nextion adquirido, conforme mostrado na figura 8 no caso do display de 2,4″.

O próximo passo é selecionar o ângulo de orientação do display, escolhendo entre 0°,90°,180° e 270°, conforme mostrado na figura 9.

Inserindo elementos gráficos

Em seguida, deve-se adicionar uma fonte para as letras do display. Uma forma simples é utilizar a ferramenta Font Generator no menu tools. Então, selecione a fonte desejada e clique em Generate Font . Posteriormente salve o arquivo .zi no mesmo diretório do arquivo HMI

Finalmente, clique em Yes quando perguntado se deseja adicionar a fonte criada ao projeto, conforme a Figura 11.

Primeiramente, vamos inserir uma figura e um texto na tela clicando no toolbox e inserindo um texto (Text) e uma figura (Picture) conforme mostrado na Figura 12.

Mudando atributos dos elementos

Posteriormente, clique no painel de fontes de figuras à esquerda (Picture) clique em “+”  e selecione uma figura qualquer de um termômetro nos arquivos de seu computador, por exemplo, baixada no seguinte link na resolução de 320×640. Então, clique na figura (p0) e no painel de atributos embaixo à direita da figura inserida anteriormente.

Em seguida, clique  ao lado do nome pic, selecione browse e depois selecione a figura do termômetro no diretório do seu computador, conforme mostrado na Figura 13. Por fim, pode-se ajustar o tamanho da imagem caso seja necessário também.

Então, viu como é fácil mudar os atributos dos elementos no Nextion Editor? O próximo passo é mudar o texto de cima da tela. Clique em no texto (t0) e em seguida altere os atributos abaixo clicando em multline... no atributo txt:

• txt_maxl=30
• txt=MEDIÇÃO DE TEMPERATURA

Em seguida, adicione os elementos gráficos Waveform, Slider, Text,  Number e Timer distribuindo na tela conforme Figura 14. Observe que o nome de cada  objeto (objname)  possui destaque em amarelo.

A seguir, o próximo passo é alterar os seguinte atributos dos elementos:

h0(slider):

masval=255

t1(Text):

txt=Temp(°C)

s0(Waveform)

dir=right to left

dis=50

Inserindo um programa na tela

Conforme comentado anteriormente, o display Nextion possui instruções próprias que permitem rodar pequenos programas em tempo real na tela, evitando sobrecarregar o microcontrolador ou clp no lado do baixo nível.

Pois bem, neste ponto final do nosso assunto vamos inserir um programa que será responsável por transportar o valor gerado no elemento slider para o elemento waveform. Por exemplo, vamos mudar a cor da linha do gráfico (pen color – pco) e a cor de fundo do valor de temperatura (background color – bco) quando a temperatura for maior que 40ºC.

Posteriormente, clique no temporizador 0 (tm0) inserido anteriormente conforme figura 15

Em seguida, no painel na área de códigos de eventos, insira as seguintes instruções:

sys0=h0.val
n0.val=sys0
add 3,0,sys0
if(n0.val<40)
{
  n0.bco=GREEN
  s0.pco0=GREEN
}else
{
  n0.bco=RED
  s0.pco0=RED
}

A seguir, o comentário das instruções:

sys0=h0.val

Em resumo, esta instrução carrega o valor do slider na variável global sys0.Lembre que o valor do slider foi definido nos atributos de 0 a 255.

n0.val=sys0

Atribui o valor da variável global que tem o valor do slider no número(no) para mostrar o valor numérico da temperatura.

add 3,0,sys0

Em suma, adiciona o valor atual do slider no canal 1 do gráfico de linha. Por exemplo, observe que  o canal da waveform é 1, porém na instrução acima o valor é 0. O valor 3 corresponde a id da waveform.

if(n0.val<40) 
{ n0.bco=GREEN s0.pco0=GREEN }
else 
{ n0.bco=RED s0.pco0=RED }

Por fim, estas instruções permitem a mudança de cor da linha do gráfico e do pano de fundo do texto que mostra a temperatura.

Simulação  e carga do programa

Debugando o programa

Em resumo, agora que já construímos o programa do Nextion podemos simular seu funcionamento, mesmo sem o display físico. Por exemplo, a sequência de imagens a seguir mostram como simular o programa após a compilação.

Ao compilar deve-se observar se na área output não ocorreu algum erro de vermelho, devendo ser corrigido caso necessário.

Enviando o programa ao display

Em suma, as ligações dos fios entre o displays Nextion e o conversor serial/usb utilizado para carregar o programa devem se feitas conforme abaixo:

• 5v(Vcc)-5v(Vcc)
• Gnd(0V)-Gnd(0V)
• RX-TX
• TX-RX

 

Por fim, vamos enviar o programa através da opção Upload.Neste caso, lembre de selecionar corretamente a porta certa do conversor (veja no gerenciador de dispositivos do Windows para verificar qual é a porta certa).

 

Conclusões

Em resumo, neste nosso primeiro post sobre o uso do display Nextion  aprendemos a fazer uma configuração bem simples que englobam o uso de textos, imagens, barras deslizantes e gráficos.

Em suma, esta importante ferramenta agrega a facilidade de uma programação de forma descentralizada, liberando o microcontrolador para atividades mais nobres como o controle propriamente dito.

É importante destacar que não é necessário adquirir o display físico para programá-lo, representando uma grande vantagem em relação ao custo de desenvolvimento.

Por fim, espero que você tenha gostado e comece a usá-lo em aplicações de IoT, automação residencial e industrial além de infinitas outras aplicações. Além disso, no próximo post iremos abordar a comunicação do display Nextion com microcontroladores como PIC e Arduino.

Todas as fontes, imagens e um arquivo de uma caixa para impressão 3d usando o display Nextion de 2.4″ estão disponíveis no seguinte link. Grande abraço e até a próxima!