Créer une interface graphique avec Processing

Nous allons voir dans ce tutoriel comment construire une interface graphique avec Processing. Il existe plusieurs outils pour créer une interface graphique:

• langage de programmation (C, C++, Python, Java, etc.)
• Langage Web (HTML/CSS/PHP/Javascript)
• Logiciel (LabView, Processing, etc.)

Le logiciel Processing utilise un langage similaire à celui d’Arduino et permet de créer des logiciel pour PC ou des application pour smartphone. Ce qui en fait un outil très puissant et simple de prise en main lorsqu’on travaille déjà avec des Arduino.

Installation de Processing

Rendez vous sur le site de téléchargement de Processing.org et téléchargez la version qui correspond à votre ordinateur.

Vous pouvez ensuite décompresser l’archive zip à l’endroit où vous souhaitez enregistrer le logiciel. Dans le dossier dézippé, vous trouverez un fichier EXE exécutable. Double-cliquez sur ce fichier pour ouvrir Processing.

Code simple

Comme pour Arduino, nous utiliserons une fonction setup qui s’exécutera une seule fois au démarrage du programme et une fonction draw qui s’exécutera en boucle comme la fonction loop(). Nativement, il y a des fonctions pour gérer la fenêtre du logiciel, afficher du texte ou des images, créer des formes géométriques et gérer les interactions du clavier et de la souris.

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);
}

Résultat

Créer une interface responsive

Dans l’interface précédente, les dimensions de la fenêtre sont figés. Si vous souhaitez pouvoir modifier les dimensions de la fenêtre et que l’interface apparaisse correctement, il va falloir faire un design responsive! Pour cela les dimensions critiques doivent être définies en fonction des dimensions de la fenêtre width et height. De plus, le code définissant les formes doit être placer dans la fonction draw() afin de prendre ne compte le changement de dimensions.

Code Responsive

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);
}

Résultat

Si on modifie les dimensions de la fenêtre, les formes géométriques change de taille et de position également. La taille du texte et de l’image ne sont pas modifiés car ils ne dépendent pas de la taille de la fenêtre.

Utilisation de la libraire controlP5

Pour créer une interface avec des boutons ou des zones de texte, vous pouvez créer vos propres objets avec des classes. Il existe des librairies pour vous simplifier la vie comme la librairie ControlP5 qui contient des widgets.

• bouton
• zone de texte
• menu déroulant
• case à cocher

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);
}

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

Bonus: Créer un fichier executable .EXE

Une fois que votre interface est développée, il est facile de la compiler et de la partager en utilisant la fonction « Export » du logiciel Processing. Pour cela allez dans le menu « Fichier » et sélectionnez « Export… ». Vous pouvez ensuite choisir l’OS que vous souhaitez et si vous voulez rajouter une distribution de Java dans l’exécutable.

Deux dossiers vont apparaitre dans le dossier du script dans lequel se trouve des exécutables pour les versions 32 et 64bits de Windows.

De cette manière, vous pourrez créer et partager facilement des interface graphique avec Processing.

Applications

• Développer des interfaces graphiques pour communiquer via le port USB avec des Arduino, Raspberry Pi et NodeMCU
• Créer des applications pour smartphone et communiquer via Bluetooth avec les cartes type Arduino
• Créer des interfaces graphiques pour communiquer sans-fil avec des Arduino, Raspberry Pi et NodeMCU

Sources

• Page de téléchargement Processing
• Tutoriels pour Processing
• ControlP5 Tutorials