Creating a PyGame Multitouch UI

So you've picked up a shiny new 7" Touchscreen LCD for your Raspberry Pi, prodded around on the desktop with your lonely cursor and found yourself wondering just where those other 9 points of multi-touch goodness are hiding.

Fear not! There's now a pure Python library for getting at all that touch data. This guide will tell you how to set it up, and create a basic demo in PyGame.

Grabbing the library

First off, you'll need to clone the library from GitHub. Fire up a Terminal window on your Raspberry Pi and type in:

git clone https://github.com/pimoroni/python-multitouch

If all goes well you should have a new directory entitled python-multitouch, we'll install the library next:

cd python-multitouch/library
sudo python3 setup.py install

And then the GUI library:

cd ../gui
sudo python3 setup.py install

And run a quick example file to make sure it works as expected:

python3 ../examples/ui.py

Ooo. That's a shiny UI! How about we make our own?

Building your own shiny user-interface

What if you could control the brightness of 10 lights simultaneously? That would make for a cool home automation interface. Or perhaps use emulated analog sticks to driver a robot? Let's start with something simple first:

One Button

We'll start by displaying just one push button using the supplied GUI library. First we're going to do a bit of boilerplate setup which will be the same for most of these examples.

Import things:

import time
import pygame
from pygame.locals import *
from ft5406 import Touchscreen
from gui import Button, render_widgets, touchscreen_event

Then fire up pygame and hide the mouse cursor, since it makes no sense on a touchscreen:

pygame.init()

size = width, height = 800, 480
screen = pygame.display.set_mode(size, pygame.FULLSCREEN)

pygame.mouse.set_visible(False)

Now let's get the touchscreen involved:

ts = Touchscreen()

for touch in ts.touches:
    touch.on_press = touchscreen_event
    touch.on_release = touchscreen_event
    touch.on_move = touchscreen_event

The touchscreen_event function, which we imported from the gui library, is a standard call to update every widget we create with new touch event data. The gui library keeps track of widgets internally, so we just need to pass it data from the touchscreen.

Now it's time to create a button. We'll start with the function it'll call when tapped:

def button_event(button, event, touch):
    print("{} pressed!".format(button.label))

The buttons tap event handler is passed the button instance which triggered it, the event (TS_PRESS, TS_RELEASE, TS_MOVE) that's being handled and the touch which triggered the event.

In this example, the button will just print its label to the console when it's pressed.

Creating a button widget is easy. Since it's automagically tracked by the gui library we don't have to assign it to a variable, but we could if we wanted to modify it later:

Button(
    label="My Button",
    color=(255, 0, 0),
    position=(300, 190),
    size=(200, 100),
    action=button_event
    )

The button requires 5 arguments:

• A label
• A colour, made up from a tuple of R, G and B values
• A position, made up from a tuple of X and Y values
• A size, made up from a tuple of Width and Height values
• A handler function, which we defined above

Finally, we want to set everything in motion. We can start the touchscreen looking for events by calling ts.run().

Then we can set up a loop to handle our PyGame screen redraw, and run the handy render_widgets method which renders our button.

We also handle the K_ESCAPE key so we can quit by hitting Esc:

```python ts.run()

while True: for event in pygame.event.get(): if event.type == KEYDOWN and event.key == K_ESCAPE: ts.stop() exit()

screen.fill((0, 0, 0))

render_widgets(screen)

pygame.display.flip()

time.sleep(0.01)

That's all folks!

Search above to find more great tutorials and guides.