commented "camember" diagram in kv

graphs.kv

#:kivy 1.4.1

# import Image from core and calls it CoreImage
#:import CoreImage kivy.core.image.Image

#:import Animation kivy.animation.Animation

# create a FloatLayout as root widget
FloatLayout:
    # load the kivy icon in "tex" property
    tex: CoreImage('/home/gabriel/kivy/kivy/data/logo/kivy-icon-128.png').texture

    # just a background, open the canvas, define color, do a whole screen rect,
    # done
    canvas:
        Color:
            rgba: .5, .5, .5, 1
        Rectangle:
            size: self.size
            pos: self.pos

    # we want a slider
    Slider:
        # we want to refer to it as `my_slider`
        id: my_slider
        # we want it vertical, yep!
        orientation: 'vertical'
        # tell parent floatlayout to only manage the height of the widget (100%)
        size_hint: None, 1
        # manually set width to 100
        width: 100

        # default value
        value: 180

        # min value
        min: 0
        # max value
        max: 360

        on_value: Animation(value=self.value, d=.3, t='out_quad').start(graph_widget)

    # we want a simple widget, to draw our stuff in
    Widget:
        id: graph_widget
        # size is 50% of parent floatlayout, in both direction
        size_hint: .5, .5
        # put center of our widget at center of the parent
        pos_hint: {'center': (.5, .5)}
        value: 0

        # let's draw!
        canvas:
            # set tho color, as it's dependent on the value of my_slider, it
            # will be redone if it change
            Color:
                rgba: (self.value or my_slider.value) / 360, 1 - ((self.value or my_slider.value) / 360), 0, 1

            # draw an ellipse
            Ellipse:
                # pos of the ellipse is pos of the widget
                pos: self.pos
                # lets apply the texture loaded before on the ellipse! yeah, it's kind of magic.
                texture: root.tex
                # well, you probably can guess this one at this point
                size: self.size
                # actually we don't want a full ellipse, let's have it start at 0 (deg)
                angle_start: 0
                # end of the ellipse is dependant on the slider value so it'll update the ellipse when it change
                angle_end: self.value or my_slider.value