Combo de sélection de couleurs

Bonjour à tous !

Après la combo wysiwyg de sélection de police de caractères, je vous propose une nouvelle combo pour choisir une couleur.

Elle est composée de 5 objets :

500 : ALPHA, qui représente la légende au-dessus de la combo ;
501 : PICTURE, le dessin de la combo ;
502 : PICTURE, La zone de rendu de la couleur sélectionnée ;
503 : PANEL, support de la palette de couleurs ;
504 : PICTURE, palette de couleurs.

La couleur choisie est retournée dans les variables r%, v% et b%, déclarées en début de code-source.

Capture d’écran de la combo non dépliée :

Capture d’écran de la combo dépliée :

Le code source :

Code:: ' Combo de choix couleur
' Marc - avril 2021

' Dans cet exemple, la combo-couleur occupe les numéros d'objets 500,501,502,503 et 504

dim r%,v%,b%

label affichePaletteCouleurs, choixCouleur

' syntaxe : comboCouleurs(position en x,position en y)
comboCouleurs(100,80)

end

sub comboCouleurs(x%,y%)
   ' légende
   alpha 500
   left 500,X%
   top 500,y%-15
   caption 500,"Sélection Couleur :"

   ' créer design combo
   picture 501
   width 501,145
   height 501,24
   left 501,x%
   top 501,y%
   color 501,255,255,255
   2d_target_is 501
   2d_pen_color 160,160,160
   2d_line 0,0,144,0
   2d_line 0,0,0,23
   2d_line 141,3,141,21
   2d_line 127,20,142,20
   2d_pen_color 105,105,105
   2d_line 1,1,143,1
   2d_line 1,1,1,22
   2d_line 142,1,142,22
   2d_line 126,21,143,21
   2d_pen_color 227,227,227
   2d_line 1,22,144,22
   2d_line 143,1,143,23
   2d_line 126,2,142,2
   2d_line 126,2,126,21
   2d_fill_color 240,240,240
   2d_pen_color 240,240,240
   2d_rectangle 128,4,141,20
   2d_pen_color 0,0,0
   2d_line 131,10,138,10
   2d_line 132,11,137,11
   2d_line 133,12,136,12
   2d_point 134,13

   ' créer zone de rendu de la couleur sélectionnée
   picture 502
   width 502,124
   height 502,20
   left 502,x%+2
   top 502,y%+2
   color 502,255,255,254
   on_click 502,affichePaletteCouleurs
   on_click 501,affichePaletteCouleurs

   ' "Support" palette de couleurs
   panel 503
   top 503,y%+24
   left 503,x%
   height 503,164
   width 503,218
   hide 503
   command_target_is 503

   dessinerPaletteCouleurs()

   show 504
   cursor_cross 504
   on_click 504,choixCouleur

   ' prédéfinir la couleur par défaut
   r% = 255
   v% = 255
   b% = 255
   color 502,r%,v%,b%
end_sub

choixCouleur:
   r% = COLOR_PIXEL_RED(504,MOUSE_X_POSITION(504),MOUSE_Y_POSITION(504))
   v% = COLOR_PIXEL_GREEN(504,MOUSE_X_POSITION(504),MOUSE_Y_POSITION(504))
   b% = COLOR_PIXEL_BLUE(504,MOUSE_X_POSITION(504),MOUSE_Y_POSITION(504))
   color 502,r%,v%,b%
   hide 503
return

affichePaletteCouleurs:
   if hide(503) = 1
   show 503
   else
   hide 503
   end_if
return

sub dessinerPaletteCouleurs()
   create_hide
   picture 504
   width 504,218
   height 504,164
   color 504,240,240,240
   2d_target_is 504

   ' chaque echantillon de couleur fait 22(L) x 18(h) pixels
   ' interstice de 2 pixels

   ' 1ère colonne
   2d_pen_color 63,63,0
   2d_fill_color 63,63,0
   2d_rectangle 2,2,24,20

   2d_pen_color 127,127,0
   2d_fill_color 127,127,0
   2d_rectangle 2,22,24,40

   2d_pen_color 191,191,0
   2d_fill_color 191,191,0
   2d_rectangle 2,42,24,60

   2d_pen_color 255,255,0
   2d_fill_color 255,255,0
   2d_rectangle 2,62,24,80

   2d_pen_color 255,255,63
   2d_fill_color 255,255,63
   2d_rectangle 2,82,24,100

   2d_pen_color 255,255,127
   2d_fill_color 255,255,127
   2d_rectangle 2,102,24,120

   2d_pen_color 255,255,191
   2d_fill_color 255,255,191
   2d_rectangle 2,122,24,140

   2d_pen_color 255,255,255
   2d_fill_color 255,255,255
   2d_rectangle 2,144,24,162

   ' 2ème colonne
   2d_pen_color 64,41,0
   2d_fill_color 64,41,0
   2d_rectangle 26,2,48,20

   2d_pen_color 128,83,0
   2d_fill_color 128,83,0
   2d_rectangle 26,22,48,40

   2d_pen_color 191,124,0
   2d_fill_color 191,124,0
   2d_rectangle 26,42,48,60

   2d_pen_color 255,168,0
   2d_fill_color 255,168,0
   2d_rectangle 26,62,48,80

   2d_pen_color 255,188,63
   2d_fill_color 255,188,63
   2d_rectangle 26,82,48,100

   2d_pen_color 255,210,128
   2d_fill_color 255,210,128
   2d_rectangle 26,102,48,120

   2d_pen_color 255,232,191
   2d_fill_color 255,232,191
   2d_rectangle 26,122,48,140

   2d_pen_color 223,223,223
   2d_fill_color 223,223,223
   2d_rectangle 26,144,48,162

   ' 3ème colonne
   2d_pen_color 56,29,7
   2d_fill_color 56,29,7
   2d_rectangle 50,2,72,20

   2d_pen_color 113,56,15
   2d_fill_color 113,56,15
   2d_rectangle 50,22,72,40

   2d_pen_color 168,85,23
   2d_fill_color 168,85,23
   2d_rectangle 50,42,72,60

   2d_pen_color 224,111,31
   2d_fill_color 224,111,31
   2d_rectangle 50,62,72,80

   2d_pen_color 232,149,87
   2d_fill_color 232,149,87
   2d_rectangle 50,82,72,100

   2d_pen_color 239,184,143
   2d_fill_color 239,184,143
   2d_rectangle 50,102,72,120

   2d_pen_color 248,220,199
   2d_fill_color 248,220,199
   2d_rectangle 50,122,72,140

   2d_pen_color 191,191,191
   2d_fill_color 191,191,191
   2d_rectangle 50,144,72,162

   ' 4ème colonne
   2d_pen_color 64,0,0
   2d_fill_color 64,0,0
   2d_rectangle 74,2,96,20

   2d_pen_color 127,0,0
   2d_fill_color 127,0,0
   2d_rectangle 74,22,96,40

   2d_pen_color 191,0,0
   2d_fill_color 191,0,0
   2d_rectangle 74,42,96,60

   2d_pen_color 255,0,0
   2d_fill_color 255,0,0
   2d_rectangle 74,62,96,80

   2d_pen_color 255,63,63
   2d_fill_color 255,63,63
   2d_rectangle 74,82,96,100

   2d_pen_color 255,127,127
   2d_fill_color 255,127,127
   2d_rectangle 74,102,96,120

   2d_pen_color 255,191,191
   2d_fill_color 255,191,191
   2d_rectangle 74,122,96,140

   2d_pen_color 159,159,159
   2d_fill_color 159,159,159
   2d_rectangle 74,144,96,162

   ' 5ème colonne
   2d_pen_color 91,0,14
   2d_fill_color 91,0,14
   2d_rectangle 98,2,120,20

   2d_pen_color 157,0,23
   2d_fill_color 157,0,23
   2d_rectangle 98,22,120,40

   2d_pen_color 221,0,33
   2d_fill_color 221,0,33
   2d_rectangle 98,42,120,60

   2d_pen_color 255,27,64
   2d_fill_color 255,27,64
   2d_rectangle 98,62,120,80

   2d_pen_color 255,91,116
   2d_fill_color 255,91,116
   2d_rectangle 98,82,120,100

   2d_pen_color 255,155,170
   2d_fill_color 255,155,170
   2d_rectangle 98,102,120,120

   2d_pen_color 255,193,203
   2d_fill_color 255,193,203
   2d_rectangle 98,122,120,140

   2d_pen_color 127,127,127
   2d_fill_color 127,127,127
   2d_rectangle 98,144,120,162

   ' 6ème colonne
   2d_pen_color 63,0,63
   2d_fill_color 63,0,63
   2d_rectangle 122,2,144,20

   2d_pen_color 127,0,127
   2d_fill_color 127,0,127
   2d_rectangle 122,22,144,40

   2d_pen_color 191,0,191
   2d_fill_color 191,0,191
   2d_rectangle 122,42,144,60

   2d_pen_color 255,0,255
   2d_fill_color 255,0,255
   2d_rectangle 122,62,144,80

   2d_pen_color 255,63,255
   2d_fill_color 255,63,255
   2d_rectangle 122,82,144,100

   2d_pen_color 255,128,255
   2d_fill_color 255,128,255
   2d_rectangle 122,102,144,120

   2d_pen_color 255,191,255
   2d_fill_color 255,191,255
   2d_rectangle 122,122,144,140

   2d_pen_color 95,95,95
   2d_fill_color 95,95,95
   2d_rectangle 122,144,144,162

   ' 7ème colonne
   2d_pen_color 50,0,50
   2d_fill_color 50,0,50
   2d_rectangle 146,2,168,20

   2d_pen_color 65,15,112
   2d_fill_color 65,15,112
   2d_rectangle 146,22,168,40

   2d_pen_color 105,24,179
   2d_fill_color 105,24,179
   2d_rectangle 146,42,168,60

   2d_pen_color 138,43,225
   2d_fill_color 138,43,225
   2d_rectangle 146,62,168,80

   2d_pen_color 170,101,233
   2d_fill_color 170,101,233
   2d_rectangle 146,82,168,100

   2d_pen_color 200,153,240
   2d_fill_color 200,153,240
   2d_rectangle 146,102,168,120

   2d_pen_color 230,207,248
   2d_fill_color 230,207,248
   2d_rectangle 146,122,168,140

   2d_pen_color 63,63,63
   2d_fill_color 63,63,63
   2d_rectangle 146,144,168,162

   ' 8ème colonne
   2d_pen_color 0,0,63
   2d_fill_color 0,0,63
   2d_rectangle 170,2,192,20

   2d_pen_color 0,0,127
   2d_fill_color 0,0,127
   2d_rectangle 170,22,192,40

   2d_pen_color 0,0,191
   2d_fill_color 0,0,191
   2d_rectangle 170,42,192,60

   2d_pen_color 0,0,255
   2d_fill_color 0,0,255
   2d_rectangle 170,62,192,80

   2d_pen_color 63,63,255
   2d_fill_color 63,63,255
   2d_rectangle 170,82,192,100

   2d_pen_color 127,127,255
   2d_fill_color 127,127,255
   2d_rectangle 170,102,192,120

   2d_pen_color 191,191,255
   2d_fill_color 191,191,255
   2d_rectangle 170,122,192,140

   2d_pen_color 31,31,31
   2d_fill_color 31,31,31
   2d_rectangle 170,144,192,162

   ' 9ème colonne
   2d_pen_color 0,63,0
   2d_fill_color 0,63,0
   2d_rectangle 194,2,216,20

   2d_pen_color 0,127,0
   2d_fill_color 0,127,0
   2d_rectangle 194,22,216,40

   2d_pen_color 0,191,0
   2d_fill_color 0,191,0
   2d_rectangle 194,42,216,60

   2d_pen_color 0,255,0
   2d_fill_color 0,255,0
   2d_rectangle 194,62,216,80

   2d_pen_color 63,255,63
   2d_fill_color 63,255,63
   2d_rectangle 194,82,216,100

   2d_pen_color 127,255,127
   2d_fill_color 127,255,127
   2d_rectangle 194,102,216,120

   2d_pen_color 191,255,191
   2d_fill_color 191,255,191
   2d_rectangle 194,122,216,140

   2d_pen_color 0,0,0
   2d_fill_color 0,0,0
   2d_rectangle 194,144,216,162

   create_show
end_sub

Si vous êtes intéressé, vous pouvez prendre tout ou partie du code-source et l’adapter à votre projet.

La palette dessinée n’est qu’un exemple regroupant un échantillon de 72 couleurs différentes. A vous de réaliser votre propre palette en fonction de vos besoins.

Pour tout renseignement, je reste à votre disposition.

Bonne programmation !

» Combo WYSIWYG de sélection de police de caractères
» couleurs d'affichage des textes et couleurs des button
» Sélection
» Sélection d'une fonte.
» Sélection sur un grid