Touch Controls

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

 

 

<   Touch Swipe Branching                                             Introduction                                            Scripting Tutorial  >