Buttons nahtlos aneinander

Gerenuk · Donnerstag 21. Januar 2010, 22:31

Ich möchte Buttons mit Bildern drin ohne jeglichen Zwischenraum nebeneinander in einem Grid plazieren.

Also in etwa:

b1 = Button(frame, image=self.bild1, bd=0)
b1.grid(row=1, column=1)
b2 = Button(frame, image=self.bild2, bd=0)
b2.grid(row=2, column=1)

Nun schaffe ich es nicht die Zwischenräume zwischen den Buttons komplett wegzubekommen. Wie macht man das?

wuf · Donnerstag 21. Januar 2010, 23:46

Hallo Gerenuk

Kannst du das folgende einmal ausprobieren?:

Code: Alles auswählen

import Tkinter as tk

BILD =\
'''
R0lGODlhNQA1AMYoAAAAAAAEAAgECAgICAgMCBAMEBAQEBAUEBgUGBgYGBgc
GCAcICAgICAkICkkKSkoKSksKTEsMTEwMTE0MTk0OTk4OTk8OUE8QUFAQUFE
QUpESkpISkpMSkpQSlJMUlJQUlJVUlpVWlpZWvAgAFpdWmJdYmJhYmJlYvAw
AGplamppamptanNtc3Nxc3N1c3t1e3t5e3t9e4N9g4OBg4OFg4uFi4uJi4uN
i5SNlJyRe5SRlJSVlJyVnJyZnJydnPCQAKSdpKShpKSlpKylrKyqrKyurLSu
tLSytLS2tL22vfDAAMW6nM26i726ve7CIL2+vcW+xcXCxebGWsXGxf/OAPbK
Me7KSv/OCP/KKf/SAM3Gzf/SGM3Kzf/OMd7OlP/WGM3OzdXO1f/WOf/WStXS
1fbaYtXW1d7W3v/eat7a3t7e3v/ie+be5ubi5v/qi+7m7u7q7vbuze7u7v/y
vfby9v/y3vb29v/2///6//////AwAPAwAPAwAPAwAPAwAPAwACH+FUNyZWF0
ZWQgd2l0aCBUaGUgR0lNUAAh+QQBCgB/ACwAAAAANQA1AAAH/oB/goOEhYaH
iIYjhIuLiY+QkYySlJWGKH8omJiOlp6PmIKhn6SHmpqZmaOlpaGbf3OssqKq
mG5UYoNKs5avqX9fVF5/SsW8va4oZVlMxMeSHkg2LWhUVFtjY1RXus+PHEl3
dGtUTlJYVV1WS86sNzIyQU1NR0c3IBUnQoInTTZ0dsRQyTHjSaFdpEi0aJMn
jx06cN6oSUMmigkACULokHGhCZ06ce6oEPSj3ScSM+TkwXNHDpw2bMyQ4aLl
SRMWA0h8mAAAwL+HTVzI8tGBYR5xEdlQDKMlSpMkRohYeHBAQE8AEmw0ITGy
FAkcK1u+ZHNmphYo9IwMCdKjxNW3/j0bsCIBxCFEiUunOE1ShEgQIDt02GgA
t+cAViuIiIUpk6bNI0aEsOVxw8YMGRYKAxBKykePuxPJhNH7tO/fwDZqyIDR
okJhA6xAvFTTuGZayT0oW5bxwsUKFRI0c0h4JjQY0nz9AhZcIwZrFidMiEig
GQApFrUfR55c+bKLFipSkBDxYUN1ABA8kYgyeq/p5amdt2CRQnoIDxseWK3u
ycKUx0XgtkN3MnwXXgnkeaABBhUMcB4AGFRyAwtNIGGaD6jRIB909nGwAQYX
TLAAAAEAYFWJbx1GyQwzBMjdbgaKl2AGDFIAAWEP9mTDijIA0YMOOMT3XHQi
hOAhiBNI/vCAAwGUeKKJJL5VCQAkDGhZDDGO94EHNFZg4wMMKIBijgBYQAkA
FNSgIWsrEGnkhyEq6YACCDQJpZNRWrXfA2cO0Bt4Mm7Z5ZcMLHBAAWSaGIBV
fEoSF4dFHhnnkgokUICDeGYK5QADGOBgo5FcxcAHH3DQ5QQQgKnAAQaMeV6T
AxBgwAEIAAAqJClGYIEFST7QAJ0EOPjksHkOUIABCCSwAHW3PqJZrJzamSgA
nBpgQAIJMNDAiGZKQkB1mhKLpwACFFAAAggssIADD0RAXSXmTVudAMYiqywD
7EogQa2WzJvnv04GEOusCSig7QMQUECBBZz2K+9VTRZAAK0L/ijQgAMRQDBB
BRc8AEAFloAAl7h3Utvptdky8MAD+lZgAQYZ1EqDJ/IKLOsBBR8MgQQbW5BB
Bq7J5ckHhRFL77HJLoBvuxJQwDEGG0Tt4AykfHtetSgzoDLLElRQAQZQb/AB
dRmwApeTAhBAALoKrItxBApfcIEGGnjgQQgMAKCALCSMXG/SS0fQ9NMabODB
B3hTe8MsHFyVNsEGN4Awzy7DvAEHH4CQ+ABU8yLCVQUcoIDFDUAA9wQWzJ0B
B3eDoIGDsHnzh4MAFLB1y1+HTaoIHjgQl+yDZNCTAAlE0LPlmHtQgQKGAW8I
BlcZoIADki9Za0+xO39ICxMcoJnQCdqHL/745HsSCAA7
'''

root = tk.Tk()

bild = tk.PhotoImage(data=BILD)

frame = tk.Frame(root, bg='red')
frame.pack()

for button_index in range(10):
    button = tk.Button(frame, image=bild, bd=0, bg='red', highlightthickness=0)
    button.grid(row=1, column=button_index)

root.mainloop()

Gruss wuf

Gerenuk · Freitag 22. Januar 2010, 00:07

Hey Danke! Ich bin damit schon ein ganzes Stück weiter.

Nur ist da wirklich gar kein Zwischenraum (oder wurde mit bg= geschummelt

)?

Ich habe

Code: Alles auswählen

self.orange = ImageTk.PhotoImage(Image.open("orange.png"))
for x in range(14):
  for y in range(14):
    Button(frame, image=self.orange, bd=0, highlightthickness=0).grid(row=x, column=y)

und bekomme zwei Pixel Zwischenraum. Wie bekomme ich den noch weg?
Und kann ich auch noch einstellen, dass der Button sich nicht ändert (also kein activ Zustand und kein eindrücken)? Hmm, genaugenommen brauche ich nur den Event, dass auf dieses Rechteck geclickt wurde...

Wo finde ich überhaupt die Befehle? Ich rate mal dazu sollte ich eher Tk lernen als nach Tkinter suchen?!

dahaze · Freitag 22. Januar 2010, 08:36

Hallo!

Falls du die letzten 2 Pixel nicht wegbekommst und du eh die anderen Eigenschaften eines Buttons nicht brauchst, würde ich versuchen das Problem mit einem Canvas zu lösen auf das du die entsprechenden Elemente legst.

Gute Referenzen für Tkinter bekommst du z.B. unter
An Introduction to Tkinter
oder
New Mexico Tech Tkinter: GUI programming with Python

wuf · Freitag 22. Januar 2010, 10:13

Hallo Gerenuk

Gerenuk hat geschrieben:(oder wurde mit bg= geschummelt Wink

Nein nicht bewusst. Da ich dein Bildchen nicht zur Verfügung hatte nahm ich irgend ein GIF-Image aus meiner Sammlung. Bei diesem GIF-Image war der Hintergrund transparent. Um dein Effekt darzustellen nahm ich für den 'Button' als 'bg' einfach rot. Habe mir jetzt dein verwendetes Bild 'orange.png' mit GIMP reproduziert. Siehe da die Ränder von 1 Pixel wurden sichtbar! Versuchte diese noch mit den Optionen padx=0, pady=0 und relief='flat' zu eliminieren. Jedoch ohne Erfolg.

Den Vorschlag von 'dahaze' finde ich für deine Anwendung in diesem Fall auch OK. Seinen Tipps für gute Referenzen schliesse ich mich auch an.

Noch ein Tipp an dich Gerenuk. Könntest du das nächste mal evt. Code-Snipsel zur Verfügung stellen die schon zum grössten Teil ausführbar sind. Dies ersart eigene Programmierarbeit. Besten Dank für deine Bemühung. Wünsche dir noch viel Spass.

Gruss wuf

wuf · Freitag 22. Januar 2010, 11:30

Hallo Gerenuk

Hier noch ein Test-Skript aufbauend auf der Idee von 'dahaze':

Code: Alles auswählen

# Scriptname: button_ohne_gap_02_02 (wuf)

import Tkinter as tk
import Image, ImageTk
from functools import partial

def img_button_event(xpos, ypos, *args):
    print "You pressed me at! x=%d, y=%d" % (xpos, ypos)

root = tk.Tk()

BILD =\
'''
R0lGODlhNQA1AMYoAAAAAAAEAAgECAgICAgMCBAMEBAQEBAUEBgUGBgYGBgc
GCAcICAgICAkICkkKSkoKSksKTEsMTEwMTE0MTk0OTk4OTk8OUE8QUFAQUFE
QUpESkpISkpMSkpQSlJMUlJQUlJVUlpVWlpZWvAgAFpdWmJdYmJhYmJlYvAw
AGplamppamptanNtc3Nxc3N1c3t1e3t5e3t9e4N9g4OBg4OFg4uFi4uJi4uN
i5SNlJyRe5SRlJSVlJyVnJyZnJydnPCQAKSdpKShpKSlpKylrKyqrKyurLSu
tLSytLS2tL22vfDAAMW6nM26i726ve7CIL2+vcW+xcXCxebGWsXGxf/OAPbK
Me7KSv/OCP/KKf/SAM3Gzf/SGM3Kzf/OMd7OlP/WGM3OzdXO1f/WOf/WStXS
1fbaYtXW1d7W3v/eat7a3t7e3v/ie+be5ubi5v/qi+7m7u7q7vbuze7u7v/y
vfby9v/y3vb29v/2///6//////AwAPAwAPAwAPAwAPAwAPAwACH+FUNyZWF0
ZWQgd2l0aCBUaGUgR0lNUAAh+QQBCgB/ACwAAAAANQA1AAAH/oB/goOEhYaH
iIYjhIuLiY+QkYySlJWGKH8omJiOlp6PmIKhn6SHmpqZmaOlpaGbf3OssqKq
mG5UYoNKs5avqX9fVF5/SsW8va4oZVlMxMeSHkg2LWhUVFtjY1RXus+PHEl3
dGtUTlJYVV1WS86sNzIyQU1NR0c3IBUnQoInTTZ0dsRQyTHjSaFdpEi0aJMn
jx06cN6oSUMmigkACULokHGhCZ06ce6oEPSj3ScSM+TkwXNHDpw2bMyQ4aLl
SRMWA0h8mAAAwL+HTVzI8tGBYR5xEdlQDKMlSpMkRohYeHBAQE8AEmw0ITGy
FAkcK1u+ZHNmphYo9IwMCdKjxNW3/j0bsCIBxCFEiUunOE1ShEgQIDt02GgA
t+cAViuIiIUpk6bNI0aEsOVxw8YMGRYKAxBKykePuxPJhNH7tO/fwDZqyIDR
okJhA6xAvFTTuGZayT0oW5bxwsUKFRI0c0h4JjQY0nz9AhZcIwZrFidMiEig
GQApFrUfR55c+bKLFipSkBDxYUN1ABA8kYgyeq/p5amdt2CRQnoIDxseWK3u
ycKUx0XgtkN3MnwXXgnkeaABBhUMcB4AGFRyAwtNIGGaD6jRIB909nGwAQYX
TLAAAAEAYFWJbx1GyQwzBMjdbgaKl2AGDFIAAWEP9mTDijIA0YMOOMT3XHQi
hOAhiBNI/vCAAwGUeKKJJL5VCQAkDGhZDDGO94EHNFZg4wMMKIBijgBYQAkA
FNSgIWsrEGnkhyEq6YACCDQJpZNRWrXfA2cO0Bt4Mm7Z5ZcMLHBAAWSaGIBV
fEoSF4dFHhnnkgokUICDeGYK5QADGOBgo5FcxcAHH3DQ5QQQgKnAAQaMeV6T
AxBgwAEIAAAqJClGYIEFST7QAJ0EOPjksHkOUIABCCSwAHW3PqJZrJzamSgA
nBpgQAIJMNDAiGZKQkB1mhKLpwACFFAAAggssIADD0RAXSXmTVudAMYiqywD
7EogQa2WzJvnv04GEOusCSig7QMQUECBBZz2K+9VTRZAAK0L/ijQgAMRQDBB
BRc8AEAFloAAl7h3Utvptdky8MAD+lZgAQYZ1EqDJ/IKLOsBBR8MgQQbW5BB
Bq7J5ckHhRFL77HJLoBvuxJQwDEGG0Tt4AykfHtetSgzoDLLElRQAQZQb/AB
dRmwApeTAhBAALoKrItxBApfcIEGGnjgQQgMAKCALCSMXG/SS0fQ9NMabODB
B3hTe8MsHFyVNsEGN4Awzy7DvAEHH4CQ+ABU8yLCVQUcoIDFDUAA9wQWzJ0B
B3eDoIGDsHnzh4MAFLB1y1+HTaoIHjgQl+yDZNCTAAlE0LPlmHtQgQKGAW8I
BlcZoIADki9Za0+xO39ICxMcoJnQCdqHL/745HsSCAA7
'''

#~~ Bild importiert als PNG mit PIL
#image = ImageTk.PhotoImage(Image.open("orange.png"))
#~~ Bild importiert als Base64 mit Tkinter
image = tk.PhotoImage(data=BILD)

NUM_X_BUTTONS = 10
NUM_Y_BUTTONS = 10

canvas_width = NUM_X_BUTTONS * image.height()
canvas_height = NUM_Y_BUTTONS * image.height()

canvas = tk.Canvas(root, width=canvas_width, height=canvas_height)
canvas.pack()

for x in range(NUM_X_BUTTONS):
    for y in range(NUM_Y_BUTTONS):

        img_button = canvas.create_image(x*image.width(),
             y*image.height(), image=image, anchor='nw')

        canvas.tag_bind(img_button, '<Button-1>',
            partial(img_button_event, x, y))

root.mainloop()

Gruss wuf

numerix · Freitag 22. Januar 2010, 13:54

dahaze hat geschrieben:Falls du die letzten 2 Pixel nicht wegbekommst und du eh die anderen Eigenschaften eines Buttons nicht brauchst, würde ich versuchen das Problem mit einem Canvas zu lösen auf das du die entsprechenden Elemente legst.

Du kannst einfach statt des Buttons ein Label-Widget nehmen und das dann an ein Mouse-Event binden.

wuf · Freitag 22. Januar 2010, 14:26

Hallo numerix

Unsere Gedanken haben sich synchronisiert Hi:

Code: Alles auswählen

# Scriptname button_ohne_gap_02_01_01.py (wuf)

import Tkinter as tk
import Image, ImageTk

def event_handler(event):

    print 'Hallo', event.widget

root = tk.Tk()

png_bild = ImageTk.PhotoImage(Image.open("orange.png"))

frame = tk.Frame(root)
frame.pack()

for x in range(10):
  for y in range(10):
    label = tk.Label(frame, relief='flat', image=png_bild, bd=0,
        highlightthickness=0)
    label.grid(row=y, column=x)
    label.bind('<Button-1>', event_handler)

root.mainloop()

Gruss wuf

dahaze · Freitag 22. Januar 2010, 14:32

Stimmt.
Das ist dann wohl das Einfachste!

wuf · Freitag 22. Januar 2010, 14:37

Es scheint so

Es führen mehrere Wege nach Rom. Wieso nicht einmal via Mond.

Gruss wuf

Gerenuk · Freitag 22. Januar 2010, 18:05

Hey, vielen Dank an alle!
So geht es.

Ich wusste ja nicht, dass die Leute hier so hilfreich sind und gleich ganze Programme anbieten. Deswegen hatte ich versäumt ein ganzes Programm zu posten. Aber so geht's nun