Touch Controls

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

 

 

<   Touch Swipe Branching                                             Introduction                                            Touch Controls Data >