Comments (13)
israel-dryer
commented on May 23, 2024
1
light theme color variations for Roundtoggle.Toolbutton
dark theme color variations for Roundtoggle.Toolbutton
from ttkbootstrap.
israel-dryer
commented on May 23, 2024
1
this almost makes me want to draw my own radio and check buttons...
from ttkbootstrap.
israel-dryer
commented on May 23, 2024
fixed the layout to add a label to the right. Also, right-sized the toggle to match the radio and checkbuttons.
from tkinter import ttk
from PIL import Image, ImageTk, ImageDraw
from ttkbootstrap import Style
on_color = '#2196F3'
off_color = '#b4bcc2'
# off image
off_im = Image.new('RGBA', (226, 130))
draw = ImageDraw.Draw(off_im)
draw.rounded_rectangle([1, 1, 225, 129], radius=(128 / 2), outline=off_color, width=6)
draw.ellipse([20, 18, 112, 110], fill=off_color)
# 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([18, 18, 110, 110], fill='white')
on_im = on_im.transpose(Image.ROTATE_180)
style = Style()
# 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((24, 15), Image.LANCZOS))
toggle_on = ImageTk.PhotoImage(on_im.resize((24, 15), Image.LANCZOS))
# create a new image element
style.element_create('Toolbutton.toggle', 'image', toggle_on,
('!selected', toggle_off),
width=28, border=4, sticky='w')
# set the new layout
style.layout('rounded.Toolbutton', [
('Toolbutton.border', {'sticky': 'nswe', 'children': [
('Toolbutton.padding', {'sticky': 'nswe', 'children': [
('Toolbutton.toggle', {'side': 'left'}),
('Toolbutton.label', {'side': 'left'})]})]})])
# 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, text='toggle switch', style='rounded.Toolbutton').pack(fill='x')
ttk.Checkbutton(window, text='checkbox').pack(fill='x', pady=10)
ttk.Radiobutton(window, text='radiobutton').pack(fill='x')
window.mainloop()from ttkbootstrap.
israel-dryer
commented on May 23, 2024
added squared toggle
from tkinter import ttk
from PIL import Image, ImageTk, ImageDraw
from ttkbootstrap import Style
on_color = '#2196F3'
off_color = '#b4bcc2'
style = Style()
# 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')
# rounded toggle -------------------------------------------------------------------------------------------------------
# rounded off image
rounded_off_im = Image.new('RGBA', (226, 130))
draw = ImageDraw.Draw(rounded_off_im)
draw.rounded_rectangle([1, 1, 225, 129], radius=(128 / 2), outline=off_color, width=6)
draw.ellipse([20, 18, 112, 110], fill=off_color)
# rounded on image
rounded_on_im = Image.new('RGBA', (226, 130))
draw = ImageDraw.Draw(rounded_on_im)
draw.rounded_rectangle([1, 1, 225, 129], radius=(128 / 2), fill=on_color)
draw.ellipse([18, 18, 110, 110], fill='white')
rounded_on_im = rounded_on_im.transpose(Image.ROTATE_180)
rounded_toggle_off = ImageTk.PhotoImage(rounded_off_im.resize((24, 15), Image.LANCZOS))
rounded_toggle_on = ImageTk.PhotoImage(rounded_on_im.resize((24, 15), Image.LANCZOS))
# create indicator element
style.element_create('Toolbutton.rounded.toggle', 'image', rounded_toggle_on,
('!selected', rounded_toggle_off),
width=28, border=4, sticky='w')
# set the new layout
style.layout('rounded-toggle.Toolbutton', [
('Toolbutton.border', {'sticky': 'nswe', 'children': [
('Toolbutton.padding', {'sticky': 'nswe', 'children': [
('Toolbutton.rounded.toggle', {'side': 'left'}),
('Toolbutton.label', {'side': 'left'})]})]})])
# configure style settings
style.configure('rounded-toggle.Toolbutton', relief='flat', borderwidth=0)
style.map('rounded.Toolbutton',
background=[
('selected', 'white'),
('!selected', 'white')])
# squared toggle -------------------------------------------------------------------------------------------------------
# square off image
squared_off_im = Image.new('RGBA', (226, 130))
draw = ImageDraw.Draw(squared_off_im)
draw.rectangle([1, 1, 225, 129], outline=off_color, width=6)
draw.rectangle([20, 18, 112, 110], fill=off_color)
# squared on image
squared_on_im = Image.new('RGBA', (226, 130))
draw = ImageDraw.Draw(squared_on_im)
draw.rectangle([1, 1, 225, 129], fill=on_color)
draw.rectangle([18, 18, 110, 110], fill='white')
squared_on_im = squared_on_im.transpose(Image.ROTATE_180)
squared_toggle_off = ImageTk.PhotoImage(squared_off_im.resize((24, 15), Image.LANCZOS))
squared_toggle_on = ImageTk.PhotoImage(squared_on_im.resize((24, 15), Image.LANCZOS))
# create indicator element
style.element_create('Toolbutton.squared.toggle', 'image', squared_toggle_on,
('!selected', squared_toggle_off),
width=28, border=4, sticky='w')
# set the new layout
style.layout('squared-toggle.Toolbutton', [
('Toolbutton.border', {'sticky': 'nswe', 'children': [
('Toolbutton.padding', {'sticky': 'nswe', 'children': [
('Toolbutton.squared.toggle', {'side': 'left'}),
('Toolbutton.label', {'side': 'left'})]})]})])
# configure style settings
style.configure('squared-toggle.Toolbutton', relief='flat', borderwidth=0)
style.map('squared.Toolbutton',
background=[
('selected', 'white'),
('!selected', 'white')])
# demo the new widget
ttk.Checkbutton(window, text='toggle switch', style='rounded-toggle.Toolbutton').pack(fill='x', pady=10)
ttk.Checkbutton(window, text='toggle switch', style='squared-toggle.Toolbutton').pack(fill='x')
ttk.Checkbutton(window, text='checkbox').pack(fill='x', pady=10)
ttk.Radiobutton(window, text='radiobutton').pack(fill='x')
window.mainloop()from ttkbootstrap.
daniilS
commented on May 23, 2024
Oh, that's a good idea! Out of interest, how does the performance compare to using an asset, or a base64 string (or maybe even a canvas) for the image? My main reason for using this library in the first place was because the graphical themes from ttkthemes became incredibly laggy when creating or resizing windows with a lot of image-based widgets.
from ttkbootstrap.
israel-dryer
commented on May 23, 2024
that's a good question, and one that's been on my mind for a few weeks. Because I'm not drawing every border with an image as in ttkthemes, I don't think I'd have the same issues, but I'm just speculating. I've tried to keep the images microscopic in size to avoid that. I'll open an issue on this, because there are some related issues I want to explore because it could potentially become an issue in the future because I'm essentially creating all themes (and theme assets) at runtime for every theme.
from ttkbootstrap.
daniilS
commented on May 23, 2024
For ttkthemes, my issue was that I have a toplevel window with a large grid of entry widgets, and creating/resizing/scrolling became a lot slower as the table got more rows. That should hopefully mean that it's just the (re)drawing of a lot of images that affects performance, so just creating the theme could be fine.
from ttkbootstrap.
israel-dryer
commented on May 23, 2024
oh yeah. creating a grid can be expensive. I haven't done it yet, but I've thought of having something where a table is a set size, and instead of adding more table rows, you actually just page through the data and the rows update so that it gives the appearance that you are scrolling down the page, but in reality it is simply updating the existing widgets with a paginated list if data points.
from ttkbootstrap.
daniilS
commented on May 23, 2024
I've actually tried that approach to scrolling before! But it turned out that for graphical themes, for some reason even just updating an entry's content is very slow. If you want to test it yourself, the Adapta theme from ttkthemes is particularly laggy. Here's an example to test all three of creating, updating, and resizing a table:
https://gist.github.com/daniilS/069c7a544d007083e7c502e929069db2
EDIT: I guess a similar script could also easily be used to tell whether there's any difference in performance between an image asset, dynamic image generation, or a base64 string for toggle switches
from ttkbootstrap.
israel-dryer
commented on May 23, 2024
squared toggle buttons
light theme
dark theme
from ttkbootstrap.
israel-dryer
commented on May 23, 2024
I've actually tried that approach to scrolling before! But it turned out that for graphical themes, for some reason even just updating an entry's content is very slow. If you want to test it yourself, the Adapta theme from ttkthemes is particularly laggy. Here's an example to test all three of creating, updating, and resizing a table:
https://gist.github.com/daniilS/069c7a544d007083e7c502e929069db2
EDIT: I guess a similar script could also easily be used to tell whether there's any difference in performance between an image asset, dynamic image generation, or a base64 string for toggle switches
From what I remember, base64 tends to dramatically increase the data size of the image, so there would potentially be a penalty there. It would be interesting to stress test the various scenarios though to see what is gained in load-times vs. lag and memory consumption.
from ttkbootstrap.
daniilS
commented on May 23, 2024
I've tried it with a very large grid of togglebuttons, and while it's obviously slower than a regular Toolbutton, the performance feels fine if there's not too many of them, so this approach should be fine. However, the round toggle buttons currently have the circles in the same colour as the background when using a light theme.
from ttkbootstrap.
israel-dryer
commented on May 23, 2024
yikes. not sure how I missed that. Fixed the colors. I decided to go with the outline on the off colors as it just looked sharper.
from ttkbootstrap.
Related Issues (20)
- allow for `justify` argument in `tooltip`
- Add height property to ttkbootstrap.Button(height=5) HOT 11
- Unsupported locale setting on module import for Norwegian locale HOT 6
- Issue with ttkbootstrap.Checkbutton after Python 3.12 install HOT 1
- Add selection_changed event to TableView HOT 2
- How can I set the background color for specific rows in Tableview? HOT 1
- Multiple FloodGauge with same bootstyle, all show same mask despite different ones set.
- Destroying a scrolledframe while it is under the cursor gives bad window path
- CUBIC not found in the widgets.py file HOT 1
- kwarg paramter "default" of Messagbox methods is ignored
- Handling of the Enter button is incorrect for Messagebox
- Attribute Error When Executing python -m ttkcreator due to Incompatibility with Pillow - FIXED
- locale.Error: unsupported locale setting HOT 1
- Text widget border highlight/active not respecting the theme colours HOT 1
- ttkbootstrap dosen't like tkinter Label, Button.....
- ScrolledText: autohide and bootstyle "gone" Python 3.11, ttkbootstrap-Version: 1.10.1 HOT 1
- TableView supporting row/colume/cell selection
- ScrolledText widget can't press Ctrl+A HOT 1
- Button lost it's style after first run
- ttk bootrap not working properly HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ttkbootstrap.