Interface Gráfica com Qt e Raspberry Pi 17

Existem várias maneiras de desenvolver aplicações e interfaces gráficas para Raspberry Pi ou outros computadores embarcados. Dentre elas uma que se destaca é o Qt. Além de ser muito usado para desenvolvimento de aplicações Desktop, o Qt vem crescendo bastante na área de sistemas embarcados atendendo a indústria automobilística, médica, automação e IoT (Internet das Coisas) entre outras. É possível também desenvolver para dispositivos mobile, e neste post vamos mostrar uma aplicação de Qt e Raspberry Pi.

O seguinte vídeo mostra o grande potencial do Qt, onde foi desenvolvida uma interface de controle para um equipamento médico. Note os gráficos, efeitos, animações e a possibilidade de customização da interface.

Preparamos um tutorial para você que quer começar a experimentar essa ferramenta profissional utilizando um minicomputador Raspberry Pi. Embora o desenvolvimento em Qt seja baseado na linguagem C++, para seguir este tutorial não é necessário que o leitor possua conhecimentos prévios na linguagem, pois iremos disponibilizar todo o código. Mas se o leitor já tem conhecimentos em C++ e até mesmo QML, já ajuda bastante.

Neste tutorial iremos mostrar uma aplicação gráfica que possui um botão tipo “slide switch”, que faz o controle de um LED conectado a GPIO da Raspberry Pi. 

Instalando IDE Qt Creator e pacotes Qt versão 5

O Qt nos disponibiliza todo um ecossistema podendo ser usado de maneira Open Source. Para indústrias que querem usar Qt em seus produtos, ele também pode ser usado através de licenças. Para fins didáticos iremos usar como Open Source.

Para desenvolvimento em Qt, é utilizado uma IDE(Integrated Development Environment) chamada Qt Creator. Com esta IDE podemos cross compilar e executar aplicações além de outras funções mais avançadas.  

É possível também instalar o Qt Creator em seu computador e desenvolver aplicações Desktop ou até mesmo configurá-lo para cross compilar para sistemas embarcados. No caso deste tutorial iremos desenvolver diretamente na Raspberry Pi. Por isso tenha em mãos um monitor, teclado e mouse ou acesse o Desktop via rede com VNC.

Tenha em mãos também um cartão SD já com uma imagem Raspbian com Desktop instalada. Abra um terminal de comandos e execute os comandos seguintes para instalação do Qt Creator e outros pacotes de dependência do Qt.

sudo apt-get update
sudo apt-get install qt5-default
sudo apt-get install qtcreator
sudo apt-get install qtdeclarative5-* qml-module-qtquick* qtquickcontrols5-* qml-module-qtquick2

Após a instalação veremos que no menu iniciar agora consta o Qt Creator. Veja no vídeo abaixo como abrir o Qt Creator e criar seu primeiro projeto.

A aplicação que já vem ao criar um novo projeto consiste em digitar algo no campo de texto e ao clicar na tela o texto será exibido no console da aplicação.

Pronto! Você executou seu primeiro programa em Qt na Raspberry Pi!

Baixando a aplicação de demonstração Qt e Raspberry Pi

Preparamos uma aplicação de demonstração de Qt e Raspberry Pi que consiste de um botão tipo chave liga/desliga e que interage com a biblioteca WiringPi para acender e apagar um LED conectado aos pinos da GPIO da Raspberry Pi 3.

Você encontra a aplicação demo no GitHub da MakerHero. Baixe usando a opção Download ZIP do GitHub.

Baixar aplicação no GitHub

Ou execute o comando “git clone” pelo terminal de comandos para baixar o código fonte. Pode ser baixado em qualquer pasta do sistema.

git clone https://github.com/makerhero/qt5-raspberrypi-filipeflop.git

Abra o Qt Creator e clique em Open Project para abrir a aplicação baixada acima.

Você deverá abrir o arquivo “.pro” encontrado dentro da pasta baixada do GitHub. Clique em Open.

Então clique em Configure Project.

Antes de executar a aplicação lembre-se de selecionar o compilador GCC como no vídeo mostrado no início do post, ao contrário, o Qt Creator indicará o erro “Qt Creator needs a compiler set up to build. Configure a compiler in the kit options.

Então execute a aplicação clicando no botão Play.

Você deverá ver a aplicação do Qt e Raspberry Pi abrir em sua tela.

Qt com Raspberry Pi

Montando o circuito do LED

A aplicação já deve estar ativando o pino no qual conectaremos nosso LED. Para visualizar o LED acendendo e apagando monte o circuito conforme a figura abaixo conectando o LED e um resistor ao GPIO17 pino 11. O resistor pode ter valores entre 330Ω até 680Ω.

Circuito LED com Raspberry Pi

Você deverá ver o LED acendendo e apagando como a seguir:

Aplicação final Qt e Raspberry Pi

Se você é curioso e já deu uma olhada no código fonte da aplicação, notou que usamos a biblioteca WiringPi, que já vem instalada no sistema da Raspberry, para manipular as GPIOs.

Conclusão

Esta foi apenas uma introdução de uso do Qt e Raspberry Pi com o objetivo de mostrar o que é possível fazer com esta ferramenta. Qt vai muito além do que foi mostrado aqui, sendo utilizado em aplicações industriais de grande complexidade.

Utilizamos nessa aplicação recursos como a biblioteca WiringPi além do recurso de integração QML/C++. Fique a vontade para estudar mais sobre esses recursos.

Agora você já pode se aprofundar em C++, QML e estudar mais sobre Qt em geral. Um bom passo adiante é estudar a documentação do Qt que pode ser encontrada aqui. Procure também por outros exemplos de projetos utilizando Qt que possuem o código aberto, como essa máquina de votação com Raspberry Pi e Qt5.

E nunca se esqueça de sempre colocar a mão na massa. Esse é o melhor jeito de aprender!

Gostou de aprender sobre Qt? Deixe seu comentário logo abaixo. 

Faça seu comentário

Acesse sua conta e participe

17 Comentários

  1. boa tarde, sabe se tem algum tutorial ou se voce pode explicar como rodar a aplicação feita em QT direto em tela cheia, tipo liguei a alimentação do rasp, ja vai para uma tela que não seja a dos rasp de carregamento, e em seguida inicia a aplicação em tela cheia sem opção de sair ou fechar..

    grato

  2. É possivel conectar a um banco de dados para armazenar dados de uma leitura de algum sensor?

    Domingos de Andrade Mainart
    1. Olá!

      No link abaixo, tem a documentação sobre os bancos de dados SQL no Qt:

      https://doc.qt.io/qt-5/sql-driver.html

      Abraços!
      Diogo – Equipe MakerHero

    2. Olá!

      O link abaixo tem informações sobre banco de dados SQL:

      https://doc.qt.io/qt-5/sql-driver.html

      Abraços!
      Diogo – Equipe MakerHero

  3. Olá! Excelente tutorial, parabéns! É possível utilizar a interface gráfica para cadastros em banco de dados no QT Creator? Alguma referência? Obrigado?

  4. Gostaria de mais informações sobre como criar uma interface para área médica e como conectar equipamentos usando wi-fi

    1. Olá Ronaldo!

      As interfaces com Qt são usadas em diversas áreas inclusive na área médica.
      Primeiro é necessário aprender Qt e depois é só aplicá-lo na área que desejar.

      Também existe o TkInter para interfaces gráficas em Python e recentemente o PyQt (Qt em Python) está sendo bastante divulgado.

      Os sistemas utilizados geralmente são Linux ou Android. Aì você teria que aprender algum deles e escolher qual melhor se aplica na sua solução médica.

      Na questão do WiFi existem diversas soluções. TCP, MQTT, HTTP, sockets etc…

      Basicamente comece desenvolvendo o projeto deste post acima. E depois tente algo utilizando WiFi como o post a seguir por exemplo: https://www.makerhero.com/blog/raspberry-pi-controlar-o-nodemcu-parte-2/

  5. Como faco para mudar o pino que esta sendo usado? Estou saundo LCD touchscreen, então esse pino está ocupado… queria mudar para o pino 40

    1. Olá Denis! Que legal que está testando o projeto!

      Para mudar o pino veja primeiro o arquivo main.cpp

      pinMode(0, OUTPUT);

      Nessa linha pode escolher o pino.

      E também no arquivo backend.cpp

      digitalWrite(0, HIGH);
      digitalWrite(0, LOW);

      Veja aqui a nomenclatura de pinos que a biblioteca WiringPi usa
      http://wiringpi.com/pins/

      Qualquer dúvida poste aí!

  6. Ao invés de usar C++, tem condições da programação ser feita em python?

    1. Olá Gustavo!

      Se quiser utilizar Qt dê uma pesquisada sobre PyQt no Google.

      Se não quiser utilizar Qt, apenas Python, uma opção é o TkInter:
      http://www.tkdocs.com/tutorial/
      https://medium.com/@ronm333/using-tkinter-to-create-a-gui-graphical-user-interface-on-the-raspberry-pi-b382a6bf6497

      Abraço!

  7. O link para o Hello World está fora do ar…

    1. Olá Conrado!

      Qual seria o Hello World?

      No tutorial cobrimos a criação de um novo projeto. Esse não tem link.
      E mais adiante mostramos a aplicação demo desenvolvida pela MakerHero. Essa aplicação tem link para o Github. Olhei aqui e está OK para mim.

      https://github.com/MakerHero/qt5-raspberrypi-MakerHero

  8. Olá, é possível programar as Telas Nextion com este aplicação? Elas possuem um editor padrão da Itead, porém o mesmo não tem versão para Mac, caso funcione, esta seria uma boa saída.

    Obrigado

    1. Olá Leandro.
      Diretamente creio que não. A parte gráfica você tem que fazer no software deles, o Nextion Editor.
      Aí pra você comandar essa parte gráfica, creio eu que é possível usar qualquer software como C, C++ e hardware que tenha interface serial, como Arduino, Raspberry Pi etc…

      Uma das vantagens do Qt em relação ao Nextion é que Qt te dá mais liberdade de customização pois você programa a parte gráfica diretamente. Já com o Nextion você tem a vantagem de ter uma interface gráfica rica em uma plataforma como Arduino.

      1. Bom dia, teria um tutorial para comunicar com o arduino

        1. Fala Victor! Infelizmente ainda não temos. Mas é um bom tema para fazermos um tutorial.

          Mas basicamente vocẽ teria que usar o Qt Serial Port para comunicar com o Arduino. Dê uma estudada nos seguintes links:
          http://doc.qt.io/qt-5/qtserialport-module.html
          https://wiki.qt.io/Qt_Serial_Port

          Outra opção é usar firmata: https://github.com/callaa/qfirmata

          Espero que já ajude. Abraço!