Bouton sur une image

**keymael** · 03/03/2023, 11h41

bonjour à vous tous,

Après de multiples recherches( ici, stack..)
je cherche à afficher un bouton sur une image

mon image fait 100*100 qui s'appelle "mascotte3.png"
mon bouton est placé à 50*50 donc au milieu
mon bouton s'appelle " coucou"

Y aurait il une notion dessous dessus ?

mon image s'affiche correctement. Mais pas mon bouton
Qui parmi, vous aurais une idée du pourquoi du comment?

je vous laisse le code pour l'exemple

Merci à vous tous et vous toutes pour votre aide

------------------------------------------------------------------------
import tkinter as tk
from PIL import Image, ImageTk

# Chargement de l'image
image = Image.open("Nouveau dossier\mascotte3.png")

# affichage de l'image
image.show()

# Création du widget d'image
img_widget = ImageTk.PhotoImage(image)

# Création de la fenêtre Tkinter
root = tk.Tk()

# Création du bouton et placement sur l'image
button = tk.Button(root, image=img_widget)
button.place(x=50, y=50)
button.text("coucou")

# Affichage de la fenêtre Tkinter
root.mainloop()

---------------------------------------------------------

**umfred** · 03/03/2023, 12h26

pour commencer, quand je rentres ton code, j'ai des erreurs lors de l'appel à ImageTk qui me dit qu'il n'y a pas de fenêtre Tkinter de créer (logique, tu ne le fais qu'après)
Ensuite, à la création de ton bouton, tu demandes d'utiliser l'image en tant qu'image de fond du bouton
button.text("coucou") ne fonctionne pas (chez moi) au contraire de python button["text"]="coucou" (peut-être un changement dans les versions plus récentes de python, j'utilise la 3.9.7)
Pour finir, il faut utiliser le paramètre compound pour indiquer la position du texte par rapport à l'image
button["compound"]="center pour positionner le texte au centre par dessus l'image

**keymael** · 03/03/2023, 12h27

bonjour

merci pour la réponse
Côté python , je suis en version 3.11.

quant à la ligne de code, je vais essayer

merci en tout cas

**Sve@r** · 03/03/2023, 12h38

Bonjour

Envoyé par keymael

Côté python , je suis en version 3.11.

Moi suis en 3.10 sous Linux et chez-moi ton code n'a pas fonctionné. Il m'a dit "RuntimeError: Too early to create image: no default root window".

J'ai donc déplacé la ligne root = tk.Tk() en début de code, adapté les instructions mentionnées par umfred button["text"]="coucou" et button["compound"]="center" et là ça marche.
Et l'instruction image.show() ne me semble pas primordiale pour le bouton (elle ne fait qu'afficher l'image dans l'OS).

Envoyé par keymael

je vous laisse le code pour l'exemple

**keymael** · 03/03/2023, 13h12

Rebonjour,

En effet, cela va mieux!
Merci beaucoup.

Du coup, j'ai déplace mon bouton sous mes images pour le moment...
Je verrais par la suite pour les coller sur chaque image...mon bouton va etre plus petit que mes images.

Et il me reste à aligner mes images

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
 
 
import tkinter as tk
from PIL import Image, ImageTk 
 
# Créer une fenêtre Tkinter
root = tk.Tk()
 
# Charger l'image
image = Image.open("Nouveau dossier\mascotte3.png")
photo = ImageTk.PhotoImage(image)
# Charger l'image
image2 = Image.open("Nouveau dossier\logo.png")
photo2 = ImageTk.PhotoImage(image2)
 
# Créer un widget Label pour afficher l'image
label_image = tk.Label(root, image=photo)
label_image.pack()
 
# Créer un widget Label pour afficher l'image
label_image = tk.Label(root, image=photo2)
label_image.pack()
 
# Créer un bouton en dessous de l'image
button = tk.Button(root, text="Cliquez ici!")
button.pack()
 
# Lancer la boucle principale Tkinter
root.mainloop()

**Sve@r** · 03/03/2023, 13h31

Envoyé par keymael

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Charger l'image
image = Image.open("Nouveau dossier\mascotte3.png")
photo = ImageTk.PhotoImage(image)
# Charger l'image
image2 = Image.open("Nouveau dossier\logo.png")
photo2 = ImageTk.PhotoImage(image2)
 
# Créer un widget Label pour afficher l'image
label_image = tk.Label(root, image=photo)
label_image.pack()
 
# Créer un widget Label pour afficher l'image
label_image = tk.Label(root, image=photo2)
label_image.pack()

Tu n'es pas obligé de nommer chaque variable temporaire d'un nom différent. Tu peux très bien utiliser "image" et "photo" à chaque fois. Voire même ne pas utiliser de variable intermédiaire.
Et essaye de prendre l'habitude d'utiliser les outils dédiés à la manipulation de chemins, cela rendra ton code plus portable...

Code python :

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

1
2
3
4
5
import pathlib
for img in ("mascotte3", "logo"):
	# Créer un widget Label pour afficher l'image
	tk.Label(root, image=ImageTk.PhotoImage(Image.open(pathlib.Path("Nouveau dossier", "%s.png" % img)))).pack()
# for

**keymael** · 03/03/2023, 14h32

Envoyé par Sve@r

Tu n'es pas obligé de nommer chaque variable temporaire d'un nom différent. Tu peux très bien utiliser "image" et "photo" à chaque fois. Voire même ne pas utiliser de variable intermédiaire.
Et essaye de prendre l'habitude d'utiliser les outils dédiés à la manipulation de chemins, cela rendra ton code plus portable...

Code python :

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

1
2
3
4
5
import pathlib
for img in ("mascotte3", "logo"):
	# Créer un widget Label pour afficher l'image
	tk.Label(root, image=ImageTk.PhotoImage(Image.open(pathlib.Path("Nouveau dossier", "%s.png" % img)))).pack()
# for

waoouhh !!
je ne soupçonnais même pas l'existence d'une telle balise!
je prends note de tes remarques....je l'intègre à mon code

en tout cas, merci pour vos coups de main

**wiztricks** · 03/03/2023, 14h38

Envoyé par keymael

je ne soupçonnais même pas l'existence d'une telle balise!

Et accessoirement, les formats bmp, gif et png sont supportés par l'Image de Tk: pas besoin de passer par PIL.Image pour les lire.

- W

**keymael** · 03/03/2023, 14h40

Envoyé par wiztricks

Et accessoirement, les formats bmp, gif et png sont supportés par l'Image de Tk: pas besoin de passer par PIL.Image pour les lire.

- W

bonjour!

je prends note de ceci également!
merci encore

**papajoker** · 03/03/2023, 14h40

bonjour

Envoyé par Sve@r

outils dédiés à la manipulation de chemins

Si on fait le pointilleux, Path est pour la manipulation de fichier et PurePath est pour la manipulation de noms de fichiers/chemins.

**Sve@r** · 03/03/2023, 14h41

Envoyé par keymael

je ne soupçonnais même pas l'existence d'une telle balise!

Tu parles de pathlib ou juste du fait de boucler sur les deux images?

pathlib c'est le nouveau truc à la mode mais sinon, de façon plus "old-school", tu as os.path

Code python :

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

1
2
3
>>> import os
>>> os.path.join("/", "xxx", "yyy")
'/xxx/yyy'

**keymael** · 03/03/2023, 14h49

import pathlib
for img in ("mascotte3", "logo"):
# Créer un widget Label pour afficher l'image
tk.Label(root, image=ImageTk.PhotoImage(Image.open(pathlib.Path("Nouveau dossier", "%s.png" % img)))).pack()
# for

Ce qui signifie dans ton exemple :
Nouveau dossier = dossier des images
%s.png = 1ere image
%img = image suivante
Est ce bien cela?

ce qui devrait donner

Code :

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

1
2
 
tk.Label(root, image=ImageTk.PhotoImage(Image.open(pathlib.Path("Nouveau dossier", "image1.png", "image2.png")))).pack()

**keymael** · 03/03/2023, 14h51

Envoyé par Sve@r

Tu parles de pathlib ou juste du fait de boucler sur les deux images?

pathlib c'est le nouveau truc à la mode mais sinon, de façon plus "old-school", tu as os.path

Code python :

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

1
2
3
>>> import os
>>> os.path.join("/", "xxx", "yyy")
'/xxx/yyy'

Idem ici..
je suppose que le / est le répertoire des images
xxx = image 1
yyy = Image 2

Par contr je ne saisi pas cette instruction
'/xxx/yyy' en fin de ligne...A quoi sert elle ??

merci encore

**papajoker** · 03/03/2023, 14h58

Envoyé par keymael

%s.png = 1ere image
%img = image suivante
Est ce bien cela?

Désolé mais il y a toute une éducation à faire, connaitre les boucles est un minimum

Idem ici..
je suppose que le / est le répertoire des images

Désolé, encore perdu, tout est dans la doc de cette fonction

'/xxx/yyy' en fin de ligne...A quoi sert elle ??

Après lecture de la doc, on comprend que c'est le résultat de cette fonction (avec ces paramètres)

**keymael** · 03/03/2023, 15h02

Envoyé par papajoker

Désolé mais il y a toute une éducation à faire, connaitre les boucles est un minimum

Désolé, encore perdu, tout est dans la doc de cette fonction

bon tant pis pour moi...
je vais me mettre à la lecture

**papajoker** · 03/03/2023, 15h13

Et pour apprendre/comprendre, il est toujours bon de faire des mini-tests.
créer un fichier de 2 lignes n'est pas trop compliqué

Code :

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

1
2
for img in ("mascotte3", "logo"):
    print("Nouveau dossier", "%s.png" % img)

une fois bien compris, on intègre pathlib.Path()

**keymael** · 03/03/2023, 15h19

Envoyé par papajoker

Et pour apprendre/comprendre, il est toujours bon de faire des mini-tests.
créer un fichier de 2 lignes n'est pas trop compliqué

Code :

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

1
2
for img in ("mascotte3", "logo"):
    print("Nouveau dossier", "%s.png" % img)

une fois bien compris, on intègre pathlib.Path()

en effet...
y a du boulot..

**Sve@r** · 03/03/2023, 15h29

Envoyé par keymael

Par contr je ne saisi pas cette instruction
'/xxx/yyy' en fin de ligne...A quoi sert elle ??

C'est le mode intéractif de Python, appelé "idle", qui permet de taper de petites instructions pour vérifier. Donc on tape les instructions après le prompt ">>>" et Python affiche le résultat (ici "/xxx/yyy") juste en dessous.

Bouton sur une image

Python

Discussions similaires

Partager

Partager