Kivy：使用滑块更新Matplotlib画布

Question

I need to create a slider which updates a matplotlib figure. So far I have this, main.py:

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

class Container(BoxLayout):
    display = ObjectProperty()
    def __init__(self, *args, **kwargs):
        global canvas
        super(Container, self).__init__(**kwargs)
        lum_img = np.random.rand(10,10)
        plt.imshow(lum_img, cmap="gray")
        plt.colorbar() 
        canvas = FigureCanvasKivyAgg(plt.gcf())
        self.ids.box_display.add_widget(canvas)
        canvas.draw()

    def add_one(self, value):
        lum_img = np.random.rand(10,10)
        plt.imshow(lum_img, cmap="gray")
        plt.colorbar() 
        canvas.draw()

        self.display.text = str(round(value,2))



class MainApp(App):
    def build(self):
        self.title = 'Image and slider app'

        return Container()


if __name__ == "__main__":
    app = MainApp()
    app.run()

And the main.kv:

<Container>:
    display: display
    id: main_display
    orientation: "vertical"

    BoxLayout:
        id: box_display
        orientation: "vertical"


        Slider:
            id: slider_image
            min: 0
            max: 1
            value: 0.5
            on_value: root.add_one(value = slider_image.value)

    Label:
        id: display
        font_size: dp(50)
        text: '0'

The behaviour is not as expected, instead of updating the image canvas it just move it! I think that the error is to declare the canvas as a global variable, but I do not know how to update it without doing this.

Any idea?

Answer 1

You code is actually creating new plots, but they are not positioned well and overlap each other. One way to correct that problem is to use plt.subplot() . That requires knowing in advance how many subplots you will add. Here is a modified version of your code that uses this approach (I included the .kv as a string just for my own convenience):

from kivy.app import App
from kivy.lang import Builder
from kivy.properties import ObjectProperty
from kivy.uix.boxlayout import BoxLayout
import numpy as np
import matplotlib.pyplot as plt
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg

Builder.load_string('''
<Container>:
    display: display
    id: main_display
    orientation: "vertical"

    BoxLayout:
        id: box_display
        orientation: "vertical"


        Slider:
            id: slider_image
            min: 0
            max: 1
            value: 0.0
            on_value: root.add_one(value = slider_image.value)

    Label:
        id: display
        font_size: dp(50)
        text: '0'
''')

class Container(BoxLayout):
    display = ObjectProperty()
    def __init__(self, *args, **kwargs):
        global canvas
        super(Container, self).__init__(**kwargs)
        self.index = 1    # index of the current plot
        self.max_plots = 5     # maximum number of subplots
        self.old_slider_value = 0.0   # starting value of the slider
        lum_img = np.random.rand(10,10)
        plt.subplot(1, self.max_plots, self.index)     # create the first subplot
        plt.imshow(lum_img, cmap="gray")
        plt.colorbar()
        canvas = FigureCanvasKivyAgg(plt.gcf())
        self.ids.box_display.add_widget(canvas)
        canvas.draw()

    def add_one(self, value):
        # only make a new subplot if the slider has moved at least 0.2
        if (value - self.old_slider_value) > 1.0/self.max_plots and self.index < self.max_plots:
            self.old_slider_value = value
            self.index += 1
            plt.subplot(1, self.max_plots, self.index)     # make new subplot
            lum_img = np.random.rand(10,10)
            plt.imshow(lum_img, cmap="gray")
            plt.colorbar()
            plt.tight_layout()     # arrange the subplots a bit to eliminate overlaps
            canvas.draw()

        self.display.text = str(round(value,2))



class MainApp(App):
    def build(self):
        self.title = 'Image and slider app'

        return Container()


if __name__ == "__main__":
    app = MainApp()
    app.run()

Answer 2

Misunderstood what you wanted (my error). If you do not want to create new plots, but just update the existing one, you only need to add a call to plt.clf() in your add_one() method before you do any additional plotting. This clears the current figure, and allows you to replace it with a new one.