Discussion :

[MilouTux]

Bonjour,

Comment peut-on créer un bouton avec une image à l'intérieur ?

Merci

[Jerome Briot]

Il faut utiliser la propriété CDATA du bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
figure
X=rand(50,50,3);
uicontrol('style','pushbutton','cdata',X);

L'image doit être une image True Color (RGB) dont les valeurs sont comprises entre 0 et 1 (et non pas entre 0 et 255). IMREAD est très utile pour lire les formats standards (jpeg,tiff,bmp,gif,png...)

[MilouTux]

C'est bon ça marche !! Cependant je vois que Matlab ne gère pas la transparence. Mon bouton est au format .png, cependant l'arrière plan de mon image (qui devrait être transparent) apparaît blanc. Est-ce que je peux faire que mon image reste bien transparence pour ne pas voir la différence avec le bouton (ou alors mettre la couleur d'arrière plan de mon image de la même couleur que le bouton ) ?

J'avais utilisé le GUIDE pour faire ma petite interface donc j'ai légèrement changer le code que j'ai placé dans opening function :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
IMG = imread('E:\monPath\helpMain.png');
set(handles.MyFirstButton, 'cdata', IMG);

D'autre part, est-ce que je peux placer mon image à un endroit précis dans le bouton ? Par exemple, mettre mon image à gauche et un string à droite ?

Merci encore !

[Jerome Briot]

Il faut utiliser la composante alpha de l'image.
Essaies ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
[img,map,alph]= imread('E:\monPath\helpMain.png');
col=get(0,'factoryUicontrolBackgroundColor');
img(:,:,1)=img(:,:,1).*alph+col(1)*(~alph);
img(:,:,2)=img(:,:,2).*alph+col(2)*(~alph);
img(:,:,3)=img(:,:,3).*alph+col(3)*(~alph);
set(handles.MyFirstButton, 'cdata', img);

Pour décentrer l'image, c'est plus compliqué... par exemple pour décaler l'image vers la gauche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
col=get(0,'factoryUicontrolBackgroundColor');
c=reshape(col,1,1,[]);
c=repmat(c,50,50);
X=[rand(50,50,3) c];
 
figure
uicontrol('style','pushbutton','cdata',X);

[MilouTux]

Bonjour,

J'ai donc essayé le code donné ci-dessus, en ce qui concerne la transparence de l'image ça me met une erreur :

Error while attempting to activate figure.
Error using ==> plus
Integers can only be conbined with integers of the same class, or scalar doubles.

Pour le décalage à gauche voici mon bouton :

Donc je ne sais pas trop pourquoi ça ne fonctionne pas. J'aimerai aussi comprendre en détail le code, surtout le code pour le décalage, voici ce que j'ai compris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
% on met les valeurs de la couleur dans une matrice 1-1,
% mais le '[]' sert à quoi ?
c = reshape(a, 1, 1, []);
% on crée une matrix de 50-50 où toutes valeurs sont égales à c
c = repmat(c, 50, 50);
% là je ne sais pas !
X = [rand(50,50,3) c];

Merci !

[Jerome Briot]

Commençons par le plus simple (à résoudre...) le décalage à gauche.
L'idée consiste à créer une matrice contenant l'image et un bloc de pixels, dont la couleur est celle du bouton, que l'on viendra concaténer à droite de l'image.

Un exemple un peu plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function imbut
 
% Création de la figure
figure
 
% Ajout du bouton
u=uicontrol('style','pushbutton',...
    'tag','bouton');
 
% Génération d'une image
X=rand(50,50,3);
 
% Récupération de la couleur de fond du bouton
col=get(u,'backgroundcolor');
 
% Initialisation de la matrice de remplissage à droite
padX=zeros(50,50,3);
% Réplication la couleur col sur chaque pixels de padX
padX(:,:,1)=col(1);
padX(:,:,2)=col(2);
padX(:,:,3)=col(3);
 
% Concatènation de X et padX
X=[X padX];
 
% Affichage de l'image pseudo-décalée
set(u,'cdata',X)

Le problème ici est le choix de la taille N de la matrice de remplissage dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

padX=zeros(N,50,3);

Cette valeur doit être déterminée pour tous les boutons séparemment.

Note : lire Working with Matrices à propos de la concaténation de matrices :

[Jerome Briot]

Pour la transparence, les objets uicontrols ne la supporte pas.
Il faut donc encore une fois bidouiller
On remplace les pixels transparents par la couleur de fond de l'objet. Il devient alors difficile de gérer les transparences progressives (format png). Un petit exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function imbutalph
 
% Création de la figure
figure
 
% Ajout du bouton
u=uicontrol('style','pushbutton',...
    'tag','bouton');
 
% Lecture de l'image
[img,map,alph]=imread('??????????.png','png');
 
% Transformer en type DOUBLE (peut etre facultatif)
img=double(img);
alph=double(alph);
 
% Diviser pour obtenir des valeurs entre 0 et 1 uniquement
img=img/255;
 
% Seuillage des valeurs de ALPH
seuil=255;
alph=alph>=seuil;
 
% Récupération de la couleur de fond du bouton
col=get(u,'backgroundcolor');
 
% Tous les pixels de chaque composante de IMG qui ont pour
% valeurs correspondantes 1 dans ALPH prennent la
% valeur correspondante de COL
img(:,:,1)=img(:,:,1).*alph+col(1)*(~alph);
img(:,:,2)=img(:,:,2).*alph+col(2)*(~alph);
img(:,:,3)=img(:,:,3).*alph+col(3)*(~alph);
 
% Affichage de l'image pseudo-transparente
set(u, 'cdata', img);

Avec ce code, la transparence ne sera pas très bien prise en compte. Le seuillage des valeurs de ALPH est une méthode "brutale". Il faut donc convenablement choisir la valeur de SEUIL parmis les valeurs de ALPH

Voici une solution plus simple fonctionnant avec les images PNG:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
figure
 
u=uicontrol('style','pushbutton',...
    'units','pixels',...
    'tag','bouton',...
    'visible','off');
 
col=get(u,'backgroundcolor');
 
img=imread('?????????????.png','png','BackgroundColor',col);
 
set(u,'position',[50 50 size(img,2) size(img,1)], ...
    'cdata',img, ...
    'visible','on')

[MilouTux]

Super ça marche, pour les deux choses ! Pour résoudre le "N" j'ai récupéré en faite la hauteur de mon image en faisant cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
S = size(img);
height = S(1,1);
padX = zeros(height, 50, 3);

Et j'ai aussi changé un petit truc car les valeurs retournées par "get(button,'Background')" sont comprises entre 0 et 1, du coup ça me faisait une image noire, voici le code final:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
% je récupère la couleur d'arrière-plan du bouton
col = get(handles.myButton, 'Background');

% je crée mon petit icône
img = imread('E:\monPath\icone.png', 'png', 'BackgroundColor', col);

% je récupère la taille de mon image sous la forme [n,m]
size = size(img);

% je crée un rectangle initialisé à zéro de la hauteur de mon image
% de largeur 50
padX = zeros(size(1,1), 50, 3);

% je remplis mon rectangle de la même couleur que l'arrière plan
% CHANGEMENT ICI, je multiplie par 255 pour avoir des valeurs entre 0 et 255
padX(:,:,1) = col(1)*255;
padX(:,:,2) = col(2)*255;
padX(:,:,3) = col(3)*255;

% je concatène mon image et mon rectange
newImg = [img padX];

% je mets ma nouvelle image !
set(handles.MyButton, 'cdata', newImg);

Et voici la fenêtre finale ! Elle n'est pas très compliquée, mais je m'exerce sur des petits exemples avant de passer à des choses sérieuses !

Merci encore pour votre aide !

[Jerome Briot]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
S = size(img);
height = S(1,1);

Ou plus simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

height=size(img,1);

Et j'ai aussi changé un petit truc car les valeurs retournées par "get(button,'Background')" sont comprises entre 0 et 1, du coup ça me faisait une image noire

C'est bizarre, je croyais que seules les valeurs entre 0 et 1 étaient supportées par la propriété CDATA

[MilouTux]

Oui, il me semblait avoir lu ça aussi dans l'aide de Matlab, mais bon ... Ca marche de cette manière donc tant mieux !