View  Edit  Attributes  History  Attach  Print  Search

ACCUEIL | ARDUINO > S'INSTALLER > DEBUTER > APPROFONDIR | PROCESSING | MECATRONIQUE | MATERIEL | OUTILS | TESTS | Plus...|
Python > Shell > ATELIERS Python + Qt > PyQt apps > PyQt+Arduino | Mes Robots | RepRap | Mes lib'Arduino | Mes shields Arduino | Mes distros | Les Mini-PC |
ATELIERS ARDUINO| VIDEOS | COMPRENDRE | REFERENCES | CODER | TECHNIQUE | GNU/LINUX | LIENS | Rien à voir |

Processing : Régler les paramètres d'une image à l'aide de Sliders

X. HINAULT - 25 Janvier 2011

Description

  • Plusieurs Sliders dans une fenêtre de contrôle sont utilisés pour régler les paramètres d'une Image dans la fenêtre principale.
  • On ne fait pas mieux que The Gimp (non, c'est vrai ? tu connais pas ???), mais çà permet de se faire la main pour l'utilisation des Sliders et la gestion des paramètres d'une image.

Ressources utilisées

  • La librairie controlP5 fournissant les contrôles GUI
  • L'objet PImage et ses fonctions
  • La librairie ImageAdjuster de gestion d'une image

L'image utilisée dans l'exemple est ici (à enregistrer dans le répertoire de ton programme Processing) :

Explication

  • Chaque Slider règle la valeur d'un paramètre :
    • les trois premiers règlent les canaux RGB à l'aide de la fonction tint()
    • les trois suivants règlent le contraste, la luminosité et le Gamma en se basant sur les fonctions de la librairie ImageAdjuster
  • Le bouton <PARCOURIR> permet de charger l'image de son choix.

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 String (chaîne de caractère)
// Utilise un/des objets PImage (conteneur d'image .jpeg .gif .png et .tga)
// Utilise la librairie GUI controlP5
// Utilise un bouton (Button)
// Utilise un champ texte (Textfield)
// Utilise un réglage linéaire (Slider)
// Ajoute un bouton et un champ pour chemin fichier
// Utilise une/des fenetres supplémentaires

// 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/

import imageadjuster.*; // importe la librairie ImageAdjuster (réglage paramètres image)
// cette librairie doit être présente dans le répertoire /libraries du répertoire Processing
// voir ici : http://www.davebollinger.com/works/imageadjuster/

// déclaration objets

String str1 = "machaine"; // déclare un objet String (chaine de caractère)
String cheminFichier = ""; // déclare un objet String (chaine de caractère)

PImage img1, img2, monimage; // déclare un/des objets PImage (conteneur d'image)

ImageAdjuster adjust; // déclare un objet ImageAdjuster


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

Button b1,b2; // déclare un/des objets Button
Button cheminButton; // déclare objet Button  

Textfield tf1,tf2; // déclare un/des objets Textfield
Textfield cheminText; // déclare des objets Textfield

Slider sliderTeinteR, sliderTeinteG, sliderTeinteB ; // déclare un/ des objet Slider
Slider sliderLuminosite, sliderContraste, sliderGamma; // déclare un/ des objet Slider

ControlWindow cw1; // déclare un/des objet fenetre ControlWindow

// déclaration variables globales

int TeinteR, TeinteG, TeinteB;
float Luminositef=0.0, Contrastef=1.0,  Gammaf=0.5f;


//--- variables définissant taille de la fenetre wc1
int heightwc1=250;
int widthwc1=400;

// 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(640, 480); // ouvre une fenêtre xpixels  x ypixels
        frameRate(15);
        background(0,0,0); // couleur fond fenetre

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

//---- Initialisation des objets PImage ---

        monimage = loadImage("monimage640x480.jpg"); // charge un fichier image dans l'objet PImage (conteneur d'image)
        // ce fichier doit être présent dans le répertoire du programme ou à l'emplacement indiqué
        image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing

        //======== Initialisation Objet ImageAdjuster =========

        adjust = new ImageAdjuster(this);// initialise l'objet principal de la librairie ImageAdjuster

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

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

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


        //---- le bouton Parcourir chemin
        cheminButton=controlP5.addButton("cheminButton",0,widthwc1-60,heightwc1-40,50,24); // initialise et ajoute un Button au ControlP5
        cheminButton.setLabelVisible(true); // affichage des labels
        cheminButton.setLabel("PARCOURIR"); // fixe label du bouton
        cheminButton.setColorActive(color(255,0,0)); // fixe la couleur active
        cheminButton.setColorForeground(color(0,255,255)); // fixe couleur avant

        //======== Initialisation Objets Textfield =========


        //---- champ texte saisie chemin fichier
        cheminText=controlP5.addTextfield("cheminText",10,heightwc1-40,300,20); // initialise et ajoute un Textfield au ControlP5
        cheminText.setAutoClear(false); // autoeffacement après return
        cheminText.setValue("monimage640x480.jpg"); // initialise Texte du champ
        cheminText.setLabelVisible(true); // affichage des labels
        cheminText.setLabel("CHEMIN"); // fixe label
        cheminText.setColorActive(color(255,0,0)); // fixe la couleur active
        cheminText.setColorForeground(color(0,255,255)); // fixe couleur avant


        //======== Initialisation Objets Sliders =========

        //---- slider teinte Red ---

        // addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
        sliderTeinteR=controlP5.addSlider("sliderTeinteR",0,255,127,10,10,5,150); // ajoute un Slider au ControlP5

        // méthodes propres à l'objet Slider
        sliderTeinteR.setNumberOfTickMarks(int(sliderTeinteR.max())+1); // fixe le nombre crans - n+1 pour n valeurs
        sliderTeinteR.showTickMarks(false); // affichage des repères
        sliderTeinteR.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

        // méthodes communes à tous les controles (objet Controller)
        sliderTeinteR.setLabelVisible(true); // affichage des labels
        sliderTeinteR.setLabel("R"); // fixe label objet
        sliderTeinteR.setColorActive(color(255,0,0)); // fixe la couleur active
        sliderTeinteR.setColorBackground(color(255,255,0)); // fixe couleur fond  
        sliderTeinteR.setColorForeground(color(0,0,255)); // fixe couleur avant
        sliderTeinteR.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
        sliderTeinteR.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

        //---- slider teinte Green ---

        // addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
        sliderTeinteG=controlP5.addSlider("sliderTeinteG",0,255,127,50,10,5,150); // ajoute un Slider au ControlP5

        // méthodes propres à l'objet Slider
        sliderTeinteG.setNumberOfTickMarks(int(sliderTeinteG.max())+1); // fixe le nombre crans - n+1 pour n valeurs
        sliderTeinteG.showTickMarks(false); // affichage des repères
        sliderTeinteG.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

        // méthodes communes à tous les controles (objet Controller)
        sliderTeinteG.setLabelVisible(true); // affichage des labels
        sliderTeinteG.setLabel("G"); // fixe label objet
        sliderTeinteG.setColorActive(color(255,0,0)); // fixe la couleur active
        sliderTeinteG.setColorBackground(color(255,255,0)); // fixe couleur fond  
        sliderTeinteG.setColorForeground(color(0,0,255)); // fixe couleur avant
        sliderTeinteG.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
        sliderTeinteG.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur


        //---- slider teinte Blue ---

        // addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
        sliderTeinteB=controlP5.addSlider("sliderTeinteB",0,255,127,90,10,5,150); // ajoute un Slider au ControlP5

        // méthodes propres à l'objet Slider
        sliderTeinteB.setNumberOfTickMarks(int(sliderTeinteB.max())+1); // fixe le nombre crans - n+1 pour n valeurs
        sliderTeinteB.showTickMarks(false); // affichage des repères
        sliderTeinteB.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

        // méthodes communes à tous les controles (objet Controller)
        sliderTeinteB.setLabelVisible(true); // affichage des labels
        sliderTeinteB.setLabel("B"); // fixe label objet
        sliderTeinteB.setColorActive(color(255,0,0)); // fixe la couleur active
        sliderTeinteB.setColorBackground(color(255,255,0)); // fixe couleur fond  
        sliderTeinteB.setColorForeground(color(0,0,255)); // fixe couleur avant
        sliderTeinteB.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
        sliderTeinteB.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

        //---- slider Luminosité ---

        // addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
        sliderLuminosite=controlP5.addSlider("sliderLuminosite",-0.5,0.5,0,130,10,5,150); // ajoute un Slider au ControlP5

        // méthodes propres à l'objet Slider
        sliderLuminosite.setNumberOfTickMarks(100+1); // fixe le nombre crans - n+1 pour n valeurs
        sliderLuminosite.showTickMarks(false); // affichage des repères
        sliderLuminosite.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

        // méthodes communes à tous les controles (objet Controller)
        sliderLuminosite.setLabelVisible(true); // affichage des labels
        sliderLuminosite.setLabel("Lum"); // fixe label objet
        sliderLuminosite.setColorActive(color(255,0,0)); // fixe la couleur active
        sliderLuminosite.setColorBackground(color(255,255,0)); // fixe couleur fond  
        sliderLuminosite.setColorForeground(color(0,0,255)); // fixe couleur avant
        sliderLuminosite.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
        sliderLuminosite.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur


        //---- slider Contraste ---

        // addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
        sliderContraste=controlP5.addSlider("sliderContraste",0.25,3.0,1,170,10,5,150); // ajoute un Slider au ControlP5

        // méthodes propres à l'objet Slider
        sliderContraste.setNumberOfTickMarks(100+1); // fixe le nombre crans - n+1 pour n valeurs
        sliderContraste.showTickMarks(false); // affichage des repères
        sliderContraste.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

        // méthodes communes à tous les controles (objet Controller)
        sliderContraste.setLabelVisible(true); // affichage des labels
        sliderContraste.setLabel("Cont"); // fixe label objet
        sliderContraste.setColorActive(color(255,0,0)); // fixe la couleur active
        sliderContraste.setColorBackground(color(255,255,0)); // fixe couleur fond  
        sliderContraste.setColorForeground(color(0,0,255)); // fixe couleur avant
        sliderContraste.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
        sliderContraste.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur


        //---- slider Gamma ---

        // addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
        sliderGamma=controlP5.addSlider("sliderGamma",0.25,1.75,1,210,10,5,150); // ajoute un Slider au ControlP5

        // méthodes propres à l'objet Slider
        sliderGamma.setNumberOfTickMarks(100+1); // fixe le nombre crans - n+1 pour n valeurs
        sliderGamma.showTickMarks(false); // affichage des repères
        sliderGamma.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

        // méthodes communes à tous les controles (objet Controller)
        sliderGamma.setLabelVisible(true); // affichage des labels
        sliderGamma.setLabel("Gam"); // fixe label objet
        sliderGamma.setColorActive(color(255,0,0)); // fixe la couleur active
        sliderGamma.setColorBackground(color(255,255,0)); // fixe couleur fond  
        sliderGamma.setColorForeground(color(0,0,255)); // fixe couleur avant
        sliderGamma.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
        sliderGamma.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur


        //======== Initialisation Objets ControlWindow =========

        // addControlWindow(String theWindowName,int theX, int theY, int theWidth, int theHeight,int theFrameRate)
        cw1=controlP5.addControlWindow("fenetre",100,100,widthwc1,heightwc1);// ajoute une fenetre au ControlP5

        // méthodes propres à l'objet ControlWindow
        cw1.hideCoordinates(); //masque les coordonnées
        cw1.setBackground(color(0,0,0));
        cw1.frameRate(15); // fixe le nombre de rafraichissement par seconde de la fenetre
        //cw1.setColorActive(color(255,0,0)); // fixe la couleur active
        cw1.setTitle("Reglage Image"); // titre de la fenetre
        //cw1.setLocation(100, 100) ; // fixe la localisation dans la fenetre ?
        //cw1..setUndecorated(true); // fixe la bordure de la fenêtre

        // ajout de controles à la fenetre ControlWindow
        // nomObjet.setWindow(cw1); // met l'objet dans la fenêtre
        cheminButton.setWindow(cw1); // met l'objet dans la fenêtre

        cheminText.setWindow(cw1); // met l'objet dans la fenêtre

        sliderTeinteR.setWindow(cw1); // met l'objet dans la fenêtre
        sliderTeinteG.setWindow(cw1); // met l'objet dans la fenêtre
        sliderTeinteB.setWindow(cw1); // met l'objet dans la fenêtre
        sliderLuminosite.setWindow(cw1); // met l'objet dans la fenêtre
        sliderContraste.setWindow(cw1); // met l'objet dans la fenêtre
        sliderGamma.setWindow(cw1); // met l'objet dans la fenêtre



} // fin fonction Setup

// XXXXXXXXXXXXXXXXXXXXXX Fonction Draw XXXXXXXXXXXXXXXXXXXX

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

// tout se passe dans les routines évènements slider

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

void buttonB(int theValue) { // fonction évènement Button de meme nom - reçoit la valeur
        println("Evènement Button B avec valeur = "+theValue);
}

        //---- evenement bouton chemin fichier

void cheminButton(int theValue) { // fonction évènement Button de meme nom - reçoit la valeur

        println("Evènement cheminButton avec valeur = "+theValue);

        cheminFichier=selectInput("Choisir un fichier"); // ouvre fenetre systeme sélection fichier
                // la variable cheminFichier mémorise le chemin sélectionné

        if (cheminFichier!=null) { // si un chemin fichier est sélectionné
                println("Le chemin est : "+cheminFichier);

              //--- ouvre le fichier image
              monimage = loadImage(cheminFichier); // charge un fichier image dans l'objet PImage (conteneur d'image)
              // ce fichier est à l'emplacement sélectionné
              image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing

            cheminText.setValue(cheminFichier+" "); // met à jour le champ chemin + espace propreté
        }

} // fin evènement bouton fichier

// ------ gestion évènement Textfield ------
public void textfieldA(String theText) { // fonction évènement Textfield de meme nom - déclenché par return - reçoit la chaine
        println("Evènement Textfield A avec valeur = "+theText);
}

public void textfieldB(String theText) { // fonction évènement Textfield de meme nom - déclenché par return - reçoit la chaine
        println("Evènement Textfield B avec valeur = "+theText);
}

        //---- evenement champ texte chemin fichier

public void cheminText(String theText) { // fonction évènement Textfield de meme nom - déclenché par return - reçoit la chaine

        println("Evènement CheminText avec valeur = "+theText);

        cheminFichier=theText; // mémorise le contenu du champ

        println("Le chemin est :"+cheminFichier);


} // fin evènement champ texte chemin fichier

// ------ gestion évènement Slider ------

void sliderTeinteR(float valeur) { // fonction évènement Slider de meme nom - reçoit la valeur
        println("Evènement Slider avec valeur = "+valeur);

        TeinteR=int(valeur); // met à jour la variable

        tint(TeinteR,TeinteG,TeinteB); // fixe la teinte de l'image à utiliser
        image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing
}


void sliderTeinteG(float valeur) { // fonction évènement Slider de meme nom - reçoit la valeur
        println("Evènement Slider avec valeur = "+valeur);

        TeinteG=int(valeur); // met à jour la variable

        tint(TeinteR,TeinteG,TeinteB); // fixe la teinte de l'image à utiliser
        image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing
}

void sliderTeinteB(float valeur) { // fonction évènement Slider de meme nom - reçoit la valeur
        println("Evènement Slider avec valeur = "+valeur);

        TeinteB=int(valeur); // met à jour la variable

        tint(TeinteR,TeinteG,TeinteB); // fixe la teinte de l'image à utiliser
        image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing
}

void sliderLuminosite(float valeur) { // fonction évènement Slider de meme nom - reçoit la valeur
        println("Evènement Slider avec valeur = "+valeur);

        adjust.brightness(monimage, 0, 0, monimage.width, monimage.height, valeur-Luminositef); //Lumnisosité (-0.5f à +0.5f)
        // utilise delta avec derniere valeur

        Luminositef=valeur; // mémorise dernière valeur pour le prochain passage

        delay(200);

        image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing      

}

void sliderContraste(float valeur) { // fonction évènement Slider de meme nom - reçoit la valeur
        println("Evènement Slider avec valeur = "+valeur);

        adjust.contrast(monimage, 0, 0, monimage.width, monimage.height, valeur-Contrastef+1.0f); // Contraste (0.25f à 3f) - début à 1.0
        // utilise delta avec derniere valeur
        Contrastef=valeur;
        delay(200);


        image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing      

}

void sliderGamma(float valeur) { // fonction évènement Slider de meme nom - reçoit la valeur
        println("Evènement Slider avec valeur = "+valeur);

        adjust.gamma(monimage, 0, 0, monimage.width, monimage.height, valeur-Gammaf+1.0f); //(+ 0.25 à + 1.75) - début à 1.0
        // utilise delta avec derniere valeur
        Gammaf=valeur; // mémorise dernière valeur
        delay(200);

        image(monimage, 0, 0, width, height);// affiche l'image dans la fentre processing      

}
//XXXXXXXXXXXXXXXXXX Fin du programme XXXXXXXXXXXXXXXXX