Search code examples
matplotlibgtk3gladepython-embedding

embedding Matplotlib on Glad/GTK3 scrolledwindow does not display maplotlib's

System used : Windows 7 python : 2.7.12 Glade: 3.14.2 Library used : matplotlib, networkx

Hello, I am trying to display embedding matplotlib's figure on GTK. The display on scrolledwindow does not work. However when I tried to save it with toolbar, I actually can save it.

The code is below:

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
from figure1 import figure
from matplotlib.figure import Figure
from matplotlib.backends.backend_gtk3cairo import FigureCanvasGTK3Cairo as          FigureCanvas
from matplotlib.backends.backend_gtk3 import NavigationToolbar2GTK3 as NavigationToolbar

class main_function():

def __init__(self):
    interface= Gtk.Builder()
    interface.add_from_file("interface1.glade")   
    interface.connect_signals(self)
          # relier les signaux aux fonctions        
    # on stocke notre fichier Glade dans des variables
    self.mainWindow=interface.get_object("mainWindow")
    self.aboutchronomap=interface.get_object("aboutchronomap")
    self.fichierdialogue=interface.get_object("fichierdialogue")
    self.sw=interface.get_object("mainFigure")
    self.sw2=interface.get_object("MatplotlibToolbar")
   # on stocke les widgets avec les interfaces
    canvas = FigureCanvas(figure())
    print(type(canvas))
    print(type(figure()))
    self.sw.add_with_viewport(canvas)
    print("self.sw.add_with_viewport(canvas)")        
    toolbar = NavigationToolbar(canvas, self.mainWindow)
    self.sw2.add_with_viewport(toolbar)   
    print("toolbar display")


main_function()
Gtk.main()

figure1.py code:

from gi.repository import Gtk
import matplotlib.pyplot as plt
from matplotlib.figure import Figure
from numpy import sin, cos, pi, linspace


def figure():
    fig = Figure(figsize=(5,5), dpi=80)
    ax = fig.add_subplot(111)

    n = 1000
    xsin = linspace(-pi, pi, n, endpoint=True)
    xcos = linspace(-pi, pi, n, endpoint=True)
    ysin = sin(xsin)
    ycos = cos(xcos)

    sinwave = ax.plot(xsin, ysin, color='black', label='sin(x)')
    coswave = ax.plot(xcos, ycos, color='black', label='cos(x)', linestyle='--')

    ax.set_xlim(-pi,pi)
    ax.set_ylim(-1.2,1.2)

    ax.fill_between(xsin, 0, ysin, (ysin - 1) > -1, color='blue', alpha=.3)
    ax.fill_between(xsin, 0, ysin, (ysin - 1) < -1, color='red',  alpha=.3)
    ax.fill_between(xcos, 0, ycos, (ycos - 1) > -1, color='blue', alpha=.3)
    ax.fill_between(xcos, 0, ycos, (ycos - 1) < -1, color='red',  alpha=.3)

    ax.legend(loc='upper left')

    ax = fig.gca()
    ax.spines['right'].set_color('none')
    ax.spines['top'].set_color('none')
    ax.xaxis.set_ticks_position('bottom')
    ax.spines['bottom'].set_position(('data',0))
    ax.yaxis.set_ticks_position('left')
    ax.spines['left'].set_position(('data',0))
    return fig

Glade xml code of scrolledwindow where the figure should normally display :

<child>
                  <object class="GtkScrolledWindow" id="mainFigure">
                    <property name="visible">True</property>
                    <property name="can_focus">True</property>
                    <property name="hscrollbar_policy">always</property>
                    <property name="vscrollbar_policy">always</property>
                    <property name="shadow_type">in</property>
                    <child>
                      <placeholder/>
                    </child>
                  </object>
                  <packing>
                    <property name="expand">True</property>
                    <property name="fill">True</property>
                    <property name="position">1</property>
                  </packing>
</child>

what I have as display :

enter image description here

If I use the button "save" on toolbar, I actually have the right figure : enter image description here

On the GTK, I cannot see it. Can anyone help me?

Thank you! Mia

Solution

  • I manage to figure out by my own. You should just add self.mainWindow.show_all() and that works.

    there are some additional ressources to this problem.

    In order to embed the matplotlib picture in the GTK GUI, I use this code below:

        def on_carto_display_button_press_event(self,widget,event):
    if self.View.display_Mode != "carto":
        self.View.display_Mode = "carto"
        child=self.View.sw.get_child()
        child1 = self.View.toolbar.get_child()
        #print(child1)

        if child != None:
            self.View.toolbar.remove(child1)
            self.View.sw.remove(child)
            self.box.remove(self.View.canvasChrono)

        self.box=Gtk.Box()
        self.View.sw.add(self.box)
        self.box.pack_start(self.View.canvasCarto, True, True, 0)
        #Add toolbar
        toolbar = NavigationToolbar(self.View.canvasCarto, self.View.window)
        self.View.toolbar.add_with_viewport(toolbar)
        child1 = self.View.toolbar.get_child()
        #print(child1)
        self.View.sw.show_all()
        #self.View.toolbar.show_all()

    Another example of embedding a matplotlib plot in GUi GTK can be the following one :

    #!/usr/bin/python3

from gi.repository import Gtk

from matplotlib.figure import Figure
from numpy import sin, cos, pi, linspace
#Possibly this rendering backend is broken currently
#from matplotlib.backends.backend_gtk3agg import FigureCanvasGTK3Agg as FigureCanvas
from matplotlib.backends.backend_gtk3cairo import FigureCanvasGTK3Cairo as FigureCanvas    from matplotlib.backends.backend_gtk3 import NavigationToolbar2GTK3 as NavigationToolbar

class Signals:
    def on_window1_destroy(self, widget):
        Gtk.main_quit()

builder = Gtk.Builder()
builder.add_objects_from_file('mpl-ntb-glade.glade', ('window1', '') )
builder.connect_signals(Signals())

myfirstwindow = builder.get_object('window1')
sw = builder.get_object('scrolledwindow1')
sw2 = builder.get_object('scrolledwindow2')

fig = Figure(figsize=(5,5), dpi=80)
ax = fig.add_subplot(111)

n = 1000
xsin = linspace(-pi, pi, n, endpoint=True)
xcos = linspace(-pi, pi, n, endpoint=True)
ysin = sin(xsin)
ycos = cos(xcos)

sinwave = ax.plot(xsin, ysin, color='black', label='sin(x)')
coswave = ax.plot(xcos, ycos, color='black', label='cos(x)', linestyle='--')

ax.set_xlim(-pi,pi)
ax.set_ylim(-1.2,1.2)

ax.fill_between(xsin, 0, ysin, (ysin - 1) > -1, color='blue', alpha=.3)
ax.fill_between(xsin, 0, ysin, (ysin - 1) < -1, color='red',  alpha=.3)
ax.fill_between(xcos, 0, ycos, (ycos - 1) > -1, color='blue', alpha=.3)
ax.fill_between(xcos, 0, ycos, (ycos - 1) < -1, color='red',  alpha=.3)

ax.legend(loc='upper left')

ax = fig.gca()
ax.spines['right'].set_color('none')
ax.spines['top'].set_color('none')
ax.xaxis.set_ticks_position('bottom')
ax.spines['bottom'].set_position(('data',0))
ax.yaxis.set_ticks_position('left')
ax.spines['left'].set_position(('data',0))

fig.tight_layout()

canvas = FigureCanvas(fig)
sw.add_with_viewport(canvas)

toolbar = NavigationToolbar(canvas, myfirstwindow)
sw2.add_with_viewport(toolbar)

myfirstwindow.show_all()
Gtk.main()

    This doc is extremely useful to help you to solve the problem =)

    http://gtk3-matplotlib-cookbook.readthedocs.io/en/latest/matplotlib-toolbar.html#matplotlib-toolbar-with-glade