How to control space between image and text on tkinter button widget?

user_2825403 0
Viewed 1583

I've been working on a GUI for the script I wrote for work and with a little research I've been able to create buttons with image on them for the ease of recognition. The only problem I have is that right now both the image and the text are anchored to the middle of the button which makes it clumsy with no space in between.

enter image description here

What I would like to do is have images aligned to the left side of a button and text to the right side. Is there any way to do it in tkinter?

Here's my UI code:

def create_interface(self)->None:

    ph_plan = ImageTk.PhotoImage(Image.open(self.plan_image))        
    ph_bmi = ImageTk.PhotoImage(Image.open(self.bm_image))
    ph_calc = ImageTk.PhotoImage(Image.open(self.calc_image))
    ph_plot = ImageTk.PhotoImage(Image.open(self.plot_image))

    top = tk.Frame(self.root).grid(row=1)
    middle = tk.Frame(self.root).grid(row=2, pady=40)
    bottom = tk.Frame(self.root).grid(row=3, pady=80)


    # Create buttons
    bmi_btn = Button(top, text='Blastmaster Inputs', width=self.button_width,
                     image=ph_bmi, compound='left', bg='#f2fafc',
                     font=('Helvetica', 12, 'bold'), command=self.get_bm_inputs)
    plan_btn = Button(top, text='Weekly Plan', bg='#f2fafc', font=('Helvetica', 12, 'bold'), 
                      image=ph_plan, compound='left', width=self.button_width, 
                      command=self.get_plan_output)
    calc_btn = Button(bottom, text='Calculate sampling', height=80, width=self.button_width,
                      bg='#f2fafc', font=('Helvetica', 12, 'bold'), image=ph_calc,
                      compound='left', command=self.calculate_sampling)
    self.plot_btn = Button(bottom, text='Create plots', height=80, width=self.button_width,
                      bg='#f2fafc', font=('Helvetica', 12, 'bold'), state='disabled',
                      image=ph_plot, compound='left', command=self.create_forecast_plots)

    # Place buttons into window
    bmi_btn.grid(row=1, column=1, pady=20)
    plan_btn.grid(row=1, column=2, pady=20)
    calc_btn.grid(row=4, column=1)
    self.plot_btn.grid(row=4, column=2)  

    # Create references to image to protect from garbage collector
    self.plot_btn.image = ph_plot     
    bmi_btn.image = ph_bmi
    plan_btn.image = ph_plan
    calc_btn.image = ph_calc

    # Create labels
    label_text1 = 'Enter start date for the forecast'
    label_text2 = 'Enter end date for the forecast'        
    Label(middle, text=label_text1, font='Hevetica').grid(row=2, column=1)
    Label(middle, text=label_text2, font='Helvetica').grid(row=3, column=1)

    # Create and place data entry fields
    self.start = Entry(middle, width=38)
    self.start.grid(row=2, column=2)
    self.end = Entry(middle, width=38)
    self.end.grid(row=3, column=2)
tkinter user-interface python
1 Answers

What I would like to do is have images aligned to the left side of a button and text to the right side.

Tkinter doesn't make it possible to align the image on the left edge of the button and the text on the right edge. However, you can have the text immediately to the right with some separation by simply adding one or two spaces to the text and using the compound option to explicitly set the image to the left of the text.

bmi_btn = Button(top, compound="left", text=' Blastmaster Inputs', ...)

Notice the space before the B in ' Blastmaster Inputs'

If you want the image to the far left of the button with the text next to it, use the justify option:

button = tk.Button(..., justify="left")

screenshot

user_74320
Related