5

Tengo el siguiente código, que me añade 30 botones como máximo a un panel de Tkinter. Los botones tienen la misma imagen y funcionan todos.

    romper = False
    filas = 5
    columnas = 6
    self.voll = PhotoImage(file="/home/manu/Escritorio/mc/ICONOS/volldamm.png")
    #no incluyo los cálculos para los place de los botones, 
    #que permiten colocar los botones de forma proporcional, 
    #funcionando el código para distintos números de filas y columnas.
    for pu in range (0,filas):
        for pi in range (0,columnas):
            if len(listaProductos)>pi+pu*filas:
                vollboton = Button(master, text ="", command = voll)
                vollboton.config(image=self.voll)
                vollboton.place(x=pi*relacion+self.padX,y=pu*relacion+self.padY)
            else:
                romper = True
                break
        if romper:
            break

Sin embargo, si trato de cargar las imágenes desde la lista de productos del programa (están en una base de datos con un campo imagen), lo que me ocurre es que solo aparece la imagen y la funcionalidad del último de los botones antes del break.

    romper = False
    filas = 5
    columnas = 6
    for pu in range (0,filas):
        for pi in range (0,columnas):
            if len(listaProductos)>pi+pu*filas:
                image = datos.dameProducto(listaProductos[pi +pu*filas])[0][5]
                # Retorna volldamm.png, heineken.png,....
                prod = PhotoImage(file="/home/manu/Escritorio/mc/ICONOS/"+image+"")
                vollboton = Button(master, text ="", command = voll)
                vollboton.config(image=prod)
                vollboton.place(x=pi*relacion+self.padX,y=pu*relacion+self.padY)
            else:
                romper = True
                break
        if romper:
            break

¿Cómo podría implementar esto correctamente?

2 respuestas 2

3

Es un problema muy común, el recolector de basura haciendo de las "suyas".

Cuando haces:

prod = PhotoImage(file="...")

estás creando una instancia de la clase tk.PhotoImage. Este objeto mantiene una referencia gracias al identificador pro, el problema es que en la siguiente iteración se crea un nuevo objeto y pro deja de hacer referencia al anterior para hacerla al nuevo objeto. ¿Cuál es el problema? Pues que cuando se hace:

vollboton.config(image=prod)

en ningún momento se crea una nueva referencia al objeto, esto implica que cuando pro pasa a hacer referencia a la siguiente imagen, la anterior se queda sin referencias y el GC lo detecta y manda el objeto a mejor vida quedando el botón sin imagen.

La solución es tan simple como mantener una referencia viva en tu programa de cada imagen mientras estas sean necesarias, puedes usar una lista para ello, algo así:

images = []  # Lista encargada de mantener una referencia a cada imágen

filas = 5
columnas = 6

romper = False
for pu in range (filas):
    for pi in range (columnas):
        if len(listaProductos)>pi+pu*filas:
            image = datos.dameProducto(listaProductos[pi +pu*filas])[0][5]
            # Retorna volldamm.png, heineken.png,....
            prod = PhotoImage(file="/home/manu/Escritorio/mc/ICONOS/{}".format(image))
            images.append(prod)  # Añadimos la instancia a la lista
            vollboton = Button(master, text ="", command = voll)
            vollboton.config(image=prod)
            vollboton.place(x=pi*relacion+self.padX, y=pu*relacion+self.padY)
        else:
            romper = True
            break
    if romper:
        break

IMPORTANTE: la lista debe tener el mismo tiempo de vida que los botones. Por ejemplo, si creas los botones dentro de una función la lista debe ser una variable global para evitar que sea destruida cuando la función retorne, si los creas en un método la lista debe ser un atributo de clase, etc


Lo anterior es una forma general de hacerlo y que sirve para cualquier situación en la que usemos una serie de imágenes en la app. Si tenemos una aplicación que va a reutilizar una serie de imágenes a menudo puede interesar crear una especie de "cache" que evite volver a cargar una imagen cargada con anterioridad, para ello podemos usar la misma aproximación pero cambiando la lista por un diccionario con las rutas como clave.

No obstante otra opción aún mas simple para casos concretos como este es forzar que el propio objeto mantenga la referencia a su imagen:

prod = PhotoImage(file="/home/manu/Escritorio/mc/ICONOS/{}".format(image))
vollboton = Button(master, text ="", command=voll)
vollboton.image = prod   # <<<<<<<<<<<<<<<<
vollboton.config(image=prod)

Personalmente en estos casos prefiero crear una clase propia que herede del widget de turno para facilitar el manejo de la imagen y mantener el encapsulamiento en el objeto:

import tkinter as tk
import logging
import os

module_logger = logging.getLogger('main')

class ImageButton(tk.Button):
    def __init__(self, parent, image_path=None, *args, **kwargs):
        tk.Button.__init__(self, parent, *args, **kwargs)
        self.logger = logging.getLogger('main.ImageButton')
        ch = logging.StreamHandler()
        formatter = logging.Formatter('[%(levelname)s] <%(name)s>: %(message)s')
        ch.setFormatter(formatter)
        self.logger.addHandler(ch)

        self._image_path = None
        self._image = None
        self.image_path = image_path

    @property
    def image_path(self):
        return self._image_path

    @image_path.setter
    def image_path(self, path):
        path = os.path.abspath(path)
        try:
            self._image = tk.PhotoImage(file=path)
            self.config(image=self._image)
            self._image_path = path
        except tk.TclError:
            self.logger.warn("No se pudo cargar la imagen desde '{}'".format(path))


class App(tk.Tk):
    def __init__(self):
        tk.Tk.__init__(self)
        self.button = ImageButton(self,
                                  image_path="img1.png",
                                  text="",
                                  command=self.change_image
                                 )
        self.button.pack()

    def change_image(self):
        self.button.image_path = "img2.png"


if __name__ == "__main__":
    App().mainloop()
9
  • Gracias por la explicación. Quizá es porque no he puesto todo el código de la clase, pero no me funciona tu código. Creo que olvidé poner self.prod = Photoimage. No sé por qué muy bien, pero en el código de mi respuesta por ejemplo, no funciona si las variable image no es global.
    – user28220
    Commented el 7 may. 2018 a las 12:06
  • funciona perfectamente sin necesidad de generar el array images y añadiendo las cyuatro líneas en el bucle if, usando el código que muestras, y es más limpia que mi solución. ty
    – user28220
    Commented el 7 may. 2018 a las 12:16
  • lo único que en mi caso estoy escribiendo sobre master y no self (tk.Button(master,text="")
    – user28220
    Commented el 7 may. 2018 a las 12:21
  • No entiendo cómo es que vollboton.config(image=prod) no crea una referencia a prod. Aún sin saber qué hace esa función, cabe supoenr que almacene lo que recibe como parámetro en algún atributo del objeto, digamos por ejemplo que el código contiene algo del estilo self.image=image. Eso ya contaría como una referencia para evitar que el recolector de basura se lo lleve, ¿no? De no ser así no entiendo qué sentido tendría pasarle esa imagen como parámetro.
    – abulafia
    Commented el 7 may. 2018 a las 14:34
  • @FJSevilla Oh, parece que sí que es como dices y no se guardan referencias a las imágenes. Pero entonces no entiendo qué hace el método Button.config(). Supongo que tendré que mirar el código fuente...
    – abulafia
    Commented el 7 may. 2018 a las 14:37
0

Lo solucioné introduciendo arrays y separando la parte de calcular la cuadrícula de la de colocar los botones, no sé si de forma algo ineficiente.

    posiciones = []
    nomImagenes = []
    self.imagenes = []
    for pu in range (0,filas):
        for pi in range (0,columnas):
            if len(listaProductos)>pi+pu*filas:
                image = datos.dameProducto(listaProductos[pi +pu*filas])[0][5]
                nomImagenes.append(image)
                posicion = [pi*relacion+self.padX,pu*relacion+self.padY]
                posiciones.append(posicion)
            else:
                romper = True
                break
        if romper:
            break
    for ik in range (len(posiciones)):
        self.image = PhotoImage(file="/home/manu/Escritorio/mc/ICONOS/"+nomImagenes[ik]+"")
        self.imagenes.append(self.image)
    for ih in range (len(posiciones)):
        boton = Button(master, text ="", command = voll)
        boton.config(image=self.imagenes[ih])
        boton.place(x=posiciones[ih][0],y=posiciones[ih][1])
1
  • Vease la solución marcada como mejor. Añadiendo las cuatro líneas en el if el código es más limpio y eficiente.
    – user28220
    Commented el 8 may. 2018 a las 11:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.