Giter Club home page Giter Club logo

Comments (7)

daniilS avatar daniilS commented on May 24, 2024 1

@israel-dryer I finally got around to writing a proper patch that makes the matplotlib toolbar go from looking like this:
original
to this:
patched
when embedding a plot in a tkinter window with ttkbootstrap. The file for the patch is here, and all you need to do is call its applyPatch method in a project at any point before displaying a matplotlib graph.

It might be worth adding a file like this to to the widgets module and including a note in the documentation in case anyone else ever runs into the same problem. The patch is only necessary for embedded plots as ttkbootstrap doesn't affect matplotlib's own popups, but it also has the somewhat nice side effect of causing the popups to use the native ttk theme instead of the old tk look.

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 24, 2024

@daniilS , I'm actually working on cleaning up the tkinter widgets now. Would you mind posting some sample code that I can use to test while I'm making those changes?

from ttkbootstrap.

daniilS avatar daniilS commented on May 24, 2024

Sure, here's a minimal example that creates an empty plot embedded in a tkinter window (it looks like it doesn't happen when letting Matplotlib create its own window: https://gist.github.com/daniilS/bd8a70b17b67ebc716345bc5c922131c

The culprit itself is here: https://github.com/matplotlib/matplotlib/blob/master/lib/matplotlib/backends/_backend_tk.py#L561

Maybe this is really a Matplotlib issue, but I doubt this would be particularly high priority for them. I'm happy to provide an example for the documentation on how to subclass NavigationToolbar2Tk to avoid this, if you reckon that's enough of a solution.

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 24, 2024

yeah, I don't think there's an easy ttkbootstrap way to make this look better because of how the buttons are configured inside matplotlib. You can use unicode characters to get a pretty nice looking substitute that would work with ANY theme, and without having to use any images. I'm sure this will render differently depending on the font set, etc... and there are other character options available to represent the same idea.

image

from tkinter import ttk
from ttkbootstrap import Style

chars = {
    'home': '\U0001F3E0',
    'left': '\U0001F878',
    'right': '\U0001F87a',
    'magnify': '\U0001f50d',
    'slider': '\U0001f39a',
    'move': '\u2931',
    'disk': '\U0001f5aa'
}

style = Style('yeti')
root = style.master
style.configure('char.primary.TButton', font='Helvetica 20')
frame = ttk.Frame(root, padding=20)
frame.pack(fill='both')

ttk.Button(frame, text=chars['home'], style='char.primary.TButton').pack(side='left', padx=1)
ttk.Button(frame, text=chars['left'], style='char.primary.TButton').pack(side='left', padx=1)
ttk.Button(frame, text=chars['right'], style='char.primary.TButton').pack(side='left', padx=1)
ttk.Separator(frame, orient='vertical').pack(side='left', fill='y', padx=5)
ttk.Button(frame, text=chars['move'], style='char.primary.TButton').pack(side='left', padx=1)
ttk.Button(frame, text=chars['magnify'], style='char.primary.TButton').pack(side='left', padx=1)
ttk.Button(frame, text=chars['slider'], style='char.primary.TButton').pack(side='left', padx=1)
ttk.Separator(frame, orient='vertical').pack(side='left', fill='y', padx=5)
ttk.Button(frame, text=chars['disk'], style='char.primary.TButton').pack(side='left', padx=1)

root.mainloop()

from ttkbootstrap.

daniilS avatar daniilS commented on May 24, 2024

Looks like Matplotlib did recently switch to using the png images in tkinter 8.6, so that solves the transparency issue. Annoyingly there's no good way to style the tk.checkbutton when it's using the indicatoron=False mode, which explains why the pan and zoom buttons don't get styled. I'll create a subclass of NavigationToolbar2Tk for my code which uses ttk widgets, and am happy to share it if you want to include it in the documentation in case anyone else runs into the same issue.

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 24, 2024

Yeah for sure. If you send me a link to your code I can consider putting it into the gallery. I'm sure it would be helpful for others who use matplotlib and want make make it looks like it was designed in the last 10 years. ;-)

from ttkbootstrap.

daniilS avatar daniilS commented on May 24, 2024

Sure, I'll upload it and link you the project repository once it's reached a somewhat presentable state (what example could be more exciting than a data analysis tool!). It's a shame that tkinter has such a bad rep because people always associate it with the default tk look :/

from ttkbootstrap.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.