How to precisely drag a picture using a Scatter widget in kivy

Question

I am a kivy newbie and I am trying to move a set of small pictures by embedding them in a Scatter widget. The pictures real size is 160*200 pixels. The pictures are displayed properly (right position) on the FloatLayout I use, but when I try to move one of them, the bounding box of the Scatter is many times larger than the image and I cannot pick each of them by clicking on each respective picture. The very basic kv code I use is the following:

<TTTGame>:      
FloatLayout:
    Scatter:
        pos: 200, 800
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/h2red.jpeg'
            size_hint: 1, 1
            allow_strech: True
            keep_ratio: False
            size: 70, 100

    Scatter:
        pos: 200+(300*1), 800
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/h3red.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200+(300*2), 800
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/h4red.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200, 400
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/c2black.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200+(300*1), 400
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/c3black.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200+(300*2), 400
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/c4black.jpeg'
            size_hint: None,None
            size: 70, 100

Splitter:
    sizable_from: 'left'
    size_hint: 0.3, 1

    BoxLayout:
        orientation: 'vertical'
        size_hint: 1, 1
        spacing: 10
        padding: 20

        BoxLayout:
            orientation: 'vertical'
            size_hint: 0.7, 0.7

            Label:
                text: 'Game card'
                size_hint: 1, 0.1
                font_size: 20

            Image:
                source: 'data/h2red.jpeg'
                size_hint: 0.9, 0.9

        Button:
            text: 'PASS'
            size_hint: 1, .2
            font_size: 18
            on_press: root.pass_on_press_callback()

        Button:
            text: 'Help'
            size_hint: 1, .2
            font_size: 18
            on_press: root.help_on_press_callback()

Essentially, I would like to have a Scatter as big as the picture. Is there an expert who could help me, please??

Answer 1

A minimalized example of this.

from kivy.app import App
from kivy.properties import StringProperty
from kivy.lang import Builder

KV = """

#:import win kivy.core.window

<Picture@Scatter>:
   source: None
   on_size: self.center = win.Window.center
   size: image.size
   size_hint: None, None

   Image:
       id: image
       source: root.source

FloatLayout:
   Picture:
       source: "test.jpg"
   Picture:
       source: "test.jpg"

"""

class MyApp(App):

    def build(self):
        return Builder.load_string(KV)

MyApp().run()

Answer 2

I think everything you need is here. It's a good documented example of using pictures inside of a Scatter.

main.py:

import kivy
kivy.require('1.0.6')

from glob import glob
from random import randint
from os.path import join, dirname
from kivy.app import App
from kivy.logger import Logger
from kivy.uix.scatter import Scatter
from kivy.properties import StringProperty
# FIXME this shouldn't be necessary
from kivy.core.window import Window


class Picture(Scatter):
    '''Picture is the class that will show the image with a white border and a
    shadow. They are nothing here because almost everything is inside the
    picture.kv. Check the rule named <Picture> inside the file, and you'll see
    how the Picture() is really constructed and used.
    The source property will be the filename to show.
    '''

    source = StringProperty(None)


class PicturesApp(App):

    def build(self):

        # the root is created in pictures.kv
        root = self.root

        # get any files into images directory
        curdir = dirname(__file__)
        for filename in glob(join(curdir, 'images', '*')):
            try:
                # load the image
                picture = Picture(source=filename, rotation=randint(-30,30))
                # add to the main field
                root.add_widget(picture)
            except Exception as e:
                Logger.exception('Pictures: Unable to load <%s>' % filename)

    def on_pause(self):
        return True


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

pictures.kv:

#:kivy 1.0
#:import kivy kivy
#:import win kivy.core.window

FloatLayout:
    canvas:
        Color:
            rgb: 1, 1, 1
        Rectangle:
            source: 'data/images/background.jpg'
            size: self.size

    BoxLayout:
        padding: 10
        spacing: 10
        size_hint: 1, None
        pos_hint: {'top': 1}
        height: 44
        Image:
            size_hint: None, None
            size: 24, 24
            source: 'data/logo/kivy-icon-24.png'
        Label:
            height: 24
            text_size: self.width, None
            color: (1, 1, 1, .8)
            text: 'Kivy %s - Pictures' % kivy.__version__



<Picture>:
    # each time a picture is created, the image can delay the loading
    # as soon as the image is loaded, ensure that the center is changed
    # to the center of the screen.
    on_size: self.center = win.Window.center
    size: image.size
    size_hint: None, None

    Image:
        id: image
        source: root.source

        # create initial image to be 400 pixels width
        size: 400, 400 / self.image_ratio

        # add shadow background
        canvas.before:
            Color:
                rgba: 1,1,1,1
            BorderImage:
                source: 'shadow32.png'
                border: (36,36,36,36)
                size:(self.width+72, self.height+72)
                pos: (-36,-36)