Automação com Raspberry Pi e display touch 7’’

Hoje vamos falar de automação, mas, desta vez, utilizando o Raspberry Pi. Usei neste projeto um Display 7inch HDMI LCD 7’’, do qual vou te apresentar instalação e configuração. Também vamos falar sobre o QT Creator, desenvolvendo um exemplo básico de projeto QT utilizando as GPIOs do Raspberry Pi 3.

Recursos usados

• Raspberry Pi 3 Model B
• Display 7inch HDMI LCD 7’’ (Touch Screen)
• 4x Leds
• 4x Resistores de 330 ohm ou 220 ohm
• Protoboard
• Jumpers

Montagem

Pinout Raspberry Pi 3 Model B

Montagem

Montagem Display

A ligação do display no raspberry é muito simples. Conecte os cabos HDMI e USB do display nas entradas do raspberry, não esqueça de ligar o botão Backlight localizado na parte de trás do display.

Instalação e configuração do Display

1.       Instalação do S.O. Raspbian no raspberry

 Faça o download: https://www.raspberrypi.org/downloads/

 Use o SDFormatter para formatar seu cartão SD Card

 Use o gravador Win32DiskImager para gravar a imagem no SD Card

2.       Baixe o driver do display

 Abra o terminal e digite os comandos

         sudo rm -rf LCD-show

         git clone https://github.com/goodtft/LCD-show.git

         chmod -R 755 LCD-show

         cd LCD-show/

3.       Instale o driver para o tipo de display utilizado

 No nosso caso o display é de 7 polegadas - HDMI Display-C-1024X600 (MPI7002). Execute:

         sudo ./LCD7C-show

Pronto! O display já está instalado e configurado e o sistema será reiniciado.

Para mais detalhes consulte: https://github.com/goodtft/LCD-show

Instalação do QT Creator

Para instalar o QT Creator, abra um terminal no raspberry e digite os seguintes comandos:

sudo apt-get update

sudo apt-get install qt5-default

sudo apt-get install qtcreator

Se não possuir o gcc instalado, instale-o:

sudo apt-get install gcc

O software será listado no menu inicial do raspberry conforme a imagem.

QT Creator – Criação de um novo projeto

Para criar um novo projeto basta clicar no botão New Project ou ir em File -> New File or Project
A seguinte janela será aberta. Selecione QT widgets Application e clique em Choose.

Preencha o campo Name com o nome do projeto e o campo Create in com o local (pasta) do projeto. Em seguida clique em Next.

Selecione o local do projeto, depois clique em Choose e em Next

Selecionamos a plataforma Desktop e clicamos em Next.

A classe principal por default vem nomeada como MainWindow. É possível mudar seu nome alterando estes campos mas no nosso exemplo não o faremos.

Por fim clique em Finish

Uma lista à esquerda será exibida com os seguintes arquivos

QT Creator – Configuração do compilador

Vá em Tools -> Options

Selecione Build & Run

Selecione Compilers

Selecione Add -> GCC -> C++

O tipo de compilador será listado em negrito. Clique em Apply

Selecione Kits

Selecione Desktop(default)

Selecione o tipo de compilador C++         

Selecione GCC

Clique em Apply e depois em OK

QT Creator – Desenvolvendo a tela

Expanda a lista Forms e dê dois cliques em mainwindow.ui para visualizarmos sua interface e podermos desenvolvê-la.

No nosso exemplo teremos basicamente 4 botões e 4 labels referentes aos status do botão ON/OFF.

Para adicionar um botão, clique em Push Button e arraste para o formulário

Para adicionar uma label, pesquise label, clique e arraste para o formulário

Para definir o texto exibido no botão devemos mudar a propriedade text localizada em QAbstractButton. Definimos os textos dos botões como LED 1, LED 2, LED 3 e LED 4.

Definimos os textos das labels como Status.

A propriedade objectName é usada para referenciar o componente no código fonte, essa propriedade está localizada em Qobject.

Mudamos os nomes dos botões para btnLED1, btnLED2, btnLED3 e btnLED4.

Mudamos os nomes das labels para lblLED1, lblLED2, lblLED3, e lblLED4.

Usamos também os espaçadores horizontais Horizontal Spacer para que os botões fiquem melhor posicionados. Existem também o Vertical Spacer para espaçamentos verticais.

Para alterar a cor de fundo de algum componente, clique com o direito e vá em Change styleSheet...

Depois selecione background-color

Você pode encontrar a cor rgb clicando em Add Color, a imagem abaixo mostra um exemplo de estilo de background color.

Utilizamos no nesse exemplo o azul: 85,85,255

QT Creator – Programação (eventos)

Para programarmos os eventos dos componentes clique no componente com o direito do mouse e vá em Go to slot...

Uma lista de eventos referente ao componente selecionado será exibida.

No nosso exemplo utilizaremos apenas o evento clicked() dos botões.

Após clicar em OK o arquivo de código fonte será aberto no método correspondente ao evento escolhido.

QT Creator – Programação

Você pode abrir o arquivo de código manualmente clicando duas vezes sobre o arquivo.

O código referente ao formulário principal se chama (neste caso) mainwindow.cpp e está localizado em Sources.

Código

Declarações e variáveis

// Bibliotecas padrões
#include "mainwindow.h"
#include "ui_mainwindow.h"

// Biblioteca referentes as funções de GPIOs do raspberry
#include <wiringPi.h>

// Pinos dos 4 leds
const int LED1 = 29, LED2 = 28, LED3 = 25, LED4 = 27;

// Assinatura da função update
void updateStatusLabel(const int, QLabel *);

Construtor e Destrutor

// Construtor
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
{
    // Iniciamos a interface
    ui->setupUi(this);

    // Configuramos a tela fixa 1024x600
    setFixedSize(1024, 600);

    // Setamos os pinos
    setPins(ui);
}

// Destrutor
MainWindow::~MainWindow()
{
    delete ui;
}

setPins

// Função que seta os pinos dos leds e atualiza a tela com o status atual ao iniciar o programa
void setPins(Ui::MainWindow *ui)
{
    wiringPiSetup();

    pinMode(LED1, OUTPUT);
    pinMode(LED2, OUTPUT);
    pinMode(LED3, OUTPUT);
    pinMode(LED4, OUTPUT);

    updateStatusLabel(LED1, ui->lblLED1);
    updateStatusLabel(LED2, ui->lblLED2);
    updateStatusLabel(LED3, ui->lblLED3);
    updateStatusLabel(LED4, ui->lblLED4);
}

updateStatusLabel

// Atualizamos os labels dos botões de acordo com o sinal dos pinos
void updateStatusLabel(const int LED, QLabel *label)
{
    if(digitalRead(LED) == HIGH)
    {
        label->setText("ON");
        label->setStyleSheet("QLabel { color : green; }");
    }
    else
    {
        label->setText("OFF");
        label->setStyleSheet("QLabel { color : red; }");
    }
}

Eventos do botão 1 e botão 2

// Evento do botão 1
void MainWindow::on_btnLED1_clicked()
{
    // Mudamos o estado do pino
    digitalWrite(LED1, !digitalRead(LED1));
    
    // Atualizamos a label
    updateStatusLabel(LED1, ui->lblLED1);
}

// Evento do botão 2
void MainWindow::on_btnLED2_clicked()
{
    // Mudamos o estado do pino
    digitalWrite(LED2, !digitalRead(LED2));

    // Atualizamos a label
    updateStatusLabel(LED2, ui->lblLED2);
}

Eventos do botão 3 e botão 4

// Evento do botão 3
void MainWindow::on_btnLED3_clicked()
{
    // Mudamos o estado do pino
    digitalWrite(LED3, !digitalRead(LED3));

    // Atualizamos a label
    updateStatusLabel(LED3, ui->lblLED3);
}

// Evento do botão 4
void MainWindow::on_btnLED4_clicked()
{
    // Mudamos o estado do pino
    digitalWrite(LED4, !digitalRead(LED4));

    // Atualizamos a label
    updateStatusLabel(LED4, ui->lblLED4);
}

QT Creator – Compilação e execução

Os botões de compilação e execução são os indicados pela imagem .

Para compilarmos e executarmos o projeto utilizamos o primeiro botão.

FAÇA O DOWNLOAD DOS ARQUIVOS:
PDF
INO