Criando interfaces gráficas com Electron para Linux Embarcado

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:

Os Melhores Treinamentos sobre Sistemas embarcados e IoT

Cursos com professores qualificados para acelerar sua carreira e projetos

MATRÍCULE-SE AGORA

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:

opkg update
opkg install libxss1 libcups2 nodejs nodejs-npm git

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:

 
mkdir electron
cd electron
npm init
 
name: (electron) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/root/electron/package.json:
 
{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Iremos instalar o pacote pré-compilado do Electron:

npm install electron-prebuilt

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:

mkdir Exemplos
cd Exemplos
git clone https://github.com/hokein/electron-sample-apps.git

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

cd electron-sample-apps
cd frameless-window
~/electron/node_modules/.bin/electron .

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.

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:

 
<!DOCTYPE html>
<head>
  <title>Toradex Demo</title>
  <link href="mystyle.css" rel="stylesheet">
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <input type="button" class="button" onclick="chaveamento();" value="Switch LED" />
</body>
</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:

var x;
var fs = require('fs');
function set()
{
        fs.writeFile('/sys/class/gpio/export', 35, function(err)
        {
                if (err)
                {
                console.log(err);
                }
                else
                {
                fs.writeFile('/sys/class/gpio/gpio35/direction', "out", function(err)
                {
                        if (err) {
                        console.log(err)
                };
                });
        }
        });
}
function chaveamento()
{
        if (x  === 1)
                {
                        x = 0;
                        fs.writeFile('/sys/class/gpio/gpio35/value', 0);
                }
        else
                {
                        x = 1;
                        fs.writeFile('/sys/class/gpio/gpio35/value', 1);
                }
}
//inicialization
set();
console.log("Hello World")

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:

const electron = require('electron')
const {app, BrowserWindow} = electron
 
app.on('ready', () => {
  let win = new BrowserWindow({width:1280, height: 720})
  win.setFullScreen(true)
  win.loadURL(`file://${__dirname}/index.html`)
})

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:

 
body
{
        background-color: #222930;
}
h1
{
        color: #E9E9E9;
        text-align: center;
}
.button {
  margin-left: 43%;
  margin-right: 37%;
  background: #93c5e6;
  background-image: -webkit-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: -moz-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: -ms-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: -o-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: linear-gradient(to bottom, #93c5e6, #6eb4e0);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  padding: 30px 30px 30px 30px;
  text-decoration: none;
}

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

"scripts": {
    "start": "electron main.js"
  },

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

npm start

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.