Comunicação serial com Arduino e Qt5 Widgets Application - Parte 1

No post anterior mostrei como preparar o ambiente com Qt5 para realizar comunicação serial via console e, para isso, utilizamos um Arduino. Desta vez vamos seguir o mesmo raciocínio de ambiente, realizando a comunicação serial com Arduino e Qt5 Widgets Application, uma interface gráfica no Qt5.

O post será divido em duas partes, nesta primeira vamos conhecer, criar e personalizar nossa interface gráfica com Qt5 Widgets. Na segunda parte vamos fazer toda a programação para realizar comunicação serial e ações com a interface gráfica com Qt5 Widgets.

Se o Qt é novo pra você, pode conferir um post que escrevi sobre a ferramenta, e se ainda não possui a ferramenta instalada e está usando Linux, pode seguir o passo a passo no post.

Configuração do ambiente host

Estou utilizando a distribuição Linux Mint 17 Qiana 64 bits, mas sem problemas em utilizar um Ubuntu ou Debian. A seguir são listados os seus pré-requisitos: 

• Qt5 Instalado com o Qt Creator;
• IDE Arduino >=1.6.2;
• Arduino UNO;
• Plugin Qt Serial.

Qt5 Widgets Application

Neste post o Qt5 Widgets será utilizado em ambiente host Linux e com desenvolvimento de aplicação para target Linux (x86 ou arm), porém Qt5 pode ser instalado tanto em Windows, Linux ou MacOS.

Abrindo o Qt Creator vamos criar nosso projeto com GUI (interface gráfica), para isso clique em File > New File or Project... e uma janela como na Figura 1 surgirá e você deverá escolher Applications > Qt Widgets Application e clicar em Choose.

Figura 1 - Criando Projeto Qt5 com Interface Grafica

Assim como na Figura 2 escolhemos um nome para o projeto, no caso, usaremos comunicação_serial_qt_gui. O diretório do projeto pode ser de sua preferência, no caso vou criar no /tmp apenas para didática do post, e clique em Next.

Figura 2 - Nome e local do projeto

Na Figura 3 selecionamos os kits para o projeto, vamos deixar o padrão ainda, em outro post estudaremos esta opção e sua importância. Clique em Next.

Figura 3 - Seleção do Kit

Na etapa a seguir pode-se optar por QMainWindow, QWidget e QDialog, basicamente todos são Widgets. Por isso quando se cria o projeto com interface gráfica (GUI) escolhemos Qt Widgets Application.

Se deseja desenvolver uma aplicação com várias telas que podem ser chamadas no decorrer da aplicação ou da janela principal o ideal é usar QMainWindow, até por que possui barra de status e título, digamos ser uma opção de interface gráfica de um nível superior. Já se é uma aplicação que você pretende usar os vários Widgets disponíveis (Buttons, Inputs, Display, Containers e Layouts) em uma única tela, use o QWidget. O QDialog é muito utilizado para uma janela temporária como as de erros, alertas e confirmações.

Mais informações e diferenças entre Qt5 Console Application e Qt5 Widgets Application você pode conferir no post.

Então em Base class, escolha QWidget e clique em Next, como na Figura 4.

Figura 4 - Seleção da Base Class que iremos usar para interface gráfica

A janela a seguir é para escolher uma ferramenta para versionamento, deixaremos como None e um resumo é exibido logo abaixo como caminho do projeto, nome e os arquivos a serem criados. Para criar o projeto clique em Finish.

Figura 5 - Tela final para selecionar versionamento ou finalizar a criação

Assim, nosso projeto será criado e uma estrutura será criada e exibida pra você como a Figura 6.

Figura 6 - Estrutura de arquivos do projeto inicial

Uma estrutura um pouco diferente do projeto com Qt Console Application, certo? Correto, mas é simples de entender. Os arquivos <seu_projeto>.pro e main.cpp são criados em ambos, e agora temos os arquivos (Sources/widget.cpp, Headers/widget.h e Forms/widget.ui), referentes ao QWidget criado, sendo o código-fonte (.cpp e .h) e a interface gráfica (.ui User Interface).

Dando dois cliques nos arquivo .cpp e .h será carregado para edição na opção Edit e dando dois cliques no .ui será carregado para edição na opção Design, onde você irá dimensionar a janela, configurá-la (lado direito), arrastar e soltar componentes (lado esquerdo) e criar a interface gráfica da sua aplicação, como na Figura 7.

Figura 7 - Tela inicial para desenhar a tela

Sem programar uma linha de código, você já pode clicar em Run (Ctrl+R) e uma janela irá aparecer na tela, com a Figura 8.

Figura 8 - Build padrão da tela inicial

Criando a Interface Gráfica com Qt5 Widgets

Vamos criar nossa primeira interface.

Figura 9 - Montando a interface grafica para comunicação serial

No estilo clicar, arrastar e soltar, montamos a tela da Figura 9.

A lista de componentes e seus tipos podem ser vistos na Tabela 1:

Se clicarmos em Run (Ctrl+R) vamos ver nossa primeira tela, deve ser algo como da Figura 10.

Figura 10 - Tela Comunicação Serial Finaliza

O que vem por aí...

Na parte 2 vamos dar continuidade no desenvolvimento e criar uma classe para lidar com toda parte de comunicação serial usando o QSerialPort, dar ações aos Widgets e realizar a comunicação serial com o Arduino.

Referências

https://www.embarcados.com.br/comunicacao-serial-com-arduino-utilizando-qt5-console-application/

http://cleitonbueno.com/qt5-conhecendo-um-verdadeiro-canivete-suico/

http://cleitonbueno.com/qt5-instalacao-em-ambiente-linux/

http://cleitonbueno.com/qt5-qt-console-e-qt-widgets/

http://doc.qt.io/qt-5/gettingstartedqt.html