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 branches are only conditional on the touch events, so branch condition options can not be combined here. By default, touch events are detected when either a touch on or off event occurs. However, the touch option can be used to provide more precise control by limiting detected touch events specifically to either on or off events only, as shown.

This example divides the display into two touch regions, the left half and the right half. Partially transparent boxes are used on each page to detect touch events in the left region. These boxes also have a semi-transparent color defined to make the left/right boundary visible. But, they could be made completely transparent by changing their colors to #00000000 and they would still detect the touch events within their boundaries.

The jump options on the box commands branch to previous consecutive pages, but touch events on the right half of the display will miss the boxes and instead be detected by the page backgrounds. The pages catch these events because their page commands have jump options defined also, but these branch to next consecutive pages, rather than previous.

Of course, it’s possible to create more touch regions, by adding more box, text, ticker or object commands with touch branch options. It’s also possible to add a touch branch option to the global page, even though it has no background image. It has the lowest touch priority so it would only catch touch events that are not caught by anything else and this is not used in this example.

Notice that the time options on these pages have zero duration. This is a special case which causes these pages to 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 best practice is to place an exit button on such pages.

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 Lightwing script documentation for more details about these commands.

 

// Scripting Tutorial - Touch Branching

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

global: Global
   text: OpenSansRegular_50    fade: 1, 1    position: 20, 80    align: CenterCenter    type: "< Previous"
   text: OpenSansRegular_50    fade: 1, 1    position: 80, 80    align: CenterCenter    type: "Next >"

page: Mercury    time: 1, 0    image: PlanetMercuryBackground.pvr        transition: RingsSmall    touch: On    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    touch: On    jump: Pluto

page: Venus        time: 1, 0    image: PlanetVenusBackground.pvr        transition: RingsSmall    touch: On    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    touch: On     jump: Mercury

page: Earth        time: 1, 0    image: PlanetEarthBackground.pvr        transition: RingsSmall    touch: On    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   touch: On     jump: Venus

page: Mars        time: 1, 0    image: PlanetMarsBackground.pvr            transition: RingsSmall    touch: On    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   touch: On     jump: Earth

page: Jupiter    time: 1, 0    image: PlanetJupiterBackground.pvr        transition: RingsSmall    touch: On    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    touch: On    jump: Mars

page: Saturn    time: 1, 0    image: PlanetSaturnBackground.pvr        transition: RingsSmall    touch: On    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    touch: On    jump: Jupiter

page: Uranus    time: 1, 0    image: PlanetUranusBackground.pvr        transition: RingsSmall    touch: On    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    touch: On    jump: Saturn

page: Neptune    time: 1, 0    image: PlanetNeptuneBackground.pvr        transition: RingsSmall   touch: On     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    touch: On     jump: Uranus

page: Pluto        time: 1, 0    image: PlanetPlutoCharonBackground.pvr    transition: RingsSmall    touch: On    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    touch: On     jump: Neptune

 

 

<   Data Channels                                             Introduction                                            Touch Swipe Branching  >