An extension of Kivy's painting app

Introduction

I jumped into the first day of Python Advent Calendar 2016. It's the first day so everyone should see it ... http://qiita.com/advent-calendar/2016/python

Everything seems to be an ant, so Kivy's story. (A little old story about 6 months ago)

Extend the paint app

The Kivy tutorial has a sample of a simple painting app. https://kivy.org/docs/tutorials/firstwidget.html This paint app changes the drawing color every time you draw.

class MyPaintWidget(Widget):

    def on_touch_down(self, touch):
        color = (random(), 1, 1)
        with self.canvas:
            Color(*color, mode='hsv')
            d = 30.
            Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d))
            touch.ud['line'] = Line(points=(touch.x, touch.y))

Even in the source code, you can see that color = (random (), 1, 1) puts the color randomly every time. When executed, it is as shown in the image below.

However, I wanted to change the color myself anyway, so I expanded it a little. Kivy has a ColorPicker widget, which is experimental, so I'll use it. https://kivy.org/docs/api-kivy.uix.colorpicker.html

By the way, this guy

I rewrote the program as follows and wrote Kv as a slapstick.

main.py

#from random import random
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.uix.popup import Popup
from kivy.uix.colorpicker import ColorPicker
from kivy.graphics import Color, Ellipse, Line

class ClearButton(Button):
    pass

class ColorChangeButton(Button):
    pass
        
class MyPopup(Popup):
    pass

class MyPaintWidget(Widget):
    color = [1, 1, 1, 1]
    def on_touch_down(self, touch):
        with self.canvas:
            Color(rgba=(self.color))
            d = 5
            Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d))
            touch.ud['line'] = Line(pos=(touch.x, touch.y))

    def on_touch_move(self, touch):
        touch.ud['line'].points += [touch.x, touch.y]
    
    def clear_canvas(self,*largs):
        self.canvas.clear()
        
    def open_popup(self):
        popup = MyPopup()
        popup.open()

class MyPaintApp(App):
    def build(self):
        parent = Widget()
        self.painter = MyPaintWidget()
        clearbtn = ClearButton()
        colorbtn = ColorChangeButton()
        parent.add_widget(self.painter)
        parent.add_widget(colorbtn)
        parent.add_widget(clearbtn)
        return parent
    
if __name__ == '__main__':
    MyPaintApp().run()

mypaint.kv

<ClearButton>:
    Button:
        text: 'Clear'
        right: root.right
        top: root.top
        width: 100
        height: 100
        on_release: app.painter.canvas.clear()

<ColorChangeButton>:
    Button:
        text: 'Color'    
        right: root.right
        top: root.top
        width: 100
        height: 100
        on_release: app.painter.open_popup()
        
<MyPopup>:
    title: 'Color Select'
    size_hint: None, None
    size: 400, 400
    BoxLayout:
        orientation: 'vertical'
        ColorPicker:
            id: picker
            color: app.painter.color
            on_color: app.painter.color = self.color
            
        Button:
            size_hint_y: None
            height: 60
            text: 'Change'
            on_press: root.dismiss()
        

ColorPicker was used in Kv. How to use it is like this.

<MyPopup>:
    title: 'Color Select'
    size_hint: None, None
    size: 400, 400
    BoxLayout:
        orientation: 'vertical'
        ColorPicker:
            id: picker
            color: app.painter.color
            on_color: app.painter.color = self.color

Execution result like this

The color has changed safely. It is a good memory that I struggled with little information on ColorPicker.

The source code is on github. https://github.com/pyKy/Kivy-studies/tree/master/5th

That's all about Kivy. I want to do a little more ...