Touch Branching

Lightwing features tightly integrated support for touch capable displays. This example shows how touch events can be used to navigate through the pages of digital sign or kiosk content by defining touch event branch pages.

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 events can be detected by any control, 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 event branches are enabled by placing a jump, call or return option on the commands for the text, ticker, boxes, objects or pages to make them touch sensitive. These branching options are only conditional on touch events, so other branch condition options can not be used here. By default, touch events are detected when either a touch on or off event occurs. However, there is also a touch option that can be combined with these options to limit touch event response specifically to either on or off events only, but this is not shown here.

This example divides the display into three touch sensitive regions, the left half of the display, the right half of the display and a red button label in the center. These regions are shaded to make their boundaries obvious. The red box in the center has the highest priority since none of the text commands have touch events defined. The red box demonstrates how touchable objects can be placed on the global page to make them available across multiple pages. This red label always branches to the first page, named Mercury.

Touch events on the left half of the display are detected by the boxes on the regular pages. These have dimensions that cover the left half of the display and a color that slightly darkens the page background images. The jump options on these box commands branch to the previous consecutive pages in the script.

Touch events on the right half of the display are detected by the backgrounds of the regular pages. Since the boxes do not cover the right half, the page backgrounds catch these events. The jump options on these page commands branch to the next consecutive pages in the script.

Of course, it’s possible to create more touchable regions, by adding more box, text, ticker or object commands with touch branch options to either the regular or global pages. It is also possible to add a touch branch option to the global command. Even though the global page has no background image and it has the lowest touch priority, it can catch touch events when regular pages do not.

Notice that the time options on these pages have zero duration. This is a special case which means these pages never expire, so the only way to leave these pages is by their touch events. This is why the touch command is enabled at the top of the script. It prevents Lightwing from running this script if the display is not touch capable.

The transition option for these pages is set to RingsSmall, which features an acknowledgement pattern which confirms to the user where the touch event occurred. Only the circular page transitions have this feature. Also refer to the online Scripting Guide for more details about these commands.

// Scripting Tutorial - Touch Branching

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

global: Global
    box: Highlight size: 40, 15    color: #FF000060    position: 50, 50    align: CenterCenter    jump: Mercury

page: Mercury    time: 1, 0    image: PlanetMercuryBackground.pvr        transition: RingsSmall    jump: Venus
    text: OpenSansBold_100    fade: 1, 1               position: 50, 50    align: CenterCenter     type: "Hello Mercury!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Pluto

page: Venus        time: 1, 0    image: PlanetVenusBackground.pvr        transition: RingsSmall    jump: Earth
    text: OpenSansBold_100    fade: 1, 1               position: 50, 50    align: CenterCenter     type: "Hello Venus!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Mercury

page: Earth        time: 1, 0    image: PlanetEarthBackground.pvr        transition: RingsSmall    jump: Mars
    text: OpenSansBold_100    fade: 1, 1                position: 50, 50    align: CenterCenter     type: "Hello Earth!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Venus

page: Mars        time: 1, 0    image: PlanetMarsBackground.pvr            transition: RingsSmall    jump: Jupiter
    text: OpenSansBold_100    fade: 1, 1                position: 50, 50    align: CenterCenter     type: "Hello Mars!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Earth

page: Jupiter    time: 1, 0    image: PlanetJupiterBackground.pvr        transition: RingsSmall    jump: Saturn
    text: OpenSansBold_100    fade: 1, 1                position: 50, 50    align: CenterCenter     type: "Hello Jupiter!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Mars

page: Saturn    time: 1, 0    image: PlanetSaturnBackground.pvr        transition: RingsSmall    jump: Uranus
    text: OpenSansBold_100    fade: 1, 1                position: 50, 50    align: CenterCenter     type: "Hello Saturn!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Jupiter

page: Uranus    time: 1, 0    image: PlanetUranusBackground.pvr        transition: RingsSmall    jump: Neptune
    text: OpenSansBold_100    fade: 1, 1                position: 50, 50    align: CenterCenter     type: "Hello Uranus!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Saturn

page: Neptune    time: 1, 0    image: PlanetNeptuneBackground.pvr        transition: RingsSmall    jump: Pluto
  text: OpenSansBold_100    fade: 1, 1                position: 50, 50    align: CenterCenter     type: "Hello Neptune!"
  box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Uranus

page: Pluto        time: 1, 0    image: PlanetPlutoCharonBackground.pvr    transition: RingsSmall    jump: Mercury
    text: OpenSansBold_100    fade: 1, 1                position: 50, 50    align: CenterCenter     type: "Hello Pluto!"
    box: Highlight size: 50, 100    color: #00000040    position: 0, 0         align: TopLeft        jump: Neptune

 

 

<   CSV Channels                                             Introduction                                            Touch Swipe Branching  >