La sélection des couleurs

Le widget de sélection de couleurs est, ce n'est pas surprenant, un widget pour sélectionner les couleurs de manière interactive. Ce widget composé laisse l'utilisateur choisir une couleur en manipulant les triplés RGB ( Rouge, Vert, Bleu ) ou HVS ( Teinte, Saturation, Valeur ) On le fait soit en ajustant chacune des valeurs avec un curseur ou avec une entrée texte soit en pointant sur la couleur désirée dans le cercle de teinte-saturation et dans la barre de valeur.

Le widget de sélection de couleurs n'émet qu'un seul signal color_changed qui est émis si la couleur courante du widget change ou quand l'utilisateur la change ou si elle est choisie explicitement à l'aide de la fonction selection_set_color().

Regardons ce que le widget de sélection de couleurs nous propose. Le widget existe sous deux moutures : Gtk::ColorSelection et Gtk::ColorSelectionDialog.

  
$color = new Gtk::ColorSelection();

Vous n'utiliserez probablement jamais ce constructeur directement. Il crée juste un widget de sélection de couleurs orphelin que vous aurez à parenter vous-même. Le widget de sélection de couleurs hérite du widget VBox.

  
$color = new Gtk::ColorSelectionDialog ( $title);

C'est le constructeur le plus commun. Il crée une fenêtre de dialogue de sélection de couleur. Elle est composée d'un cadre contenant un widget de sélection de couleurs, un séparateur horizontal, une HBox avec trois boutons, ``Ok'', ``Cancel'' et ``Help''. Vous pouvez atteindre ces boutons en accédant aux widgets ok_button, cancel_button et help_button dans la structure du widget de sélection de couleurs. ( i.e., $colordialog->ok_button ).

  
$colordialog->set_update_policy ( $policy );

Cette fonction déclare la politique de mise à jour. La politique par défaut est 'continuous' qui signifie que la couleur courante est mise à jour continuellement quand l'utilisateur prend le curseur, clique sur la souris, se déplace dans le cercle de teinte-saturation ou la barre de valeur. Si vous rencontrez des problèmes de performance, n'hésitez pas à choisir 'discontinuous' ou 'delayed'.

  
$colordialog->set_opacity ( $use_opacity);

Le widget de sélection de couleurs supporte le réglage de l'opacité d'une couleur ( également connu comme courbe alpha ). Ce n'est pas disponible par défaut. Appeler cette fonction avec une valeur de $use_opacity permet l'opacité. De même, une valeur fausse rend l'opacité indisponible.

  
$colordialog->set_color ( $color );

Vous pouvez déclarer explicitement la couleur courante en appelant cette fonction avec une liste de couleur. La longueur de l'array, dépend si l'opacité est disponible ou non. La position 0 contient la composante de rouge, 1 celle de vert, 2 celle de bleu ( seulement si l'opacité est disponible ). Toutes les valeurs sont comprises entre 0.0 et 1.0.

  
$colordialog->get_color();

Quand vous voulez vous renseigner sur la couleur actuelle, typiquement quand vous avez reçu le signal color_changed, vous pouvez utiliser cette fonction. Une liste de couleurs à remplir est retournée. Voir set_color() pour avoir une description de cette liste.

Exemple

Voici un exemple simple montrant l'usage d'une fenêtre de dialogue de sélection de couleurs. Ce programme affiche une fenêtre contenant une zone de dessin. Si vous cliquez dessus ouvre une fenêtre de sélection de couleurs et changer la couleur dans cette fenêtre de dialogue change la couleur de fond de la zone de dessin. En bonus, il affiche les couleurs au format hexadécimal utilisé en HTML. Avec ce format, les deux premiers caractères sont la valeur de la composante rouge, les deux suivants celle de vert et les deux derniers celle de bleu.

Un bon exercice serait de changer le label en une entrée texte afin de vous permettre de saisir une couleur HTML et de changer la couleur de la zone de dessin en accord. Vous pourriez aussi vérifier que la couleur HTML entrée est valide.

  
#!/usr/bin/perl -w
 
 

use Gtk;

use strict;
 

init Gtk;
 

my $false = 0;

my $true = 1;
 

my $dialog_shown = $false;
 

my $window;

my $mainbox;

my $drawingarea;

my $buttonbox;

my $button;

my $label;

my $colorsel;

my $colormap;

my $gdk_color;
 

$window = new Gtk::Window( "toplevel" );

$window->set_title( "Color Selection Test" );

$window->border_width( 10 );

$window->realize();

$window->signal_connect( "delete_event", sub { Gtk->exit( 0 ); } );
 

$mainbox = new Gtk::VBox( $false, 10 );

$window->add( $mainbox );

$mainbox->show();
 

# Crée un bouton avec une aire de dessin à l'intérieur

$button = new Gtk::Button();

$button->signal_connect( "clicked", \&select_color );

$button->show();

$mainbox->pack_start( $button, $false, $false, 0 );
 

$buttonbox = new Gtk::VBox( $false, 0 );

$buttonbox->show();

$button->add( $buttonbox );
 

$drawingarea = new Gtk::DrawingArea();

$drawingarea->size( 32, 32 );

$drawingarea->show();

$buttonbox->pack_start( $drawingarea, $false, $false, 0 );
 

$colormap = $drawingarea->window->get_colormap();

$gdk_color = Gtk::Gdk::Color->parse_color( "black" );

$gdk_color = $colormap->color_alloc( $gdk_color );

$drawingarea->window->set_background( $gdk_color );
 

$label = new Gtk::Label( "HTML color:  #FFFFFF" );

$label->show();

$mainbox->pack_start( $label, $false, $false, 0 );
 

$window->show();
 

main Gtk;

exit( 0 );
 
 
 

### Routines
 

# gestionnaire d'évènement de l'aire de dessin

sub select_color
  {
    my ( $drawingarea ) = @_;
    
    my $colordialog = "";
 
    unless ( $dialog_shown )
      {
        # Crée une fenêtre de dialogue de sélection de couleur
        $colordialog = new Gtk::ColorSelectionDialog( "Select Color");
 
        $dialog_shown = $true;
 
        # Récupère le widget de sélection de couleurs
        $colorsel = $colordialog->colorsel;
        
        $colordialog->ok_button->signal_connect( "clicked",
                                                 \&close_dialog,
                                                 $colordialog );
        $colordialog->cancel_button->signal_connect( "clicked",
                                                     \&close_dialog,
                                                     $colordialog );
 
        # Connecte le signal "color_changed" et déclare la donnée cliente
        # au widget colorsel
        $colorsel->signal_connect( "color_changed", \&color_changed_cb );
        
        # Montre la fenêtre de dialogue
        $colordialog->show();
      }
  }
 
 

sub color_changed_cb
  {
    my ( $colorsel ) = @_;
    my @color;
    my $red;
    my $green;
    my $blue;
 
    @color = $colorsel->get_color();
    
    $gdk_color->{ 'red' } = $color[0] * 65535.0;
    $gdk_color->{ 'green' } = $color[1] * 65535.0;
    $gdk_color->{ 'blue' } = $color[2] * 65535.0;
 
    # Convertit au format HTML 
    $red = $gdk_color->{ 'red' } / 256;
    $green = $gdk_color->{ 'green' } / 256;
    $blue = $gdk_color->{ 'blue' } / 256;
 
    $red = uc( sprintf( "%lx", $red ) );
    $green = uc( sprintf( "%lx", $green ) );
    $blue = uc( sprintf( "%lx", $blue ) );
 
    $red = "0" . $red if ( $red =~ /^\d$/ );
    $green = "0" . $green if ( $green =~ /^\d$/ );
    $blue = "0" . $blue if ( $blue =~ /^\d$/ );
 
    $label->set_text( "HTML color:  #" . $red . $green . $blue . "\n" );
 
    $gdk_color = $colormap->color_alloc( $gdk_color );
    $drawingarea->window->set_background( $gdk_color );
    $drawingarea->window->clear();
  }
 

sub close_dialog
  {
    my ( $button, $colordialog ) = @_;
 
    $colordialog->hide();
    $dialog_shown = $false;
  }