In addition to detecting touch events, Lightwing also features two types of touch controls. This example shows how to use the toggle and track commands to construct buttons that provide interactive control of digital sign or kiosk content.
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.
Four toggle commands define touch sensitive button regions named Button1, Button2, Button3 and Button4. The positions and sizes of these are actually defined by the preceding box commands named by their box options. The following text commands provide the button labels and also reference the same boxes. Inheriting box parameters this way guarantees that these touch regions are aligned with their text labels and highlights.
Each of the toggle controls define a list of other toggle controls that are mutually exclusive using the disable option. Whenever a toggle control is touched, its state is reversed and the states of all of the toggle controls listed in its disable list are disabled. The stick option prevents controls from being disabled due to a direct touch, so they can only be disabled by another toggle control. This assures that at least one toggle control is always enabled. The initial option defines the starting state for the control when the page begins or the control is reset. The box, text, ticker and object commands feature toggle options which control when they are drawn. They only draw when their defined toggle controls are enabled.
Two track commands define touch sensitive tracking control regions named RotateX and RotateY. The positions and sizes of these are actually defined by the preceding box command named by their box options. The same box named Globe is used here so that X and Y axis tracking are common to the same region and overlay a visible box frame, but they could be separate and the box could have an invisible color or an image, if desired. The axis options define the directions of touch movement these controls track. The range options define numerical minimum and maximum values that the controls will produce based upon the position of touch input within the boundaries of the controls. These controls are then used to provide rotation angles (in degrees) to the rotate option of the object commands. Tracking controls can be used to control many parameters of box, text, ticker and object command options, including position, scale, rotate, color, rate, speed, arg0 and arg1. However, it’s essential that the ranges of the controls be appropriate for the parameters they are used for. For example, when track controls are used for color parameters, their range must be within 0.0 to 1.0, as is shown on the global page. The integer and hexadecimal formats for color options are not available with track controls.
The default behavior for track controls is to track absolute touch positions, which works best in most cases, such as with the Color and Position slide controls shown. But, when track regions are overlaid with the object being controlled, such as for the globe, enabling the relative tracking feature provides a more natural user interface where successive touch movements are accumulated. Accumulated movements are reset when the page restarts or the reset option can be used to define a periodic time interval to reset a track control, such as shown for the slide control.
There are four object commands here which draw the same SphereSpin object using different globe images. Only one of these is actually drawn at a time because only one toggle control is enabled at a time. Otherwise, the four objects would be drawn over each other. SphereSpin has an animation, but that is disabled by setting the rate option to zero so that it does not interfere with manual tracking. Otherwise, the animation would be combined with the tracking.
Toggle and track controls can only be used on the same page they are defined on unless they are defined on a global page, in which case they can be used on subsequent pages until the next global page. Track controls must be defined prior to being used, but Toggle controls do not have this restriction. They can be defined in any order on the same page as shown here by the highlight boxes. These restrictions mean the only way to use track controls on a page command to control background colors is if they are defined on a preceding global page, as shown here for the horizontal slide which controls the background color of the page named Earth. Also refer to the online Scripting Guide for more details about these commands.
// Scripting Tutorial - Touch Controls version: 1.0 touch: on global: Global box: Slide position: 5, 90 size: 90, 5 color: 1, 1, 1, 0.08 track: Color axis: X box: Slide range: 0, 1 initial: 0 reset: 10 track: Position axis: X box: Slide range: 5, 90 initial: 5 reset: 10 box: Knob position: Position, 90 size: 5, 5 color: 0.5, 0.5, 0 // Background color of this page is controlled by the first track control above named "Color". page: Earth time: 0, 0 color: Color, Color, 0 // These boxes highlight the enabled button and define button positions, sizes and colors. box: Highlight1 position: 85, 20 size: 15, 10 align: CenterCenter toggle: Button1 color: 0.5, 0.5, 0 box: Highlight2 position: 85, +20 size: 15, 10 align: CenterCenter toggle: Button2 color: 0.5, 0.5, 0 box: Highlight3 position: 85, +20 size: 15, 10 align: CenterCenter toggle: Button3 color: 0.5, 0.5, 0 box: Highlight4 position: 85, +20 size: 15, 10 align: CenterCenter toggle: Button4 color: 0.5, 0.5, 0 // Defines toggle names for buttons with initial states and makes them mutually exclusive. toggle: Button1 box: Highlight1 disable: Button2, Button3, Button4 stick: on initial: on toggle: Button2 box: Highlight2 disable: Button1, Button3, Button4 stick: on initial: off toggle: Button3 box: Highlight3 disable: Button1, Button2, Button4 stick: on initial: off toggle: Button4 box: Highlight4 disable: Button1, Button2, Button3 stick: on initial: off // Text labels for the buttons which use the same positions and alignments as highlight boxes above. text: OpenSansBold_50 box: Highlight1 type: "Globe 1" text: OpenSansBold_50 box: Highlight2 type: "Globe 2" text: OpenSansBold_50 box: Highlight3 type: "Globe 3" text: OpenSansBold_50 box: Highlight4 type: "Globe 4" // Defines a two-dimensional relative tracking control for rotating objects with a range of -180 to 180 degrees. box: Globe position: 50, 50 size: 38 align: CenterCenter color: 1, 1, 1, 0.08 track: RotateX axis: X box: Globe range: 180, -180 relative: on initial: 0 track: RotateY axis: Y box: Globe range: 180, -180 relative: on initial: 0 // Four instances of the same object using different globe images selected by toggle controls and rotated by tracking controls. object: SphereSpin rate: 0 rotate: RotateY, RotateX toggle: Button1 image: GlobeNasa1 object: SphereSpin rate: 0 rotate: RotateY, RotateX toggle: Button2 image: GlobeNasa2 object: SphereSpin rate: 0 rotate: RotateY, RotateX toggle: Button3 image: GlobeNasa3 object: SphereSpin rate: 0 rotate: RotateY, RotateX toggle: Button4 image: GlobeNasa4