Construção de uma interface gráfica utilizando python e a biblioteca kivy, para aquisição de dado de um sensor de velocidade
constrution of graphical interface using python and the kivy lib, for data aquisition via bluetooth from a velocity sensor
Autor: Gabriel G.R Castro
Email: [email protected]
Resumo: O uso de interfaces gráficas (GUI) para interpretação e analise de dados é de extrema importância. Além de poder facilitar a leitura dos dados, ela também auxilia pesquisadores e estudantes que sem vasto conhecimento na área do trabalho dissertado, possam melhor interpreta-los e tirar suas conclusões. Dessa maneira esse trabalho propõe a construção de uma GUI para o sistema Android.Que apresentará de maneira didática os dados de um sensor de velocidade lidos por uma placa raspberrypi 3 model B e enviados,pela mesma, via bluetooth para o sistema Android.
Abstract: The use of graphical interfaces (GUI) for data interpretation and analysis is extremely important. In addition to facilitating the reading of data, it also allows researchers and students with not an extensive knowledge in a specific area of knowledge, to better understand and take their conclusions. In the light of these, this work proposes the construction of a GUI for the Android system. Wich will show, in a didactic way, the data from a speed sensor read by a raspberrypi 3 model B board and sent via bluetooth to the Android system.
Esse trabalho será divido em duas partes.A primeira voltada para o computador que desenvolverá o aplicativo usando python em conjunto com kivy. A segunda é o raspberry Pi (rpi3).
Sumário
2.Desenvolvimento das telas do aplicativo
..2.1 Explicando Posicionamento dos Widgets
..2.3 Implementando multiplas telas no kivy
..2.5 Construindo SecondWindow
..2.7 Construindo a Fourth Window
4 Controle e leitura Raspberry
É necessário ter instalado o python versão >3.3, caso não possua siga os próximos passos, ou clique no link para ser levado para a documentação oficial do python
python -V **verifica a versão do python **
Caso seja inferior siga os comandos abaixo para instalar a versão 3.7 do python
sudo apt update
sudo apt install software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt update
sudo apt install python3.7
Instalar pacotes :
python -m pip install --upgrade pip setuptools virtualenv
python -m pip install kivy[base] kivy_examples
pip3 install pandas
pip3 install numpy
pip3 install kivy-garden
pip3 install os
pip3 install serial
garden install matplotlib
Primeiramente instale um sistema operacional no rpi, para isso basta seguir os passos encontrados no link. O sistema utilizado para os testes foi o Raspberry Pi OS.
Após o sistema ser implementado Instale os seguintes pacotes :
pip3 install serial
pip3 install os
sudo apt-get install rpi.gpio
Segundo sua documentação, kivy ́é uma biblioteca para Python construıda em código aberto e voltada para o de-senvolvimento rápido de aplicativos que usam interfaces gráficas, como por exemplo as aplicações multi-touch.A biblioteca Kivy pode ser executada em Linux, Windows, OSX, Android, iOS e Raspberry Pi, sem alteração no código. A estrutura mais básica do kivy são os Widgets, que nada mais são que classes que pertencem a biblioteca. Os mais simples e mais utilizados são Label, BoxLayout, Button e GridLayout.
Antes de explicar o codigo app.kv que é encontrado nesse repositório, é preciso entender como funciona essa "linguagem". De maneira simples a tela do aplicativo chamada de canvas possui um layout dinânico. Sendo assim ao invés de atribuir um tamanho fixo aos widgets, será usado o conceito de size_hint e porcentagens.Por exemplo na imagem é possivel ver como os botãos são distribuidos no canvas, a partir do arquivo exemplo.kv.
Por boas práticas é sempre interessante criar um widget com 100% da tela, normalmente é utilizado o BoxLayout ou GridLayout com número de colunas igual a 1.Nesse exemplo foi usado o gridlayout (que possui a função de dividir o espaço em grids), com cols:1 e size_hint: 100,100. Para inserir outros widgets dentro do grid basta ser escrito de maneira identada. No exemplo é utilizado mais um GridLayout, porém dessa vez com cols:2 e size_hint : 1.0.6 ou sejá o grid ocupará 100% da largura da tela e terá 60% altura da tela. Por último é utilizado agora dentro da identação do primeiro GridLayout com size_hint : 1,.4.
O projeto inicial de qualquer interface gráfica, passa primeiro por uma faze de rascunho, para só depois ser implementado. Dessa maneira o rascunho do aplicativo aqui proposto foi obtido utilizando o libreoffice writer para gerar as telas. A imagem mostra a ultima versão desses rascunhos.
Para utilizar varias telas no kivy, é necessário importar o screen manager no arquivo app.py. Para fazer isso basta adicionar a seguinte linha no arquivo:
from kivy.uix.screenmanager import ScreenManager, Screen
Após isso basta criar uma classe para cada tela que se deseja criar e mais uma para gerenciar elas. As primeiras herdam a classe Screen e a ultima a classe ScreenManager, como visto na imagem abaixo. Na imagem também é possivel ver como essas classes são utilizadas no arquivo app.kv.
Cada clase recebe um nome, name:"primeira"..."segunda"..."main", para que o usuário possa navegar entre elas.
Para construir a MainWindow, é bem simples, basta seguir o que foi discutido no item, e aplicar a ideia do posicionamentos do widgets no canvas da MainWindow. A imagem abaixo mostra o arquivo app.kv além das funções do aquivo app.py acionadas por cada botão do menu.
Essa janela também não utiliza nenhuma função diferente das já discutidas anteriormente, a exceção é somente no arquivo app.py que dessa vez envia informações via bluetooth para o raspberry via serial bluetooth. A imagem abaixo mostra o trecho dos arquivos app.kv e app.py
A terceira janela possui uma peculiaridade, a construção de um gráfico online. A maneira de implementar esse gráfico é dividida em três partes. A primeira e determinar o local que se deseja inserir o gráfico, para isso basta criar um BoxLayout do tamanho e no local que se deseja no arquivo app.kv, depois dar a ele uma id (id : graph_online). A segunda parte é criar uma função no arquivo app.py para construir o gráfico a partir da leitura do sensor. A ultima parte e criar uma função que atualizara o gráfico a cada intervalo de tempo. Para realizar essas três funções deve-se primeiro adicionar as seguintes linhas no arquivo app.py.
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg ## utilizada para usar a função matplolib em conjunto com o graden
from kivy.clock import Clock ## Essa classe serve para criar um clock, e atualizar o gráfico
A última janela usa o mesmo conceito de atualização de gráfico da terceira janela.Porém sem a necessidade de atualizar a cada intervalo de tempo, visto que os dados já estão salvos. Nesse caso o widget chamado de spinner é quem da o gatilho para limpar o gráfico antigo e aplicar um novo no local indicado no arquivo app.kv. O spinner funciona parecido com uma dropDown list, porém cada termo da lista não aciona um evento e sim retorna para um função o texto selecionado. O que nos permite explorar arquivos de maneira bem simples. A implementação foi realizada como na imagem abaixo :
