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!"