Touch Swipe Branching

Lightwing features tightly integrated support for touch capable displays. This example shows how touch swipe events can be used to navigate through pages of digital sign or kiosk content by defining multiple branch pages that are selected based on swipe direction. A touch swipe event is when a finger is dragged on the display at least 10% of the width or height of the display and released. The dominate direction of movement at the point of release selects the branch page. Up to four swipe directions can be detected, left, right, top and bottom.

Note that the Windows version of Lightwing uses mouse clicks to emulate touch events so that touch enabled content can be developed on Windows using just a mouse. This example requires a touch capable display to function on the Linux player. Such content should have the touch: on command before the first page, as shown. This causes Lightwing to abort and report an error message if a touch capable display is not detected when this script is parsed, but only on Linux.

Touch swipe directions can be detected by any text, ticker, object, page or global page background, in that order. So a touch event on the global page has the lowest priority and will be overridden by any other text, ticker, box or object with a touch event defined. Touch branching is enabled by the jump or call options on these commands, but swipe directions are only detected for directional touch events. Define the touch option as Dir to make the touch event directional, as shown.

Up to four page names can be defined for each jump or call option. These define the branch pages for swipes in the left, right, top and bottom directions, respectively. The best practice is to always define all four page names, even if only two are actually needed.

This example defines branches for left swipe directions that select next consecutive pages and planets. Right swipe directions select previous pages and planets. Top and bottom swipe directions are not needed here, so they are defined to stay on the same page.

The transition options for these pages are set to SlideBounce with their direction options defined as Touch. Any transitions or directions could be used, but using transitions with corresponding directions provides positive acknowledgement of selected swipe directions, as shown.

Also refer to the online Lightwing script documentation for more details about these commands.

// Scripting Tutorial - Touch Swipe Branching

version: 1.0
shadow: OpenSansBold_100    offset: 5
touch: on

page: Mercury    time: 1, 0    image: PlanetMercuryBackground.pvr        transition: SlideBounce     dir: Touch    touch: Dir    jump: Venus, Pluto, Mercury, Mercury
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Mercury!"

page: Venus        time: 1, 0    image: PlanetVenusBackground.pvr        transition: SlideBounce     dir: Touch    touch: Dir    jump: Earth, Mercury, Venus, Venus
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Venus!"

page: Earth        time: 1, 0    image: PlanetEarthBackground.pvr        transition: SlideBounce     dir: Touch    touch: Dir    jump: Mars, Venus, Earth, Earth
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Earth!"

page: Mars        time: 1, 0    image: PlanetMarsBackground.pvr            transition: SlideBounce     dir: Touch    touch: Dir    jump: Jupiter, Earth, Mars, Mars
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Mars!"

page: Jupiter    time: 1, 0    image: PlanetJupiterBackground.pvr        transition: SlideBounce     dir: Touch    touch: Dir    jump: Saturn, Mars, Jupiter, Jupiter
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Jupiter!"

page: Saturn    time: 1, 0    image: PlanetSaturnBackground.pvr        transition: SlideBounce     dir: Touch    touch: Dir    jump: Uranus, Jupiter, Saturn, Saturn
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Saturn!"

page: Uranus    time: 1, 0    image: PlanetUranusBackground.pvr        transition: SlideBounce     dir: Touch    touch: Dir    jump: Neptune, Saturn, Uranus, Uranus
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Uranus!"

page: Neptune    time: 1, 0    image: PlanetNeptuneBackground.pvr        transition: SlideBounce     dir: Touch    touch: Dir    jump: Pluto, Uranus, Neptune, Neptune
  text: OpenSansBold_100    fade: 1, 1  position: 50, 50    align: CenterCenter    type: "Hello Neptune!"

page: Pluto        time: 1, 0    image: PlanetPlutoCharonBackground.pvr    transition: SlideBounce     dir: Touch    touch: Dir    jump: Mercury, Neptune, Pluto, Pluto
  text: OpenSansBold_100    fade: 1, 1    position: 50, 50    align: CenterCenter    type: "Hello Pluto!"

 

<   Touch Branching                                             Introduction                                            Touch Controls  >