fbpixel

Criação de uma interface gráfica com Processing

by | 27 Abr 2022 | Tutoriais | 0 comments

Etiquetas:

Neste tutorial, veremos como construir uma interface gráfica com o Processing. Existem várias ferramentas para criar uma interface gráfica:

  • linguagem de programação (C, C++, Python, Java, etc.)
  • Linguagem Web (HTML/CSS/PHP/Javascript)
  • Software (LabView, Processamento, etc.)

O software Processing usa uma linguagem semelhante à do Arduino e pode criar software para PC ou aplicação para smartphone. Isto torna-a uma ferramenta muito poderosa e fácil de usar quando já se está a trabalhar com o Arduino.

Instalação de Processamento

Vá ao site Processing.org e descarregue a versão que se adequa ao seu computador.

Pode então descomprimir o arquivo zip para o local onde pretende guardar o software. Na pasta descompactada, encontrará um ficheiro EXE executável. Faça duplo clique sobre este ficheiro para abrir Processamento.

processing-default-code Criação de uma interface gráfica com Processing

Código simples

Quanto ao Arduino, utilizaremos uma função de configuração que será executada uma vez no arranque do programa e uma função de desenho que será executada num loop como a função loop(). Nativamente, existem funções para gerir a janela do software, exibir texto ou imagens, criar formas geométricas e gerir as interacções do teclado e do rato.

color ac_black=color(51,51,51);
color ac_green=color(58,170,53);

PFont f1;
PImage logo;

void setup()
{
  
  size(800, 600);   // set the window size 
 
  surface.setTitle("AranaCorp - Simple Interface"); // set window title
  background(0); // set background to black
  //background(ac_black); // set background to color color
  smooth();
  
  logo = loadImage("https://www.aranacorp.com/wp-content/uploads/logo-100.png");
  //logo = loadImage("/img/logo-araignee1-RVB-72dpi.png");
  surface.setIcon(logo); //ad app icone
  
  image(logo,width-100,0,100,100); //add image
  
  // text
  f1 = createFont("Arial",30,true);
  textFont(f1);
  fill(ac_green);
  textAlign(CENTER); //RIGHT LEFT
  text("Hello world",width/2,height/2);
  
  
  // line
  stroke(255);     //stroke color
  strokeWeight(4);
  line(10,10,width/2, height*2/3); 
      
  // Rectangle
  fill(ac_black,100);
  stroke(255,0,0);
  strokeWeight(2);
  rectMode(CENTER);
  rect(width/2,height/2,width*2/3,height*2/3);
  
  // Circle
  fill(ac_black,100);
  stroke(0,0,255);
  strokeWeight(2);
  circle(width/2,height/2,width*2/3);
  println("Interface initialized");
}

void draw(){
  println("draw is running!");
  delay(500);
}

Resultado

processing-simple-interface-result Criação de uma interface gráfica com Processing
processing-simple-interface-monitor-result Criação de uma interface gráfica com Processing

Criar uma interface responsiva

Na interface anterior, as dimensões da janela são fixas. Se quiser poder alterar as dimensões da janela e ter a interface a aparecer correctamente, terá de fazer um desenho com capacidade de resposta! Para tal, as dimensões críticas devem ser definidas de acordo com as dimensões da largura e altura da janela. Além disso, o código que define as formas deve ser colocado na função draw() a fim de ter em conta a mudança de dimensões.

Código Responsivo

color ac_black=color(51,51,51);
color ac_green=color(58,170,53);

PFont f1;
PImage logo;

void setup()
{
  
  size(800, 600);   // set the window size 
  surface.setResizable(true);
  surface.setTitle("AranaCorp - Simple Interface"); // set window title
  background(0); // set background to black
  //background(ac_black); // set background to color color
  smooth();
  
  logo = loadImage("https://www.aranacorp.com/wp-content/uploads/logo-100.png");
  //logo = loadImage("/img/logo-araignee1-RVB-72dpi.png");
  
  println("Interface initialized");
}

void draw(){
  drawInterface();
  println("width : "+str(width));
  println("height : "+str(height));
  
}

void drawInterface(){
  surface.setIcon(logo); //ad app icone
  
  image(logo,width-100,0,100,100); //add image
  
  // text
  f1 = createFont("Arial",30,true);
  textFont(f1);
  fill(ac_green);
  textAlign(CENTER); //RIGHT LEFT
  text("Hello world",width/2,height/2);
  
  
  // line
  stroke(255);     //stroke color
  strokeWeight(4);
  line(10,10,width/2, height*2/3); 
      
  // Rectangle
  fill(ac_black,100);
  stroke(255,0,0);
  strokeWeight(2);
  rectMode(CENTER);
  rect(width/2,height/2,width*2/3,height*2/3);
  
  // Circle
  fill(ac_black,100);
  stroke(0,0,255);
  strokeWeight(2);
  circle(width/2,height/2,width*2/3);
}

Resultado

Se mudar o tamanho da janela, as formas geométricas também mudam de tamanho e posição. O tamanho do texto e da imagem não são modificados porque não dependem do tamanho da janela.

processing-responsive-interface-result1 Criação de uma interface gráfica com Processing
processing-responsive-interface-result2 Criação de uma interface gráfica com Processing

Usando a biblioteca controlP5

Para criar uma interface com botões ou caixas de texto, pode criar os seus próprios objectos com classes. Existem bibliotecas para simplificar a sua vida como a biblioteca ControlP5 que contém widgets.

  • botão
  • área de texto
  • menu drop-down
  • caixa de verificação
import controlP5.*;
ControlP5 cp5;

color ac_black=color(51, 51, 51);
color ac_green=color(58, 170, 53);

PFont f1, f2;
PImage logo;

Button btn;
ScrollableList sl;
CheckBox chck;
Textfield txt;

void setup()
{
  cp5 = new ControlP5(this);
  size(800, 600);   // set the window size 
  surface.setTitle("AranaCorp - Simple Interface"); // set window title

  logo = loadImage("https://www.aranacorp.com/wp-content/uploads/logo-100.png");
  //logo = loadImage("/img/logo-araignee1-RVB-72dpi.png");

  f1 = createFont("Arial", 30, true);
  f2 = createFont("Arial", 15, true);

  drawInterface();
  drawWidgets();

  println("Interface initialized");
}

void draw() {

}

void drawInterface() {
  background(0); // set background to black
  //background(ac_black); // set background to color color
  smooth();

  surface.setIcon(logo); //ad app icone

  image(logo, width-100, 0, 100, 100); //add image

  // text
  textFont(f1);
  fill(ac_green);
  textAlign(CENTER); //RIGHT LEFT
  text("AC Processing GUI", width/2, 50);

  // line
  stroke(255);     //stroke color
  strokeWeight(4);
  line(100, 50+10, width-100, 50+10); 

  // Rectangle
  fill(ac_black, 100);
  stroke(ac_green);
  strokeWeight(2);
  rectMode(CENTER);
  rect(width/2, height/2+30, width-40, height-120);
}

void drawWidgets() {
  // Button
  fill(ac_black, 100);
  stroke(ac_green);
  strokeWeight(2);
  btn=cp5.addButton("Click")
    .setValue(26)
    .setPosition(width/2-80/2, 150)
    .setSize(80, 25)
    .setColorBackground( color( 200, 0, 0 ) ) //default color
    .setColorForeground( color( 255, 0, 0 ) ) // mouse-over
    .setColorActive( color(0, 150, 0 ) ); //button pressed 

  //Scrollable List
  String clist[]={"COM1", "COM2", "COM3"};
  sl=cp5.addScrollableList("COM")
    .setPosition(width/2.-200/2, 200)
    .setSize(200, 100)
    .addItems(clist)
    .setItemHeight(22)
    .setBarHeight(20)
    .setBackgroundColor(color(190))
    .setColorBackground(color(60))
    .setColorActive(color(255, 128))
    .setFont(f2)
    .close() 
    // .setType(ScrollableList.LIST) // currently supported DROPDOWN and LIST
    ;
  sl.getCaptionLabel().getStyle().marginLeft = 3;
  sl.getCaptionLabel().getStyle().marginTop = 3; 


  // Checkbox
  chck = cp5.addCheckBox("checkBox")
    .setPosition(width/2-10, 250)
    //.setColorBackground(color(255))
    .setColorForeground(color(255))
    .setColorActive(ac_green)
    .setColorLabel(color(255))
    .setSize(20, 20)
    .setItemsPerRow(1)
    .setSpacingColumn(30)
    .setSpacingRow(20)
    .addItem("enable", 1)
    ;   

  // Text field
  txt=cp5.addTextfield("input")
    .setPosition(width/2-100, 300)
    .setSize(200, 40)
    .setFont(f2)
    .setFocus(true)
    .setColorBackground(color(255, 255, 255))
    .setColor(color(0))
    ;
}

public void Click(int theValue) {
  println("a button was clicked: "+theValue);
}

void COM(int n) {
  print("ScrollableList event :  ");
  println(n, cp5.get(ScrollableList.class, "COM").getItem(n).get("name"));

  drawInterface();
}

void checkBox(float[] a) {
  print("Checkbox event :  ");
  println(a);
}

public void input(String theText) {
  // automatically receives results from controller input
  println("a textfield event : "+theText);
}
processing-gui-interface-result Criação de uma interface gráfica com Processing
Interface initialized
ScrollableList event :  0 COM1
ScrollableList event :  2 COM3
Checkbox event :  [0] 1.0
Checkbox event :  [0] 0.0
a textfield event : qegert
a button was clicked: 26

Bónus: Criar um ficheiro .EXE executável

Uma vez desenvolvida a sua interface, é fácil compilá-la e partilhá-la usando a função “Exportar” do software de processamento. Para o fazer, vá ao menu “Ficheiro” e seleccione “Exportar…”. Pode então escolher o SO que deseja e se quiser adicionar uma distribuição Java no executável.

processing-file-export Criação de uma interface gráfica com Processing

Duas pastas aparecerão na pasta de scripts em que existem executáveis para versões de 32 e 64bit do Windows.

processing-file-export-resultfolder Criação de uma interface gráfica com Processing

Desta forma, pode facilmente criar e partilhar interfaces gráficas com o Processing.

Aplicações

  • Desenvolver interfaces gráficas para comunicar via USB com Arduino, Raspberry Pi e NodeMCU
  • Criar aplicações para smartphones e comunicar via Bluetooth com placas Arduino
  • Criar interfaces gráficas para comunicação sem fios com Arduino, Raspberry Pi e NodeMCU

Fontes

Submit a Comment

O seu endereço de email não será publicado. Campos obrigatórios marcados com *