Processing : Test d’un bouton Image

Le Processing est un langage de programmation open source qui permet aux développeurs de créer des applications interactives et des images dynamiques. Dans ce test, nous allons examiner le bouton Image, qui est l’un des éléments les plus importants de Processing. Nous allons voir comment il fonctionne et comment il peut être utilisé pour créer des applications interactives et des images dynamiques. Nous allons également examiner les différentes fonctionnalités et les avantages qu’il offre aux développeurs. Enfin, nous allons discuter des différentes façons dont le bouton Image peut être utilisé pour améliorer l’expérience utilisateur.

Processing : Test d’un bouton Image

Description

Un bouton change d’aspect au passage de la souris, par changement d’image.

Ressources utilisées

La librairie controlP5 fournissant les contrôles GUI
Les images utilisées à mettre dans le répertoire Processing (images réalisées sous Inkscape et enregistrée avec The Gimp au format .png) :

Explication

On utilise 3 images différentes pour le bouton :
- une par défaut
- une lorsque la souris passe dessus
- une lorsque l’on clique dessus
L’idée est de faire 3 images de la même taille que le bouton et quasi identiques (juste changement de couleur et de forme).

Le programme

// Programme processing
// généré avec le générateur de code Processing
// X. HINAULT – Janvier 2011 – tous droits réservés

/////////////// Description du programme ////////////
// Utilise un/des objets PImage (conteneur d’image .jpeg .gif .png et .tga)
// Utilise la librairie GUI controlP5
// Utilise un bouton (Button)

// XXXXXXXXXXXXXXXXXXXXXX ENTETE DECLARATIVE XXXXXXXXXXXXXXXXXXXXXX

// inclusion des librairies utilisées

import controlP5.*; // importe la librairie GUI controlP5
// cette librairie doit être présente dans le répertoire /libraries du répertoire Processing
// voir ici : http://www.sojamo.de/libraries/controlP5/

// déclaration objets

ControlP5 controlP5; // déclare un objet principal de la librairie GUI controlP5

Button b1; // déclare un/des objets Button

// déclaration variables globales

// XXXXXXXXXXXXXXXXXXXXXX Fonction SETUP XXXXXXXXXXXXXXXXXXXXXX

void setup(){ // fonction d’initialisation exécutée 1 fois au démarrage

// —- initialisation paramètres graphiques utilisés
colorMode(RGB, 255,255,255); // fixe format couleur R G B pour fill, stroke, etc…
fill(0,0,255); // couleur remplissage RGB
stroke (0,0,0); // couleur pourtour RGB
rectMode(CORNER); // origine rectangle : CORNER = coin sup gauche | CENTER : centre
imageMode(CORNER); // origine image : CORNER = coin sup gauche | CENTER : centre

// — initialisation fenêtre de base —
size(220, 220); // ouvre une fenêtre xpixels x ypixels
frameRate(30);
background(0,0,0); // couleur fond fenetre

// — initialisation des objets et fonctionnalités utilisées —

//—- Initialisation des objets PImage —

//======== Initialisation Objets GUI ControlP5 =========

controlP5 = new ControlP5(this); // initialise l’objet principal de la librairie GUI controlP5

// typeObjet nomObjet=controlP5.addObjet(paramètres); // pour info : déclaration / initialisation possible en 1 ligne
// Textfield field = controlP5.addTextfield(« myWindowTextfield »,70,130,100,20); // exemple

//======== Initialisation Objets Button =========

// addButton(String theName, float theValue, int theX, int theY, int theW, int theH)
b1=controlP5.addButton(« buttonA »,100,10,10,200,200); // initialise et ajoute un Button au ControlP5
//b2=controlP5.addButton(« buttonB »,255,10,35,50,24); // initialise et ajoute un Button au ControlP5

// méthodes propres à l’objet Button

// méthodes communes à tous les controles (objet Controller)
b1.setLabelVisible(false); // affichage des labels
b1.setLabel(« Label »); // fixe label objet
//b1.setDecimalPrecision(2); // fixe la précision
b1.setColorActive(color(255,0,0)); // fixe la couleur active
b1.setColorBackground(color(255,0,255)); // fixe couleur fond
b1.setColorForeground(color(0,0,255)); // fixe couleur avant
b1.setColorCaptionLabel(color(0,0,0)); // fixe couleur Label
b1.setColorValueLabel(color(0,0,255)); // fixe la couleur valeur

// setImages(PImage theImageDefault,PImage theImageOver, PImage theImageActive,PImage theImageHighlight)
// les images doivent etre de la meme taille que bouton, dans rép prog, type .jpg .png ..
b1.setImages(loadImage(« monimageDefault.png »),loadImage(« monimageOver.png »), loadImage(« monimageActive.png »),loadImage(« monimageDefault.png »));

} // fin fonction Setup

// XXXXXXXXXXXXXXXXXXXXXX Fonction Draw XXXXXXXXXXXXXXXXXXXX

void draw() { // fonction exécutée en boucle

} // fin de la fonction draw()

// XXXXXXXXXXXXXXXXXXXXXX Autres Fonctions XXXXXXXXXXXXXXXXXXXXXX

// Gestion des évènements des objets GUI controlP5 —-

// —— gestion évènement Button ——
void buttonA(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button A avec valeur = « +theValue);
}