Layer class (RadialMenu)

Layer(oLayers, oLayerOpts)

new Layer(oLayers, oLayerOpts)

The Layer object holds a layer of the RadialMenu control. The control is a collection of layers, and each layer can can display a collection of pictures and HTML captions on a viewable layer. The Layer object holds a collection of pictures and HTML captions to be displayed on a viewable layer. Any layer can be visible, selectable or dragable. Any layer can be moved, rotated or clipped. The Layer object is created by the Add() method of the Layers collection, and it is removed by the Remove() method of the Layers collection.

Every option of the LayerOptions type has associated a property of the Layer object. For instance, the option:

back {string}, specifies the layer's background as a name of an HTML picture or a CSS color
is associated with the property:
Back {string}, specifies the layer's background as a name of an HTML picture or a CSS color
which means that the following statements are equivalent:
oLayer.Options = {back: "lime"}
oLayer.SetOptions({back: "lime"})
oLayer.Shape = "back"
oLayer.SetShape("back")
where oLayer is an object of Layer type
Parameters:
Name Type Description
oLayers Layers Specifies an object of Layers type, which indicates the layers collection that hosts the layer.
oLayerOpts any Specifies the layer's options as an object of LayerOptions type, or directly the layer's key as any value (ignored if missing) (@since 5.4).

Members

Back :any

The Back property defines the layer's background as an HTML picture or a CSS color (corresponds to the [back] flag used in the layers field). If the Back property is a string that matches the name of an HTML picture, the layer's background is that HTML picture. The exontrol.HTMLPicture.Add method is used to add an HTML picture with a name to the control. If the Back property is a string that does not match the name of any HTML picture, but is a valid CSS color, the layer's background is filled with that color. If the Back property is null, no background is shown for the layer. For instance, if you set the Back property of a layer to "gauge_back", and there is an HTML picture with name "gauge_back", the layer's background is that HTML picture. If you set the Back property of a layer to "red", and there is no HTML picture with name "red", but "red" is a valid CSS color, the layer's background is filled with red color. The Fore property specifies the layer's caption to be shown on the layer's foreground. You can override the layer's drawBack() method to provide custom background drawing. By default, the Back property is null, which means that no background is shown for the layer.
Type:
  • any
Example
null {any}, no background is shown for the layer
"gauge_back" {string}, if there is a HTML picture with name "gauge_back", the layer's background is that HTML picture
"red" {string}, if there is no HTML picture with name "red", but "red" is a valid CSS color, the layer's background is filled with red color
Back

Brightness :LayerColorAdjustmentOptions

The Brightness property defines the brightness of the layer (corresponds to the [brightness.red], [brightness.green], [brightness.blue] flags used in the layers field), which defines the brightness adjustment for each color channel, while the Contrast property specifies the contrast of the layer as an object of LayerColorAdjustmentOptions type, which defines the contrast adjustment for each color channel. The Brightness and Contrast properties can be used to link the layer's brightness and contrast to its Value, so when the layer's value changes, its brightness and contrast change according to the expressions set in these properties. For instance, if you set the Brightness property to {red: "value", green: "value", blue: "value"}, when the layer's value is 100, it is displayed with 100% of its red, green, and blue colors (full brightness), and when the layer's value is 0, it is displayed with 0% of its red, green, and blue colors (completely dark).

The getter of the Brightness property returns an object of LayerColorAdjustment type, which provides methods to get or set the brightness for each color channel separately, while the setter of the Brightness property accepts an object of LayerColorAdjustmentOptions type, which defines the brightness adjustment for each color channel.

Type:
Since:
  • 5.4
Example
{red: "value", green: "value", blue: "value"} {object}, complete darkness to full brightness as the layer's value increases from 0 to 100
{red: "value/2", green: "value/2", blue: "value/2"} {object}, the brightness of the layer is half of layer's value
{red: 0, green: 0, blue: 0} {object}, the layer is completely dark regardless of its value
Brightness

Clip :LayerClipOptions

The Clip property defines the layer's clipping region (corresponds to the [clip] flag used in the layers field), which restricts the visible area of the layer to a specific region. The RotateClip property determines whether the clipping region rotates along with the layer. The Clip property can be used to set a clipping region for the layer, which limits the visible area of the layer to a specific shape or region. For instance, you can set the Clip property to {type: "ellipse", radiusX: 50, radiusY: 50} to clip the layer to a circle with a radius of 50 pixels, so only the part of the layer that falls within that circle is visible. By default, the Clip property is null, which means that there is no clipping region and the whole layer is visible.

The getter of the Clip property returns the layer's clipping region as an object of LayerClip type, while the setter accepts an object of LayerClipOptions type to set the clipping region.

Type:
Since:
  • 5.4
Example
null {null}, there is no clipping region and the whole layer is visible
{type: "ellipse", radiusX: 50, radiusY: 50} {object}, the layer is clipped to a circle with a radius of 50 pixels
Clip

Contrast :LayerColorAdjustmentOptions

The Contrast property defines the contrast of the layer as an object of LayerColorAdjustmentOptions type (corresponds to the [contrast.red], [contrast.green], [contrast.blue] flags used in the layers field), which defines the contrast adjustment for each color channel, while the Brightness property specifies the brightness of the layer as an object of LayerColorAdjustmentOptions type, which defines the brightness adjustment for each color channel. The Brightness and Contrast properties can be used to link the layer's brightness and contrast to its Value, so when the layer's value changes, its brightness and contrast change according to the expressions set in these properties. For instance, if you set the Contrast property to {red: "value", green: "value", blue: "value"}, when the layer's value is 100, it is displayed with 100% of its red, green, and blue colors (full contrast), and when the layer's value is 0, it is displayed with 0% of its red, green, and blue colors (completely gray).

The getter of the Contrast property returns an object of LayerColorAdjustment type, which provides methods to get or set the contrast for each color channel separately, while the setter of the Contrast property accepts an object of LayerColorAdjustmentOptions type, which defines the contrast adjustment for each color channel.

Type:
Since:
  • 5.4
Example
{red: "value", green: "value", blue: "value"} {object}, complete gray to full contrast as the layer's value increases from 0 to 100
{red: "value/2", green: "value/2", blue: "value/2"} {object}, the contrast of the layer is half of layer's value
{red: 0, green: 0, blue: 0} {object}, the layer is completely gray regardless of its value
Contrast

DefaultOffsetX :number

The DefaultOffsetX property defines the default x-offset of the layer (corresponds to the [defX] flag used in the layers field), while the DefaultOffsetY property indicates the default y-offset of the layer. The layer's actual x-offset is the sum of left, DefaultOffsetX, and OffsetX, while the actual y-offset is the sum of top, DefaultOffsetY, and OffsetY. For instance, if you set the DefaultOffsetX property to 10 and the OffsetX property to 5, the layer is shown with a total x-offset of 15 pixels from the position specified by the left field.

Any of the following properties can be used to move the layer:

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number
Example
0 {number}, the layer is shown at the position specified by the left and offsetX fields
10 {number}, the layer is shown with a total x-offset of 10 pixels from the position specified by the left field
DefaultOffsetX

DefaultOffsetY :number

The DefaultOffsetY property defines the default y-offset of the layer (corresponds to the [defY] flag used in the layers field), while the DefaultOffsetX property indicates the default x-offset of the layer. The layer's actual y-offset is the sum of top, DefaultOffsetY, and OffsetY, while the actual x-offset is the sum of left, DefaultOffsetX, and OffsetX. For instance, if you set the DefaultOffsetY property to 10 and the OffsetY property to 5, the layer is shown with a total y-offset of 15 pixels from the position specified by the top field.

Any of the following properties can be used to move the layer:

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number
Example
0 {number}, the layer is shown at the position specified by the top and offsetY fields
10 {number}, the layer is shown with a total y-offset of 10 pixels from the position specified by the top field
DefaultOffsetY

DefaultRotateAngle :number

The DefaultRotateAngle property defines the default angle to rotate the layer (corresponds to the [defA] flag used in the layers field). The RotateAngle property additionally defines the angle to rotate the layer, so the layer's rotation angle is DefaultRotateAngle plus RotateAngle, which means that if you set the DefaultRotateAngle property to 90 and the RotateAngle property to 45, the layer is rotated 135 degrees. The DefaultRotateAngle property is used to specify a default angle to rotate the layer, while the RotateAngle property is used to specify an additional angle to rotate the layer. Angle 0 is considered the 12 o'clock direction, and it increases clockwise, so 90 degrees is considered the 3 o'clock direction, 180 degrees the 6 o'clock direction, and 270 degrees (or -90 degrees) the 9 o'clock direction. A positive value rotates the layer clockwise, while a negative value rotates it counter-clockwise.

Any of the following properties can be used to rotate the layer:

  • DefaultRotateAngle property, specifies the default angle to rotate the layer
  • RotateAngle property, specifies the angle to rotate the layer.
  • RotateAngleValid property, validates / limits the rotation angle of the layer.
  • Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • number
Example
0 {number}, no rotation applied to the layer
-90 {number}, the layer is rotated 90 degrees counter-clockwise
90 {number}, the layer is rotated 90 degrees clockwise
DefaultRotateAngle

Fore :any

The Fore property defines a format-expression to display the layer's ex-HTML caption in the foreground (corresponds to the [fore] flag used in the layers field), or the ex-HTML caption if the expression is invalid. The Fore property is used to show a caption on the layer's foreground, which can provide information about the layer. For instance, if you set the Fore property of a layer to "value", the layer's caption is the value of the layer, which is specified in the Value property. If you set the Fore property of a layer to "value + km/h", and the Value property of the layer is 50, the layer's caption is "50 km/h". The ForeOpt property specifies the options to format the layer's caption, and is used in association with the Fore property. By default, the Fore property is null, which means that the layer's caption is not shown on the layer's foreground.

The expression supports the following keywords:

"value", gets the value of the Layer.Value property
Type:
  • any
Example
null or "" {string}, the layer's caption is not shown on the layer's foreground
"value" {string}, the layer's caption is the value of the layer
"`<outline white><b><font ;20>` + (value format `0`)" {string}, shows the layer's value formatted as integer with white outlined bold font of size 20
Fore

ForeOpt :LayerForeOptions

The ForeOpt property gets or sets the options to format the layer's caption, and is used in association with the Fore property. For instance, you can set the ForeOpt property to {tfi: " Arial 20", front: false} to show the layer's caption using a red Arial font of size 20, displayed behind the layer's background. By default, the ForeOpt property is null, which means that the layer's caption is shown on the layer's foreground using the default formatting options.

It is important to note that changing a field of the ForeOpt property does not automatically update the control. For example, oLayer.ForeOpt.tfi = "" does not apply the change. Instead, you must assign the ForeOpt property again, such as oLayer.ForeOpt = {tfi: ""}, so the control updates and applies the new value.

Type:
Since:
  • 5.4
Example
null {any}, the layer's caption is shown on the layer's foreground with the default formatting options
{tfi: "<fgcolor red> Arial 20", front: false} {object}, the layer's caption is shown with red color Arial font of size 20, behind the layer's background
{formatText: "wrap"} {object}, the layer's caption is shown with text wrapped within the layer's area
ForeOpt

Grayscale :number|string

The Grayscale property gets or sets the grayscale level of the layer, as a percent value or a format-expression (corresponds to the [grayscale] flag in the layers field). The Grayscale property can be used to link the layer's grayscale level to its Value, so when the layer's value changes, its grayscale level changes according to the expression set in the Grayscale property. For instance, if you want the layer to become more grayscale as its value increases, you can set the Grayscale property to "value/2", which means that when the layer's value is 100, it is displayed with 50% grayscale, and when the layer's value is 0, it is displayed with 0% grayscale (full color). If you set it to "100 - value/2", it becomes more colorful as its value increases. If you set it to a constant number like 30, it is displayed with 30% grayscale regardless of its value.

The expression supports the following keywords:

"value", indicates the Layer.Value property of the layer, which is the value displayed by the layer and can be linked to the layer's rotation angle or offset though the rotateAngleToValue, offsetToValue fields, so when the layer is rotated or moved, its value changes accordingly.
Type:
  • number | string
Example
50 {number}, the layer is displayed with 50% grayscale regardless of its value
"value/2" {string}, the grayscale level of the layer is half of its value
"100 - value" {string}, the grayscale level of the layer decreases as its value increases
Grayscale

Height :number|string

The Height property defines the format-expression relative to the view, to determine the height to show the current layer on the control (corresponds to the [height] flag), while the Width property specifies the expression relative to the view, to determine the width to show the current layer on the control. The property is ignored if the expression is invalid. For instance, if you set the Width property to "width/2" and the Height property to "height/2", the layer is shown with a width and height of half of the control's width and height respectively.

The expression supports the following keywords:

"width", indicates the width of the control
"height", indicates the height of the control

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
"" {string} or {null} or {undefined}, the layer is shown with its original width and height
12 {number}, the layer is shown with a height of 12 pixels
"height/2" {string}, the layer is shown with a height of half of the control's height
Height

Idem :any

The Idem property defines a list of layer keys, separated by comma characters, to ensure that the layer's offset and rotation angle are equal for all idem layers (corresponds to the [idem] flag used in the layers field). For instance, you can use the Idem property to rotate or move multiple layers once a layer is moved or rotated. The property is ignored if no layers with the specified keys exist. For example, "knob,knob2": once you move or rotate one of the layers with key "knob" or "knob2", the other layer is moved or rotated as well, ensuring that both layers have the same offset and rotation angle. The RotateAngle, OffsetX, and OffsetY properties of all layers included in the idem group are set to the same value as the layer that is moved or rotated.
Type:
  • any
Example
null or "" {string}, the layer is not idem with any other layer
"knob,knob2" {string}, the knob,knob2 layers share the same offset and rotation-angle
Idem

(readonly) Index :number

The Index property retrieves the layer's index (0-based). The index of the layer is the position of the layer within the layers collection at adding time, and is not changed while the position can be changed at any time. The position of the layer is used to determine the z-order of the layer, which is the order in which layers are drawn on the control. The layer with position 0 is drawn first, then the layer with position 1 is drawn over it, and so on. The Layer.Position property specifies the position of the layer within the layers collection. For instance, if you set the Position property of a layer to 0, the layer is drawn at the bottom of all layers, while if you set the Position property of a layer to a value greater than the current position of the layer, the layer is drawn over more layers.
Type:
  • number
Example
The following statements are equivalent:

 oLayer.GetIndex() {number}, gets the layer's index
 oLayer.Index {number}, gets the layer's index

where oLayer is a layer of the control.
Index

Key :any

The Key property gets or sets the layer's key, which is used to identify the layer (corresponds to the [key] flag used in the layers field). The key is used in association with the layers field to specify the layer to show or hide, or to specify the layer to rotate or move once a drag operation occurs. For instance, if you set the Key property of a layer to "needle", you can use the "needle" keyword in the layers field to specify that the layer is shown or hidden, or to specify that the layer is rotated or moved once a drag operation occurs. The RadialMenu.Layer property returns the layer with the specified key. You can use the index of the layer if no key is specified. If multiple layers have the same key, the first layer with the specified key is used.
Type:
  • any
Example
null or "" {string}, the layer has no key
"needle" {string}, the layer's key is "needle"
Key

Left :number|string

The Left property defines the format-expression relative to the view, to determine the x-position to show the current layer on the control (corresponds to the [left] flag), while the Top property specifies the expression relative to the view, to determine the y-position to show the current layer on the control. The layer's actual x-position is the sum of Left, DefaultOffsetX, and OffsetX, while the actual y-position is the sum of Top, DefaultOffsetY, and OffsetY. The property is ignored if the expression is invalid. For instance, if you set the Left property to "width/2", the DefaultOffsetX property to 10, and the OffsetX property to 5, the layer is shown with a total x-position of width/2 + 15 pixels from the left edge of the control.

The expression supports the following keywords:

"width", indicates the width of the control
"height", indicates the height of the control

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
"0" or "" {string} or {null} or {undefined}, the layer is shown at the position specified by the offsetX field from the left edge of the control.
"width/2+10" {string}, the layer is shown at the horizontal center of the control, plus 10 pixels and any additional x-offset specified in defaultOffsetX and offsetX fields
Left

OffsetToValue :number|string

The OffsetToValue property defines the format-expression to convert the current x- and y-offset to a value (corresponds to the [o2v] flag used in the layers field), while the ValueToOffsetX and ValueToOffsetY properties specify the expression to convert the value to x- and y-offset respectively. In other words, when the layer is moved and its OffsetX and OffsetY properties change, the Value property of the layer is updated based on the OffsetToValue expression. If the expression is invalid, it is ignored. For instance, if you set the OffsetToValue property to "x/2 + 4", when the layer's x-offset is 12 pixels, the Layer.Value property of the layer is set to 10.

The expression supports the following keywords:

"value", "x" or "offsetx", indicates the Layer.OffsetX property
"y" or "offsety", indicates the Layer.OffsetY property

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
0 {number}, the value is always 0 regardless of the offsetX and offsetY fields
"x/2 + 4" {string}, converts the current x-offset to a value by dividing the x-offset by 2 and then adding 4
"value = 0 ? 0 : 1" {string}, converts the current x-offset to a value of 0 if the x-offset is 0 or 1 if the x-offset is not 0
OffsetToValue

OffsetX :number

The OffsetX property defines an additional x-offset of the layer (corresponds to the [x] flag used in the layers field), while the OffsetY property indicates an additional y-offset of the layer. The layer's actual x-offset is the sum of left, DefaultOffsetX, and OffsetX, while the actual y-offset is the sum of top, DefaultOffsetY, and OffsetY. For instance, if you set the DefaultOffsetX property to 10 and the OffsetX property to 5, the layer is shown with a total x-offset of 15 pixels from the position specified by the left field.

Any of the following properties can be used to move the layer:

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number
Example
0 {number}, the layer is shown at the position specified by the left and defaultOffsetX fields
10 {number}, the layer is shown with a total x-offset of 10 pixels from the position specified by the left and defaultOffsetX fields
OffsetX

OffsetXValid :number|string

The OffsetXValid property validates, limits, or spans the x-offset value of the layer, using a format-expression (corresponds to the [xValid] flag used in layers field), while the OffsetYValid property validates the y-offset value of the layer. In other words, the OffsetXValid property is used to validate the OffsetX property. If the expression is invalid, it is ignored. The OffsetXValid and OffsetYValid properties specify an expression to validate the OffsetX and OffsetY properties respectively. For instance, if you set the OffsetXValid property to "x MIN 0 MAX 48", the OffsetX property is validated to be between 0 and 48 pixels, while the "round(x/8)*8" expression snaps the OffsetX value to the closest multiple of 8 pixels.

The expression supports the following keywords:

"value", specifies the x-offset/y-offset of the layer, or 0 if not specified
"x", specifies the x-offset of the layer, equivalent of Layer.OffsetX property
"y", specifies the y-offset of the layer, equivalent of Layer.OffsetY property
"lwidth" specifies the width in pixels of the layer's view
"lheight", specifies the height in pixels of the layer's view
"width" specifies the width in pixels of the control
"height", specifies the height in pixels of the control

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
"" {string} or {null} or {undefined}, the offsetX field is not validated (offsetXValid field is ignored)
0 {number}, the OffsetX property is alwyays 0
"x MIN 0 MAX 48" {string}, the offsetX field is validated to be between 0 and 48 pixels
"round(x/8)*8" {string}, the offsetX field is spanned to the closest multiple of 8 pixels
OffsetXValid

OffsetY :number

The OffsetY property defines an additional y-offset of the layer (corresponds to the [y] flag used in the layers field), while the OffsetX property indicates an additional x-offset of the layer. The layer's actual y-offset is the sum of top, DefaultOffsetY, and OffsetY, while the actual x-offset is the sum of left, DefaultOffsetX, and OffsetX. For instance, if you set the DefaultOffsetY property to 10 and the OffsetY property to 5, the layer is shown with a total y-offset of 15 pixels from the position specified by the top field.

Any of the following properties can be used to move the layer:

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number
Example
0 {number}, the layer is shown at the position specified by the top and defaultOffsetY fields
10 {number}, the layer is shown with a total y-offset of 10 pixels from the position specified by the top and defaultOffsetY fields
OffsetY

OffsetYValid :number|string

The OffsetYValid property validates, limits, or spans the y-offset value of the layer, using a format-expression (corresponds to the [yValid] flag used in layers field), while the OffsetXValid property validates the x-offset value of the layer. In other words, the OffsetYValid property is used to validate the OffsetY property. If the expression is invalid, it is ignored. The OffsetYValid and OffsetXValid properties specify an expression to validate the OffsetY and OffsetX properties respectively. For instance, if you set the OffsetYValid property to "y MIN 0 MAX 48", the OffsetY property is validated to be between 0 and 48 pixels, while the "round(y/8)*8" expression snaps the OffsetY value to the closest multiple of 8 pixels.

The expression supports the following keywords:

"value", specifies the x-offset/y-offset of the layer, or 0 if not specified
"x", specifies the x-offset of the layer, equivalent of Layer.OffsetX property
"y", specifies the y-offset of the layer, equivalent of Layer.OffsetY property
"lwidth" specifies the width in pixels of the layer's view
"lheight", specifies the height in pixels of the layer's view
"width" specifies the width in pixels of the control
"height", specifies the height in pixels of the control

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
"" {string} or {null} or {undefined}, the offsetY field is not validated (offsetYValid field is ignored)
0 {number}, the OffsetY property is alwyays 0
"y MIN 0 MAX 48" {string}, the offsetY field is validated to be between 0 and 48 pixels
"round(y/8)*8" {string}, the offsetY field is spanned to the closest multiple of 8 pixels
OffsetYValid

OnDrag :RadialMenu.OnDragLayerEnum

The OnDrag property gets or sets the transformation of the layer once the user drags it (corresponds to the [drag] flag used in the layers field). The OnDrag property can be set to one of the following values of OnDragLayerEnum type:
  • exDoMove, the layer is moved according to the mouse movement once the user drags it, so the RotateAngle property is not changed, while the OffsetX and OffsetY properties are updated according to the mouse movement.
  • exDoRotate, the layer is rotated according to the mouse movement once the user drags it, so the RotateAngle property is updated according to the mouse movement, while the OffsetX and OffsetY properties are not changed.
  • exDoRotamove, the layer is moved by rotation according to the mouse movement once the user drags it, but only the RotateAngle property is updated according to the mouse movement.

The Selectable property must be true for the OnDrag property to have effect, which means that the user can move or rotate the layer by dragging it only if the OnDrag property is set and the Selectable property is true. By default, the OnDrag property is null (equivalent of exDoNothing), which means that the layer is not draggable (the user cannot move or rotate the layer by dragging it).

Type:
Example
null {any}, the layer is not dragged (the user cannot move or rotate the layer by dragging it)
"move" {string}, 1 {number} or exontrol.RadialMenu.OnDragLayerEnum.exDoMove {RadialMenu.OnDragLayerEnum}, the layer is moved according to the mouse movement once the user drags it
OnDrag

Options :LayerOptions

The Options property defines the layer's options (visibility, clipping, ...) at once. This method allows you to update multiple settings of a layer in a single call, providing a convenient way to modify the layer's appearance and behavior on the control. You can pass an object of LayerOptions type with the desired properties to change, and the method will apply those changes to the event accordingly.

Every option of the LayerOptions type has associated a property of the Layer object. For instance, the option:

back {string}, specifies the layer's background color or image
is associated with the property:
Back {string}, specifies the layer's background color or image
which means that the following statements are equivalent:
oLayer.Options = {back: "lime"}
oLayer.SetOptions({back: "lime"})
oLayer.Back = "lime"
oLayer.SetBack("lime")

It is important to note that changing a field of the Options object does not automatically update the layer. For example, oLayer.Options.back = "red" does not apply the change. Instead, you must assign the Options property again, such as oLayer.Options = {back: "red"}, so the control updates and applies the new value.

Type:
Since:
  • 5.4
Example
The following statements are equivalents:

 oLayer.Options = {back: "red"}
 oLayer.SetOptions({back: "red"})

where oLayer is an object of Layer type
Options

Position :number

The Position property gets or sets the layer's position (0-based), which is the position of the layer within the layers collection (corresponds to the [pos] flag used in the layers field). The position of the layer is used to determine the z-order of the layer, which is the order in which layers are drawn on the control. The layer with position 0 is drawn first, then the layer with position 1 is drawn over it, and so on. The Layer.Visible field indicates whether the layer is visible or hidden. The Layer.Index property specifies the index of the layer within the layers collection. The index is defined at adding time and is not changed, while the position can be changed at any time. For instance, if you set the Position property of a layer to 0, the layer is drawn at the bottom of all layers, while if you set the Position property of a layer to a value greater than the current position of the layer, the layer is drawn over more layers.
Type:
  • number
Example
0 {number}, the layer is the bottom layer, which is drawn first
1 {number}, the layer is drawn over the layer with position 0
Position

(readonly) RotamoveCenterX :number

The RotamoveCenterX property returns the x-coordinate of the center point of the layer's background content (the image defined in the Back property). The RotamoveCenterX and RotamoveCenterY properties define the exact point that is considered the center of the visible content inside the layer's background image (the image set through the back field). They do not refer to the geometric center of the whole image, but to the center of the actual meaningful content inside it (for example, a shape drawn inside a larger transparent image). For instance, if you have a 256×256 transparent image containing a solid red 32×32 square positioned in the top-right corner, RotamoveCenterX would return 240 (the x-position of the square's center), and RotamoveCenterY would return 16 (the y-position of the square's center). The RotamoveCenterX and RotamoveCenterY properties are available only after the layer's image (back field points to a picture file) is loaded and return 0 if accessed before the image is loaded.

Any of the following properties can be used to rotate the layer:

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • number
Example
The following statements are equivalent:

 oLayer.GetRotamoveCenterX() {number}, gets the x-position of the layer's center, while the layer's drag operation is exDoRotamove
 oLayer.RotamoveCenterX {number}, gets the x-position of the layer's center, while the layer's drag operation is exDoRotamove

where oLayer is an object of Layer type.
RotamoveCenterX

(readonly) RotamoveCenterY :number

The RotamoveCenterY property returns the y-coordinate of the center point of the layer's background content (the image defined in the Back property). The RotamoveCenterX and RotamoveCenterY properties define the exact point that is considered the center of the visible content inside the layer's background image (the image set through the back field). They do not refer to the geometric center of the whole image, but to the center of the actual meaningful content inside it (for example, a shape drawn inside a larger transparent image). For instance, if you have a 256×256 transparent image containing a solid red 32×32 square positioned in the top-right corner, RotamoveCenterX would return 240 (the x-position of the square's center), and RotamoveCenterY would return 16 (the y-position of the square's center). The RotamoveCenterX and RotamoveCenterY properties are available only after the layer's image (back field points to a picture file) is loaded and return 0 if accessed before the image is loaded.

Any of the following properties can be used to rotate the layer:

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • number
Example
The following statements are equivalent:

 oLayer.GetRotamoveCenterY() {number}, gets the y-position of the layer's center, while the layer's drag operation is exDoRotamove
 oLayer.RotamoveCenterY {number}, gets the y-position of the layer's center, while the layer's drag operation is exDoRotamove

where oLayer is an object of Layer type.
RotamoveCenterY

(readonly) RotamoveOffsetX :number

The RotamoveOffsetX property gets the x-offset of the layer's center point during rotation, while the RotamoveOffsetY property gets the y-offset of the layer's center point during rotation, when the layer's onDrag field is set to exDoRotamove or exDoRotate. The control supports moving the layer by rotation, also called rotamove. These properties can also be used to keep other layers aligned or synchronized with the rotating layer while it is being dragged.

Any of the following properties can be used to rotate the layer:

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • number
Example
The following statements are equivalent:

 oLayer.GetRotamoveOffsetX() {number}, gets the x-offset of the layer's center point during rotation
 oLayer.RotamoveOffsetX {number}, gets the x-offset of the layer's center point during rotation

where oLayer is an object of Layer type.
RotamoveOffsetX

(readonly) RotamoveOffsetY :number

The RotamoveOffsetY property gets the y-offset of the layer's center point during rotation, while the GetRotamoveOffsetX() method gets the x-offset of the layer's center point during rotation, when the layer's onDrag field is set to exDoRotamove or exDoRotate. The control supports moving the layer by rotation, also called rotamove. These properties can also be used to keep other layers aligned or synchronized with the rotating layer while it is being dragged.

Any of the following properties can be used to rotate the layer:

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • number
Example
The following statements are equivalent:
 
 oLayer.GetRotamoveOffsetY() {number}, gets the y-offset of the layer's center point during rotation
 oLayer.RotamoveOffsetY {number}, gets the y-offset of the layer's center point during rotation

where oLayer is an object of Layer type.
RotamoveOffsetY

RotateAngle :number

The RotateAngle property defines an additional angle in degrees to rotate the layer (corresponds to the [a] flag used in layers field). The DefaultRotateAngle property specifies the default angle to rotate the layer. The layer is rotated by the sum of DefaultRotateAngle and RotateAngle properties, which means that if you set the DefaultRotateAngle property to 90 and the RotateAngle property to 45, the layer is rotated 135 degrees. Angle 0 is considered the 12 o'clock direction, and it increases clockwise, so 90 degrees is considered the 3 o'clock direction, 180 degrees the 6 o'clock direction, and 270 degrees (or -90 degrees) the 9 o'clock direction. A positive value rotates the layer clockwise, while a negative value rotates it counter-clockwise.

Any of the following properties can be used to rotate the layer:

  • DefaultRotateAngle property, specifies the default angle to rotate the layer
  • RotateAngle property, specifies the angle to rotate the layer.
  • RotateAngleValid property, validates / limits the rotation angle of the layer.
  • Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • number
Example
0 {number}, no rotation
90 {number}, rotate 90 degree clockwise
RotateAngle

RotateAngleToValue :string

The RotateAngleToValue property defines the format-expression to convert the rotating angle (degree) to a value (corresponds to the [a2v] flag used in the layers field), while the ValueToRotateAngle property specifies the expression to convert the value to a rotating angle (corresponds to the [v2a] flag used in the layers field). The RotateAngle property defines an additional angle in degrees to rotate the layer, while the DefaultRotateAngle property specifies the default angle to rotate the layer. The RotateAngleToValue and ValueToRotateAngle properties are used to link the layer's rotation angle to its value, so when the layer is rotated, its value changes according to the RotateAngleToValue expression, and when the layer's value is changed, the layer is rotated according to the valueToRotateAngle expression. For instance, if you want to link the layer's rotation angle to its value in a way that when the layer is rotated 180 degrees, its value is 100, you can set the rotateAngleToValue field to "value*180/100" and the valueToRotateAngle field to "value/180*100". In this way, if you rotate the layer 90 degrees, its value becomes 50, and if you set the layer's value to 25, it is rotated 45 degrees. If the user drags the layer to rotate it, the layer's value changes according to the rotateAngleToValue expression

The expression supports the following keywords:

"value", indicates the value of the Layer.RotateAngle property. Angle 0 is considered the 12 o'clock direction, and it increases clockwise, so 90 degrees is considered the 3 o'clock direction, 180 degrees the 6 o'clock direction, and 270 degrees (or -90 degrees) the 9 o'clock direction.
Type:
  • string
Example
"value/180*100" {string}, when the layer's rotation angle is 180 degrees, its value becomes 100
"value/360*100" {string}, when the layer's rotation angle is 90 degrees, its value becomes 25
"value >= 270 ? (value - 270)/90*50 : (value/90)*50 + 50", {string} wraps and remaps angles into a 0 - 100 range
RotateAngleToValue

RotateAngleValid :string

The RotateAngleValid property validates, limits, or snaps the rotation angle of the layer using a format-expression (corresponds to the [aValid] flag used in the layers field). The format-expression must return the angle to rotate the layer to, based on the value of the angle specified in the RotateAngle property. If the format-expression returns the same angle as specified in the RotateAngle property, the layer is rotated to that angle; otherwise, it is rotated to the angle returned by the format-expression. In this way, you can use the RotateAngleValid property to limit the rotation angle of the layer within a certain range or to snap the rotation angle to specific values. For instance, if you want to snap the rotation angle of the layer to multiples of 5 degrees, you can set the RotateAngleValid property to "round(value/5)*5". In this way, if you try to rotate the layer to an angle that is not a multiple of 5, the layer is rotated to the nearest multiple of 5. For example, if you set the RotateAngle property to 92, the layer is rotated to 90, and if you set it to 93, the layer is rotated to 95. If you want to limit the rotation angle of the layer between -90 and 90 degrees, you can set the RotateAngleValid property to "value < 90 ? value : (value < 180 ? 90 : (value < 270 ? 270 : value))". In this way, if you try to rotate the layer to an angle less than -90, it is rotated to -90; if you try to rotate it to an angle between -90 and 90, it is rotated to that angle; and if you try to rotate it to an angle greater than 90, it is rotated to 90.

The expression supports the following keywords:

"value", indicates the value of the Layer.RotateAngle property. Angle 0 is considered the 12 o'clock direction, and it increases clockwise, so 90 degrees is considered the 3 o'clock direction, 180 degrees the 6 o'clock direction, and 270 degrees (or -90 degrees) the 9 o'clock direction.

Any of the following properties can be used to rotate the layer:

  • DefaultRotateAngle property, specifies the default angle to rotate the layer
  • RotateAngle property, specifies the angle to rotate the layer.
  • RotateAngleValid property, validates / limits the rotation angle of the layer.
  • Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • string
Example
"round(value/5)*5" {string}, snaps the rotation angle of the layer to multiples of 5 degrees
"value &lt; 90 ? value : (value &lt; 180 ? 90 : (value &lt; 270 ? 270 : value))" {string}, limits the rotation angle between -90 (270) to 90 degrees
RotateAngleValid

RotateCenterLayer :any

The RotateCenterLayer property defines the index or key of the layer the rotation is around (corresponds to the [cLayer] flag used in the layers field). If the RotateCenterLayer property is -1, the rotation is relative to the current layer, which means that the rotation center is determined by the RotateCenterX and RotateCenterY properties relative to the current layer. For instance, if you set the RotateCenterLayer property to 1, the layer is rotated around the center specified by the RotateCenterX and RotateCenterY properties of the layer with index 1. If you set it to -1, the layer is rotated around the center specified by the RotateCenterX and RotateCenterY properties of itself. By default, the RotateCenterLayer property is 0, which means that the layer is rotated around the center specified by the RotateCenterX and RotateCenterY properties of the layer with index 0, which is usually the background layer.

Any of the following properties can be used to rotate the layer:

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • any
Example
-1 {number}, the layer is rotated around the center specified by the rotateCenterX and rotateCenterY fields of itself
0 {number}, the layer is rotated around the center specified by the rotateCenterX and rotateCenterY fields of the layer with index 0, which is usually the background layer (default value)
1 {number}, the layer is rotated around the center specified by the rotateCenterX and rotateCenterY fields of the layer with index 1
RotateCenterLayer

RotateCenterX :string

The RotateCenterX property defines the format-expression that determines the x-origin of the rotation point relative to the RotateCenterLayer property (corresponds to the [xCenter] flag used in the layers field), while the RotateCenterY property indicates the format-expression that determines the y-origin of the rotation point relative to the RotateCenterLayer property (corresponds to the [yCenter] flag used in the layers field). The RotateCenterLayer property indicates the index or key of the layer the rotation is around. For instance, "lwidth/2 + 16" expression for the RotateCenterX property means that the x-origin of the rotation point is 16 pixels to the right of the center of the layer specified in the RotateCenterLayer property. By default, the RotateCenterX property is "", which means that the rotation center is determined by the RotateCenterLayer layer's center.

The expression of the RotateCenterX and RotateCenterY properties supports the following keywords:

"lwidth", indicates the width in pixels of the layer
"width", specifies the width in pixels of the view / control
"lheight", indicates the height in pixels of the layer
"height", specifies the height in pixels of the view / control

Any of the following properties can be used to rotate the layer:

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • string
Example
"" {string}, the rotation center is determined by the rotateCenterLayer layer's center (default value)
"lwidth/2 + 16" {string}, the x-origin of the rotation point is 16 pixels to the right of the center of the layer specified in the rotateCenterLayer field
RotateCenterX

RotateCenterY :string

The RotateCenterY property defines the format-expression that determines the y-origin of the rotation point relative to the RotateCenterLayer property (corresponds to the [yCenter] flag used in the layers field), while the RotateCenterX property indicates the format-expression that determines the x-origin of the rotation point relative to the RotateCenterLayer property (corresponds to the [xCenter] flag used in the layers field). The RotateCenterLayer property indicates the index or key of the layer the rotation is around. For instance, "lheight/2 + 16" expression for the RotateCenterY property means that the y-origin of the rotation point is 16 pixels below the center of the layer specified in the RotateCenterLayer property. By default, the RotateCenterY property is "", which means that the rotation center is determined by the RotateCenterLayer layer's center.

The expression of the RotateCenterX and RotateCenterY properties supports the following keywords:

"lwidth", indicates the width in pixels of the layer
"width", specifies the width in pixels of the view / control
"lheight", indicates the height in pixels of the layer
"height", specifies the height in pixels of the view / control

Any of the following properties can be used to rotate the layer:

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • string
Example
"" {string}, the rotation center is determined by the rotateCenterLayer layer's center (default value)
"lheight/2 + 16" {string}, the y-origin of the rotation point is 16 pixels below the center of the layer specified in the rotateCenterLayer field
RotateCenterY

RotateClip :boolean

The RotateClip property determines whether the layer's clipping region rotates along with the layer (corresponds to the [rotateclip] flag in the layers field). If RotateClip is true, the clipping region rotates together with the layer, preserving its position relative to the layer's content. If false, the clipping region remains fixed relative to the control, while the layer rotates within it. For instance, rotating the layer 90 degrees clockwise also rotates the clipping region when RotateClip is true, but leaves it unchanged when false. The Clip property defines the clipping region itself, while RotateClip controls whether that region follows the layer's rotation. By default, RotateClip is false.
Type:
  • boolean
Example
true {boolean}, the layer's clipping region is rotated together with the layer
false {boolean}, the layer's clipping region is not rotated with the layer
RotateClip

Selectable :boolean

The Selectable property shows or hides the layer (corresponds to the [sel] flag used in layers field). If the layer is selectable, the user can select it by clicking on it, and then move or rotate it if the OnDrag property is set. If the layer is unselectable, the user cannot select it, and thus cannot move or rotate it even if the onDrag field is set. If the layer is unselectable, the cursor is not changed when the mouse is over it, while if it is selectable, the cursor is changed to the "dable" cursor. By default, the layer is selectable.
Type:
  • boolean
Example
true {boolean}, the layer is selectable (the user can move or rotate it if the onDrag field is set)
false {boolean}, the layer is un-selectable (the user cannot move or rotate it even if the onDrag field is set)
Selectable

Top :number|string

The Top property defines the format-expression relative to the view, to determine the y-position to show the current layer on the control (corresponds to the [top] flag), while the Left property specifies the format-expression relative to the view, to determine the x-position to show the current layer on the control. The layer's actual y-position is the sum of Top, DefaultOffsetY, and OffsetY, while the actual x-position is the sum of Left, DefaultOffsetX, and OffsetX. The property is ignored if the expression is invalid. For instance, if you set the Top property to "height/2", the DefaultOffsetY property to 10, and the OffsetY property to 5, the layer is shown with a total y-position of height/2 + 15 pixels from the top edge of the control.

The expression supports the following keywords:

"width", indicates the width of the control
"height", indicates the height of the control

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
"0" or "" {string} or {null} or {undefined}, the layer is shown at the position specified by the offsetY field from the top edge of the control.
"height/2+10" {string}, the layer is shown at the vertical center of the control, plus 10 pixels and any additional y-offset specified in defaultOffsetY and offsetY fields
Top

Transparency :number|string

The Transparency property defines the transparency of the layer, as a percent value or a format-expression (corresponds to the [transparency] flag in the layers field). The Transparency property can be used to link the layer's transparency to its Value, so when the layer's value changes, its transparency changes according to the expression set in the Transparency property. For instance, if you want the layer to become more transparent as its value increases, you can set the Transparency property to "value/2", which means that when the layer's value is 100, it is displayed with 50% transparency, and when the layer's value is 0, it is displayed with 0% transparency (fully opaque). If you set it to "100 - value/2", it becomes more opaque as its value increases. If you set it to a constant number like 30, it is displayed with 30% transparency regardless of its value.

The expression supports the following keywords:

"value", indicates the Layer.Value property of the layer, which is the value displayed by the layer and can be linked to the layer's rotation angle or offset though the rotateAngleToValue, offsetToValue fields, so when the layer is rotated or moved, its value changes accordingly.
Type:
  • number | string
Example
50 {number}, the layer is displayed with 50% transparency regardless of its value
"value/2" {string}, the transparency of the layer is half of its value
"100 - value" {string}, the transparency of the layer decreases as its value increases
Transparency

Value :number

The Value property sets the layer's value, which can be its offset or its rotation angle, based on the OnDrag property (corresponds to the [value] flag used in layers field). The Clip.Value property associates a value with the layer's clipping region. Each layer can associate a value with it, while the RadialMenu.Value property can be associated, through the RadialMenu.LayerOfValue property, with the value of one of the layers within the control.

For instance:

  • the control displays a clock, the value could be the current-time
  • the control shows a switch, so the value could indicate the state of the switch
  • the control shows a thermometer, so the value could be the current temperature
  • the control displays a gauge, so the value could be the value on the gauge pointed by the needle

The onchange event occurs when the Layer.Value property is changed. During the onchange event, you can change values of other layers as well. For instance, if the second-hand of the clock is rotated, you can rotate the hour and the minute-hands of the clock as well.

The Value property indicates the value keyword in the following properties:

  • ValueToOffsetX property specifies the format-expression to convert the value to x-offset. The OffsetX property is the result of evaluating the ValueToOffsetX property expression, while the onDrag field is exDoMove. The OffsetToValue property converts the current offset to a value.
  • ValueToOffsetY property specifies the format-expression to convert the value to y-offset. The OffsetY property is the result of evaluating the ValueToOffsetY property expression, while the onDrag field is exDoMove. The OffsetToValue property converts the current offset to a value.
  • ValueToRotateAngle property specifies the format-expression to convert the value to rotating angle. The RotateAngle property is the result of evaluating the ValueToRotateAngle property expression, while the onDrag field is exDoRotate or exDoRotamove. The RotateAngleToValue property converts the current rotation angle to a value.

The Value property works in association with the layer's OnDrag property as follows:

  • If the onDrag field is exDoMove, evaluating the ValueToOffsetX property indicates the layer's OffsetX property.
  • If the onDrag field is exDoMove, evaluating the ValueToOffsetY property indicates the layer's OffsetY property.
  • If the onDrag field is exDoRotate or exDoRotamove, evaluating the ValueToRotateAngle property indicates the layer's RotateAngle property.
Type:
  • number
Example
0 {number}, the value of the layer is 0
50 {number}, the value of the layer is 50
Value

ValueToOffsetX :number|string

The ValueToOffsetX property defines the format-expression to convert the value to x-offset (corresponds to the [v2x] flag used in the layers field), while the ValueToOffsetY property specifies the expression to convert the value to y-offset (corresponds to the [v2y] flag used in the layers field). In other words, when the Value property changes, the OffsetX property is updated based on the ValueToOffsetX expression. The OffsetToValue property converts the current x- and y-offset to a value. If the expression is invalid, it is ignored. For instance, if you set the ValueToOffsetX property to "value*2", when the value is 10, the layer is shown with an x-offset of 20 pixels from the position specified by the left field and any additional x-offset specified in the DefaultOffsetX and OffsetX properties.

The expression supports the following keywords:

"value", gets the value the Layer.Value property returns

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
0 {number}, sets the x-offset to 0 pixels regardless of the value field
"value=0 ? 0 : 48" {string}, sets the x-offset to 0 pixels if the value is 0 or 48 pixels if the value is not 0
ValueToOffsetX

ValueToOffsetY :number|string

The ValueToOffsetY property defines the format-expression to convert the value to y-offset (corresponds to the [v2y] flag used in the layers field), while the ValueToOffsetX property specifies the expression to convert the value to x-offset (corresponds to the [v2x] flag used in the layers field). In other words, when the Value property changes, the OffsetY property is updated based on the ValueToOffsetY expression. The OffsetToValue property converts the current x- and y-offset to a value. If the expression is invalid, it is ignored. For instance, if you set the ValueToOffsetY property to "value*2", when the value is 10, the layer is shown with a y-offset of 20 pixels from the position specified by the top field and any additional y-offset specified in the DefaultOffsetY and OffsetY properties.

The expression supports the following keywords:

"value", gets the value the Layer.Value property returns

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
0 {number}, sets the y-offset to 0 pixels regardless of the value field
"value=0 ? 0 : 48" {string}, sets the y-offset to 0 pixels if the value is 0 or 48 pixels if the value is not 0
ValueToOffsetY

ValueToRotateAngle :string

The ValueToRotateAngle property defines the format-expression to convert the value to rotating angle (corresponds to the [v2a] flag used in the layers field), while the RotateAngleToValue property specifies the format-expression to convert the rotating angle (degree) to value (corresponds to the [a2v] flag used in the layers field). The Value property specifies the layer's value, which can be linked to the layer's rotation angle through the ValueToRotateAngle and RotateAngleToValue properties. The RotateAngle property defines an additional angle in degrees to rotate the layer, while the DefaultRotateAngle property specifies the default angle to rotate the layer. The RotateAngleToValue and ValueToRotateAngle properties are used to link the layer's rotation angle to its value, so when the layer is rotated, its value changes according to the RotateAngleToValue expression, and when the layer's value is changed, the layer is rotated according to the valueToRotateAngle expression. For instance, "value/180*100" means that when the layer's value is 25, it is rotated 45 degrees, while "value/360100" means that when the layer is rotated 90 degrees, its value becomes 25. If the user changes the layer's value, the layer is rotated according to the valueToRotateAngle expression.

The expression supports the following keywords:

"value", indicates the value of the Layer.Value property

Any of the following properties can be used to rotate the layer:

  • DefaultRotateAngle property, specifies the default angle to rotate the layer
  • RotateAngle property, specifies the angle to rotate the layer.
  • RotateAngleValid property, validates / limits the rotation angle of the layer.
  • Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.

The following properties can be used to specify a different rotation center:

  • RotateCenterLayer property, indicates the index of the layer the rotation is around.
  • RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
  • RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.

The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:

  • RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
  • RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
  • RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
  • string
Example
"value/100*180" {string}, when the layer's value is 25, it is rotated 45 degrees
"value/100*360" {string}, when the layer's value is 25, it is rotated 90 degrees
"value &lt; 50 ? (270 + value/50*90) : (value - 50)/50 * 90", {string} wraps and remaps values into a 0 - 360 range
ValueToRotateAngle

Visible :boolean

The Visible property shows or hides the layer (corresponds to the [vis] flag used in the layers field). If the layer is visible, it is drawn on the control, while if the layer is hidden, it is not drawn on the control. The Position property is used to determine the z-order of the layer, which is the order in which layers are drawn on the control. The layer with position 0 is drawn first, then the layer with position 1 is drawn over it, and so on. For instance, if you set the Visible property of a layer to false, the layer is hidden and not drawn on the control, while if you set the Visible property of a layer to true, the layer is shown and drawn on the control. By default, the layer is visible.
Type:
  • boolean
Example
true {boolean}, the layer is visible and drawn on the control
false {boolean}, the layer is hidden and not drawn on the control
Visible

Width :number|string

The Width property defines the format-expression relative to the view, to determine the width to show the current layer on the control (corresponds to the [width] flag), while the Height property specifies the expression relative to the view, to determine the height to show the current layer on the control. The property is ignored if the expression is invalid. For instance, if you set the Width property to "width/2" and the Height property to "height/2", the layer is shown with a width and height of half of the control's width and height respectively.

The expression supports the following keywords:

"width", indicates the width of the control
"height", indicates the height of the control

Any of the following properties can be used to move the layer:

  • DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
  • OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
  • OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
  • Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value

Any of the following properties can be used to move or resize the layer:

  • Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
  • Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
  • number | string
Example
"" {string} or {null} or {undefined}, the layer is shown with its original width and height
12 {number}, the layer is shown with a width of 12 pixels
"width/2" {string}, the layer is shown with a width of half of the control's width
Width

Methods

Remove()

The Remove() method removes the layer itself from the layers collection. The Layers.Remove(id) method removes a layer from the collection giving its index, identifier/key or reference. The Layers.Clear() method removes all layers of the control. The Layer.Visible property shows or hides the layer, but does not remove it from the layers collection. Removing a layer means that it is deleted and cannot be used anymore, while hiding a layer just makes it invisible but it still exists in the layers collection and can be shown again by setting its Visible property to true.
Since:
  • 5.4
Example
The following statements are equivalents:
 
 oRadialMenu.Layer(0).Remove(), removes the layer of index 0
 oRadialMenu.Layers.Remove(0), removes the layer of index 0

where oRadialMenu is an object of RadialMenu type 
Remove

drawBack(ctx, client, back)

The drawBack() method renders the layer's background, if defined. You can override it to provide custom background drawing. If you need to draw on an empty layer, you can set the Back property to "transparent", which is a reserved keyword to indicate that the layer has a background but it is transparent, and then override the drawBack() method to draw on the layer's background. For instance, you can set the Back property of a layer to "transparent" and then override the drawBack() method to draw a grid on the layer's background. By default, if the background is set to the name of an HTML picture, the method draws that picture. If it is set to a CSS color, the method fills the background with that color. The Layer.Back property specifies the background (corresponding to the [back] flag in the layers field) and can be either an HTML picture name or a CSS color. HTML pictures are registered using the exontrol.HTMLPicture.Add method. If the value matches a registered picture name, that image is used; otherwise, if it is a valid CSS color, the background is filled with that color. If Back is null, no background is displayed and drawBack() is not called. Similar, the drawFore() method renders the layer's foreground, if defined.
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Specifies the canvas's context where the drawing occurs.
client Array.<number> Indicates the layer's client rectangle, as an array of [x,y,width,height] type, relative to the canvas.
back any Indicates the name of the HTML picture to be drawn as the layer's background, or a CSS color to fill the layer's background.
Since:
  • 1.1
Example
The following sample code shows how to override the drawBack() method to draw a grid on the layer's background:

 oRadialMenu.Layer("back").drawBack = (function(_super)
 {
   return function(ctx, client, back)
   {
     var x = client[0],
         y = client[1],
         width = client[2],
         height = client[3];
         
     for (var i = 0, l = 8; i &lt;= l; i++)
       ctx.drawHLine([x, y + i*height/l], width);
     for (var i = 0, l = 4; i &lt;= l; i++)
       ctx.drawVLine([x + i*width/l, y], height);
       
     return _super.apply(this, arguments);
   }
 })(oRadialMenu.Layer("back").drawBack)

where oRadialMenu is the control instance, and "back" is the name of the layer to which the drawBack() method is overridden.
drawBack

drawFore(ctx, client, fore)

The drawFore() method draws the layer's foreground, if defined. You can override it to provide custom foreground drawing. For instance, you can override the drawFore() method to show additional information on the layer's foreground. By default, if the Fore property is set to a valid expression, the method evaluates that expression and shows the resulting caption on the layer's foreground using the formatting options specified through the ForeOpt property if defined, or the default formatting options if ForeOpt is not defined. If the Fore property is set but does not contain a valid expression, the method shows the Fore value as the caption on the layer's foreground without evaluation, using the default formatting options. The Layer.Fore property specifies the foreground caption (corresponding to the [fore] flag in the layers field) as a format-expression, which can be evaluated to get the caption to show on the layer's foreground. The Layer.ForeOpt property specifies the options to format the layer's caption, and is used in association with the Layer.Fore property. Similarly, the drawBack() method renders the layer's background, if defined.
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Specifies the canvas's context where the drawing occurs.
client Array.<number> Indicates the layer's client rectangle, as an array of [x,y,width,height] type, relative to the canvas.
fore string Indicates the ex-HTML caption to be drawn on the layer's foreground, which is the result of evaluating the expression specified for the Layer.Fore property.
Since:
  • 1.1
Example
The following sample code shows how to override the drawFore() method to draw a semi-transparent green circle on the layer's foreground:

 oRadialMenu.Layer("needle").drawFore= (function(_super)
 {
   return function(ctx, client, back)
   {
     ctx.drawShape(client, 
     {
       primitive: "Circle",
       fillColor: "rgba(0,255,0,0.25)",
       frameColor: "rgb(0,128,0)",
       frameSize: 2,
     })        
     return _super.apply(this, arguments);
   }
 })(oRadialMenu.Layer("needle").drawFore)

where oRadialMenu is the control instance, and "needle" is the name of the layer to which the drawFore() method is overridden.
drawFore