thelab.kv

CanvasExample6:

#:set s dp(150)

<CanvasExample6>:
    RelativeLayout:
        canvas:
            Color:
                rgb: 0, 0, 1
            Rectangle:
                size: self.size

    RelativeLayout:
        canvas:
            Color:
                rgb: 1, 1, 1
            Rectangle:
                size: self.size
    RelativeLayout:
        canvas:
            Color:
                rgb: 1, 0, 0
            Rectangle:
                size: self.size

<CanvasExample5>:
    # Button:
    # BoxLayout:
    # RelativeLayout:
        # canvas.before:
        # canvas:
            # Rectangle:
        # text: "A"
        # pos: 100, 100

    BoxLayout:
        size: root.size

        # Button:
            # text: "A"
        Widget:
            canvas:
                Color:
                    rgb: 1, 0, 0
                Rectangle:
                    size: self.size

        # Button:
            # text: "B"
        Widget:
            # canvas always start at (0, 0)
            canvas:
                Color:
                    rgb: 0, 1, 0
                Rectangle:
                    size: self.size
                    pos: self.pos  # move rectangle  # self.pos is position of the Widget

        RelativeLayout:
            canvas:
                Color:
                    rgb: 0, 0, 1
                Rectangle:
                    size: self.size
                    # pos: self.pos # no need to define that because of RelativeLayout we use

<CanvasFromTheCode>:
    Button:
        pos: 100, 400
        text: "A"
        on_press: root.on_button_a_click()

<CanvasExample3>:
    canvas:
        Color:
            # rgb: 1, 0, 0
            rgba: 1, 0, 0, .3

        Line:
            circle: (200, 200, 100) # center_x, center_y, radius
            width: 2

        # Color:
        #    rgb: 1, 0, 0

        Line:
            ellipse: (500, 300, 100, 200) # center_x, center_y, radius_x, radius_y
            width: 4

        Color:
            # rgb: 1, 0, 0
            rgba: 0, 0, 1, 1

        Line:
            rectangle: (400, 80, 300, 200) # x, y, w, h
            width: 2


<CanvasExample2>:
    canvas:
        Line:
            points: (0, self.height/2, self.width, self.height/2)
            width: 2
        Line:
            points: (self.width/2, 0, self.width/2, self.height)
            width: 2

<CanvasExample1>:
    canvas:
        Rectangle:
            # pos: dp(100), dp(200)
            pos : self.center_x-s/2, self.center_y-s/2
            size: s, s

        Ellipse:
            pos: 150, 250
            size: s, s/2

        Line:
            # points: (x, y, x2, y2)
            # points: (0, 0, 100, 100, 200, 0)
            # points: (0, 0, 100, 100, 200, 0, self.width, 100)
            points: (0, 0, self.width/4, 100, self.width/2, 0, self.width*3/4, 100, self.width, 0)
            width: 2

<ImagesExample@GridLayout>:
    cols: 3

    Image:
        source: "images/cake.jpg"
        # allow_stretch: True
        # keep_ratio: False
    Image:
        source: "images/cake.jpg"
        allow_stretch: True
    Image:
        source: "images/cake.jpg"
        allow_stretch: True
        keep_ratio: False


<WidgetsExample>:
    cols: 3
    ToggleButton:
        text: "OFF"
        on_state: root.on_toggle_button_state(self)
        size_hint: None, 1
        width: "100dp"
    Button:
        text: "Count"
        on_press: root.on_button_click()
        disabled: not root.count_enabled
    Label:
        text: root.my_text
        font_name: "fonts/Lcd.ttf"
        font_size: "80dp"
        color: 1, .5, 1, 1

    Switch:
        id: my_switch
        on_active: root.on_switch_active(self)
        size_hint: None, 1
        width: "100dp"
        active: True

    Slider:
        id: my_slider
        min: 0
        max: 100
        value: 50
        # on_value: root.on_slider_value(self)
        orientation: "vertical"
        disabled: not my_switch.active

    BoxLayout:
        orientation: "vertical"
        Label:
            # text: root.slider_value_text
            text: str(int(my_slider.value))
            font_name: "fonts/Handlee-Regular.ttf"
            font_size: "40dp"
            color: "brown"

        ProgressBar:
            # min: 0        #default value
            max: 100
            value: my_slider.value

    TextInput:
        id: my_text_input
        size_hint: None, 1
        width: "100dp"
        text: "foo"
        multiline: False
        on_text_validate: root.on_text_validate(self)

    Label:
        # text: my_text_input.text
        # text: root.text_input_str
        text: "Your name is: " + root.text_input_str

<PageLayoutExample@PageLayout>:
    MainWidget:
    BoxLayoutExample:
    AnchorLayoutExample:
    GridLayoutExample:

<ScrollViewExample@ScrollView>:
    StackLayoutExample:
        size_hint: 1, None
        # height: 4000
        height: self.minimum_height

<StackLayoutExample>:
    # left-right top-bottom
    # orientation: "lr-tb" # default orientation
    # orientation: "rl-bt"
    # padding: ("20dp", "20dp", "20dp", "20dp")
    # spacing: "20dp", "20dp"

<GridLayoutExample@GridLayout>:
    # rows
    # cols
    # cols: 3
    rows: 2
    Button:
        text: "A"
        size_hint: None, 1
        width: "60dp"
    BoxLayoutExample:
    Button:
        text: "C"
    Button:
        text: "D"
        size_hint: None, 1
        width: "60dp"
    Button:
        text: "E"
    Button:
        text: "F"

<AnchorLayoutExample>:
    # right, left, center
    anchor_x: "center"
    # bottom, top, center
    anchor_y: "top"

    BoxLayout:
        size_hint: .2, .2
        Button:
            text: "A"

        Button:
            text: "B"

<BoxLayoutExample>:
    orientation: "horizontal"
    Button:
        text: "A"

        size_hint: .5, .5
        # size: "100dp", "60dp"
        # width: "100dp"
        # height: "60dp"
        # x, center_x, right
        # y, center_y, to p
        pos_hint: {"center_y": .5}

    BoxLayout:
        orientation: "vertical"
        spacing: "10dp"

        Button:
            text: "B"
        Button:
            text: "B2"
        Button:
            text: "B3"
        Button:
            text: "B4"

    Label:
        text: "C"

<MainWidget>:
    Button:
        text: "Hello"
        size: "100dp", "80dp" # dp - density independent pixels
        pos: "100dp", "200dp"
        color: 1, 0.5, 0.5, 1

    Label:
        text: "Hello2"
        size: "100dp", "80dp"
        pos: "200dp", "300dp"
        color: 1, 0, 0, 1