Python Kivy スライダーの使い方グラフをリアルタイムで更新する方法

まくまく

PythonのGUIアプリ作成ライブラリ kivyのスライダーを使用してMatplotlibのグラフをリアルタイムで更新してみようと思います。

スライダーを使えるようになると、パラメーターを変更したり、グラフを更新したりするのがマウスやタッチ操作で行えるようになります。しかもその操作をリアルタイムで反映できます。今回は、Matplotlibで作成した散布図のプロットをスライダーでグリグリ動かしてみます。結構苦戦しましたが、なんとか思い通りの動きになりました。

出力

プログラムを実行するとこのようなウインドウが立ち上がります。上部がグラフエリア、下部はスライダーエリアです。

グラフはMatplotlibの散布図を表示しています。スライダーの初期値はX、Yともに50に設定。

X軸のスライダーを動かすとグラフのプロット（バツ印）がX方向にリアルタイムで動きます。右下のラベルもリアルタイムで更新されます。

Y軸のスライダーでも同様にリアルタイムでグラフとテキストが更新されます。

サンプルプログラム

pyファイル

#ライブラリのインポート
from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.lang import Builder
from matplotlib.markers import MarkerStyle
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg
import matplotlib.pyplot as plt
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
import numpy as np

#kvファイルの読み込み
Builder.load_file("mat_slider.kv")

class Graphview(FloatLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.xx = 50
        self.yy = 50
        self.fig, self.ax = plt.subplots()
        #散布図
        self.scat = self.ax.scatter(self.xx, self.yy, marker="X", s=200)
        self.ax.set_xlim(0,300)
        self.ax.set_ylim(0,300)
        self.ax.set_xlabel("X")
        self.ax.set_ylabel("Y")
        self.ax.set_title("Kivy x Matplotlib with Slider", size=14)
        self.box = self.ids.box
        self.box.add_widget(FigureCanvasKivyAgg(self.fig))

    def update_xvalue(self, xvalue):
        self.slide_xtext.text = str(xvalue)
        self.xx = xvalue
        self.scat.set_offsets((self.xx, self.yy))
        self.fig.canvas.draw()
 
    def update_yvalue(self, yvalue):
        self.slide_ytext.text = str(yvalue)
        self.yy = yvalue
        self.scat.set_offsets((self.xx, self.yy))
        self.fig.canvas.draw()


class DispgraphApp(App):
    def build(self):
        self.title = "window"
        return Graphview()

if __name__ == '__main__':
    DispgraphApp().run()

kvファイル

#ファイル名: mat_graph2.kv
<Graphview>
    canvas.before:
        Color:
            #rgba: 88/255, 38/255, 48/255, 1
            rgba: 17/255, 117/255, 150/255, 1
        Rectangle:
            pos: self.pos
            size: self.size

    slide_xtext: slider_xlabel
    slide_ytext: slider_ylabel

    BoxLayout:
        orientation: "vertical"
        size: root.width, root.height
        padding: 20

        id: box
        pos_hint: {"top":1}
        size_hint_y: .8
        #size_hint: (1, 1)

    GridLayout:
        cols: 3
        padding: 20
        size_hint_y: .2
        
        Slider:
            id: xvalue
            min: 1
            max: 280
            step: 1
            value: 50
            orientation: "horizontal"
            on_value: root.update_xvalue(xvalue.value)
            size_hint: (5, 0.5)

        Label:
            text: "X :"
            font_size: 32
            size_hint: (0.5, 0.5)

        Label:
            id: slider_xlabel
            text: "50"
            font_size: 32
            size_hint: (0.5, 0.5)

        Slider:
            id: yvalue
            min: 1
            max: 280
            step: 1
            value: 50
            orientation: "horizontal"
            on_value: root.update_yvalue(yvalue.value)
            size_hint: (5, 0.5)

        Label:
            text: "Y :"
            font_size: 32
            size_hint: (0.5, 0.5)

        Label:
            id: slider_ylabel
            text: "50"
            font_size: 32
            size_hint: (0.5, 0.5)