Add a rounded and squared togglebutton

@daniilS, the toggle style you added gave me the ability to create a rounded toggle switch. I’m modeling it after the one here. I’d like to have rounded and squared with images generated in the application at run-time so that I don’t have to package the assets with the program. This also gives the ability to generate hover effects by dimming the color slightly with the update_hsv method.

The approach I took was to draw a rounded rectangle very large, and then shrink it to the size I need, apply anti-aliasing to get a nice smooth look. I’m not completely happy with the size or dimensions. But, it is getting close.

Let me know what you think if you have time to play around with it; and of course if you have any feedback.

from PIL import Image, ImageTk, ImageDraw
from tkinter import ttk


on_color='#2196F3'
off_color = '#cccccc'

# off image
off_im = Image.new('RGBA', (226, 130))
draw = ImageDraw.Draw(off_im)
draw.rounded_rectangle([1, 1, 225, 129], radius=(128/2), fill=off_color)
draw.ellipse([14, 14, 114, 114], fill='white')

# on image
on_im = Image.new('RGBA', (226, 130))
draw = ImageDraw.Draw(on_im)
draw.rounded_rectangle([1, 1, 225, 129], radius=(128/2), fill=on_color)
draw.ellipse([12, 12, 116, 116], fill='white')
on_im = on_im.transpose(Image.ROTATE_180)

# set up application styles
style = ttk.Style()
style.theme_use('clam')

# set the background white
style.configure('white.TFrame', background='white')
window = ttk.Frame(style.master, style='white.TFrame', padding=20)
window.pack(fill='both', expand='yes')

# save reference to images
toggle_off = ImageTk.PhotoImage(off_im.resize((32, 20), Image.LANCZOS))
toggle_on = ImageTk.PhotoImage(on_im.resize((32, 20), Image.LANCZOS))

# create a new image element
style.element_create('rounded.Toolbutton.label', 'image', toggle_on, ('!selected', toggle_off))

# set the new layout
style.layout('rounded.Toolbutton', [
    ('Toolbutton.border', {'sticky': 'nswe', 'children': [
        ('Toolbutton.padding', {'sticky': 'nswe', 'children': [
            ('rounded.Toolbutton.label', {'sticky': 'nswe'})]})]})])

# configure style settings
style.configure('rounded.Toolbutton', relief='flat', borderwidth=0)
style.map('rounded.Toolbutton',
          background=[
              ('selected', 'white'),
              ('!selected', 'white')])



# demo the new widget
ttk.Checkbutton(window, style='rounded.Toolbutton').pack()
window.mainloop()

[israel-dryer]

this almost makes me want to draw my own radio and check buttons…

[israel-dryer]

light theme color variations for Roundtoggle.Toolbutton

dark theme color variations for Roundtoggle.Toolbutton