Processing est un langage de programmation et un environnement de développement intégré (IDE) qui a été conçu pour faciliter la création d’images, d’animations et d’interfaces graphiques. Il est basé sur le langage de programmation Java et est conçu pour être facile à apprendre et à utiliser. Processing est un outil puissant pour les artistes, les designers et les développeurs qui souhaitent créer des œuvres interactives et des applications graphiques. Il est également utilisé par les scientifiques et les ingénieurs pour visualiser et analyser des données. Dans cet article, nous allons examiner les principales caractéristiques de Processing et comment il peut être utilisé pour créer des applications graphiques.
GUI ControlP5 : Test d’un bouton inverseur (Toggle) à image variable
Processing :


Description
- On crée un bouton inverseur (objet toggle) à image variable.
Ressources utilisées
- La librairie controlP5 fournissant les contrôles GUI
- Les images utilisées doivent se trouver dans le répertoire du programme (à enregistrer dans le répertoire du programme):


Explication
- L’état du bouton inverseur Toggle est indiqué par une image différente pour l’état 0 et l’état 1.
Le programme
// généré avec le générateur de code Processing
// X. HINAULT – Janvier 2011 – tous droits réservés
/////////////// Description du programme ////////////
// Utilise la librairie GUI controlP5
// Utilise un bouton inverseur (Toggle)
// 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
Toggle t1,t2; // déclare un/des objets Toggle
// déclaration variables globales
//—— déclaration des variables de couleur utiles —-
int jaune=color(255,255,0);
int vert=color(0,255,0);
int rouge=color(255,0,0);
int bleu=color(0,0,255);
int noir=color(0,0,0);
int blanc=color(255,255,255);
int bleuclair=color(0,255,255);
int violet=color(255,0,255);
// 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
//strokeWeight(0); // largeur pourtour
// — initialisation fenêtre de base —
size(120, 120); // ouvre une fenêtre xpixels x ypixels
frameRate(30);
background(255,255,225); // couleur fond fenetre
// — initialisation des objets et fonctionnalités utilisées —
//======== 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 Toggle =========
// addToggle(String theName, boolean theDefaultValue, float theX, float theY, int theWidth, int theHeight)
t1=controlP5.addToggle(« toggleLED »,false,10,10,100,100); // initialise et ajoute un Button au ControlP5
// 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 ..
// le toggle n’utilise que image Default et image Active
t1.setImages(loadImage(« imageDefault.png »),loadImage(« imageDefault.png »), loadImage(« imageActive.png »),loadImage(« imageDefault.png »));
} // fin fonction Setup
// XXXXXXXXXXXXXXXXXXXXXX Fonction Draw XXXXXXXXXXXXXXXXXXXX
void draw() { // fonction exécutée en boucle
// Accès à la valeur des objets GUI controlP5
//— accès à la valeur courante du Toggle —
//println(« Valeur Toggle= « + t1.value());
//println(« Etat Toggle= « + t1.getState());
//delay(100);
// while(true); // stoppe boucle draw
} // fin de la fonction draw()
// XXXXXXXXXXXXXXXXXXXXXX Autres Fonctions XXXXXXXXXXXXXXXXXXXXXX
// Gestion des évènements des objets GUI controlP5 —-
// —— gestion évènement Toggle ——
void toggleLED(int theValue) { // fonction évènement Toggle de meme nom – reçoit la valeur
println(« Evènement Toggle LED avec valeur = « +theValue);
}
//XXXXXXXXXXXXXXXXXX Fin du programme XXXXXXXXXXXXXXXXX
Articles similaires:
- Processing : Test d’un bouton Image
- Processing Lancer Firefox par appui sur un bouton graphique (Ubuntu):
- Régler la couleur du fond de la fenêtre à l’aide de 3 sliders
- Saisir une chaîne dans un champ texte et l’envoyer vers le port Série
- Processing Graphiques : Exemple type pour tracé progressif d’une courbe.
Articles Liés
- Javascript : Graphique Dygraphs simple
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…
- Javascript :Graphique Dygraphs simple avec timeline
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…
- Processing : interfaces graphiques : Oscilloscope multivoies avec contrôles pour chaque voie.
Le Processing est un langage de programmation open source qui permet aux utilisateurs de créer…