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. Use touch: Dir to make touch events directional, as shown.

Up to four page names can be defined for each jump or call option for directional touch events. 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 swipe branches that select either the previous or the next consecutive pages for each page. Only two directions are needed here, so the top and bottom swipe directions repeat the same page names as used for the left and right directions.

All of the transition options for these pages are set to SlideBounce with their direction options defined by dir: Touch. This means that the transition animations will move in the same direction as the detected swipes. Any transitions or directions could be used, but using transitions with corresponding directions provides the natural behavior of the transition animation moving in the swiped direction. Note that this also requires choosing a transition which actually has four directions, as not all of them do.

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, Venus, Pluto
  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, Earth, Mercury
  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, Mars, Venus
  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, Jupiter, Earth
  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, Saturn, Mars
  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, Uranus, Jupiter
  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, Neptune, Saturn
  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, Pluto, Uranus
  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, Mercury, Neptune
  text: OpenSansBold_100    fade: 1, 1    position: 50, 50    align: CenterCenter    type: "Hello Pluto!"

 

<   Touch Branching                                             Introduction                                            Touch Controls  >