JSDoc: Class: RadialMenu

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.

The ExRadialMenu/JS component supports/inherits all objects, properties, members, methods and events of the ExGauge/JS component.

Every option of the RadialMenu.Options and Gauge.Options types 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 Options type that defines different options to display the control

Requires:

module:exontrol.commmon.min.js
module:exontrol.gauge.min.js

Requires

module:exontrol.commmon.min.js
module:exontrol.gauge.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:

(static) version :string

The version field defines the version of the control

Type:

string

Methods

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

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

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

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,content,image,caption} 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

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

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

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

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

GoBack()

The GoBack() method advances to the parent item.

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:

Returns:

Returns null or an object of Item type with specified key / caption that descends from the item.

Type: Item

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.

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.

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

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,content,image,caption} 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

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.

value

string

"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.

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

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

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.

Parameters:

Name Type Description

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.

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

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

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

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

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