Kivy update matplotlib plot

Question:

Starting to learn Kivy, I want to create a simple application consisting of a start page (very simple) and a second page where I plot data with a button to delete the old plot and display a new plot.

After some problems to control the size and position of the plot widget, I can show the 2 pages and the buttons. The problem is when I click on the "Update button", a new plot is displayed, but a second figure is added next to the old one. The same kind of problem appears when I return to the second page several times. Do you have any idea on how to reuse the old figure and update/reset it or how to fix this ?

Here is my code :

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg
import matplotlib.pyplot as plt
import numpy as np

                                            
## Here for providing colour to the background  
from kivy.core.window import Window 

## Setting the window size 
Window.clearcolor = (1, 1, 1, 1) # White background
Window.size = (960, 540) 


kv = """
#:import SlideTransition kivy.uix.screenmanager.SlideTransition

<Manager>:
    transition: SlideTransition()

    StartPage:
        name: 'StartPage'

    SecondPage:
        name: 'SecondPage'

<StartPage>:

    canvas:
        
        Color:
            rgba: 0.1, 0.1, 1, 0.7
            
        Rectangle:
            pos: 0, 11*root.height/12
            size: root.width, root.height/12
            
        Rectangle:
            pos: 0, 0
            size: root.width, root.height/12

        
    BoxLayout:
        orientation: 'vertical'
        size: root.width, root.height


    Button:
        size_hint: 0.15, 0.08
        pos_hint: {'left': 0, 'top': 1 }
        text: 'Go to Second Page'
        on_release:
            root.manager.current = 'SecondPage'
        
    Button:
        size_hint: 0.15, 0.08
        pos_hint: {'right': 1, 'bottom': 1 }
        text: 'Quit'
        on_release: app.stop()
    
                
    Label:
        text: 'Start Screen'
        font_size: '20sp'
        color: 0,0,0,1
        pos_hint:{'x': 0.42, 'y': 0.46 }

    

<SecondPage>:
    box: box

    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        id: box
        size_hint: 0.8, 0.75
        pos_hint:{'x': 0, 'y': 0.1 }

    Button:
        text:'Start Menu'
        font_size: 20
        bold: True
        size_hint: 0.15, 0.08
        pos_hint: {'left': 0, 'top': 1 }
        color: 1, 1, 1, 1
        on_press: root.manager.current = 'StartPage'
        
    Button:
        text:'Update'
        font_size: 20
        bold: True
        size_hint: 0.15, 0.08
        pos_hint: {'x':0.8, 'y': 0.5 }
        color: 1, 1, 1, 1
        on_press: root.Update()
"""

Builder.load_string(kv)

# Start Page
class StartPage(Screen):      
    pass

#Second Page
class SecondPage(Screen):
    box = ObjectProperty(None)


    def add_plot(self, N):
    
        phase = np.random.normal(-np.pi/2, +np.pi/2)
        noise = np.random.normal(0, 1, N)
        nbr = np.linspace(0,1,N)
        func = 0.01*noise+np.sin(nbr/0.1+phase)
    
        plt.plot(nbr,func,label='Line1',color='r')
        plt.ylabel('Sinus')
        plt.xlabel('Range')
        plt.grid(True)
        self.fig1 = plt.gcf()
    
        return self.fig1

    def on_pre_enter(self, *args):
    
        self.fig1 = SecondPage.add_plot(self,1000)
        self.box.add_widget(FigureCanvasKivyAgg(self.fig1))
    
    def Update(self):
    
        self.box.remove_widget(FigureCanvasKivyAgg(self.fig1))
    
        self.fig1 = SecondPage.add_plot(self,1000)
        self.box.add_widget(FigureCanvasKivyAgg(self.fig1))


class Manager(ScreenManager):
    pass


class MyNewApp(App):
    title = "Matplolib - plot Update"

    def build(self):
        return Manager()    

MyNewApp().run()
Asked By: Tomasso

||

Answers:

One method that does work which is a relatively easy fix: if you clear all the child widgets with self.box.clear_widgets() instead of specifying the widget, then call plt.cla() to remove your previous data from the plot, should do what you’re after.

Edited code below:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg
import matplotlib.pyplot as plt
import numpy as np


## Here for providing colour to the background  
from kivy.core.window import Window 

## Setting the window size 
Window.clearcolor = (1, 1, 1, 1) # White background
Window.size = (960, 540) 


kv = """
#:import SlideTransition kivy.uix.screenmanager.SlideTransition

<Manager>:
    transition: SlideTransition()

    StartPage:
        name: 'StartPage'

    SecondPage:
        name: 'SecondPage'

<StartPage>:

    canvas:

        Color:
            rgba: 0.1, 0.1, 1, 0.7

        Rectangle:
            pos: 0, 11*root.height/12
            size: root.width, root.height/12

        Rectangle:
            pos: 0, 0
            size: root.width, root.height/12


    BoxLayout:
        orientation: 'vertical'
        size: root.width, root.height


    Button:
        size_hint: 0.15, 0.08
        pos_hint: {'left': 0, 'top': 1 }
        text: 'Go to Second Page'
        on_release:
            root.manager.current = 'SecondPage'

    Button:
        size_hint: 0.15, 0.08
        pos_hint: {'right': 1, 'bottom': 1 }
        text: 'Quit'
        on_release: app.stop()


    Label:
        text: 'Start Screen'
        font_size: '20sp'
        color: 0,0,0,1
        pos_hint:{'x': 0.42, 'y': 0.46 }



<SecondPage>:
    box: box

    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        id: box
        size_hint: 0.8, 0.75
        pos_hint:{'x': 0, 'y': 0.1 }

    Button:
        text:'Start Menu'
        font_size: 20
        bold: True
        size_hint: 0.15, 0.08
        pos_hint: {'left': 0, 'top': 1 }
        color: 1, 1, 1, 1
        on_press: root.manager.current = 'StartPage'

    Button:
        text:'Update'
        font_size: 20
        bold: True
        size_hint: 0.15, 0.08
        pos_hint: {'x':0.8, 'y': 0.5 }
        color: 1, 1, 1, 1
        on_press: root.Update()
"""

Builder.load_string(kv)

# Start Page
class StartPage(Screen):      
    pass

#Second Page
class SecondPage(Screen):
    box = ObjectProperty(None)


    def add_plot(self, N):

        phase = np.random.normal(-np.pi/2, +np.pi/2)
        noise = np.random.normal(0, 1, N)
        nbr = np.linspace(0,1,N)
        func = 0.01*noise+np.sin(nbr/0.1+phase)

        plt.plot(nbr,func,label='Line1',color='r')
        plt.ylabel('Sinus')
        plt.xlabel('Range')
        plt.grid(True)
        self.fig1 = plt.gcf()

        return self.fig1

    def on_pre_enter(self, *args):

        self.fig1 = SecondPage.add_plot(self,1000)
        self.box.add_widget(FigureCanvasKivyAgg(self.fig1))

    def Update(self):
        #self.box.remove_widget(FigureCanvasKivyAgg(self.fig1))
        plt.cla()
        self.box.clear_widgets()
        self.fig1 = SecondPage.add_plot(self,1000)
        self.box.add_widget(FigureCanvasKivyAgg(self.fig1))


class Manager(ScreenManager):
    pass


class MyNewApp(App):
    title = "Matplolib - plot Update"

    def build(self):
        return Manager()    

MyNewApp().run()
Answered By: Liam
Categories: questions Tags: , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.