Class: RadialMenu

RadialMenu(client, oOptsopt)

new RadialMenu(client, oOptsopt)

The ExRadialMenu/JS (radial or pie menu) component is similar to the Microsoft's OneNote radial menu with ability to customize the appearance and functionality. The component is designed using tree structure so an item can hold none or more children, and so any item can be browsed, and show its children around it. The ExRadialMenu/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

Every option of the RadialMenu.Options type has associated a property of the control. For instance, the option:

cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control
is associated with the property:
Cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control
which means that the following statements are equivalent:
oRadialMenu.Options = {cursors: "crosshair(dable)"}
oRadialMenu.SetOptions({cursors: "crosshair(dable)"})
oRadialMenu.Cursors = "crosshair(dable)"
oRadialMenu.SetCursors("crosshair(dable)")
where oRadialMenu is an object of RadialMenu type
Parameters:
Name Type Attributes Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
oOpts object <optional>
An object of RadialMenu.Options type that defines different options to display the control
Requires:
  • module:exontrol.commmon.min.js

Requires

  • module:exontrol.commmon.min.js

Classes

ItemOptions
Options

Members

(static, readonly) DisplayRadialEnum :number

The DisplayRadialEnum type specifies whether the item's content is rotated
Type:
  • number
Properties:
Name Type Description
exDisplayRadialFlat number The item's content is shown, without rotating.
exDisplayRadialRotated number The item's content is rotated from 0 to 360 degree.
exDisplayRadialRotated180 number The item's content is rotated from 0 to 180 degree.
exDisplayRadialRotated270 number The item's content is rotated from 0 to 270 degree.
exDisplayRadialRotated90 number The item's content is rotated

(static, readonly) OnDragLayerEnum :number

Specifies the operation a layer is performed once the user drags it.
Type:
  • number
Properties:
Name Type Description
exDoNothing number Nothing happens if the user drags the layer.
exDoMove number The layer is moved while dragging. The layer's OffsetX and OffsetY indicates the current (x,y) position of the layer.
exDoRotate number The layer is rotated while dragging. The RotateAngle property indicates the currently rotation angle.
exDoRotamove number The layer is moved by rotation while dragging. The RotateAngle property indicates the currently rotation angle. In this case, the layer's RotamoveOffsetX / RotamoveOffsetY property indicates the current (x,y) position of the layer.
exDoSweep number The layer is sweeping.

(static) type :string

The type field defines the full-name of the object (the constructor.name does not give the same name for minimized forms)
Type:
  • string
Since:
  • 1.8

(static) version :string

The version field defines the version of the control
Type:
  • string

(static, readonly) ViewableLObjEnum :number

Indicates the type of layers the control supports (visible/selectable)
Type:
  • number
Properties:
Name Type Description
exVisible number Defines a visible layer
exSelectable number Defines a selectable layer

Listeners :exontrol.Lts

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The Events section lists the events the component supports.
Type:
  • exontrol.Lts
Example
The following sample shows how you can get all events the component currently supports:

oRadialMenu.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays the layer, pie being clicked:

oRadialMenu.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
});

where oRadialMenu is an object of RadialMenu type

SetCanvas

The SetCanvas() method changes the control's canvas where it runs (overrides the SetCanvas method to implement the HTMLCanvasElement.ExHost(oHost) method)
Since:
  • 1.8

Shortcuts :exontrol.Sts

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.
Type:
  • exontrol.Sts
Example
The following sample goes back once the user presses the Backspace key:

oRadialMenu.Shortcuts.Add( "Backspace", oRadialMenu.GoBack, oRadialMenu );

where oRadialMenu is an object of RadialMenu type

Methods

BeginUpdate()

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. You can use the Update() method to perform multiple changes at once.

cCB(event) → {boolean}

The cCB/closeComboBox() method checks whether the drop-down panel should close on click (required only if the control is hosted by an exontrol.ComboBox object)
Parameters:
Name Type Description
event event A Mouse/Touch object to be querried for the mouse/touch position.
Since:
  • 1.8
Returns:
Returns true if the drop-down panel should close on click
Type
boolean

EndUpdate()

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method.

GetAllowToggleExpand() → {boolean}

The GetAllowToggleExpand() method indicates whether the user can expand or collapse the radial-menu.
Returns:
Returns true, if the user can expand or collapse the radial-menu.
Type
boolean

GetBrowseItem() → {Item}

The GetBrowseItem() method returns the currenty browsed item.
Returns:
Returns the currenty browsed item as an object of Item type
Type
Item

GetCanvas() → {HTMLCanvasElement}

The GetCanvas() method gets the canvas element, the control is running on.
Returns:
Returns the HTMLCanvasElement object the control is running on.
Type
HTMLCanvasElement

GetCircular() → {boolean}

The GetCircular() method indicates whether the radial-menu is shown as circular instead of elliptical.
Returns:
Returns true if the radial-menu is shown as circular.
Type
boolean

GetClientRect() → {Array.<number>}

The GetClientRect() method returns the control's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the control's client area
Type
Array.<number>

GetCollapseLayers() → {string}

The GetCollapseLayers() method specifies the list of layers to be shown while the control is collapsed (separated by comma).
Returns:
Returns the list of layers to be shown while the control is collapsed.
Type
string

GetCursors() → {string}

The GetCursors() method defines the mouse cursor to display when pointing over different parts of the control.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors property 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 cursors property supports any of the following parts:
  • "dable" (selectable and dragable layer), defines the cursor for selectable and dragable layers
  • "sable" (selectable layer), defines the cursor for selectable layers
Type
string

GetDebug() → {boolean}

The GetDebug() method specifies whether the control shows the layers in debug mode
Returns:
Returns true, if the control shows the layers in debug mode
Type
boolean

GetDisplayAngle() → {number}

The GetDisplayAngle() method gets the angle (degree) to display the items around the radial menu.
Returns:
Returns the angle (degree) to display the items around the radial menu.
Type
number

GetDisplayItems() → {DisplayItemsType}

The GetDisplayItems() method customizes the item's content to be displayed on the "items" portion.
Returns:
Returns an object of {arrow,arrowColor,arrowSize,image,caption,content,imageAlign,imageSize,radial} type that customizes the item's content for "items" portion of the control.
Type
DisplayItemsType

GetDisplayParent() → {DisplayParentType}

The GetDisplayParent() method customizes the item's content to be displayed on the "parent" portion.
Returns:
Returns an object of {imageAlign,imageSize,visible} type that customizes the item's content for "parent" portion of the control.
Type
DisplayParentType

GetDisplaySubItems() → {DisplayItemsType}

The GetDisplaySubItems() method customizes the item's content to be displayed on the "sub-items" portion.
Returns:
Returns an object of {arrow,arrowColor,arrowSize,image,caption,content,imageAlign,imageSize,radial} type that customizes the item's content for "sub-items" portion of the control.
Type
DisplayItemsType

GetExpanded() → {boolean}

The GetExpanded() method specifies whether the control is expanded or collapsed
Returns:
Returns true, if the control is expanded or collapsed
Type
boolean

GetHighlightAny() → {boolean}

The GetHighlightAny() method indicates whether any pie of the radial-menu is highlighted once the cursor hovers it, or just the pies that host items.
Returns:
Returns true, if any pie of the radial-menu is highlighted once the cursor hovers it
Type
boolean

GetItems() → {string}

The GetItems() method defines the items of the control from a string-representation.
Returns:
A string expression that defines the items of the control from a string-representation. The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags):
"item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])"
The string-representation supports the following flags:
  • [key] {string}, specifies the item's key (Key/GetKey()/SetKey(value) methods of Item). If missing, the item's plain-caption (caption with no HTML tags) is considered as item's key. You can get an item giving its key using Root.Item(key) method. For instance, [key=color], change the item's key to "color"
  • [vis]/[hid] {number}, shows or hides the item (Visible/GetVisible()/SetVisible(value) methods of Item). For instance, [vis=0] or [hid], hides the item, while [vis=1] shows the item
  • [dis] {number}, enables or disables the item (Enabled/GetEnabled()/SetEnabled(value) methods of Item). For instance, [dis=0] or [dis], disables the item, while [dis=1] enables the item
  • [pos] {number}, changes the item's position (0-based) (Position/GetPosition()/SetPosition(value) methods of Item). For instance, [pos=0] indicates that the item should be displayed first
  • [img] {string}, assigns a image/picture to the item (Image/GetImage()/SetImage(value) methods of Item). For instance, [img=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [simg] flag to define the item's image to be displayed on the "sub-items" portion of the control.
  • [color] {string}, specifies the item's background color (Color/GetColor()/SetColor(value) methods of Item). For instance, [color=red] or [color=rgba(255,0,0,1)] shows the item's background color in red. The [color] flag is applied for "items" portion of the control. You can use the [scolor] flag to define the item's background color for "sub-items" portion of the control.
  • [scap] {string}, specifies the item's caption to be displayed by "sub-items" portion only (SubCaption/GetSubCaption()/SetSubCaption(value) methods of Item). For instance, [scap=<b>Exit] displays Exit in bold.
  • [simg] {string}, specifies the item's image to be shown under "sub-items" section of the control (SubImage/GetSubImage()/SetSubImage(value) methods of Item). For instance, [simg=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [img] flag to define the item's image to be displayed on the "items" portion of the control.
  • [scolor] {string}, specifies the item's background color to be displayed by "sub-items" portion only (SubColor/GetSubColor()/SetSubColor(value) methods of Item). For instance, [scolor=red] or [scolor=rgba(255,0,0,1)] shows the item's background color in red. The [scolor] flag is applied for "sub-items" portion of the control. You can use the [color] flag to define the item's background color for "items" portion of the control.
Type
string

GetLayerAutoSize() → {number|string}

The GetLayerAutoSize() method specifies the index or the key of the layer that determines the size to display all layers.
Returns:
Returns the index or the key of the layer that determines the size to display all layers.
Type
number | string

GetLayerDragAny() → {number|string}

The GetLayerDragAny() method specifies the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control.
Returns:
Returns the index or the key of the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control.
Type
number | string

GetLayerOfValue() → {number|string}

The GetLayerOfValue() method specifies the index or the key of the layer whose value determines the control's Value property.
Returns:
Returns the index or the key of the layer whose value determines the control's Value property.
Type
number | string

GetLayers() → {Layers}

The GetLayers() method gets the control's layers.
Returns:
Returns the control's layers collection.
Type
Layers

GetLayersClientRect() → {Array.<number>}

The GetLayersClientRect() method returns the layers's client area (control's client area).
Returns:
Returns an array of [x,y,width,height] type that specifies the layers's client area
Type
Array.<number>

GetLocked() → {boolean}

The GetLocked() method specifies whether the control is locked(protected) or unlocked
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
boolean

GetMinVisibleCount() → {number}

The GetMinVisibleCount() method gets the minimum number of items being visible on the radial menu.
Returns:
Returns the minimum number of items being visible on the radial menu.
Type
number

GetOptions() → {object}

The GetOptions() method returns the current options of the control.
Returns:
An object of RadialMenu.Options that indicates the options to display the control.
Type
object

GetParentSize() → {string}

The GetParentSize() method gets the value / expression that defines the size to display the "parent" portion of the control. The expression supports the following keywords:
"value", indicates the radius in pixels, of the radial menu.
Returns:
A string expression that defines the expression to determine the size to display the "parent" portion of the control.
Type
string

GetReadOnly() → {boolean}

The GetReadOnly() method specifies whether the control is read-only
Since:
  • 1.8
Returns:
Returns true, if the control is read-only
Type
boolean

GetShapes() → {string}

The GetShapes() method defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
Returns:
A string expression that defines the shapes each part of the control can display. The format of shapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ 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 (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ 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( such as rgb(0,0,255) that defines a blue background)
    ◦ 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) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ 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 (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ 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) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.RadialMenu object (while it starts with a lowercase letter, such as subitems which refers to exontrol.Shapes.RadialMenu.subitems shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on (as defined bellow)
The shapes property supports any of the following parts:
  • "subitems" , defines the visual appearance for background/sub-items portion of the control.
  • "items" , defines the visual appearance for items portion of the control.
  • "parent" , defines the visual appearance for parent portion of the control.
Type
string

GetShowLayers() → {string}

The GetShowLayers() method indicates the only layers to be shown
Returns:
Returns the layers being shown within the control. Specifies the layers to display within the control as explained:
  • "all" {string}, specifies that all visible layers are shown. The Visible property (of exontrol.RadialMenu.Layer) shows or hides the layer
  • "" {string}, no layer is shown in the control, no matter of the layer's Visible property
  • "n1,n2,n3,..." {string}, specifies the list of layers to be shown, no matter of the layer's Visible property, where n1, n2, ... are numbers ( indicating the index of the layer to be shown ) or the layer's key. For instance "0" specifies that just the layer with the index 0 is show, "0,1,4", indicates that just layers with the specified index are displayed.
Type
string

GetSmooth() → {number}

The GetSmooth() method defines the time in ms the control goes from one layout to another.
Returns:
Returns the time in ms the control goes from one layout to another.
Type
number

GetSubItemsSize() → {string}

The GetSubItemsSize() method gets the value / expression that defines the size to display the "subitems" portion of the control. The expression supports the following keywords:
"value", indicates the radius in pixels, of the radial menu.
Returns:
A string expression that defines the expression to determine the size to display the "subitems" portion of the control.
Type
string

GetSweepOnSelect() → {boolean}

The GetSweepOnSelect() method specifies whether browsed-items are arranged around the selected radial-item
Returns:
Returns true, if the browsed-items are arranged around the selected radial-item
Type
boolean

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The result as a {string} can include any of the following keywords 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 string result 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 result as {object} can include 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 mode as a value between 0 and 4
    • 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.
Type
string | object

GetValue() → {number}

The GetValue() method specifies the control's value.
Returns:
Returns the control's value.
Type
number

GetWheelChange() → {number}

The GetWheelChange() method defines the amount the control scrolls when the user rolls the mouse wheel.
Returns:
Returns the amount the control scrolls when the user rolls the mouse wheel.
Type
number

GoBack()

The GoBack() method advances to parent item.

init(client, oOptsopt)

The init() method initalizes the object
Parameters:
Name Type Attributes Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
oOpts object <optional>
An object of RadialMenu.Options type that defines different options to display the control
Since:
  • 1.8

Item(key) → {Item}

The Item() method searches for an item giving its key or caption
Parameters:
Name Type Description
key any The key parameter can be any of the following:
  • key {object}, Indicates an object of Item that specifies the item itself
  • key {string}, Specifies the item's key or plain-caption
Since:
  • 1.1
Returns:
Returns null or an object of Item type with specified key / caption that descends from the item.
Type
Item

Layer(key) → {Layer}

The Layer() method returns a Layer object giving its index or key
Parameters:
Name Type Description
key any Specifies an integer expression that indicates the index of the layer to be requested, or any other value that indicates the key of the layer (layer's key or back).
Since:
  • 1.1
Returns:
Returns an object of Layer type associated with the giving index/key
Type
Layer

Refresh()

The Refresh() method refreshes the entire control.

SetAllowToggleExpand(value)

The SetAllowToggleExpand() method prevents expanding or collapsing the radial-menu, once the user clicks the "parent" portion of the control.
Parameters:
Name Type Description
value boolean A boolean value that specifies whether expanding/collapsing the radial-menu is allowed
Example
false {boolean}, specifies that the user can't expand or collapse the control while the "parent" portion of the control is clicked
  true {boolean}, specifies that the control is expanded or collapsed once the user clicks the "parent" portion of the control

SetBrowseItem(value)

The SetBrowseItem() method browses for a new item (only visible items can be browsed).
Parameters:
Name Type Description
value any Indicates a key / plain-caption / Item to browse for as explained:
  • value {Item} Specifies an object of Item type
  • value {any} Indicates the key or the plain-caption of the item to browse for
Example
"al" {string}, specifies that the item with the key "al" should be browsed.

SetCanvas(canvas, localCanvas)

The SetCanvas() method changes the control's canvas where it runs.
Parameters:
Name Type Description
canvas any A string that indicates the indetifier of the element within the document, or a HTMLCanvasElement reference
localCanvas boolean Specifies whether the canvas is used localy without requesting the canvas to handle the control itself.

SetCircular(value)

The SetCircular () method shows the radial-menu as circular instead of elliptical.
Parameters:
Name Type Description
value boolean Indicates a boolean that defines whether the radial-menu is shown as circular instead of elliptical.
Example
false {boolean}, specifies an elliptical radial-menu.
  true {boolean}, specifies an circular radial-menu.

SetClientRect(client)

The SetClientRect() method defines a client area for the control.
Parameters:
Name Type Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area

SetCollapseLayers(value)

The SetCollapseLayers() method specifies the list of layers to be shown while the control is collapsed (separated by comma).
Parameters:
Name Type Description
value string A String expression that could be:
  • "all", specifies that all visible layers are shown. The Visible property indicates the visible layers
  • "", no layer is shown in the control, no matter of the layer's Visible property
  • "n1,n2,n3,..." specifies the list of layers to be shown, no matter of the layer's Visible property, where n1, n2, ... are numbers ( indicating the index of the layer to be shown ). For instance "0" specifies that just the layer with the index 0 is collapse, "0,1,4", indicates that just layers with the specified index are displayed.
Example
null {null}, specifies that the collapseLayers is ignored, so the default value is used instead
 "" {string}, indicates than no layes is shown when the control is collapsed
 "parent,items" {string}, indicates that the control shows the "parent" adnd "items" layers/sections when the control is collapsed

SetCursors(value)

The SetCursors() method changes the mouse cursor to display when pointing over different parts of the control.
Parameters:
Name Type Description
value string A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors property 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 cursors property supports any of the following parts:
  • "dable" (selectable and dragable layer), defines the cursor for selectable and dragable layers
  • "sable" (selectable layer), defines the cursor for selectable layers
Example
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

SetDebug(value)

The SetDebug() method shows the control in debug-mode.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control shows the layers in debug mode
Example
false {boolean}, shows the layers in normal-mode
  true {boolean}, shows the layers in debug-mode

SetDisplayAngle(value)

The SetDisplayAngle() method sets the angle (degree) to display the items around the radial menu.
Parameters:
Name Type Description
value number Indicates a number that defines the angle (degree) to display the items around the radial menu.
Example
0 {number}, defines a 0-degree display angle
 90 {number}, defines a 90-degree display angle
 270 {number}, defines a 270-degree (-90) display angle

SetDisplayItems(value)

The SetDisplayItems() method customizes the item's content to be displayed on the "items" portion.
Parameters:
Name Type Description
value DisplayItemsType Indicates an object of an object of {arrow,arrowColor,arrowSize,image,caption,content,imageAlign,imageSize,radial} type that customizes the item's content for "items" portion of the control.

SetDisplayParent(value)

The SetDisplayParent() method customizes the item's content to be displayed on the "parent" portion.
Parameters:
Name Type Description
value DisplayParentType Indicates an object of an object of {imageAlign,imageSize,visible} type that customizes the item's content for "parent" portion of the control.

SetDisplaySubItems(value)

The SetDisplaySubItems() method customizes the item's content to be displayed on the "sub-items" portion.
Parameters:
Name Type Description
value DisplayItemsType Indicates an object of an object of {arrow,arrowColor,arrowSize,image,caption,content,imageAlign,imageSize,radial} type that customizes the item's content for "sub-items" portion of the control.

SetExpanded(value)

The SetExpanded() method expands or collapses the control.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is expanded or collapsed
Example
false {boolean}, collapses the control.
  true {boolean}, expands the control.

SetHighlightAny(value)

The SetHighlightAny() method indicates whether any pie of the radial-menu is highlighted once the cursor hovers it, or just the pies that host items.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether any pie of the radial-menu is highlighted once the cursor hovers it, or just the pies that host items.
Example
false {boolean}, specifies that only items are highlighted
 true {boolean}, indicates that any pie gets highlighted once the cursor hovers it

SetItems(value)

The SetItems() method loads items of the control from a string-representation.
Parameters:
Name Type Description
value string A string expression that defines the items of the control from a string-representation. The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags):
"item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])"
The string-representation supports the following flags:
  • [key] {string}, specifies the item's key (Key/GetKey()/SetKey(value) methods of Item). If missing, the item's plain-caption (caption with no HTML tags) is considered as item's key. You can get an item giving its key using Root.Item(key) method. For instance, [key=color], change the item's key to "color"
  • [vis]/[hid] {number}, shows or hides the item (Visible/GetVisible()/SetVisible(value) methods of Item). For instance, [vis=0] or [hid], hides the item, while [vis=1] shows the item
  • [dis] {number}, enables or disables the item (Enabled/GetEnabled()/SetEnabled(value) methods of Item). For instance, [dis=0] or [dis], disables the item, while [dis=1] enables the item
  • [pos] {number}, changes the item's position (0-based) (Position/GetPosition()/SetPosition(value) methods of Item). For instance, [pos=0] indicates that the item should be displayed first
  • [img] {string}, assigns a image/picture to the item (Image/GetImage()/SetImage(value) methods of Item). For instance, [img=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [simg] flag to define the item's image to be displayed on the "sub-items" portion of the control.
  • [color] {string}, specifies the item's background color (Color/GetColor()/SetColor(value) methods of Item). For instance, [color=red] or [color=rgba(255,0,0,1)] shows the item's background color in red. The [color] flag is applied for "items" portion of the control. You can use the [scolor] flag to define the item's background color for "sub-items" portion of the control.
  • [scap] {string}, specifies the item's caption to be displayed by "sub-items" portion only (SubCaption/GetSubCaption()/SetSubCaption(value) methods of Item). For instance, [scap=<b>Exit] displays Exit in bold.
  • [simg] {string}, specifies the item's image to be shown under "sub-items" section of the control (SubImage/GetSubImage()/SetSubImage(value) methods of Item). For instance, [simg=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [img] flag to define the item's image to be displayed on the "items" portion of the control.
  • [scolor] {string}, specifies the item's background color to be displayed by "sub-items" portion only (SubColor/GetSubColor()/SetSubColor(value) methods of Item). For instance, [scolor=red] or [scolor=rgba(255,0,0,1)] shows the item's background color in red. The [scolor] flag is applied for "sub-items" portion of the control. You can use the [color] flag to define the item's background color for "items" portion of the control.
Example
"" {string}, clears the items collection
 "A(A1,A2,A3),B(B1,B2(B2.1,B2.2),B3)" {string}, defines the item "A" with three child-items "A1", "A2" and "A2", and item "B" with child-items "B1", "B2", and "B3", also defines the "B2.1" and "B2.2" as children of item "B2"
 "A[img=logo][hid],B[dis]" {string}, defines the item "A" hidden and with the image "logo" and item "B" as disabled.

SetLayerAutoSize(value)

The SetLayerAutoSize() method resizes all layers relative to the giving layer
Parameters:
Name Type Description
value number | string Specifies the index or the key of the layer that determines the size to display all layers.
Example
-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)
 "items" {string}, specifies that all layers are resized and scaled based on image/picture of the layer with the key "items"

SetLayerDragAny(value)

The SetLayerDragAny() method sets the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control
Parameters:
Name Type Description
value number | string Specifies the index or the key of the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control.
Example
-1 {number}, specifies that layerDragAny 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.

SetLayerOfValue(value)

The SetLayerOfValue() method changes the layer that determines the control's Value property
Parameters:
Name Type Description
value number | string Specifies the index or the key of the layer whose value determines the control's Value property.
Example
-1 {number}, indicates that the control's Value is determined by the last visible layer with [drag] (OnDrag/GetOnDrag()/SetOnDrag(value) methods of Layer) defined. Shortly, the last visible and dragable layer determines the control's Value.
 0 {number}, specifies that the layer with the index 0, defines the control's Value property.
 "hour" {string}, specifies that the layer with the key "hour", defines the control's Value property.

SetLayers(value) → {Layers}

The SetLayers() method defines the control's layers from a string representation (see layers within the RadialMenu.Options for more details).
Parameters:
Name Type Description
value string A value that indicates the string representation to get layers from The layers field defines the control's layers from a string-representation in the following format:
"back[flag=value]...[flag=value],...,back[flag=value]...[flag=value],..."
where:
  • "back", (Back/GetBack()/SetBack() methods of exontrol.RadialMenu.Layer) could be:
    • "" {empty string} (no layer background provided)
    • "image" {picture's name}, defines the name of a picture previously added using the exontrol.HP.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
  • [key] {string}, specifies the layer's key (Key/GetKey()/SetKey(value) methods of Layer). The Layers.Item() method retrieves the control's layer giving its index or key. If the key is not specified, the layer's back is considered its key. For instance [key=background] indicates that the layer's key is "background", so you can always request this layer using the Layers.Item("background") method.
  • [vis] {0,1}, indicates whether the layer is visible(1) or hidden(0) (Visible/GetVisible()/SetVisible(value) methods of Layer). By default, all layers are visible(1). For instance [vis=0] specifies that the layer is hidden.
  • [pos] {number, 0-based}, specifies the layer's position as 0-based (Position/GetPosition()/SetPosition(value) methods of Layer). By default, the position of the layer on the control's background is 0. For instance [pos=1] specifies that the layer should be shown the second.
  • [sel] {0,1}, indicates whether the layer is selectable, so the user can drag it (Selectable/GetSelectable()/SetSelectable(value) methods of Layer). By default, all layers are selectable. For instance [sel=0] indicates that user can not select, drag, rotate or move by drag the layer.
  • [fore] {string}, specifies the layer's foreground as an HTML caption (can be an expression with "value" keyword which indicates the control's value) (Fore/GetFore()/SetFore(value) methods of Layer). For instance [fore=<b>caption] displays the caption in bold onto the layer's foreground, or "[fore=`` + value]" displays the control's value with a larger font.
  • [left] {string}, specifies the expression relative to the view, to determine the x-position to show the layer on the control (Left/GetLeft()/SetLeft(value) methods of Layer). The [left] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [left=128] specifies 128-pixels, while [left=width/2] half of the view or x-center of the control's view.
  • [top] {string}, specifies the expression relative to the view, to determine the y-position to show the layer on the control (Top/GetTop()/SetTop(value) methods of Layer). The [top] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [top=128] specifies 128-pixels, while [top=height/2] half of the view or y-center of the control's view.
  • [width] {string}, specifies the expression relative to the view, to determine the width to display the entire-layer on the control (Width/GetWidth()/SetWidth(value) methods of Layer). The [width] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [width=128] specifies 128-pixels wide, while [width=width/4] quarter of the view.
  • [height] {string}, specifies the expression relative to the view, to determine the height to display the entire-layer on the control (Height/GetHeight()/SetHeight(value) methods of Layer). The [height] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [height=128] specifies 128-pixels wide, while [height=height/4] quarter of the view.
  • [defX] {number}, indicates the default x-offset of the layer (DefaultOffsetX/GetDefaultOffsetX()/SetDefaultOffsetX(value) methods of Layer). For instance, [defX=-32] specifies that the layer is displayed left to 32-pixels of its default position.
  • [defY] {number}, indicates the default y-offset of the layer (DefaultOffsetY/GetDefaultOffsetY()/SetDefaultOffsetY(value) methods of Layer). For instance, [defY=-32] specifies that the layer is displayed to to 32-pixels of its default position.
  • [x] {number}, indicates the x-offset of the layer (OffsetX/GetOffsetX()/SetOffsetX(value) methods of Layer). For instance, [x=-32] specifies that the layer is displayed left to 32-pixels of its default position.
  • [y] {number}, indicates the y-offset of the layer (OffsetY/GetOffsetY()/SetOffsetY(value) methods of Layer). For instance, [y=-32] specifies that the layer is displayed to to 32-pixels of its default position.
  • [drag] {"move","rotate" or "rotamove"}, indicates the transformation ("move","rotate" or "rotamove") of the layer once the user drags it (OnDrag/GetOnDrag()/SetOnDrag(value) methods of Layer). For instance, [drag=rotate] indicates that the layer is rotated once the user drags it.
  • [value] {number}, specifies the layer's value (Value/GetValue()/SetValue(value) methods of Layer). For instance, [value=15] changes the layer's value to 15. The [v2a], [v2x] and [v2y] flags are used to converts the layer's value to rotation-angle/x-offset/y-offset.
  • [idem] {string}, ensures that the layer's offset and rotation-angle is equal for all idem layers (separated by comma character) (Idem/GetIdem()/SetIdem(value) methods of Layer). For instance, [idem=o1,o5] indicates that the current layer, o1 and o5 have the same offset and rotation-angle.
  • [xValid] {string}, validates the x-offset value of the layer using an expression that supports: "value" (specifies the x-offset/y-offset of the layer), "x" (specifies the x-offset of the layer), "y" (specifies the y-offset of the layer), "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's view) and "height" (specifies the height in pixels of the control's view) keywords (OffsetXValid/GetOffsetXValid()/SetOffsetXValid(value) methods of Layer). For instance, [xValid=(value MIN 0 MAX 48)] ensures that the layer's x-offset (OffsetX) is always between 0 and 48.
  • [yValid] {string}, validates the y-offset value of the layer using an expression that supports: "value" (specifies the x-offset/y-offset of the layer), "x" (specifies the x-offset of the layer), "y" (specifies the y-offset of the layer), "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's view) and "height" (specifies the height in pixels of the control's view) keywords (OffsetYValid/GetOffsetYValid()/SetOffsetYValid(value) methods of Layer). For instance, [yValid=(value MIN -height/2 MAX height/2)] ensures that the layer's y-offset (OffsetY) is always between -height/2 and height/2.
  • [v2x] {string}, specifies the expression to convert the value to x-offset. The expression supports: "value" (specifies the layer's value) keyword (ValueToOffsetX/GetValueToOffsetX()/SetValueToOffsetX(value) methods of Layer). For instance, [v2x=(value=0) ? 0 : 48] specifies that the x-offset of the layer is 0, if the layer's value is 0 else it is 48.
  • [v2y] {string}, specifies the expression to convert the value to y-offset. The expression supports: "value" (specifies the layer's value) keyword (ValueToOffsetY/GetValueToOffsetY()/SetValueToOffsetY(value) methods of Layer). For instance, [v2y=(value=0) ? 0 : 48] specifies that the y-offset of the layer is 0, if the layer's value is 0 else it is 48.
  • [o2v] {string}, specifies the expression to convert the x-offset, y-offset to value. The expression supports: "value", "x", "offsetx" indicates the layer's x-offset property, "y", "offsety" indicates the layer's y-offset property keywords (OffsetToValue/GetOffsetToValue()/SetOffsetToValue(value) methods of Layer). For instance, [o2v=x+y/2] specifies that the layer's value is adding x-offset + y-offset divided by 2
  • [defA] {number}, specifies the default angle (degree) to rotate the layer (DefaultRotateAngle/GetDefaultRotateAngle()/SetDefaultRotateAngle(value) methods of Layer). For instance, [defA=45] specifies that the default rotation-angle for the layer is 45 degree.
  • [a] {number}, specifies the angle (degree) to rotate the layer (RotateAngle/GetRotateAngle()/SetRotateAngle(value) methods of Layer). For instance, [a=90] specifies that the layer's rotation-angle is 90 degree.
  • [aValid] {string}, validates the layer's rotation angle using an expression that supports: "value" (indicates the cumulative rotation angle) keyword (RotateAngleValid/GetRotateAngleValid()/SetRotateAngleValid(value) methods of Layer). For instance, [aValid=value < 90 ? value : (value < 180 ? 90 : ( value < 270 ? 270 : value ))] ensures that the layer's rotation-angle is between 90 and 270.
  • [xCenter] {string}, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer. The expression supports: "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) and "height" (specifies the height in pixels of the view / control) keywords (RotateCenterX/GetRotateCenterX()/SetRotateCenterX(value) methods of Layer). For instance, [xCenter=lwidth/2-3] defines the rotation-center 3-pixels to the left of the center of the view.
  • [yCenter] {string}, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer. The expression supports: "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) and "height" (specifies the height in pixels of the view / control) keywords (RotateCenterX/GetRotateCenterX()/SetRotateCenterX(value) methods of Layer). For instance, [yCenter=lheight/2+23] defines the rotation-center 23-pixels lower of the center of the view.
  • [clayer] {(number|string)}, indicates the index or key of the layer the rotation is around. If -1, the rotation is relative to the current layer. For instance, [clayer=-1] ensures that the current layer is rotated around itself.
  • [a2v] {string}, specifies the expression to convert the rotating angle to value. The expression supports: "value" (indicates the layer's rotation-angle) keyword (RotateAngleToValue/GetRotateAngleToValue()/SetRotateAngleToValue(value) methods of Layer). For instance, [a2v=round(value/360*100)] converts the layer's rotation angle to a value between 0 and 100.
  • [v2a] {string}, specifies the expression to convert the value to rotating angle. The expression supports: "value" (indicates the layer's value) keyword (ValueToRotateAngle/GetValueToRotateAngle()/SetValueToRotateAngle(value) methods of Layer). For instance, [v2a=value/100*360] converts the value between 0 and 100 to a rotation angle between 0 and 360 degree.
  • [grayscale] {any}, sets the percent value / expression to convert the layer to grayscale. The grayscale can be a number beween 0 and 100, or a string to define an expression. The expression supports: "value" (indicates the control's value) keyword (Grayscale/GetGrayscale()/SetGrayscale(value) methods of Layer). For instance, [grayscale=100] displays the layer in full-grayscale, or [grayscale=value] specifies that the layer's grayscale percent is indicated by the control's value (ex: the control's value is 25, the layer's grayscale will be 25%)
  • [transparency] {any}, sets the percent value / expression of the transparency to display the layer. The transparency can be a number beween 0 and 100, or a string to define an expression. The expression supports: "value" (indicates the control's value) keyword (Transparency/GetTransparency()/SetTransparency(value) methods of Layer). For instance, [transparency=50] displays the layer half-transparent, or [transparency=value] specifies that the layer's transparency percent is indicated by the control's value (ex: the control's value is 75, the layer is displayed 75% transparent)
  • [rotateclip] {0,1}, specifies whether the layer's clipping region is rotated once the layer is rotated (RotateClip/GetRotateClip()/SetRotateClip(value) methods of Layer). The [rotateclip] has effect only if the [clip] flag is present for the layer. For instance [rotateClip=1] specifies that the layer's clipping region is rotated once the layer itself is rotated.
  • [brightness.red] {string}, specifies the percent value / expression of the red-chanel. The expression supports: "value" (indicates the layer's value) keyword (Red/GetRed()/SetRed(value) methods of LayerColorAdjustment). For instance, [brightness.red=100] adds 100% more red, or [brightness.red=50+value/2] applies more red based on the control's value.
  • [brightness.green] {string}, specifies the percent value / expression of the green-chanel. The expression supports: "value" (indicates the layer's value) keyword (Green/GetGreen()/SetGreen(value) methods of LayerColorAdjustment). For instance, [brightness.green=100] adds 100% more green, or [brightness.green=50+value/2] applies more green based on the control's value.
  • [brightness.blue] {string}, specifies the percent value / expression of the blue-chanel. The expression supports: "value" (indicates the layer's value) keyword (Blue/GetBlue()/SetBlue(value) methods of LayerColorAdjustment). For instance, [brightness.blue=100] adds 100% more blue, or [brightness.blue=50+value/2] applies more blue based on the control's value.
  • [contrast.red] {string}, specifies the percent value / expression of the red-chanel. The expression supports: "value" (indicates the layer's value) keyword (Red/GetRed()/SetRed(value) methods of LayerColorAdjustment). For instance, [contrast.red=100] adds 100% more red, or [contrast.red=50+value/2] applies more red based on the control's value.
  • [contrast.green] {string}, specifies the percent value / expression of the green-chanel. The expression supports: "value" (indicates the layer's value) keyword (Green/GetGreen()/SetGreen(value) methods of LayerColorAdjustment). For instance, [contrast.green=100] adds 100% more green, or [contrast.green=50+value/2] applies more green based on the control's value.
  • [contrast.blue] {string}, specifies the percent value / expression of the blue-chanel. The expression supports: "value" (indicates the layer's value) keyword (Blue/GetBlue()/SetBlue(value) methods of LayerColorAdjustment). For instance, [contrast.blue=100] adds 100% more blue, or [contrast.blue=50+value/2] applies more blue based on the control's value.
  • [clip] {"Rect","RoundRect","Ellipse" or "Pie"}, specifies the type of clipping to apply on the layer (Type/GetType()/SetType(value) method of LayerClip). For instance, [clip=pie][clip.sweep=45] clips a pie of 45 degree
  • [clip.value] {number}, indicates the layer clip's value that's the value of "value" keywords within expression-properties such as: [x], [y], [left], [top], [width], [height], [roundX], [roundY], [radiusX], [radiusY], [xCenter], [yCenter], [start] and [sweep] flags of layer's clip. If the [clip.value] is not specified, the control's value is used instead. For instance, [clip.value=50] defines the value of the "value" keyword to 50 for any expression of [x], [y], [left], [top], [width], [height], [roundX], [roundY], [radiusX], [radiusY], [xCenter], [yCenter], [start] and [sweep] flags
  • [clip.x] {string}, specifies the x-offset expression / value of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (OffsetX/GetOffsetX()/SetOffsetX(value) method of LayerClip). For instance, [clip.x=120], moves right by 128-pixels the layer's clip, while [clip.x=value] indicates that the entire clip is moved horizontally based on clip/control's value.
  • [clip.y] {string}, specifies the y-offset expression / value of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (OffsetY/GetOffsetY()/SetOffsetY(value) method of LayerClip). For instance, [clip.y=-120], moves up by 128-pixels the layer's clip, while [clip.y=value] indicates that the entire clip is moved vertically based on clip/control's value.
  • [clip.left] {string}, specifies the left position / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Left/GetLeft()/SetLeft(value) method of LayerClip). For instance, [clip.left=120], defines the left-margin of the clip at 120 pixels, or [clip.left=32+value] specifies that the clip's left margin is computed based on clip/control's value.
  • [clip.top] {string}, specifies the top position / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Top/GetTop()/SetTop(value) method of LayerClip). For instance, [clip.top=120], defines the top-margin of the clip at 120 pixels, or [clip.top=32+value] specifies that the clip's top margin is computed based on clip/control's value.
  • [clip.width] {string}, specifies the width / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Width/GetWidth()/SetWidth(value) method of LayerClip). For instance, [clip.width=120], defines the clip 120 pixels wide, or [clip.width=value] specifies that the clip's width is computed based on clip/control's value.
  • [clip.height] {string}, specifies the height / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Height/GetHeight()/SetHeight(value) method of LayerClip). For instance, [clip.height=120], defines the clip 120 pixels tall, or [clip.height=value] specifies that the clip's height is computed based on clip/control's value.
  • [clip.roundX] {string}, indicates the x-radius value / expression of the round corner, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RoundRadiusX/GetRoundRadiusX()/SetRoundRadiusX(value) method of LayerClip). For instance, [clip.roundX=16][clip.roundY=16], defines a round-radius of 16 pixels, while [clip.roundX=value][clip.roundY=value] defines the clip's round-radius based on the clip/control's value. The [clip.roundX] and [clip.roundY] flags are valid only for [clip=RoundRect].
  • [clip.roundY] {string}, indicates the y-radius value / expression of the round corner, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RoundRadiusY/GetRoundRadiusY()/SetRoundRadiusY(value) method of LayerClip). For instance, [clip.roundX=16][clip.roundY=16], defines a round-radius of 16 pixels, while [clip.roundX=value][clip.roundY=value] defines the clip's round-radius based on the clip/control's value. The [clip.roundX] and [clip.roundY] flags are valid only for [clip=RoundRect].
  • [clip.radiusX] {string}, specifies the x-radius value / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RadiusX/GetRadiusX()/SetRadiusX(value) method of LayerClip). For instance, [clip.radiusX=128], defines clip's x-radius to 128 pixels, while [clip.radiusX=value] specifies that the clip's x-radius is computed based on the clip/control's value. The [clip.radiusX] and [clip.radiusY] flags are valid only for [clip=Ellipse] or [clip=Pie].
  • [clip.radiusY] {string}, specifies the y-radius value / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RadiusY/GetRadiusY()/SetRadiusY(value) method of LayerClip). For instance, [clip.radiusY=128], defines clip's y-radius to 128 pixels, while [clip.radiusY=value] specifies that the clip's y-radius is computed based on the clip/control's value. The [clip.radiusX] and [clip.radiusY] flags are valid only for [clip=Ellipse] or [clip=Pie].
  • [clip.xCenter] {string}, indicates the x-position / expression of the center of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (CenterX/GetCenterX()/SetCenterX(value) method of LayerClip). For instance, [clip.xCenter=128], defines clip's x-center to 128 pixels, while [clip.xCenter=value] specifies that the clip's x-center is computed based on the clip/control's value. The [clip.xCenter] and [clip.yCenter] flags are valid only for [clip=Ellipse] or [clip=Pie].
  • [clip.yCenter] {string}, indicates the y-position / expression of the center of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (CenterY/GetCenterY()/SetCenterY(value) method of LayerClip). For instance, [clip.yCenter=128], defines clip's y-center to 128 pixels, while [clip.yCenter=value] specifies that the clip's y-center is computed based on the clip/control's value. The [clip.xCenter] and [clip.yCenter] flags are valid only for [clip=Ellipse] or [clip=Pie].
  • [clip.start] {string}, indicates the pie's starting angle (degree) relative to the y-axis. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (StartAngle/GetStartAngle()/SetStartAngle(value) method of LayerClip). For instance, [clip.start=90], defines the pie's starting angle to 90 degree, or [clip.start=value] defines the pie's starting angle based on the clip/control's value. The [clip.start] and [clip.sweep] flags are valid only for [clip=Pie].
  • [clip.sweep] {string}, indicates the pie's sweep angle (degree) relative to clip's starting angle. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (SweepAngle/GetSweepAngle()/SetSweepAngle(value) method of LayerClip). For instance, [clip.sweep=45], defines the pie's sweep angle to 45 degree, or [clip.sweep=value] defines the pie's sweep angle based on the clip/control's value. The [clip.start] and [clip.sweep] flags are valid only for [clip=Pie].
Returns:
Returns the control's layers collection
Type
Layers
Example
"[key=subitems][drag=sweep],[key=items][drag=sweep],[key=parent][drag=nothing]", defines "subitems", "items" and "parent" portions of the control. "sweep" specifies that once the users drag a layer the control's displaying-angle to show the items is changed.
 "[key=subitems][drag=sweep],[key=items][drag=sweep],[key=parent][drag=nothing],rgba(0,0,0,0.25)[key=pointer][clip=Pie][clip.sweep=1][rotateClip=1]", defines "subitems", "items", "parent" and "pointer" sections of the control. The "pointer" layer is shown only when the mouse pointer hovers an item within the control.
 "red[drag=rotate],rgba(0,255,0,0.75)[key=green][clip=ellipse][width=width/2][height=height/2][left=width/4][top=height/4][drag=move]" {string}, builds a control using two layers red and 75% green (clipped to an ellispe, which can be moved)

SetLocked(value)

The SetLocked() method locks or unlocks the control.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is locked(protected) or unlocked
Example
false {boolean}, unlocks the control (can select any item)
  true {boolean}, locks the control (can't select any item)

SetMinVisibleCount(value)

The SetMinVisibleCount() method sets the minimum number of items being visible on the radial menu.
Parameters:
Name Type Description
value number Indicates a number that defines the minimum number of items being visible on the radial menu.
Example
4 {number}, specifies that 4 is the minimum number of items being visible on the radial menu
 8 {number}, specifies that 8 is the minimum number of items being visible on the radial menu

SetOptions(nOptions, bIncludeAll) → {boolean}

The SetOptions() method applies new options to the RadialMenu element
Parameters:
Name Type Description
nOptions object Specifies an object of RadialMenu.Options type that indicates the new options to apply
bIncludeAll boolean Indicates whether all fields of nOptions are included in the element's oOpts object
Returns:
Returns true, if there were options applied to the element
Type
boolean

SetParentSize(value)

The SetParentSize() method changes the size to display the "parent" portion of the control The expression supports the following keywords:
"value", indicates the radius in pixels, of the radial menu.
Parameters:
Name Type Description
value string A string expression that defines the expression to determine the size to display the "parent" portion of the control.
Example
null {null}, indicates that parentSize field is ignored, and so the default value is used
 "24" {string}, specifies that the size of "parent" portion of the control is always 24-pixels
 "value/2" {string}, indicates that the size of "parent" portion is half of the control's radius

SetReadOnly(value)

The SetReadOnly() method sets the control in read-only mode
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is read-only
Since:
  • 1.8
Example
false {boolean}, the user can select any item
  true {boolean}, the user can not select the items

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.
Parameters:
Name Type Description
value string A string expression that defines the shapes each part of the control can display. The format of shapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ 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 (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ 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( such as rgb(0,0,255) that defines a blue background)
    ◦ 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) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ 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 (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ 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) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.RadialMenu object (while it starts with a lowercase letter, such as subitems which refers to exontrol.Shapes.RadialMenu.subitems shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on (as defined bellow)
The shapes property supports any of the following parts:
  • "subitems" , defines the visual appearance for background/sub-items portion of the control.
  • "items" , defines the visual appearance for items portion of the control.
  • "parent" , defines the visual appearance for parent portion of the control.
Example
"red(parent)", "#FF0000(parent)", "rgb(255,0,0)(parent)", "rgba(255,0,0,1)(parent)" {string}, shows the parent on a red-square
 '{"fillColor":"red","primitive":"Circle"}(parent)' {string}, , shows the parent on a red-circle
 "dfsubitems(subitems),dfitems(items),dfparent(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.dfsubitems object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.dfitems object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.dfparent object defines the visual appearance of "parent" portion of the control
 "subitems(subitems),items(items),parent(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.subitems object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.items object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.parent object defines the visual appearance of "parent" portion of the control
 "xxx(subitems),yyy(items),zzz(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.xxx object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.yyy object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.zzz object defines the visual appearance of "parent" portion of the control

SetShowLayers(value)

The SetShowLayers() method the only layers to be shown within the control.
Parameters:
Name Type Description
value string A String expression that could be:
  • "all", specifies that all visible layers are shown. The Visible property indicates the visible layers
  • "", no layer is shown in the control, no matter of the layer's Visible property
  • "n1,n2,n3,..." specifies the list of layers to be shown, no matter of the layer's Visible property, where n1, n2, ... are numbers ( indicating the index of the layer to be shown ). For instance "0" specifies that just the layer with the index 0 is show, "0,1,4", indicates that just layers with the specified index are displayed.
Example
null {null}, specifies that all visible layers are shown (equivalent of "all")
 "" {string}, indicates than no layes is shown
 "items,parent" {string}, indicates that the control shows just the "items" and "parent" layers/sections

SetSmooth(value)

The SetSmooth() method changes the time in ms the control goes from one layout to another (0 indicates no smooth-transition is performed).
Parameters:
Name Type Description
value number Indicates the time in ms the control goes from one layout to another.
Example
0 {number}, no smooth changes once the control goes from a layout to another
  250 {number}, specifies that a smooth-transition is performed from a layout to another for 250 ms.

SetSubItemsSize(value)

The SetSubItemsSize() method changes the size to display the sub-items zone The expression supports the following keywords:
"value", indicates the radius in pixels, of the radial menu.
Parameters:
Name Type Description
value string A string expression that defines the expression to determine the size to display the "subitems" portion of the control.
Example
null {null}, indicates that subItemsSize field is ignored, and so the default value is used
 "24" {string}, specifies that the size of "subitems" portion of the control is always 24-pixels
 "value/2" {string}, indicates that the size of "subitems" portion is half of the control's radius

SetSweepOnSelect(value)

The SetSweepOnSelect() method specifies whether browsed-items are arranged around the selected radial-item
Parameters:
Name Type Description
value boolean A boolean value that specifies whether browsed-items are arranged around the selected radial-item
Example
false {boolean}, specifies that the browsed-items are not arranged around the selected radial-item
 true {boolean}, specifies that the browsed-items are arranged around the selected radial-item

SetTfi(value)

The SetTfi() method sets the font attributes to apply on captions of the control.
Parameters:
Name Type Description
value string | object Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The value 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 string value 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 value 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 mode as a value between 0 and 4
    • 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.
Example
null {null}, the tfi field is ignored
  "bold monospace 16 &lt;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

SetValue(value) → {number}

The SetValue() method changes the layer that determines the control's Value property
Parameters:
Name Type Description
value number Specifies the index or the key of the layer whose value determines the control's Value property.
Returns:
Returns the control's value
Type
number
Example
0 {number}, change the control's Value to 0, so it could be a zero-offset or a zero-rotation angle, depending on how the layer interprets the value
 (new Date() - Date.Today())/1000/24/60/60 {number}, sets the control's value to current-time as a number between 0 and 1.

SetWheelChange(value)

The SetWheelChange() method changes the amount the control scrolls when the user rolls the mouse wheel.
Parameters:
Name Type Description
value number A value that specifies the amount the control scrolls when the user rolls the mouse wheel.
Example
0 {number}, locks any action the mouse's wheel performs
  360/8 {number}, rotates the control +/-45 degree once the mouse's wheel is rotated once

Shuffle(ratio)

The Shuffle() method arranges randomly all layers within the control.
Parameters:
Name Type Description
ratio number specifies how far each element is randomized relative to the current size of the layout. For instance, 0 indicates that the element is not moved/shuffled, while 1, indicates that the element can randomize its position up to one width/height.

Smooth(callback, thisArg)

The Smooth() method performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback. The Smooth() method performs smooth changes for change of any of the following properties for any layer, while it is called during the Smooth's callback:
  • Value/SetValue(value) {number}, sets the layer's value
  • DefaultOffsetX/SetDefaultOffsetX(value) {number}, sets a value that indicates the default x-offset of the layer.
  • DefaultOffsetY/SetDefaultOffsetY(value) {number}, sets a value that indicates the default y-offset of the layer.
  • OffsetX/SetOffsetX(value) {number}, sets a value that indicates the x-offset of the layer.
  • OffsetY/SetOffsetY(value) {number}, sets a value that indicates the y-offset of the layer.
  • DefaultRotateAngle/SetDefaultRotateAngle(value) {number}, specifies the default angle to rotate the layer (degree)
  • RotateAngle/SetRotateAngle(value) {number}, specifies the angle to rotate the layer (degree)
Shorty, the Smooth() method records the changes of the control (offset or rotation-angle for any layer) during the Smooth's callback, and performs smooth changes for properties being changed only
Parameters:
Name Type Description
callback callback Indicates a callback function that generates the new layout for the control, such changing the control's value
thisArg any Specifies the value of this keyword for callback function.
Example
oRadialMenu.Smooth( function()
        {
            this.Value += 5; // changes the control's value by 5
        }, oRadialMenu );

Unshuffle()

The Unshuffle() method restores the layers of the control in case they were shuffled.

Update(callback, thisArgopt)

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends.
Parameters:
Name Type Attributes Description
callback callback Indicates a callback to perform changes within the control
thisArg any <optional>
Specifies the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of RadialMenu type

Events

onbrowse

The onbrowse() method notifies once a new item has been browsed.
Parameters:
Name Type Description
oEvent Item Indicates an object of Root or Item type that defines the item being browsed
Example
The following samples display the item being currently browsed:

oRadialMenu.onbrowse = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("onbrowse", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

onchange

The onchange() method occurs when the layer's value is changed.
Parameters:
Name Type Description
oEvent Layer Specifies an object of Layer type whose value/offset-x/offset-y/rotation-angle has been changed
Example
The following samples display the layer whose value is changed:

oRadialMenu.onchange = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

onclick

The onclick() method occurs once the user clicks a selectable layer
Parameters:
Name Type Description
oEvent object Holds information about the click event as an object of {layer,dblClick,button,modifiers} type.
Properties
Name Type Description
layer Layer The layer field specifies null, or the layer being clicked
pie object The pie field indicates null or the pie from the cursor as an object of {index,startAngle,sweepAngle} as explained:
  • pie.index {number}, specifies the index of the pie from the cursor
  • pie.startAngle {number}, indicates the angle (radian) the pie starts from
  • pie.sweepAngle {number}, specifies the sweep angle (radian) of the pie, so the startAngle + sweepAngle always determines the angle the pie ends
item Item The item field gets the references to an object of Root / Item type that holds information about the item at the cursor.
hitTest number The hitTest field specifies the hit-test code at cursor. Specifies a numeric value with the following meaning:
  • 0, indicates that the cursor hovers no item, parent or pie
  • 1, indicates that the cursor hovers hovers the "items" layer
  • 2, indicates that the cursor hovers hovers the "sub-items" layer
  • 4, indicates that the cursor hovers hovers the "parent" layer
dblClick boolean The dblClick field indicates whether a click or double-click event occurs
button number The buttons field specifies which buttons are pressed. A number representing of the following values.
  • 1 : Primary button (usually left)
  • 2 : Secondary button (usually right)
  • 4 : Auxilary button (usually middle or mouse wheel button)
modifiers number The modifiers field specifies the modifier keys for the current event. A number that indicates a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys.
Example
The following samples display information once the user clicks a layer:

oRadialMenu.onclick = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

ondrag

The ondrag() method occurs once the layer has been dragged to a new position.
Parameters:
Name Type Description
oEvent object Holds information about the layer being dragged, as an object of {layer,event} type
Properties
Name Type Description
layer Layer Indicates an object of Layer type that specifies the layer being dragged
event MouseEvent | TouchEvent defines the event that generated the current operation
Example
The following samples display information while draging (move, rotate or swipe) the layer:

oRadialMenu.ondrag = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("ondrag", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

ondragend

The ondragend() method notifies that dragging the layer ends
Parameters:
Name Type Description
oEvent object Holds information about the layer being dragged, as an object of {layer,event} type
Properties
Name Type Description
layer Layer Indicates an object of Layer type that specifies the layer being dragged
event MouseEvent | TouchEvent defines the event that generated the current operation
Example
The following samples display information while the user ends draging (move, rotate or swipe) a layer:

oRadialMenu.ondragend = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("ondragend", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

ondragstart

The onDragStart() method notifies that the user starts draggging the layer
Parameters:
Name Type Description
oEvent object Holds information about the layer to drag, as an object of {layer,cancel,event} type
Properties
Name Type Description
layer Layer Indicates an object of Layer type that specifies the layer being dragged
cancel boolean Specifies whether the drag operation should cancel
event MouseEvent | TouchEvent defines the event that generated the current operation
Example
The following samples display information once the user starts draging (move, rotate or swipe) a layer:

oRadialMenu.ondragstart = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("ondragstart", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

onexpand

The onexpand() method occurs once the control is expanded or collapsed
Parameters:
Name Type Description
oEvent Item Specifies the root item of the control
Example
The following samples display the root item once it is expanded or collapsed:

oRadialMenu.onexpand = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("onexpand", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

onlayerin

The onlayerin() method notifies that the cursor enters the layer
Parameters:
Name Type Description
oEvent Layer Indicates an object of Layer that specifies the layer
Example
The following samples display the layer the cursor enters in:

oRadialMenu.onlayerin = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("onlayerin", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

onlayerout

The onlayerout() method notifies that the cursor exits the layer.
Parameters:
Name Type Description
oEvent Layer Indicates an object of Layer that specifies the layer
Example
The following samples display the layer once the cursor leaves it:

oRadialMenu.onlayerout = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("onlayerout", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type

onselect

The onselect() method notifies once the user selects a new item
Parameters:
Name Type Description
oEvent Item Indicates an object of Item type that defines the item being selected
Example
The following samples display the item being selected:

oRadialMenu.onselect = function (oEvent)
{
 console.log(oEvent);
}

or

oRadialMenu.Listeners.Add("onselect", function (oEvent)
{
 console.log(oEvent);
})

where oRadialMenu is an object of RadialMenu type