In addition to detecting touch events, Lightwing also has powerful features for constructing sophisticated touch controls for building custom interactive user interfaces. This example shows how to use the toggle and track commands to construct buttons and slider controls that select, scale and rotate objects on the display.
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 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 the 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 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 rotate parameters, their range should be within -360.0 to 360.0 degrees.
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 control.
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.
Also refer to the online Lightwing script documentation for more details about these commands.
// Scripting Tutorial - Touch Controls
version: 1.0
touch: on
page: Earth time: 0, 0
// These boxes highlight the enabled button and define button positions, sizes and colors.
box: Button1 position: 85, 20 size: 15, 10 align: CenterCenter toggle: Button1 color: 0.5, 0.5, 0
box: Button2 position: 85, +20 size: 15, 10 align: CenterCenter toggle: Button2 color: 0.5, 0.5, 0
box: Button3 position: 85, +20 size: 15, 10 align: CenterCenter toggle: Button3 color: 0.5, 0.5, 0
box: Button4 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: Button1 disable: Button2, Button3, Button4 stick: on initial: on
toggle: Button2 box: Button2 disable: Button1, Button3, Button4 stick: on initial: off
toggle: Button3 box: Button3 disable: Button1, Button2, Button4 stick: on initial: off
toggle: Button4 box: Button4 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: Button1 type: "Globe 1"
text: OpenSansBold_50 box: Button2 type: "Globe 2"
text: OpenSansBold_50 box: Button3 type: "Globe 3"
text: OpenSansBold_50 box: Button4 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
// Defines a sliding track control for scaling the globe objects.
box: Slide position: 5, 90, 1 size: 90, 5 color: 1, 1, 1, 0.08
track: Scale axis: X box: Slide range: 0.1, 2
track: PositionX axis: X box: Slide range: 5, 90
box: Knob position: PositionX, 90, 0 size: 5, 5 color: 0.5, 0.5, 0
// Four instances of the same object using different globe images selected by toggle controls and rotated and scaled by tracking controls.
object: SphereSpin rate: 0 rotate: RotateY, RotateX scale: Scale, Scale, Scale toggle: Button1 image: GlobeNasa1
object: SphereSpin rate: 0 rotate: RotateY, RotateX scale: Scale, Scale, Scale toggle: Button2 image: GlobeNasa2
object: SphereSpin rate: 0 rotate: RotateY, RotateX scale: Scale, Scale, Scale toggle: Button3 image: GlobeNasa3
object: SphereSpin rate: 0 rotate: RotateY, RotateX scale: Scale, Scale, Scale toggle: Button4 image: GlobeNasa4