Python Forum
Help Making A Toggle GUI - Printable Version

+- Python Forum (https://python-forum.io)
+-- Forum: Python Coding (https://python-forum.io/forum-7.html)
+--- Forum: GUI (https://python-forum.io/forum-10.html)
+--- Thread: Help Making A Toggle GUI (/thread-20657.html)

Help Making A Toggle GUI - TheBabaYaga202 - Aug-24-2019

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?

RE: Help Making A Toggle GUI - Yoriz - Aug-24-2019


  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.


RE: Help Making A Toggle GUI - TheBabaYaga202 - Aug-25-2019 

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?

RE: Help Making A Toggle GUI - Yoriz - Aug-25-2019

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.

RE: Help Making A Toggle GUI - TheBabaYaga202 - Aug-25-2019

Can you provide me an example?

RE: Help Making A Toggle GUI - Yoriz - Aug-25-2019 

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()


RE: Help Making A Toggle GUI - TheBabaYaga202 - Aug-25-2019 

# 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

RE: Help Making A Toggle GUI - Yoriz - Aug-25-2019

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.