Fonctionnement de button_picture

Est-ce que quelqu'un sait comment faire pour qu'avec un button_picture
on puisse placer une image qui prend toute la place sans placer de texte ?

Exemple :

Code:

button_picture 100
  left 100,10
  top 100,10
  width 100,50
  height 100,50
  button_picture_target_is_picture
  width 100,50
  height 100,50
'  file_load 100,"Carré bleu.jpg"
rem ' Le fichier « Carré bleu.jpg » fait 50x50 pixels

1) L'image ne prend pas toute la place
et si on utilise picture_top, picture_bottom, picture_left ou picture_right,
ça ne change rien.
2° Autre problème :
Si vous activez le ligne : file_load 100,"Carré bleu.jpg" (l'image existant bel et bien)
Pourquoi ça fait : Impossible to load the file ?
Pourtant, c'est censé marcher, le file_load avec le button_picture, c'est écrit dans l'aide ???

Sans compter que j'observe un truc curieux :
C'est que si je fais :

Code:

button_picture 100
   left 100,10
   top 100,10
   width 100,90
   height 100,50
   button_picture_target_is_picture
   width 100,30
   height 100,45

J'obtiens ceci :
c'est-à-dire un rectangle blanc de 30 sur la moitié de 45
(ça marche pareil si je mets width 100,45 ou width 100,20 à l'avant dernière ligne, avec l'adaptation correspondante) :


et si je mets :
button_picture 100
  left 100,10
  top 100,10
  width 100,90
  height 100,50
  button_picture_target_is_picture
  width 100,25
  height 100,45
J'obtiens ceci :

C'est-à-dire effectivement 25 sur 45
(et ça ne marche qu'avec 25, si je mets 24 ou 26, ça ne marche pas, curieux, non ?)

Bonsoir JJN4 !

Le carré "blanc" ne prendra sa taille réelle que lorsque tu mettras quelques chose dedans, ne serait-ce qu’une simple demande de couleur :

Code:

button_picture 1
width 1,250
height 1,250
top 1,20
left 1,20
button_picture_target_is_picture
width 1,200
height 1,200
color 1,255,255,0

- Voici un exemple pour charger une image exclusivement en BMP présente sur le disque dur :

Code:

button_picture 1
width 1,250
height 1,250
top 1,20
left 1,20
button_picture_target_is_picture
width 1,200
height 1,200
file_load 1,"logo_panoramic.bmp"

- Voici un exemple pour charger une image JPG ou BMP présente sur le disque dur :

Code:

button_picture 1
width 1,250
height 1,196
top 1,20
left 1,20
button_picture_target_is_picture
width 1,200
height 1,146

create_hide
picture 2
file_load 2,"touraine.jpg"
create_show

image 3
2d_target_is 2
2d_image_copy 3,0,0,199,145
2d_target_is 1
2d_image_paste 3,0,0

Les images sont automatiquement centrées dans les boutons. Les commandes TOP et LEFT n'agiront que sur le bouton lui-même.



- Si tu souhaites que l'image prenne toute la place disponible sur la surface du bouton, il faut que l'image ait les mêmes dimensions que le bouton.

Exemple :

Code:

button_picture 1
width 1,200
height 1,146
top 1,20
left 1,20
button_picture_target_is_picture
width 1,200
height 1,146

create_hide
picture 2
file_load 2,"touraine.jpg"
create_show

image 3
2d_target_is 2
2d_image_copy 3,0,0,199,145
2d_target_is 1
2d_image_paste 3,0,0

- Un bouton possède une marge technique de 2 pixels tout autour. C’est cette marge qui permet d’animer le bouton et lui donner une impression de relief. Pour conserver cet effet, il faut que l’image soit d’une taille inférieure de 4 pixels en horizontal et en vertical.

Pour un bouton de 204 x 150, l’image (Picture) devra faire 200 x 146.
Exemple :

Code:

button_picture 1
width 1,204
height 1,150
top 1,10
left 1,10
button_picture_target_is_picture
width 1,200
height 1,146

create_hide
picture 2
file_load 2,"touraine.jpg"

image 3
2d_target_is 2
2d_image_copy 3,0,0,199,145
2d_target_is 1
2d_image_paste 3,0,0

- Le BUTTON_PICTURE possède l’option CAPTION (légende).

Dans ce cas, l’image et la légende seront côte à côte.
L’image centrée à gauche et la légende centrée à droite.

La légende peut prendre place sur plusieurs lignes. Pour ce faire, chaque ligne sera séparée par un chr$(13).
Exemple :
caption 1,"~ Montgolfière ~ " + chr$(13) + chr$(13) + "La vallée" + chr$(13) + "de la" + chr$(13) + "Loire"

Code:

button_picture 1
width 1,400
height 1,196
top 1,20
left 1,20
font_size 1,16
caption 1,"~ Montgolfière ~ " + chr$(13) + chr$(13) + "La vallée" + chr$(13) + "de la" + chr$(13) + "Loire"
button_picture_target_is_picture
width 1,200
height 1,146

create_hide
picture 2
file_load 2,"touraine.jpg"

image 3
2d_target_is 2
2d_image_copy 3,0,0,199,145
2d_target_is 1
2d_image_paste 3,0,0

- Un BUTTON_PICTURE peut être employé comme un BUTTON classique (donc sans l’image) ce qui permet d’exploiter la possibilité du CAPTION sur plusieurs lignes.

Code:

button_picture 1
width 1,100
height 1,60
top 1,20
left 1,20
font_size 1,8
caption 1,"N'appuyez" + chr$(13) + "qu'en cas" + chr$(13) + "d'urgence"
button_picture_target_is_picture
width 1,0
height 1,0

_ Pour finir, voici un modèle de bouton de couleur avec texte :

Code:

button_picture 1
width 1,204
height 1,100
top 1,10
left 1,10
button_picture_target_is_picture
width 1,200
height 1,96

create_hide
picture 2
width 2,200
height 2,96
color 2,50,255,50
2d_target_is 2
print_target_is 2
font_name 2,"Monotype Corsiva"
font_size 2,26
2d_fill_color 50,255,50
print_locate 38,25
print "Bonjour !"

image 3
2d_image_copy 3,0,0,199,95
2d_target_is 1
2d_image_paste 3,0,0

Ouaaaaah, super !!!
Ta réponse est un véritable tutoriel tout à fait exhaustif de la question !
Merci !!!
Je sens que je vais faire plein de choses avec ça, ouh là !


D'ailleurs, j'étais en train de chercher des solutions
et j'avais déjà trouvé celle-ci qui peut être intéressante...

Code:

rem ' Essai button_picture - jjn4 - 30/10/2021
label clac , clic

button_picture 100
   left 100,10
   top 100,10
   width 100,45
   height 100,28
   font_size 100,20
   font_name 100,"Webdings"
   button_picture_target_is_picture
   width 100,45
   height 100,28                                        
   dessin()
   on_click 100,clic

alpha 120 : left 120,20 : top 120,45 : font_name 120,"Wingdings" : caption 120,chr$(236)
alpha 130 : left 130,10 : top 130,58 : caption 130,"Cliquez ici"
  
button 200
   left 200,200
   top 200,10
   caption 200,"Réactiver"
   on_click 200,clac
  
end

clac:
   caption 100,""
   width 100,45
   active 100
   dessin()
return

clic:
   if active(100)=1
      inactive 100
      width 100,1
      caption 100,chr$(205)
   end_if
return

sub dessin()
   color 100,0,255,255
   2d_target_is 100
   2d_fill_color 255,255,0
   2d_rectangle 16,4,34,24
   2d_fill_color 255,0,0
   2d_circle 25,12,3
   2d_rectangle 21,16,31,22
   2d_fill_color 255,255,0
   2d_rectangle 28,18,29,20
end_sub

Bien sûr, maintenant, je vais pouvoir affiner ça !

Encore un truc curieux, décidément !
J'ai essayé ta formule pour intégrer
un bmp dans le button_picture :

avec :

Code:

button_picture 1
  width 1,124
  height 1,74
  top 1,20
  left 1,20
  button_picture_target_is_picture
  width 1,120
  height 1,70
  file_load 1,"Horl-1.bmp"

Et à l'exécution, cela donne :

C'est-à-dire que la couleur du pourtour disparaît.

Et en plus, si l'image bmp n'est pas parfaite
(fabriquée à partie d'une image jpg mal transformée)
alors là, le pourtour bleu apparaît partiellement.
Bizarre, non ?

JJN4 a écrit:

... la couleur du pourtour disparaît...

Oui, lorsque l'on charge un BMP (file_load N,"xxxxx.bmp") le bouton_picture possède une couleur de "transparence" déterminée par un pixel précis dans l'image.

Cette transparence est représentée par la couleur blanche d'une valeur RVB de "240,240,240".

Tous les pixels dans l’image ayant la même couleur que le pixel de référence deviendront transparents (blancs).

Exemple :
Je crée une image avec la couleur de transparence RVB : 203,1,1
Tous les pixels ayant exactement cette couleur seront transparents.



On voit des trous dans le mur qui correspondent aux pixels ayant les couleurs RVB 203,1,1

Je change la couleur du pixel de référence et voici le résultat :



Le mur est réparé !

Le pixel de référence pour la couleur de transparence est situé dans le coin en bas à gauche.

Alors çà, voilà une précision qui est pointue !!!
Effectivement, ça marche !
Chapeau bas, encore une fois, et merci du conseil !

J'ai d'abord essayé de changer le pixel isolément
dans le déroulement du programme, avec un 2d_point.
Nada !
Après, j'ai transformé l'image avec un logiciel de retouche d'image.
Là, ça marche.
Et c'est fabuleux, ça, parce que ça montre
qu'on peut faire de la transparence,
avec le button_picture, si on veut !

merci Marc
je ne m'exprime pas souvent mais là
ce problème me donnait des boutons

ce sont des petites choses mais souvent elles font la différence sur le rendu final.

J'ai repris l'exemple de Marc pour charger une image BMP,
présente sur le disque, dans un button_picture,
comme il l'a présenté plus haut  :

Code:

button_picture 1
width 1,250
height 1,250
top 1,20
left 1,20
button_picture_target_is_picture
width 1,200
height 1,200
file_load 1,"logo_panoramic.bmp"

Mais en fait, ça ne marche pas...
Je me demande pourquoi ??????

Bonsoir JJN4 !

Je viens de faire l'essai. Pas de problème, cela fonctionne parfaitement bien.



As-tu un message d'erreur ?

Peut être un problème de version Panoramic non ?!
Ou peut être la localisation du fichier...

Non, pas de message d'erreur,
simplement, l'image n'apparaît pas et le bouton reste gris.
Bon, évidemment, ce n'est pas "logo_panoramic.bmp",
que je n'ai pas, mais une autre image en bmp,
mais elle n'apparaît pas. De plus en plus bizarre !

Et ça, c'était avec la version 29i7 de l'éditeur panoramic.
Si j'essaie avec la version 29i9 en modifiant ainsi :

Code:

dim a$
a$=dir_current$+"\"
button_picture 1
width 1,250
height 1,250
top 1,20
left 1,20
button_picture_target_is_picture
width 1,200
height 1,200
file_load 1,a$+"Image1.bmp"

Cela donne le message d'erreur : Impossible to load the FILE

C'est bien ce que je disais plus haut...

Rajoute la ligne message a$+"Image1.bmp" juste avant la ligne file_load
Tu aura le chemin qui est retourné et je pense que c'est encore le dir_current$ qui ne pointe pas au bon endroit !

Si tu utilises les éditeurs alternatifs tu n'aura plus ce problème.

J'ai aussi essayé la première formule avec Elip,
et ça fait pareil, le bouton est vide, sans contenu.

Ah, ça y est, ça marche !
C'est encore l'histoire de la couleur de transparence,
dont Marc avait parlé plus haut dans ce chapitre,
et que j'avais complètement oubliée !
Désolé de vous avoir distraits de vos travaux

Pas de problème le martien ! Au contraire ça fait une pause !

Et en plus je t'ai induit en erreurs concernant ton message.
C'est moi qui suis désolé...

Eh bien maintenant, j'ai un autre problème.
J'ai 4 boutons à faire comme cela dans mon programme.
Et le truc à s'arracher les cheveux, c'est que ça marche pour le premier
et ça ne marche plus pour les 3 suivants !
Ca crée une sorte de transparence autour du mot écrit au centre de l'image.
Et pourtant, j'ai transformé le pixel bas gauche des 4 de la même façon.
C'est vraiment tordu, ces histoires de button_picture !!!

Et si je squeeze le fonctionnement du 1er bouton,
le 2° se met à fonctionner correctement, mais toujours pas les 2 derniers !

Sans squeezer le premier, cela donne cela :

Je crois que Marc va pouvoir nous faire à nouveau bénéficier de ses lumières !?!?!?

Ah, ça y est, j'ai trouvé !!!
Il faut remettre button_picture_target_is_object
au début de chaque nouveau button_picture
et ça y est, ça le fait pour tous !
Eh bien, au moins, j'aurai appris quelque chose !

Tiens, j'ai trouvé une nouvelle façon d'appliquer la méthode de Marc pour les button_picture
pour que cela donne des button_picture très beaux, et en plus en en produisant autant qu'on veut...
(dans cet exemple, 2 boutons seulement, mais on peut en faire une ifinité avec la même image)

Code:

' Bouton-picture avec sprite
dim i% , a%
height 0,550
create_hide
scene2d 255
   font_size 255,36
   font_color 255,2,2,2
   sprite_target_is 255
sprite 256
image 257
create_show

for i%=1 to 2
   a%=(i%-1)*10+290 : ' N° 300 et 310
   button_picture a%
      button_picture_target_is_object
      left a%,(i%-1)*280+40
      top a%,250
      width a%,229
      height a%,229
      button_picture_target_is_picture
      width a%,225
      height a%,225
      width 255,225
      height 255,225
      2d_target_is 0
      file_load 255,"GN-Bleu-joli.bmp"
      sprite_text 256,"Bouton"+str$(i%)
      sprite_position 256,25,85
      show 255
      display
      2d_image_copy 257,0,0,224,224
      2d_target_is a%
      2d_image_paste 257,0,0
      hide 255
next i%  

Et en gros, cela donne ça :

Joli, non ?


(j'ai pourtant dû contourner un inconvénient :
c'est que 2d_target_is 255, ce n'est pas possible,
ce qui est quand même curieux pour quelque chose qui s'appelle scene2D)