40. ColorPicker

The ColorPicker widget is used, here, to select a color. This color will be the color for all future drawing widgets, until a new color is selected.

---

The ColorPicker takes a lot of visual space, thus it is used as a dialog in this tutorial. Thus, we import the Popup class. In a future tutorial, we will use the ScreenManager class to set a new Screen for the ColorPicker. We will need the Widget class for the drawings as well as for the root. The ColorPicker will be embedded in the Popup. Besides the App class, we need the ListProperty, which will be used to hold color information. ColorPicker returns a list of 4 numbers, red, green, blue and alpha. We also define a global variable col. This will be the initial color.

---

We create a class to hold the drawing widget, which is circle shaped. We save the color information for each circle widget so they can be independent. The ColorPicker and Popup classes are also defined.

---

This is the root class. Notice this also has a ListProperty. Once the ColorPicker chooses a color, it will be stored here. In the next slide, we will see it being used when a new drawing widget is created. We have a function to open the popup. This function will be called from the kv file when a button is pressed. Next, in on_touch_down, the touch position is tested for the case that it is in the button region. In the kv file, we will define the button as 100 by 100 pixels, at position of 0,0. Should it be inside the button, we let other widgets handle it.

---

Should it be outside the button, a circle is drawn. After creating a new instance of SelectedColorEllipse, its color list is set to the root's color. After setting the position, it is added to root.

---

The app class always must exist for any Application.

# ex40.py

from kivy.uix.popup import Popup
from kivy.uix.widget import Widget
from kivy.uix.colorpicker import ColorPicker
from kivy.app import App
from kivy.properties import ListProperty
col = [0,0,1,1]

class SelectedColorEllipse(Widget):
    selected_color = ListProperty(col)

class ColPckr(ColorPicker):
    pass

class ColPopup(Popup):
    pass
    
class Ex40(Widget):
    selected_color = ListProperty(col)
    def select_ColPckr(self,*args):
        ColPopup().open()
    def on_touch_down(self, touch):
        if touch.x <100 and touch.y < 100:
            return super(Ex40, self).on_touch_down(touch)
        sce = SelectedColorEllipse()
        sce.selected_color = self.selected_color
        sce.center = touch.pos
        self.add_widget(sce)
          
class Ex40App(App):
    def build(self):
        return Ex40()

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

---

These define the shape of the circle widgets that will be drawn. They get color based on the value of the class's ListProperty.

---

The Popup window will have a title of 'Color Select'. It is 400 by 400 pixels. It's auto_dismiss is set to False, so a click outside it, will not dismiss it.

---

Next we embed a ColorPicker into the Popup. It's on_color is called whenever a new color is chosen by a user. If so, the root's ListProperty is changed. In the ColorPicker, we have a 'Select' button which will dismiss the popup.

---

For the root, we set a background color of white.

---

In the root, there is a button, which when clicked will open the popup. The button is 100 by 100 and is positioned at 0,0.

# ex40.kv

<SelectedColorEllipse>:
    size: 25,25
    canvas:
        Color:
            rgba: self.selected_color
        Ellipse:
            size: self.size
            pos: self.pos

<ColPopup>:
    title: 'Color Select'
    size_hint: None, None
    size: 400,400
    auto_dismiss: False
    ColPckr:
        on_color: app.root.selected_color = self.color
        Button:
            text: 'Select'
            pos_hint: {'center_x': .76, 'y': .03}
            size_hint: None, None
            size: 100, 50
            on_press: root.dismiss()
        
        
<Ex40>:
    size: root.size
    canvas:
        Color:
            rgb: 1,1,1
        Rectangle:
            size: self.size
            pos: self.pos
    Button:
        size_hint: None, None
        size: 100,100
        pos: 0,0
        text: 'Color Select'
        on_press: root.select_ColPckr(*args)

---

This result is taken after we have drawn a few circles, and then selected the ColorPicker. The drawing can be seen even though it is slightly greyed out, which indicates a popup is open. Here, we select the cyan color.

---

After dismissing the popup, we draw an H in the lower middle of the screen.

---