matplotlib + customtkinter + scaling

[Spooyler]

I embedded a matplotlib figure into my customtkinter application using FigureCanvasTkAgg and added a navigation toolbar ( navigationtoolbar2tk ).
by default high DPI scaling is turned on for customtkinter, but I turn it off all the widgets are blurry.
But with a high DPI screen or setting, the figure axes and the buttons of the toolbar a weirdly small. and I don't know how to fix it.

I can use: ctypes.windll.shcore.setprocessdpiawareness(1) to reverse the effects of HIGH DPI scaling, but it is not a stable fix. If I do ctypes.windll.shcore.setprocessdpiawareness(2) then it messes with the widgets...which is weird as that is what is turned on by default.

Is there a known fix to this, or I should just live with it and change my program to accommodate this?

[dipeshSam]

Sample Reproducible Code with output might be helpful to resolve this problem.

Regards.

[Spooyler]

sure,,,this is the gist of it..
`import customtkinter as ctk
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk
from matplotlib.figure import Figure

app = ctk.CTk()
app.geometry('800x600')

frame = ctk.CTkFrame(app)
frame.pack(expand=True, fill='both')

fig = Figure(constrained_layout=True)
ax = fig.add_subplot(111)

canvas = FigureCanvasTkAgg(fig, master=frame)
toolbar = NavigationToolbar2Tk(canvas, frame)
toolbar.update()
toolbar.pack(side='bottom', fill='x')
canvas.get_tk_widget().pack(expand=True,fill='both')

app.mainloop()`

this is how it looks on 1440p 200% scaling

1080p 100% scaling

1440p 125% scaling

first one is weird second 2 okay. this is with automatic dpi scaling enabled in ctk. If I use ctypes.windll.shcore.SetProcessDpiAwareness(1) or ctypes.windll.shcore.SetProcessDpiAwareness(2) it again behaves differently.

[dipeshSam]

Do you want to change the size of toolbar along with its icons?

[Spooyler]

that is the idea yes.
basically I want both the toolbar and axes to scale with the window...same as if I had other ctk.widgets

[dipeshSam]

If you want to resize icons and size of the toolbar and Canvas independent to DPI scaling, one way is to update button images and reset default scaling of the matplotlib's canvas. To do so, you need to have with new (size quality) icons with PIL Image object, and if don't have icons ready, we can also modify or resize existing icons of the toolbar.

Here, in the following example, I modified actual icons. As size is increased, it may look pixelated, but if you want quality icons, create or find your own icons and use them by passing them in toolbar_icons_list as a list of PIL Images.

from PIL import ImageTk, Image
from tkinter import Checkbutton
from matplotlib.figure import Figure
from customtkinter import CTk, CTkFrame, CTkLabel
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.backends.backend_tkagg import NavigationToolbar2Tk


class MatPlotCanvas(CTkFrame):
    def __init__(self,
            master: CTk,
            figure: Figure,
            width: int,
            height: int,
            toolbar_height: int = 100,
            toolbar_icons_list: list[Image.Image] = None,
            **kwargs
        ):

        """
        The `matplotlib`.
        ~~~~~~~~~~~~~~~~
        A frame widget containing `FigureCanvasTkAgg` of `matplotlib.backends` along with its toolbar allowing
        manipulating their sizes.

        Params:
        - master: Any parent widget for the graph canvas window of the `matplotlib`.
        - figure: A class object from `matplotlib.figure`
        - width: Width of the graph canvas window of the `matplotlib`
        - height: Height of the graph canvas window of the `matplotlib`
        - toolbar_height: Height of the toolbar frame
        - toolbar_icons_list: A list containg PIL Image objects of icons to be used.

        - **kwargs: Other `CTkFrame` paramenters
        
        """               
                
        self.master = master
        self.figure = figure
        self.width = width
        self.height = height
        self.toolbar_height = toolbar_height
        self.toolbar_icons_list = toolbar_icons_list
        
        # Checking if Icons are provided
        if self.toolbar_icons_list:
            if len(list(filter(lambda x: isinstance(x, Image.Image), toolbar_icons_list))) != 7:
                raise ValueError("There should be seven PIL images in the list.")

        
        # Vital figure settings
        self.figure.set_dpi(100)
        self.figure.set_figwidth(self.width/100)
        self.figure.set_figheight(self.height/100)
        
        super().__init__(master, width=width, height=height, **kwargs)

        # Canvas/Graph frame
        self._gframe = CTkFrame(self, width=width, height=height)  
        self._gframe.pack(fill="x")    
                
        self.canvas_cls = FigureCanvasTkAgg(self.figure, master=self._gframe)
        self.canvas_widget = self.canvas_cls.get_tk_widget()
        self.canvas_widget.place(x=0, y=0, relwidth=1, relheight=1)
        
        # Toolbar frame
        self._tframe = CTkFrame(self, height=self.toolbar_height)  
        self._tframe.pack(fill="x")   
        
        self.toolbar_widget = NavigationToolbar2Tk(self.canvas_cls, window=self._tframe) 
        self.toolbar_widget.place(x=0, y=0, relwidth=1, relheight=1)
        self._resize_toolbar_icons(self.toolbar_height)
        
        

    def _resize_toolbar_icons(self, height: int):
        """Internal method to resize icons"""
        size = height - 4
        
        for i, button in enumerate(self.toolbar_widget._buttons.values()):
            pil_img =  ImageTk.getimage(getattr(button, "_ntimage")) if not self.toolbar_icons_list else self.toolbar_icons_list[i]
            _ntimage = ImageTk.PhotoImage(pil_img.resize((size, size)))
            
            if not isinstance(button, Checkbutton):
                button.config(image = _ntimage, width=height, height=height)
                button._ntimage = _ntimage
            else:
                button.config(image = _ntimage, width=height, height=height)
                button.config(selectimage = _ntimage, width=height, height=height)
                button._ntimage = _ntimage
                
        
    
        


if __name__ == "__main__":
    app = CTk()
    app.geometry("1000x600")

    fig = Figure(constrained_layout=True)  
    ax = fig.add_subplot(111)   


    graph = MatPlotCanvas(app, figure=fig, width=400, height=300, toolbar_height=54)
    graph.place(relx=0.25, anchor="center", rely=0.5)

    frame = CTkFrame(app, width=400, height=(300 + graph.toolbar_height), fg_color="gray40")        # toolbar height should be added
    frame.place(relx=0.75, anchor="center", rely=0.5)
    
    CTkLabel(frame, text="Same sized frame\nto check there is no more scaling.",
    fg_color="black", corner_radius=20, height=70).place(relx=0.5, anchor="center", rely=0.5)
    



    app.mainloop()

Output:

Hope, this would be helpful to you.
Regards.

[Spooyler]

sadly this doesn't really solve the issue, as the toolbar gets clipped if I change monitors.
here is what I realised. if by default activate_high_dpi_awareness is on it behaves differently compared to ctypes.windll.shcore.SetProcessDpiAwareness(2) which I do not fully understand as that is what is in the code. I guess it is because of other scaling methods included.
So my toolbar acts differently if those settings are exchanged.

[dipeshSam]

I'm telling you the way how you can really achieve resizing of Toolbar along with its icons. The case you are describing DPI Awareness and Multiple Monitors does not matter here.

I'll suggest you not to use ctypes.windll.shcore.SetProcessDpiAwareness. Keep it default by CustomTkinter.

BTW, could you please explain what you're facing with this illustration by providing output details? It might be helpful.

Regards.

[Spooyler]

It is relevant to me, as that is the main reason I asked the question. It is not a question of multiple monitors, rather using the program on different computers.
I don't intend to change ctypes.windll.shcore.SetProcessDpiAwareness I was just curious why it might differ from when customtkinter calls it.

Anyway this is the script you provided of 1080p 100%

and 1440p 125%

I am really grateful for your help by the way, sorry if it didn't came through as such.

[dipeshSam]

Actually, CustomTkinter already uses ctypes.windll.shcore.SetProcessDpiAwareness, you don't need to worry about this. And what does it do is that it just scales the window to the monitor's system scaling value so that window elements appear smooth, appealing, and not blurry or pixelated.

What do you expect more from the provided script? You can change the size of icons. What else can be resolved try to exhort it.

Regards.

[Spooyler]

Yes, as you said, high dpi scaling does exactly that. But it doesn't do that for widgets such as the buttons of the NavigationToolbar2Tk or the axes of the created ax object. With your code I can now change the size of the toolbar yes, I just don' understand, why these widgets are not able to scale. That is all.

[dipeshSam]

The size of toolbar buttons does not change as expected because the size of toolbar buttons depends on the size of toolbar. And, the size of toolbar is relative and fixed to the bounding box of the Canvas Figure.

As you can see in the following code block:

Also, the matplotlib sets scaling by its own independently of Process Dpi Awareness, so it may create conflicts in the size of other Tkinter widgets and the size of itself.

As you can see in the following code block:

Note that the above images are screenshots of original matplotlib backend code scripts, you can inspect them by your own.
Hope, the above explanation may help you in understanding why matplotlib's widgets do not scale with Tkinter's runtime scaling.

Regards.

[Spooyler]

Yes! that explains it completely! I was looking for it but wasn't sure where the issue laid. I assumed they were connected.
Thank you!

[dipeshSam]

You are welcome.

By inheriting the class NavigationToolbar2Tk, and overriding some event binding methods, we can create our own separate Toolbar widget frame which will have CTkButtons and will be scaled according to CustomTkinter window.

You are most welcome.

Regards.