Logo Mon Club Elec

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

//XXXXXXXXXXXXXXXXXX Fin du programme XXXXXXXXXXXXXXXXX

 

Articles similaires:

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.