Criando interfaces gráficas com Electron para Linux Embarcado

Electron toradex

Atualmente, as GUIs (Interfaces gráficas de usuário) são muito utilizadas em diversos projetos, permitindo a interação do usuário com os dispositivos digitais através de ícones, elementos gráficos ou outros indicadores que estarão presente em uma tela.  As mesmas são muito importantes para o ramo de sistemas embarcados, pois permitem fácil utilização por parte dos usuários e disponibilizam meios de fácil entendimento, como imagens.

No mercado atual, existem diversas ferramentas para criação de GUIs, como por exemplo Qt, GTK, dentre outras. Dentre essas ferramentas, existe o Electron, um framework que permite o desenvolvimento de uma GUI através de HTML, JavaScript e CSS, fazendo com que a sensação seja a mesma de realizar um aplicativo web.

Neste artigo iremos realizar a instalação do Electron em um módulo Colibri IMX6 da Toradex, em seguida iremos apresentar algumas demonstrações de exemplos básicos para avaliar o software e, por fim, iremos desenvolver uma GUI básica no mesmo módulo utilizando Node.js, Javascript, HTML e CSS.

Setup

Para a realização deste artigo, utilizaremos os equipamentos listados abaixo:

Criando interfaces gráficas com Electron para Linux Embarcado - Módulo Colibri IMX6
Figura 1 – Módulo Colibri IMX6
Placa Aster Carrier Board
Figura 2 – Placa Aster Carrier Board
Shield padrão  do Arduino com Protoboard
Figura 3 – Shield padrão  do Arduino com Protoboard
EDT Display
Figura 4 – EDT Display

Acima temos o Módulo Colibri IMX6, a Placa Aster Carrier Board, um Shield padrão do Arduino com Protoboard e um EDT Display. Neste artigo iremos realizar o chaveamento de um LED através de uma interface de usuário implementada usando o Electron, criada em HTML e com suporte de Node.JS, CSS e Javascript para acesso ao hardware. Para que isso fosse possível, nós verificamos a GPIO do módulo que está conectada ao pino da placa. Portanto, neste artigo iremos chavear a GPIO 35 do nosso módulo e fisicamente iremos conectar um cabo da saída do pino SODIMM_133 (Pino conectado a GPIO 35) em um dos LEDs da placa. Para verificação de pinagem de outros módulos será necessário verificar este site.

Instalação do Electron

Para realizar a instalação do Electron no módulo, primeiramente iremos utilizar o gerenciador de pacotes do Angstrom (opkg) para atualizar os pacotes do sistema e realizar o download de algumas bibliotecas e pacotes que serão necessários:

Vamos executar o comando “npm init” dentro de uma pasta chamada “electron” para criar o arquivo chamado package.json que será o repositório para a instalação a seguir. Neste passo, deve-se executar o comando e pressionar “enter” para manter o arquivo padrão:

Iremos instalar o pacote pré-compilado do Electron:

Demonstração

Segue abaixo um vídeo onde são demonstradas algumas GUIs criadas a partir do Electron.

Para realizar o teste de outras GUIs, é possível realizar o download de um pacote de exemplos que pode ser encontrado aqui e testar em seu módulo seguindo os seguintes passos:

Vamos clonar o repositório dos exemplos dentro de uma pasta:

Para executar algum exemplo, basta entrar na pasta do projeto e executar o comando abaixo. Para demonstração, iremos executar a GUI “Frameless-Window”:

Na internet há muito mais exemplos de GUIs criadas pelo Electron. Em seguida, há uma interface que não está nos exemplos baixados acima, esta GUI permite interação através do link abaixo da imagem, onde se é possível mover textos de recipientes diferentes.

image2
Figura 5 – Exemplo GUI
https://bevacqua.github.io/dragula/

Desenvolvimento

O Electron requer 4 arquivos básicos. O primeiro package.json foi criado na instalação, ele tem a função de conectar com os módulos do Electron no sistema e irá executar o arquivo main.js que abrirá nossa interface gráfica. O main.js irá fazer a conexão com o arquivo index.html que irá conter os componentes visuais da interface. Por sua vez o arquivo index.html irá conectar com dois arquivos, o index.js, que irá conter os comandos utilizados para o chaveamento do LED, e o mystyle.css, que irá conter o estilo dos componentes visuais.

Primeiramente iremos criar o index.html dentro da “electron”, contendo os componentes visuais da página, sendo eles textos ou imagens. Neste arquivo iremos colocar os códigos a seguir que foram feitos em HTML:

Após, iremos criar o index.js, no qual conterá os códigos que fazem a programação do botão que será responsável por ligar e desligar o LED da placa. Neste arquivo iremos colocar os códigos a seguir que foram feitos em JavaScript:

O terceiro arquivo que iremos criar será o main.js, no qual será o arquivo responsável por abrir nossa interface gráfica e definir a resolução da mesma. Nesse arquivo iremos colocar os códigos a seguir:

O último arquivo que iremos criar será o mystyle.css, no qual conterá o estilo de nossa interface gráfica. Neste arquivo colocaremos os códigos a seguir e utilizaremos CSS:

No arquivo package.json, modificar a linha script, da seguinte forma:

Por fim, iremos executar a interface gráfica através do comando a seguir:

Ao clicarmos no botão “Switch LED”, podemos verificar que o LED no qual ligamos na saída SODIMM_133 irá ligar. Após clicarmos novamente irá desligar, assim realizando o chaveamento sempre que clicarmos.

Conclusão

Neste artigo mostramos como instalar o software Electron e demonstramos também algumas interfaces gráficas criadas nele. Em relação ao desenvolvimento de uma interface, este artigo servirá de base para a criação em todos os módulos da Toradex, variando apenas no número da GPIO do módulo. Pode-se concluir que para quem tem algum conhecimento na área de aplicativos web terá grande facilidade em utilizar tal software.

Glossário

Node.js

Node.js é um ambiente interpretador da linguagem Javascript desenvolvido para rodar no servidor (server-side). Ele possuí um módulo nativo que permite trabalhar com os sistemas de arquivos, assim, possibilitando acessar pinos GPIO providos pelo sistema. Node.js também possui outros módulos como HTTP, que podem ser usados para implementar um servidor web. Para mais informações, visite este site, onde poderá aprender muito mais sobre o node.js.

Javascript

Javascript é uma linguagem de programação interpretada pelo cliente, o que significa que ela é processada pelo navegador do usuário. Combinada com HTML e CSS, Javascript possibilita a criação de páginas web interativas, conhecidas como design responsivo. Para você que busca se aprofundar em javascript, este é um site onde você pode ter uma ótima introdução à linguagem.

HTML

HTML é uma linguagem de marcação que utilizamos para desenvolver websites. Ela é a linguagem base da internet, na qual foi criada para ser de fácil entendimento por seres humanos e também por máquinas. Para aprender um pouco mais sobre HTML, você pode acessar este site, onde poderá obter muito mais conhecimento sobre a mesma.

CSS

CSS é utilizado para definir a apresentação em páginas de internet que adotam para o seu desenvolvimento linguagens de marcação, como HTML. Ele define como serão exibidos os elementos de uma página de internet. Para aprender sobre como utilizar o CSS, você pode acessar este link, onde poderá ter uma ótima introdução.

Veja + conteúdo

Estudante de Engenharia Elétrica com ênfase em eletrônica na UNIP de Jundiaí e técnico mecatrônico pelo Divino Salvador. Estagiário em Linux embarcado na empresa Toradex Brasil.

Licença Creative Commons Esta obra está licenciada com uma Licença Creative Commons Atribuição-CompartilhaIgual 4.0 Internacional.

Receba os melhores conteúdos sobre sistemas eletrônicos embarcados, dicas, tutoriais e promoções.

Comentários:
Notificações
Notificar
guest
4 Comentários
recentes
antigos mais votados
Inline Feedbacks
View all comments
Almir Braggio
Almir Braggio
14/03/2018 15:44

Daniel, qual imagem você usou?
Estou usando uma imagem Apalis-iMX6_LXDE-Image_2.8b1.64-20171229 onde o pacote libxss não existe…
Vocês ‘toradex’ podem me ajudar?

Christian Schultz
Xultz
23/06/2017 11:35

Olá, muito legal o artigo! Poderia tirar algumas dúvidas, por favor? Primeiro eu gostaria de saber se o programa feito com electron só roda dentro do X, ou existe alguma possibilidade dele mostrar a interface gráfica sem ter que carregar o X. E também gostaria de saber que passos seriam necessários para fazer uma aplicação electron ser executada automaticamente no boot, ou seja, ligar o dispositivo, este carregar o sistema e executar a aplicação em tela cheia (de preferência, sem nenhuma opção do usuário minimizar ou fechar esta aplicação). Obrigado!

Daniel Augusto Soré de Morais
Daniel Augusto Soré de Morais
Reply to  Xultz
23/06/2017 15:14

Especificamente nas imagens da Toradex (Angstrom) é possível criar um serviço do systemd que executa um script no startup. Sugiro dar uma olhada no link a seguir:
http://developer.toradex.com/knowledge-base/how-to-autorun-application-at-the-start-up-in-linux

Quanto ao X, ainda não pesquisei e nem realizei testes, mas tentarei dar uma olhada nas próximas semanas.

Lauro Gama
lauroG
Reply to  Xultz
30/06/2017 12:07

Acho que você está pesquisando um modo quiosque. Dá uma pesquisada nesse termo

Talvez você goste:

Séries

Menu