Dernière mise à jour le 24 septembre 2018 par LMD

Installer controlP5

Il faut d’abord charger la bibliothèque controlP5 dans Processing pour avoir accès à la création d’éléments d’interface grâce à de nombreux contrôleurs, comme ci-dessous par exemple.

Menu Sketch > Importer une librairie > Ajouter une librairie…

Chercher controlP5 dans la liste, le sélectionner puis cliquer sur le bouton Install en bas à droite.

Voir l’usage des contrôleurs dans les exemples : Menu Fichier > Exemples… > Contributed Libraries > ControlP5.

Positionner les Labels

Pour créer un contrôleur, par exemple un slider, le code de base ressemble à cela dans le setup() :

cp5.addSlider("nom")
  .setPosition(10, 20)
  .setSize(90, 10)
  .setRange(0, 100)
  .setValue(0)
  .setLabel("étiquette")
  ;

Ici, il faut choisir le nom du slider. Une variable doit être créée préalablement avec le même nom. Celui-ci doit etre en bas-de-casses et ne comporter aucun caractère spécial. Les paramètres de position (setPosition), dimension (setSize), échelle de valeurs (setRange), valeur par défaut (setValue) et étiquette (setLabel) sont définis. L’étiquette correspond au texte qui apparait dans l’interface. Il est possible  d’utiliser tous signes pour cela mais il faut être clair. C’est en général le minimum que l’on utilise. La liste complète est visible dans les exemples (Menu Fichier > Exemples…).

Afin de pouvoir contrôler certains paramètres non présents dans cette liste, il faut légèrement modifier le code, comme ci-dessous :

Slider sl1 = cp5.addSlider("nom")
  .setPosition(10, 20)
  .setSize(90, 10)
  .setRange(0, 100)
  .setValue(0)
  .setLabel("étiquette")
  .setColorLabel(110) // gris foncé
  ;

Label labelSl1 = sl1.getCaptionLabel();
labelSl1.align(ControlP5.TOP, LEFT);
labelSl1.getStyle().setMarginTop(-10);

La différence tient dans une variable du mime type que le contrôleur, ici Slider, à laquelle on doit donner un nom, ici sl1 (pour slider 1 par exemple). Cela permet d’ajouter après le point-virgule, des lignes de code pour régler de nouveaux paramètres.

Ici, nous allons modifier la position de l’étiquette.  Il faut commencer par créer une nouvelle variable de type Label, que j’ai choisi de nommer labelSl1. On peut alors lui attribuer des paramètres.
D’abord l’alignement. les valeurs d’alignement sont d’abord verticale (TOP, BOTTOM, TOP_OUTSIDE, BOTTOM_OUTSIDE), puis horizontale (LEFT, RIGHT, LEFT_OUTSIDE, RIGHT_OUTSIDE).
Enfin, un décalage par rapport à la position obtenue peut etre appliqué en pixels (setMarginTop, setMarginBottom, setMarginLeft, setMarginRight, setPaddingTop, setPaddingBottom, setPaddingLeft, setPaddingRight).

De la même manière, il est possible de modifier d’autres paramètres d’un Label, par exemple sa visibilité :

labelSl1.hide;

Modifier un paramètre d’un contrôleur sur un événement

Il faut pour cela créer une fonction controlEvent spécifique, après (et surtout en dehors) le draw, afin de détecter une action sur un contrôleur.

Par exemple :

public void controlEvent(ControlEvent theEvent) {
  if(theEvent.isController()) {
    // désigne un contrôleur par son nom
  if(theEvent.getController().getName()=="slider1") {
    float value = theEvent.getController().getValue();

       // prevent warnings at start
      if(cp5.getController("slider1") != null) {
// modifie   les couleurs du slider1
cp5.getController("slider1").setColorForeground(color(r,v,b));
cp5.getController("slider1").setColorActive(color(r,v,b));
cp5.getController("slider1").setColorBackground(color(r,v,b));
// modifie une propriété d'un autre slider
cp5.getController("slider2").setColorForeground(color(r,v,b));
         }
      }
   }
}

Parfois, il suffit de créer une fonction portant le nom du contrôleur.

Par exemple, pour un contrôleur Bang, qui s’appellerait « reset »  :

public void reset() {
  // redessiner l'écran
  background(255);

  // remettre un slider à sa valeur initiale
  Slider sl1 = ((Slider)cp5.getController("nom"));
  sl1.setValue(nom);
}

Exemple pour Masquer ou afficher un bouton

Les contrôleurs CP5 ne doivent pas être placés dans le draw(), sinon Processing pense qu’il les crée plusieurs fois et cela génère des erreurs. Il faut les créer une seule fois dans le setup().

Ensuite, il est possible de modifier leurs propriétés. Pour un bouton, la modification d’état du bouton se fait par un void spéccifique, par exemple pour un bouton nommé A, lorsqu’on appuie dessus, il commence par disparaitre, puis réalise les actions de votre choix :

public void A(int theValue) {
   cp5.getController("A").hide();
   // actions à saisir
}

Le contrôle des propriétés de ce bouton se font donc en écrivant la ligne cp5.getController(« A »).propriété();

Ici les propriétés hide() et show() permettent de masquer ou d’afficher un bouton. La ligne suivante permet d’afficher le bouton nommé « B ».

cp5.getController("B").show();