42. Scatter

The Scatter class allows a user to drag, scale, and rotate any widget, which is under its control.

---

Besides the Scatter class, there has to be a Widget or any class based on Widget, like the Label or Image. The root class is based on RelativeLayout. We always have to include the App class.

---

The widget, scatter, and root class are created here. They are empty and will be defined in the kv file.

---

The app class must be defined and run. In the build, we return the root class.

# ex42.py

from kivy.uix.scatter import Scatter
from kivy.uix.widget import Widget
from kivy.uix.relativelayout import RelativeLayout
from kivy.app import App

class SquareWidget(Widget):
    pass

class ScatterWidget(Scatter):
    pass

class Ex42(RelativeLayout):
    pass
          
class Ex42App(App):
    def build(self):
        return Ex42()

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

---

In the kv file, we define the SquareWidget. It is a yellow square.

---

The background is a gray color.

---

The id of the ScatterWidget is given, so the 3 labels can refer to it's properties. The SquareWidget, is embedded, inside the Scatter. The first label, indicates the rotation, using the rotation value.

---

Labels 2 and 3 indicate, the scale, and the position, of the widget.

# ex42.kv

<SquareWidget>:
    size: 250,250
    canvas:
        Color:
            rgb: [1,1,0]
        Rectangle:
            size: self.size
            pos: self.pos
<Ex42>:
    canvas:
        Color:
            rgb: .5,.5,.5
        Rectangle:
            size: self.size
            pos: self.pos
    ScatterWidget:
        id: square_widget_id
        SquareWidget:
    Label:
        text: 'Rotation: ' + str(square_widget_id.rotation)
        size_hint: .1,.1
        pos: 500,100
    Label:
        text: 'Scale: ' + str(square_widget_id.scale)
        size_hint: .1,.1
        pos: 500,200
    Label:
        text: 'Position: ' + str(square_widget_id.pos)
        size_hint: .1,.1
        pos: 500,300

---

Demo of App on Youtube

41. ScreenManager

Many applications will use multiple screens. If so, the Screen and ScreenManager class can be used.

---

The ScreenManager and Screen class are imported. The ScreenManager will be used for the root. The ListProperty will be used to hold the selected color list.

---

These are the three Screens in this example.

---

The root is based on ScreenManager, and the selected color list variable will be stored in this class.

# ex41.py

from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.app import App
from kivy.properties import ListProperty

class ScreenCircle(Screen):
    pass

class ScreenSquare(Screen):
    pass

class ScreenColor(Screen):
    pass

class Ex41(ScreenManager):
    selected_color = ListProperty([1,0,0,1])
          
class Ex41App(App):
    def build(self):
        return Ex41()

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

---

In the kv file, we import RiseInTransition. We have to give a transition between screens. Otherwise the default sliding transition will be used. We start the kv code for the first screen. It's name is 'screen_color'. It will have ColorPicker as its widget. The color and on_color, connect the color, to the ListProperty.

---

There are two buttons in the ScreenColor screen. When pressed, we will go to either of the two screens, by changing the current property of the manager.

---

The other screen, ScreenCircle, draws a circle with the selected color.

---

It has 2 buttons to go to one of the other 2 screens.

---

The ScreenSquare Screen draws a rectangle with the selected color.

---

These two buttons will select one of the two other screens.

---

Our root is the manager. The background is set as white. The transition is defined and then the list of screens. The first Screen here, ScreenCircle, will be the screen opened first, when the kivy program is run.

# ex41.kv
#:import RiseInTransition kivy.uix.screenmanager.RiseInTransition

<ScreenColor>:
    name: 'screen_color'
    ColorPicker:
        color: root.manager.selected_color
        on_color: root.manager.selected_color=self.color
    Button:
        text: 'Go to circle'
        size_hint: None,None
        size: 100,100
        pos: 500,0
        on_press: root.manager.current = 'screen_circle'
    Button:
        text: 'Go to square'
        size_hint: None,None
        size: 100,100
        pos: 600,0
        on_press: root.manager.current = 'screen_square'

<ScreenCircle>:
    name: 'screen_circle'
    canvas:
        Color:
            rgba: root.manager.selected_color
        Ellipse:
            size: 250,250
            pos: 150,150
    Button:
        text: 'Go to square'
        size_hint: None, None
        size: 100,100
        pos: 0,0
        on_press: root.manager.current = 'screen_square'
    Button:
        text: 'Select Color'
        size_hint: None,None
        size: 100,100
        pos: 300,0
        on_press: root.manager.current = 'screen_color'

<ScreenSquare>:
    name: 'screen_square'
    canvas:
        Color:
            rgba: root.manager.selected_color
        Rectangle:
            size: 250,250
            pos: 150,150
    Button:
        text: 'Go to circle'
        size_hint: None,None
        size: 100,100
        pos: 0,0
        on_press: root.manager.current = 'screen_circle'
    Button:
        text: 'Select Color'
        size_hint: None,None
        size: 100,100
        pos: 300,0
        on_press: root.manager.current = 'screen_color'

<Ex41>:
    canvas:
        Color:
            rgb: 1,1,1
        Rectangle:
            size: self.size
            pos: self.pos
    transition: RiseInTransition()
    ScreenCircle:
    ScreenSquare:
    ScreenColor:
        

---

Demo of App on Youtube