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