Options class (Gauge)

The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. The cursors field allows you to define different cursor styles for various parts of the control, enhancing the user experience by providing visual feedback based on the context of interaction. For example, you can set a "pointer" cursor when hovering over clickable areas, or a "move" cursor when hovering over draggable layers. This customization helps users understand what actions are possible and improves the overall usability of the control.

The format of the field is:

"cursor(part),cursor(part),..."

where:

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined bellow)

The "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Part	Description
"anchor" (hyperlink)	defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
"dable" (selectable and dragable layer)	defines the cursor for selectable and dragable layers
"sable" (selectable layer)	defines the cursor for selectable layers

The cursors field is mapped to the Cursors property, which means that the following statements are equivalent:

oGauge.Options = {cursors: "crosshair(dable)"}
oGauge.SetOptions({cursors: "crosshair(dable)"})
oGauge.Cursors = "crosshair(dable)"
oGauge.SetCursors("crosshair(dable)")

null {null}, no mouse cursor is provided.
"crosshair(dable)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers any "dable" (selectable and dragable) layers

The debug field indicates whether the control displays the layers in debug-mode. In debug-mode, the layers are shown in perspectives with different colors and opacity, so you can easily identify the layers' boundaries, positions, and rotations. This is useful when you design the layers of the control to ensure that they are properly aligned and sized. By default, the debug field is set to false, which means that the layers are shown in normal-mode without any special coloring or opacity.

The debug field is mapped to the Debug property, which means that the following statements are equivalent:

oGauge.Options = {debug: true}
oGauge.SetOptions({debug: true})
oGauge.Debug = true
oGauge.SetDebug(true)

false {boolean}, shows the layers in normal-mode
true {boolean}, shows the layers in debug-mode

The formatText field specifies the format to display the labels or captions on the control. The formatText field is a bitwise combination of flags that control the alignment, word-breaking, tab expansion, and other aspects of how text is rendered within the control. For example, you can choose to align text to the center, enable word-breaking for long captions, or specify that text should be displayed on a single line. The LayerForeOptions.formatText field customizes the text format for a giving layer, and it overrides the control's formatText field for that layer.

The exontrol.DrawTextFormatEnum type support the following flags:

• exTextAlignTop (0x00), justifies the text to the top of the rectangle
• exTextAlignLeft (0x00), aligns text to the left
• exTextAlignCenter (0x01), centers text horizontally in the rectangle
• exTextAlignRight (0x02), aligns text to the right
• exTextAlignVCenter (0x04), centers text vertically
• exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
• exTextAlignMask (0x0F), specifies the mask for text's alignment.
• exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
• exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
• exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
• exPlainText (0x80), treats the text as plain text.
• exTextNoClip (0x0100), draws without clipping.
• exHTMLTextNoColors (0x0200), ignores the and tags.
• exTextCalcRect (0x0400), determines the width and height of the text.
• exHTMLTextNoTags (0x0800), ignores all HTML tags.
• exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
• exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
• exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.

The formatText field is mapped to the FormatText property, which means that the following statements are equivalent:

oGauge.Options = {formatText: exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom}
oGauge.SetOptions({formatText: exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom})
oGauge.FormatText = exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom
oGauge.SetFormatText(exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom)

null {null}, centers the caption
"single" {string}, defines a single-line caption
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
"single,right,bottom" {string}, defines a single-line caption right/bottom-aligned
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned

The layerAutoSize field specifies the index or the key of the layer that determines the size to display all layers (scaled). The size of the layer is determined by it's background picture (if provided). The layerAutoSize has no effect if the pointed-layer provides no picture/image on its background. The back field of the layer can be used to specify the background picture/image of the layer, so if you set the layerAutoSize field to the index or the key of a layer with a background picture/image, all layers are resized and scaled based on that layer's background picture/image. For instance, if you set the layerAutoSize field to "back", and the layer with the key "back" has a background picture/image, all layers are resized and scaled based on that background picture/image. Setting the layerAutoSize field to -1 specifies that no layer is resized, and they are shown as provided. By default, the layerAutoSize field is set to 0, which means that all layers are resized and scaled based on the first layer's picture/image (the layer with the index 0).

The layerAutoSize field is mapped to the LayerAutoSize property, which means that the following statements are equivalent:

oGauge.Options = {layerAutoSize: -1}
oGauge.SetOptions({layerAutoSize: -1})
oGauge.LayerAutoSize = -1
oGauge.SetLayerAutoSize(-1)

-1 {number}, specifies that no layer is resized, and they are shown as provided
0 {number}, specifies that all layers are resized and scaled based on the first-layer's picture/image (the layer with the index 0)
"back" {string}, specifies that all layers are resized and scaled based on image/picture of the layer with the key "back"

The layerDragAny field specifies the layer to drag (rotate, move or rota-move) once the user clicks anywhere on the control. The Layer.OnDrag property defines the transformation of the layer (move, rotate, or rota-move) once the user cliks and drags it. For example, suppose the control has a draggable layer such as a "needle" or "knob". By using the layerDragAny field, you can specify that this layer will be dragged (rotated, moved, or swept) when the user clicks anywhere on the control. This means that the user doesn't have to click exactly on the layer to drag it, but can click anywhere on the control to drag that specific layer. The layerDragAny field is useful when you want to make it easier for the user to interact with a specific layer, especially if that layer is small or hard to click on. If the cursor hovers over a draggable layer, the layerDragAny field is ignored, and the hovered layer is dragged instead. By default, the layerDragAny field is set to -1, which means that it has no effect and the user has to click on a draggable layer to drag it.

The layerDragAny field is mapped to the LayerDragAny property, which means that the following statements are equivalent:

oGauge.Options = {layerDragAny: "knob"}
oGauge.SetOptions({layerDragAny: "knob"})
oGauge.LayerDragAny = "knob"
oGauge.SetLayerDragAny("knob")

-1 {number}, specifies that layerDragAny field has no effect
0 {number}, specifies that the layer with the index 0 is dragged (once the user clicks anywhere on the control)
"needle" {string}, specifies that the layer with the key "needle" is dragged (once the user clicks anywhere on the control)

The layerOfValue field specifies the index or the key of the layer whose value determines the Gauge.Value property (control's value). Each layer can have its value such as a rotation-angle or an offset, so the layerOfValue field defines the layer whose value defines the control's value. For instance, the "value" keyword within the format-expressions of properties of Clip object (e.g. [clip.x=value]) use the Gauge.Value property as the value, so the layerOfValue field specifies the layer whose value is used. The Layer.Value property defines the value of the layer, which can be the offset to move the layer, the angle to rotate the layer, or any other value that is interpreted by the layer based on how it is configured. By default, the layerOfValue field is -1, meaning the control's value is taken from the top-most visible layer that has the Layer.OnDrag property defined (i.e., the last visible, selectable, and draggable layer). In general, you can have multiple visible layers, but typically only one defines Layer.OnDrag, so the control's value is determined by that layer.

The layerOfValue field is mapped to the LayerOfValue property, which means that the following statements are equivalent:

oGauge.Options = {layerOfValue: 0}
oGauge.SetOptions({layerOfValue: 0})
oGauge.LayerOfValue = 0
oGauge.SetLayerOfValue(0)

-1 {number}, the top-most visible layer that has the Layer.OnDrag property defined defines the control's value
0 {number}, specifies that the layer with the index 0 defines the control's value
"hour" {string}, specifies that the layer with the key "hour" defines the control's value

The layers field defines the layers of the control from a string-representation (separated by comma character), an object or an array of objects of LayerOptions type. Imagine that if you want to define a clock control with three layers: a background image of a clock face, a layer for the hour hand, and a layer for the minute hand. You could use the layers field to specify the background image for the clock face and set the appropriate flags for each layer to control their visibility and interactivity. Each layer is defined by its background (back) and a set of flags (between square brackets) that specify the layer's key, visibility, position, selectability, foreground, and other attributes. By defining layers in this way, you can create complex visual arrangements and interactions within the control, such as stacking images, adding captions, or controlling the visibility and interactivity of each layer. The string-based configuration allows you to easily set up multiple layers with different properties in a concise format.

The layers field defines the control's layers as follows:

1. string-representation (separated by comma character), result of Layers.Save() method, where the format of the string is:

   "back[flag=value]...[flag=value],...,back[flag=value]...[flag=value],..."

   where:
   • "back", (equivalent of Layer.Back property) could be:
     • "" {empty string} (no layer background provided)
     • "image" {picture's name}, defines the name of a picture previously added using the exontrol.HTMLPicture.Add(name,...) method. For instance, "pic" indciates that the HTML Picture named "pic" is stretched on the layer's background.
     • "color" {string}, indicates a CSS color to be displayed on the layer's background. For instance, "red", "rgba(255,0,0,1)", "#FF0000" indicates a layer full-filed with a solid red-color.

   The flag can be any of the following:

   Flag	Description	Sample
   [a]	rotation angle in degree. 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 (equivalent of Layer.RotateAngle property)	[a=90]
   [a2v]	converts rotation angle to value using a format-expression, where "value" keyword represents the Layer.Value property, so the Layer.Value property is calculated based on the rotation angle. For instance, [a2v=value/360*100] means that the value is calculated as a percentage of the rotation angle, where 0 degree corresponds to 0% and 360 degrees corresponds to 100%. This flag is useful when you want to link the layer's value to its rotation angle, such as in a gauge control where the needle's position (rotation) represents a certain value (equivalent of Layer.RotateAngleToValue property)	[a2v=value/360*100]
   [aValid]	validates, limits or snaps the rotation angle of the layer, using a format-expression, where "value" keyword represents the Layer.Value property. For instance, if you want to snap the rotation angle of the layer to multiples of 5 degrees, you can set the rotateAngleValid field to "round(value/5)*5" (equivalent of Layer.RotateAngleValid property)	[aValid=value<90?value:90]
   [brightness.blue]	adjusts the blue channel brightness using a percentage value or a format-expression, where "value" keyword represents the Layer.Value property. For instance, [brightness.blue=value] means that the blue channel brightness is directly linked to the layer's value, so as the value changes, the brightness of the blue channel will adjust accordingly (equivalent of LayerColorAdjustment.Blue property, Brightness property)	[brightness.blue=100-value]
   [brightness.green]	adjusts the green channel brightness using a percentage value or a format-expression, where "value" keyword represents the Layer.Value property. For instance, [brightness.green=value] means that the green channel brightness is directly linked to the layer's value, so as the value changes, the brightness of the green channel will adjust accordingly (equivalent of LayerColorAdjustment.Green property, Brightness property)	[brightness.green=100]
   [brightness.red]	adjusts the red channel brightness using a percentage value or a format-expression, where "value" keyword represents the Layer.Value property. For instance, [brightness.red=value] means that the red channel brightness is directly linked to the layer's value, so as the value changes, the brightness of the red channel will adjust accordingly (equivalent of LayerColorAdjustment.Red property, Brightness property)	[brightness.red=100]
   [cLayer]	defines the index or the key of the layer used as a reference for the layer's rotation center. For instance, [cLayer=-1] means that the rotation center is defined relative to the layer itself, so it remains fixed regardless of any movement or rotation of other layers. This flag is useful when you want to create complex interactions between layers, such as having one layer rotate around another layer or around a fixed point on the control (equivalent of Layer.RotateCenterLayer property)	[cLayer=-1]
   [clip]	specifies the type of the clipping region the current layer supports as "Rect","RoundRect","Ellipse" or "Pie". Once the clip type is specified, you can use the other clip-related flags to define the size, position, and shape of the clipping region. For instance, if you set [clip=Ellipse], you can then specify the ellipse's X and Y radius using [clip.radiusX] and [clip.radiusY], as well as its center position using [clip.xCenter] and [clip.yCenter] (equivalent of LayerClip.Clip property)	[clip=Ellipse]
   [clip.height]	defines the height of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.height=120] means that the clipping region has a fixed height of 120 pixels, while [clip.height=value] means that the clipping region's height is directly linked to the clip's value, so as the value changes, the height of the clipping region will adjust accordingly (equivalent of LayerClip.Height property)	[clip.height=120]
   [clip.left]	defines the left position of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.left=120] means that the clipping region's left edge is positioned at 120 pixels from the left edge of the layer, while [clip.left=value] means that the left position of the clipping region is directly linked to the clip's value, so as the value changes, the left position of the clipping region will adjust accordingly (equivalent of LayerClip.Left property)	[clip.left=120]
   [clip.radiusX]	defines the X radius of the clipping region for ellipse or pie clip types, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.radiusX=120] means that the ellipse's X radius is fixed at 120 pixels, while [clip.radiusX=value] means that the ellipse's X radius is directly linked to the clip's value, so as the value changes, the X radius of the ellipse will adjust accordingly (equivalent of LayerClip.RadiusX property)	[clip.radiusX=128]
   [clip.radiusY]	defines the Y radius of the clipping region for ellipse or pie clip types, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.radiusY=120] means that the ellipse's Y radius is fixed at 120 pixels, while [clip.radiusY=value] means that the ellipse's Y radius is directly linked to the clip's value, so as the value changes, the Y radius of the ellipse will adjust accordingly (equivalent of LayerClip.RadiusY property)	[clip.radiusY=128]
   [clip.roundX]	defines the round rect X radius of the clipping region for round rect clip type, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.roundX=120] means that the round rect's X radius is fixed at 120 pixels, while [clip.roundX=value] means that the round rect's X radius is directly linked to the clip's value, so as the value changes, the X radius of the round rect will adjust accordingly (equivalent of LayerClip.RoundRadiusX property)	[clip.roundX=16]
   [clip.roundY]	defines the round rect Y radius of the clipping region for round rect clip type, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.roundY=120] means that the round rect's Y radius is fixed at 120 pixels, while [clip.roundY=value] means that the round rect's Y radius is directly linked to the clip's value, so as the value changes, the Y radius of the round rect will adjust accordingly (equivalent of LayerClip.RoundRadiusY property)	[clip.roundY=16]
   [clip.start]	defines the start angle of the clipping region for pie clip type, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.start=120] means that the pie's start angle is fixed at 120 degrees, while [clip.start=value] means that the pie's start angle is directly linked to the clip's value, so as the value changes, the start angle of the pie will adjust accordingly (equivalent of LayerClip.StartAngle property)	[clip.start=-45]
   [clip.sweep]	defines the sweep angle of the clipping region for pie clip type, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.sweep=120] means that the pie's sweep angle is fixed at 120 degrees, while [clip.sweep=value] means that the pie's sweep angle is directly linked to the clip's value, so as the value changes, the sweep angle of the pie will adjust accordingly (equivalent of LayerClip.SweepAngle property)	[clip.sweep=45]
   [clip.top]	defines the top position of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.top=120] means that the clipping region's top edge is positioned at 120 pixels from the top edge of the layer, while [clip.top=value] means that the top position of the clipping region is directly linked to the clip's value, so as the value changes, the top position of the clipping region will adjust accordingly (equivalent of LayerClip.Top property)	[clip.top=120]
   [clip.value]	value used for clip expressions as it can be a hard-coded value or the Gauge.Value property if not specified. For instance, if you set [clip.value=50], the "value" keyword used in other clip-related expressions will be replaced by 50 (equivalent of LayerClip.Value property)	[clip.value=50]
   [clip.width]	defines the width of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.width=120] means that the clipping region has a fixed width of 120 pixels, while [clip.width=value] means that the clipping region's width is directly linked to the clip's value, so as the value changes, the width of the clipping region will adjust accordingly (equivalent of LayerClip.Width property)	[clip.width=120]
   [clip.x]	defines the X offset of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.x=120] means that the clipping region is offset by 120 pixels from the left edge of the layer, while [clip.x=value] means that the X offset of the clipping region is directly linked to the clip's value, so as the value changes, the X offset of the clipping region will adjust accordingly (equivalent of LayerClip.OffsetX property)	[clip.x=120]
   [clip.xCenter]	defines the center X position of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.xCenter=120] means that the clipping region's center is positioned at 120 pixels from the left edge of the layer, while [clip.xCenter=value] means that the center X position of the clipping region is directly linked to the clip's value, so as the value changes, the center X position of the clipping region will adjust accordingly (equivalent of LayerClip.CenterX property)	[clip.xCenter=128]
   [clip.y]	defines the Y offset of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.y=120] means that the clipping region is offset by 120 pixels from the top edge of the layer, while [clip.y=value] means that the Y offset of the clipping region is directly linked to the clip's value, so as the value changes, the Y offset of the clipping region will adjust accordingly (equivalent of LayerClip.OffsetY property)	[clip.y=-120]
   [clip.yCenter]	defines the center Y position of the clipping region, using a format-expression that supports "value" (specifies the Clip.Value if specified otherwise the Gauge.Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) keywords. For instance, [clip.yCenter=120] means that the clipping region's center is positioned at 120 pixels from the top edge of the layer, while [clip.yCenter=value] means that the center Y position of the clipping region is directly linked to the clip's value, so as the value changes, the center Y position of the clipping region will adjust accordingly (equivalent of LayerClip.CenterY property)	[clip.yCenter=128]
   [contrast.blue]	adjusts the blue channel contrast using a percentage value or a format-expression, where "value" keyword represents the Layer.Value property. For instance, [contrast.blue=100-value] means that the blue channel contrast is inversely linked to the layer's value, so as the value increases, the contrast of the blue channel decreases accordingly (equivalent of LayerColorAdjustment.Blue property, Contrast property)	[contrast.blue=100-value]
   [contrast.green]	adjusts the green channel contrast using a percentage value or a format-expression, where "value" keyword represents the Layer.Value property. For instance, [contrast.green=100-value] means that the green channel contrast is inversely linked to the layer's value, so as the value increases, the contrast of the green channel decreases accordingly (equivalent of LayerColorAdjustment.Green property, Contrast property)	[contrast.green=100-value]
   [contrast.red]	adjusts the red channel contrast using a percentage value or a format-expression, where "value" keyword represents the Layer.Value property. For instance, [contrast.red=100-value] means that the red channel contrast is inversely linked to the layer's value, so as the value increases, the contrast of the red channel decreases accordingly (equivalent of LayerColorAdjustment.Red property, Contrast property)	[contrast.red=100-value]
   [defA]	default rotation angle in degree. 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 (equivalent of Layer.DefaultRotateAngle property)	[defA=45]
   [defX]	default x-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 field to 10, the offsetX field to 5, the layer is shown with a total x-offset of 15 pixels from the position specified by the left field (equivalent of Layer.DefaultOffsetX property)	[defX=-32]
   [defY]	default y-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 field to 10, the offsetY field to 5, the layer is shown with a total y-offset of 15 pixels from the position specified by the top field (equivalent of Layer.DefaultOffsetY property)	[defY=-32]
   [drag]	defines the transformation of the layer (move, rotate, rota-move) once the user drags it. For instance, if you set the drag flag to "move", the layer is moved according to the mouse movement once the user drags it, while if you set it to "rotate", the layer is rotated according to the mouse movement once the user drags it (equivalent of Layer.OnDrag property)	[drag=rotate]
   [fore]	defines a format expression to display the layer's ex-HTML caption in the foreground of the layer, where "value" keyword represents the Layer.Value property, so the caption is calculated based on the value. For instance, [fore=round(value)] means that the caption is calculated as the rounded value of the layer's value, so if the layer's value is 15.6, the caption becomes 16 (equivalent of Layer.Fore property)	[fore=round(value)]
   [fore.front]	shows the layer's ex-HTML caption in front or back of the layer. For instance, [fore.front=0] means that the layer's caption is shown behind the layer, so it is partially or fully hidden based on the layer's background (equivalent of front flag of Layer.ForeOpt property)	[fore.front=0]
   [fore.tfi]	defines the layer's font attributes (font name, size, color, and style). For instance, [fore.tfi=bold 14 Arial <fgcolor red>] means that the layer's caption is shown in bold 14px Arial font with red color (equivalent of tfi flag of Layer.ForeOpt property)	[fore.tfi=bold]
   [fore.format]	specifies the format of the text drawn in the layer's foreground. For instance [fore.format=single,right,bottom] means that the layer's caption is shown as a single line right/bottom-aligned (equivalent of format flag of Layer.ForeOpt property)	[fore.format=single,right,bottom]
   [fore.left]	shifts the layer's caption using a hard-coded value or a value calculated from a format-expression, where "twidth" (indicates the caption's width in pixels), "theight" (indicates the caption's height in pixels), "width" (indicates the layer's width) in pixels and "height" indicates the control's height in pixels. For instance, [fore.left=16] means that the layer's caption is shifted 16 pixels from its default position (equivalent of left flag of Layer.ForeOpt property)	[fore.left=16]
   [fore.top]	shifts the layer's caption using a hard-coded value or a value calculated from a format-expression, where "twidth" (indicates the caption's width in pixels), "theight" (indicates the caption's height in pixels), "width" (indicates the layer's width) in pixels and "height" indicates the control's height in pixels. For instance, [fore.top=16] means that the layer's caption is shifted 16 pixels from its default position (equivalent of top flag of Layer.ForeOpt property)	[fore.top=16]
   [fore.width]	defines the maximum width of the layer's caption using a hard-coded value or a value calculated from a format-expression, where "twidth" (indicates the caption's width in pixels), "theight" (indicates the caption's height in pixels), "width" (indicates the layer's width) in pixels and "height" indicates the control's height in pixels. For instance, [fore.width=100] means that the layer's caption is shown with a maximum width of 100 pixels, so if the caption exceeds 100 pixels in width, it is wrapped to multiple lines or truncated based on the formatText flag (equivalent of width flag of Layer.ForeOpt property)	[fore.width=100]
   [fore.height]	defines the maximum height of the layer's caption using a hard-coded value or a value calculated from a format-expression, where "twidth" (indicates the caption's width in pixels), "theight" (indicates the caption's height in pixels), "width" (indicates the layer's width) in pixels and "height" indicates the control's height in pixels. For instance, [fore.height=100] means that the layer's caption is shown with a maximum height of 100 pixels, so if the caption exceeds 100 pixels in height, it is wrapped to multiple lines or truncated based on the formatText flag (equivalent of height flag of Layer.ForeOpt property)	[fore.height=100]
   [grayscale]	grayscale level of the layer, as a percent value or a format-expression, where "value" keyword represents the Layer.Value property, so the grayscale level of the layer is calculated based on the value. For instance, "value" expression means that the grayscale level is equal to the value of the layer, so if you set the layer's value to 0, it is shown in full color, while if you set it to 100, it is shown in full grayscale (equivalent of Layer.Grayscale property)	[grayscale=100]
   [height]	height of the layer using format-expression, where "width" indicates the control's width in pixels and "height" indicates the control's height in pixels. For instance, "height/4" expression sets the layer's height to a quarter of the control's height (equivalent of Layer.Height property)	[height=height/4]
   [idem]	synchronizes offset/rotation across layers. For instance, "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, to ensure that both layers have the same offset and rotation angle. The rotateAngle, offsetX, and offsetY fields of all layers included in the idem group are set to the same value, which is the value of the layer that is moved or rotated (equivalent of Layer.Idem property)	[idem=knob,knob2]
   [key]	defines the key of the layer, which is used to identify the layer and reference it from other layers. For instance, "hourHand", "minuteHand", and "secondHand" are keys that can be used to identify the layers of a clock control, so you can set the hour hand's rotation angle based on the current hour, the minute hand's rotation angle based on the current minute, and the second hand's rotation angle based on the current second (equivalent of Layer.Key property)	[key=needle]
   [left]	left horizontal offset using format-expression, where "width" indicates the control's width in pixels and "height" indicates the control's height in pixels. For instance, "width/2" expression places the layer at the horizontal middle of the control (equivalent of Layer.Left property)	[left=width/2]
   [o2v]	converts the current x- and y-offset to a value using a format-expression, where "x" and "y" keywords represent the layer's x- and y-offset respectively. For instance, "(x+y)/2" expression calculates the value as the sum of the x-offset and half of the y-offset, so if you set the layer's x-offset to 10 and y-offset to 20, the value becomes 15 (equivalent of Layer.OffsetToValue property)	[o2v=x+y/2]
   [pos]	defines the z-order position of the layer(0-based). For instance, if you have three layers and you set the pos flag of one of the layers to 0, that layer is shown at the bottom, while if you set it to 2, that layer is shown at the top (equivalent of Layer.Position property)	[pos=0]
   [rotateclip]	rotates clipping region along with the layer. For instance, if you set the rotateclip flag to 1 for a layer with a pie clipping region, when you rotate the layer, the pie clipping region rotates as well, so the visible part of the layer changes as it rotates. This flag is useful when you want to create dynamic visual effects where the visibility of the layer changes based on its rotation (equivalent of Layer.RotateClip property)	[rotateclip=1]
   [sel]	makes the layer selectable or not. The user can not move or rotate the layer using mouse if the layer is not selectable. Setting the sel flag to 0 makes the layer not selectable, while setting it to 1 makes the layer selectable (equivalent of Layer.Selectable property)	[sel=0]
   [top]	top vertical offset using format-expression, where "width" indicates the control's width in pixels and "height" indicates the control's height in pixels. For instance, "height/2" expression places the layer at the vertical middle of the control (equivalent of Layer.Top property)	[top=height/2]
   [transparency]	transparency of the layer, as a percent value or a format-expression, where "value" keyword represents the Layer.Value property, so the transparency of the layer is calculated based on the value. For instance, "100-value" expression makes the layer more transparent as the value increases, so if you set the layer's value to 0, it is fully opaque, while if you set it to 100, it is fully transparent (equivalent of Layer.Transparency property)	[transparency=100-value]
   [value]	defines the value of the layer, which can be the offset to move the layer, the angle to rotate the layer. For instance, 15 may shift the layer 15 pixels from its default position, or rotate the layer 15 degrees from its default angle, depending on how the layer is configured to interpret the value (equivalent of Layer.Value property)	[value=15]
   [vis]	shows or hides the layer. Setting the vis flag to 0 hides the layer, while setting it to 1 shows the layer (equivalent of Layer.Visible property)	[vis=0]
   [v2a]	converts value to rotation angle using a format-expression, where "value" keyword represents the Layer.Value property, so the Layer.Value property is calculated based on the value. For instance, "value/100*360" expression remaps the layer's value in a 0 - 100 range to a rotation angle in a 0 - 360 range, so if you set the layer's value to 25, it is rotated 90 degrees, and if you rotate the layer 180 degrees, its value becomes 50 (equivalent of Layer.ValueToRotateAngle property)	[v2a=value/100*360]
   [v2x]	converts value to x-offset, using a format-expression, where "value" keyword represents the Layer.Value property, so the x-offset of the layer is calculated based on the value. For instance, "(value=0)?0:48", means that if the layer's value is 0, the x-offset is 0, otherwise it is 48 pixels. This flag is useful when you want to link the layer's horizontal position to its value, such as in a switch control where the knob's position (x-offset) represents the on/off state (value) of the switch (equivalent of Layer.ValueToOffsetX property)	[v2x=(value=0)?0:48]
   [v2y]	converts value to y-offset, using a format-expression, where "value" keyword represents the Layer.Value property, so the y-offset of the layer is calculated based on the value. For instance, "(value=0)?0:48", means that if the layer's value is 0, the y-offset is 0, otherwise it is 48 pixels. This flag is useful when you want to link the layer's vertical position to its value, such as in a switch control where the knob's position (y-offset) represents the on/off state (value) of the switch (equivalent of Layer.ValueToOffsetY property)	[v2y=(value=0)?0:48]
   [width]	width of the layer using format-expression, where "width" indicates the control's width in pixels and "height" indicates the control's height in pixels. For instance, "width/4" expression sets the layer's width to a quarter of the control's width (equivalent of Layer.Width property)	[width=width/4]
   [x]	x-offset of 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 offsetX field to 10, the defaultOffsetX field to 5, the layer is shown with a total x-offset of 15 pixels from the position specified by the left field (equivalent of Layer.OffsetX property)	[x=-32]
   [xCenter]	defines the x-coordinate of the rotation center relative to the layer specified by the Layer.RotateCenterLayer property, using a format expression where "lwidth" or "width" represents the layer's width in pixels and "lheight" or "height" represents its height, so "lwidth/2" places the rotation center at the horizontal middle of the layer (equivalent of Layer.RotateCenterX property)	[xCenter=lwidth/2]
   [xValid]	validates, limits or spans the x-offset value of the layer, using a format-expression, where is supports "x" (x-offset value of the layer), "y" (y-offset value of the layer), "lwidth" (layer's width in pixels), "lheight" (layer's height in pixels), "width" (control's width in pixels), "height" (control's height in pixels) and "value" (can be x- or y-offset) keywords. For instance, if you set the offsetXValid field to "x MIN 0 MAX 48", the offsetX field is validated to be between 0 and 48 pixels, while "round(x/8)*8" expression spans the offsetX value to the closest multiple of 8 pixels (equivalent of Layer.OffsetXValid property)	[xValid=x MIN 0 MAX 48]
   [y]	y-offset of 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 offsetY field to 10, the defaultOffsetY field to 5, the layer is shown with a total y-offset of 15 pixels from the position specified by the top field (equivalent of Layer.OffsetY property)	[y=-32]
   [yCenter]	definex the y-coordinate of the rotation center relative to the layer specified by the Layer.RotateCenterLayer property, using a format expression where "lwidth" or "width" represents the layer's width in pixels and "lheight" or "height" represents its height, so "lheight/2" places the rotation center at the vertical middle of the layer (equivalent of Layer.RotateCenterY property)	[yCenter=lheight/2]
   [yValid]	validates, limits or spans the y-offset value of the layer, using a format-expression, where is supports "x" (x-offset value of the layer), "y" (y-offset value of the layer), "lwidth" (layer's width in pixels), "lheight" (layer's height in pixels), "width" (control's width in pixels), "height" (control's height in pixels) and "value" (can be x- or y-offset) keywords. For instance, if you set the offsetYValid field to "y MIN 0 MAX 48", the offsetY field is validated to be between 0 and 48 pixels, while "round(y/8)*8" expression spans the offsetY value to the closest multiple of 8 pixels (equivalent of Layer.OffsetYValid property)	[yValid=y MIN 0 MAX 48]

2. object, where each property defines a layer with its options as an object of LayerOptions type. The name of the property is the key of the layer, and the value is an object that defines the layer's options (equivalent of LayerOptions type)
3. array of objects of LayerOptions type, where each object defines a layer with its options (equivalent of LayerOptions type)

The layers field is mapped to the Layers property, which means that the following statements are equivalent:

oGauge.Options = {layers: "gauge_back[key=back],gauge_needle[key=needle][drag=rotate]"}
oGauge.SetOptions({layers: "gauge_back[key=back],gauge_needle[key=needle][drag=rotate]"})
oGauge.Layers = "gauge_back[key=back],gauge_needle[key=needle][drag=rotate]"
oGauge.SetLayers("gauge_back[key=back],gauge_needle[key=needle][drag=rotate]")

The following statements are equivalent:

(as string)

 "gauge_back[key=back][yCenter=lheight/2 + 78][grayscale=100-value],gauge_needle[key=needle][avalid=value < 90 ? value : (value < 180 ? 90 : (value < 270 ? 270 : value))][a2v=value >= 270 ? (value - 270)/90*50 : (value/90)*50 + 50][v2a=value < 50 ? (270 + value/50*90) : (value - 50)/50 * 90][drag=rotate][brightness.green=value][contrast.green=value][contrast.blue=0][contrast.red=0]"

(as object):

 {
   "back":
   {
     back: "gauge_back",
     rotateCenterY: "lheight/2 + 78",
     grayscale: "100-value"
   },
   "needle":
   {
     back: "gauge_needle",
     rotateAngleValid: "value < 90 ? value : (value < 180 ? 90 : (value < 270 ? 270 : value))",
     rotateAngleToValue: "value >= 270 ? (value - 270)/90*50 : (value/90)*50 + 50",
     valueToRotateAngle: "value < 50 ? (270 + value/50*90) : (value - 50)/50 * 90",
     onDrag: "rotate",
     brightness: { green: "value" },
     contrast: { green: "value", blue: 0, red: 0 }
   }
 }

(as array):

[
  {
    key: "back",
    back: "gauge_back",
    rotateCenterY: "lheight/2 + 78",
    grayscale: "100-value"
  },
  {
    key: "needle",
    back: "gauge_needle",
    rotateAngleValid: "value < 90 ? value : (value < 180 ? 90 : (value < 270 ? 270 : value))",
    rotateAngleToValue: "value >= 270 ? (value - 270)/90*50 : (value/90)*50 + 50",
    valueToRotateAngle: "value < 50 ? (270 + value/50*90) : (value - 50)/50 * 90",
    onDrag: "rotate",
    brightness: { green: "value" },
    contrast: { green: "value", blue: 0, red: 0 }
  }
]

The locked field indicates whether the control is locked(protected) or unlocked. While locked all layers are locked, so the user can't select any layer to drag or change the control. While unlocked, all layers are unlocked, so the user can select any layer to drag or change the control. The locked field is identical with the readOnly field, so setting one of them automatically sets the other one to the same value. By default, the locked field is set to false, so the control is unlocked and the user can select any layer to drag or change the control.

The locked field is mapped to the Locked property, which means that the following statements are equivalent:

oGauge.Options = {locked: true}
oGauge.SetOptions({locked: true})
oGauge.Locked = true
oGauge.SetLocked(true)

false {boolean}, unlocks the control (can select any layer)
true {boolean}, locks the control (can't select any layer)

The readOnly field indicates whether the control is read-only (identichal with locked option). The readOnly field is identical with the locked field, so setting one of them automatically sets the other one to the same value. By default, the readOnly field is set to false, so the control is unlocked and the user can select any layer to drag or change the control.

The readOnly field is mapped to the ReadOnly property, which means that the following statements are equivalent:

oGauge.Options = {readOnly: true}
oGauge.SetOptions({readOnly: true})
oGauge.ReadOnly = true
oGauge.SetReadOnly(true)

false {boolean}, unlocks the control (can select any layer)
true {boolean}, the user can't select any layer to change the control

The showLayers field indicates the only layers to be shown on the control. The showLayers field is useful when you have multiple layers but you want to show just some of them based on a specific condition. For instance, you may have a gauge control with multiple layers such as "hour", "minute", and "second" layers, but you want to show just the "hour" and "minute" layers when the seconds are not important. The Layer.Visible property shows or hides the layer.

Specifies the layers to display within the control as explained:

• "all" {string}, specifies that all visible layers are shown (The Layer.Visible property shows or hides the layer)
• "" {string}, no layer is shown in the control (no matter of the Layer.Visible property)
• "n1,n2,n3,..." {string}, specifies the list of layers separated by comma (without spaces) that are shown in the control, where n1, n2, ... can be numbers (the index of the layer) or strings (the key of the layer). For instance, "hour,min,sec" means that the layers with keys "hour", "min", and "sec" are shown in the control, while the other layers are hidden (no matter of the Layer.Visible property)

The showLayers field is mapped to the ShowLayers property, which means that the following statements are equivalent:

oGauge.Options = {showLayers: "hour,min,sec"}
oGauge.SetOptions({showLayers: "hour,min,sec"})
oGauge.ShowLayers = "hour,min,sec"
oGauge.SetShowLayers("hour,min,sec")

null {null}, specifies that all visible layers are shown (equivalent of "all")
"" {string}, indicates than no layes is shown
"hour,min,sec" {string}, indicates that the only "hour" "min" and "sec" layers are shown

The smooth field defines the time in ms the control goes from one layout to another. Setting the smooth field to 0 means that no smooth changes are performed once the control goes from a layout to another. Setting the smooth field to 125 means that a smooth-transition is performed from a layout to another for 125 ms. The Smooth() method smoothly transitions the control from the current layout to a new layout, applying gradual changes rather than an immediate switch.

0 {number}, no smooth changes once the control goes from a layout to another
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. By default, the tfi field is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont. The LayerForeOptions.tfi field customizes the font attributes for a giving layer, and it overrides the control's tfi field for that layer.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

The tfi field is mapped to the Tfi property, which means that the following statements are equivalent:

oGauge.Options = {tfi: "b monospace 16 <fg blue>"}
oGauge.SetOptions({tfi: "b monospace 16 <fg blue>"})
oGauge.Tfi = "b monospace 16 <fg blue>"
oGauge.SetTfi("b monospace 16 <fg blue>")

null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The value field specifies the control's current value. The layerOfValue field specifies the index or key of the layer whose value determines the control's value. Since each layer can have its own value (for example, a rotation angle or an offset), layerOfValue identifies which layer is used as the source of the control's value. The Layer.Value property defines the value of a layer. This value can represent different things depending on how the layer is configured, such as a position offset or a rotation angle.

This value can be converted into other representations using "mapping" properties:

• Layer.ValueToRotateAngle property converts the layer's value to a rotation angle, which is useful when the layer's value represents a rotation and you want to specify how that value maps to an actual angle of rotation.
• ValueToOffsetX and ValueToOffsetY properties of the Layer object convert the layer's value to positional offsets (x and y), which is useful when the layer's value represents a position and you want to specify how that value maps to actual pixel offsets on the control.

In the opposite direction:

• Layer.RotateAngleToValue property converts a rotation angle back into the layer's value, which is useful when the layer is rotated (for example, by user interaction) and you want to update the layer's value based on its new rotation angle.
• Layer.OffsetToValue property converts positional offsets back into the layer's value, which is useful when the layer is moved (for example, by user interaction) and you want to update the layer's value based on its new position.

Therefore, the control's value is ultimately derived from the Layer.Value of the layer specified by layerOfValue, and its meaning depends on how that layer interprets and maps its value. The onchange event occurs when the control's value is changed.

The value field is mapped to the Value property, which means that the following statements are equivalent:

oGauge.Options = {value: 0}
oGauge.SetOptions({value: 0})
oGauge.Value = 0
oGauge.SetValue(0)

0 {number}, sets the control's value to 0
(new Date() - Date.Today())/1000/24/60/60 {number}, sets the control's value to current-time as a number between 0 and 1.

The wheelChange field specifies how much the control scrolls when the user rotates the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.

• Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oGauge.Options = {wheelChange: 5}
oGauge.SetOptions({wheelChange: 5})
oGauge.WheelChange = 5
oGauge.SetWheelChange(5)

0 {number}, locks any action the mouse's wheel performs
5 {number}, increases the control's value by 5 once the user rotates the mouse wheel