Version

Quick search

Basic Picture Viewer

pic23

This simple image browser demonstrates the scatter widget. You should see three framed photographs on a background. You can click and drag the photos around, or multi-touch to drop a red dot to scale and rotate the photos.

The photos are loaded from the local images directory, while the background picture is from the data shipped with kivy in kivy/data/images/background.jpg. The file pictures.kv describes the interface and the file shadow32.png is the border to make the images look like framed photographs. Finally, the file android.txt is used to package the application for use with the Kivy Launcher Android application.

For Android devices, you can copy/paste this directory into /sdcard/kivy/pictures on your Android device.

The images in the image directory are from the Internet Archive, https://archive.org/details/PublicDomainImages, and are in the public domain.

File demo/pictures/main.py

'''
Basic Picture Viewer
====================

This simple image browser demonstrates the scatter widget. You should
see three framed photographs on a background. You can click and drag
the photos around, or multi-touch to drop a red dot to scale and rotate the
photos.

The photos are loaded from the local images directory, while the background
picture is from the data shipped with kivy in kivy/data/images/background.jpg.
The file pictures.kv describes the interface and the file shadow32.png is
the border to make the images look like framed photographs. Finally,
the file android.txt is used to package the application for use with the
Kivy Launcher Android application.

For Android devices, you can copy/paste this directory into
/sdcard/kivy/pictures on your Android device.

The images in the image directory are from the Internet Archive,
`https://archive.org/details/PublicDomainImages`, and are in the public
domain.

'''

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


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()

File demo/pictures/pictures.kv

 1#:kivy 1.0
 2#:import kivy kivy
 3#:import win kivy.core.window
 4
 5FloatLayout:
 6    canvas:
 7        Color:
 8            rgb: 1, 1, 1
 9        Rectangle:
10            source: 'data/images/background.jpg'
11            size: self.size
12
13    BoxLayout:
14        padding: 10
15        spacing: 10
16        size_hint: 1, None
17        pos_hint: {'top': 1}
18        height: 44
19        Image:
20            size_hint: None, None
21            size: 24, 24
22            source: 'data/logo/kivy-icon-24.png'
23        Label:
24            height: 24
25            text_size: self.width, None
26            color: (1, 1, 1, .8)
27            text: 'Kivy %s - Pictures' % kivy.__version__
28
29
30
31<Picture>:
32    # each time a picture is created, the image can delay the loading
33    # as soon as the image is loaded, ensure that the center is changed
34    # to the center of the screen.
35    on_size: self.center = win.Window.center
36    size: image.size
37    size_hint: None, None
38
39    Image:
40        id: image
41        source: root.source
42
43        # create initial image to be 400 pixels width
44        size: 400, 400 / self.image_ratio
45
46        # add shadow background
47        canvas.before:
48            Color:
49                rgba: 1,1,1,1
50            BorderImage:
51                source: 'shadow32.png'
52                border: (36,36,36,36)
53                size:(self.width+72, self.height+72)
54                pos: (-36,-36)

Image demo/pictures/shadow32.png

../_images/shadow32.png

File demo/pictures/android.txt

1title=Pictures
2author=Kivy team
3orientation=landscape