ToggleWidget

ToggleWidget

A button that can be toggled between two states.

Extends

Members

# onToggleOn :function

The function that executes when the widget toggles to true

Note: This may be the triggered by a user click, or setting the state directly.

Type:
  • function
Example:
myToggle.set({onToggleOn: () => { console.log("toggle on!")} });

# onToggleOff :function

The function that executes when the widget toggles to false.

Note: This may be the triggered by a user click, setting the state directly, or having another toggle turn on in a toggle set.

Type:
  • function
Example:
myToggle.set({onToggleOff: () => { console.log("toggle off!")} });

# state :boolean

The state of the toggle.

Type:
  • boolean
Default Value:
  • false;
Example:
const myToggle = new MyToggle({state: true} }); // Create the toggle in the 'on' position.

# toggleSet :ToggleSet

The toggleSet the widget belongs to. If a ToggleWidget is in a toggle set, turning one toggle on will turn the others off.

Type:
Example:
const myToggleSet = new ToggleSet();
const myToggle0 = new ToggleWidget({toggleSet: myToggleset} }); // Only one of these toggles can be on a time.
const myToggle1 = new ToggleWidget({toggleSet: myToggleset} });

# normalOn :Widget

The child widget that's displayed when the toggle is on, and is in its normal, unpressed state. You can replace this with a different BoxWidget, ImageWidget, or NineSliceWidget to create prettier buttons.

Type:

# normalOff :Widget

The child widget that's displayed when the toggle is off, and is in its normal, unpressed state. You can replace this with a different BoxWidget, ImageWidget, or NineSliceWidget to create prettier buttons.

Type:

# hiliteOn :Widget

The child widget that's displayed when the button is on, and is hovered by a mouse. You can replace this with a different BoxWidget, ImageWidget, or NineSliceWidget to create prettier buttons.

Type:

# hiliteOff :Widget

The child widget that's displayed when the button is off, and is hovered by a mouse. You can replace this with a different BoxWidget, ImageWidget, or NineSliceWidget to create prettier buttons.

Type:

# pressedOn :Widget

The child widget that's displayed when the button is on, and is in its pressed state. You can replace this with a different BoxWidget, ImageWidget, or NineSliceWidget to create prettier buttons.

Type:

# pressedOff :Widget

The child widget that's displayed when the button is off, and is in its pressed state. You can replace this with a different BoxWidget, ImageWidget, or NineSliceWidget to create prettier buttons.

Type:

# labelOn :Widget

The child widget that's displayed when this toggle is on. By default, its a TextWidget. You can change the properties of the default text widget, or replace it with and ImageWidget for a picture label.

Type:
Example:
myToggle.labelOn.set({text: "On"});

# labelOff :Widget

The label widget that's displayed when this toggle is off. By default, its a TextWidget. You can change the properties of the default text widget, or replace it with and ImageWidget for a picture label.

Type:
Example:
myToggle.labelOff.set({text: "Off"});

# disabled :boolean

Setting disabled to true grays the widget out and prevents it from accepting pointer events.

Type:
  • boolean
Inherited From:
Default Value:
  • false
Example:
myControl.set({disabled: true}); .

# dim :BoxWidget

The transparent box widget that is used to gray out the control. Generally you don't want to change this, unless the styling of your interface requires a different way of indicating that the control is disabled.

Type:
Inherited From:
Example:
myControl.set({dim: new BoxWidget({color: [0.8,0.2,0.2], opacity: 0.4}); // Make disabled widgets turn pink.

# parent :Widget

The widget's parent in the widget tree.

Type:
Inherited From:

# size :Array.<number>

A 2d array containing the widget's xy size.

Type:
  • Array.<number>
Inherited From:

# autoSize :Array.<number>

A 2d array specifying the xy size the widget relative to it's parent. Values can range from 0-1. If either the x or the y value is 0, that dimension will default to the value of size().

Type:
  • Array.<number>
Inherited From:
Default Value:
  • [0,0]
Example:
myWidget.set({autoSize: [1,1]}); // The widget will be the same size as its parent.

# anchor :Array.<number>

A 2d array specifying the relative xy position of the widget within its parent. Values can range from 0-1. The actual position of a widget relative to its parent is determined by a combination of anchor, pivot, local, and border.

Type:
  • Array.<number>
Inherited From:
Default Value:
  • [0,0]
Examples:
myWidget.set({anchor: [1,0]}); // Anchor the widget to the upper right corner of its parent.
myWidget.set({anchor: [0.5,1]}); // Anchor the widget to the center bottom of its parent.

# pivot :Array.<number>

A 2d array specifying the relative xy position in the widget that matches the parent's anchor. Values can range from 0-1. The actual position of a widget relative to its parent is determined by a combination of anchor, pivot, local, and border

Type:
  • Array.<number>
Inherited From:
Default Value:
  • [0,0]
Examples:
myWidget.set({anchor: [0.5,0.5], pivot: [0.5,0.5]}); // The center of the widget is exactly in the center of its parent.
myWidget.set({anchor: [1,0.25], pivot: [1,0]}); // The top left corner of the widget is 25% of the way down the parent's right side.

# local :Array.<number>

A 2d array specifying the xy pixel offset of the widget relative to its parent. The actual position of a widget relative to its parent is determined by a combination of anchor, pivot, local, and border.

Type:
  • Array.<number>
Inherited From:
Default Value:
  • [0,0]
Example:
myWidget.set({anchor: [0,1], pivot: [0,1], local: [20,-20]}); // Inset the widget 20 pixels from the lower-left corner of its parent.

# border :Array.<number>

A 4d array specifying pixel insets to be applied when calculating the edges of the widget relaitve to its parent. The values are [left,top,right,bottom] and are always positive. The actual position of a widget relative to its parent is determined by a combination of anchor, pivot, local, and border.

Type:
  • Array.<number>
Inherited From:
Default Value:
  • [0,0,0,0]
Example:
myWidget.set({autoSize: [1,1], border: [20,20,20,20]}); // The widget fills its parent with an inset of 20 pixels all around.

# visible :boolean

The visibility of the widget. Hidden widgets can't be interacted with. The visibility of a parent affects all its children.

Type:
  • boolean
Inherited From:
Default Value:
  • true
Example:
myWidget.set({visible: false}); // Hides the widget and its children.

# color :Array.<number>

A 3d array specifying the rgb color of a widget. Not all widgets use this property, but enough do that its worth putting in the base class.

Type:
  • Array.<number>
Inherited From:
Default Value:
  • [0,0,0]
Example:
myWidget.set({color: [0,1,0]}); // Sets the color to green.

# scale :Array.<number>

The widget's relative scale. A parent passes its scale on to its children. Usually you just want to leave the scale set to 1 and control the layout of your UI using the widget's other parameters. However, it can be useful if you want to create an interface that dynamically adapts to different window sizes.

Type:
  • Array.<number>
Inherited From:
Default Value:
  • 1
Example:
myWidget.set({color: [0,1,0]}); // Sets the color to green.

# width :number

Ignored unless the widget is placed inside a horizontal widget. This allows you to override the horizontal widget's automatic scaling.

Type:
  • number
Inherited From:

# height :number

Ignored unless the widget is placed inside a vertical widget. This allows you to override the vertical widget's automatic scaling.

Type:
  • number
Inherited From:

Methods

# set(optionsopt)

Sets one or more properties. Set is called by the widget's constructor to set the widget's properties on instantiation.

Parameters:
Name Type Attributes Description
options object <optional>

An options object that contains the properties to be set.
Inherited From:
Example 
myWidget.set({visible: false});