Python Forum

Full Version: Help Making A Toggle GUI
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
How would I make a Gui when a button is pressed it displays a message 'On' with a green background and when pressed again displays a message 'Off' with a red background?

  1. Choose a GUI framework.
  2. Create a frame widget.
  3. Create a label widget "Off" with a red background.
  4. Create a button.
  5. Add a bool variable for True/False state.
  6. bind an event to the button that flips the state variable and then update the labels text and background colour based on the state.
def toggle_gui():
    for tog in gui:
        if tog[0] == default_window:
            default_window = Label(the_window, bg = 'gray', height=3, width=25, bd=1,
            relief = 'raised', font =('times', 18, 'bold'))
            default_window.pack(fill=X, padx=5, pady=5)
        
        elif tog[1] == on_window:
            on_window = Label(the_window, text = 'ON', bg = 'green', height=3, width=25, bd=1,
            relief = 'raised', font =('times', 18, 'bold'))
            on_window.pack(fill=X, padx=5, pady=5)

        else:
            off_window = Label(text = 'OFF', bg = 'red', height=3, width=25, bd=1,
            relief = 'raised', font =('times', 18, 'bold'))
            off_window.pack(fill=X, padx=5, pady=5)

toggle_button = Button(text = 'Toggle',bg = 'gray', height=1, width=15,
relief = 'raised', font =('times', 10))

toggle_button.pack()
How can I make this code go back and forth displaying on_window and off_window?
The code shown is not a complete minimal sample that is able to be run.
You don't want to be remaking another label for each state, one label should be created and its state altered each time the button is pressed.
It is far easier to work with GUI code using classes.
Can you provide me an example?
import tkinter as tk


class MainFrame(tk.Frame):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.toggle_state = True
        self.create_controls()

    def create_controls(self):
        self.label = tk.Label(self, bg='gray', height=3, width=25, bd=1,
                              relief='raised', font=('times', 18, 'bold'))
        self.label.pack(fill=tk.X, padx=5, pady=5)
        self.button = tk.Button(self, text='Toggle', bg='gray', height=1,
                                width=15, relief='raised', font=('times', 10),
                                command=self.on_button)
        self.button.pack(pady=15)
        self.pack()

    def on_button(self):
        if self.toggle_state:
            self.toggle_state_on()
        else:
            self.toggle_state_off()
        self.toggle_state = not self.toggle_state

    def toggle_state_on(self):
        self.label.configure(text='ON', bg='green')

    def toggle_state_off(self):
        self.label.configure(text='OFF', bg='red')


if __name__ == '__main__':
    app = tk.Tk()
    main_frame = MainFrame()
    app.mainloop()
# Import the Tkinter functions
from tkinter import *

# Create a window
the_window = Tk()

# Give the window a title
the_window.title('Toggle Changer')

toggle_window = Label(the_window, bg = 'gray', height=3, width=25, bd=1,
relief = 'raised', font =('times', 18, 'bold'))
toggle_window.pack(fill=X, padx=5, pady=5)

def toggle_gui():

    for click in range(4):
    
        if click == 1:
            toggle_window.config (bg = 'green', text = 'ON')

        elif click == 2:
            toggle_window.config(bg = 'red', text = 'OFF')
        
        else:
            toggle_window.config (bg = 'green', text = 'ON')
            
            
#Toggle Button
Button(text = 'Toggle', command = toggle_gui, bg = 'gray', height=1, width=15,
relief = 'raised', font =('times', 10)).pack()
Why is the for loop not working? It only displays the else: and wont toggle to the OFF state
You have still posted code that will not run as it is.
by using a for loop every time the button is clicked all that is happening is the following:
a for loop that gives click the values 0 to 3
  • when click is 0 the else code happens.
  • when click is 1 the if code happens.
  • when click is 2 the elif code happens.
  • when click is 3 the else code happens.
This whole for loop happens every time the button is clicked and ends with the else code being the visible state.

You need to actually change the state and only do one of the states when the button is clicked , like it does in my example above.