Options class (Bezier)

Bezier.Options()

new Options()

The Bezier.Options type defines different options you can apply on the control.
Options

Members

(static) bezierCoord :any

The bezierCoord fiels defines the control points of the current bezier object. The bezierCoord field can be any of the following:
  • {string}, defines the name of a predefined transition as any of: "linear", "ease", "ease-in", "ease-out", "ease-in-out", "ease-in-out-expo" or "swipe"
  • {array}, specifies an array of [x1,y1,x2,y2] type that defines the control points P1(x1,y1), P2(x1,y1) of the bezier curve.
Type:
  • any
Example
"ease" {string}, generates an "ease" bezier transition
 [1,0,0,1] {array}, shows a custom bezier curve
bezierCoord

(static) bezierScaleRangeX :object

The bezierScaleRangeX field specifies an object of {min,max} type that limits the number of units to be displayed on the x-axis.
Type:
  • object
bezierScaleRangeX

(static) bezierScaleRangeY :object

The bezierScaleRangeY field specifies an object of {min,max} type that limits the number of units to be displayed on the y-axis.
Type:
  • object
bezierScaleRangeY

(static) bezierScaleX :number

The bezierScaleX field specifies the number of units to be displayed on the x-axis.
Type:
  • number
Example
1 {number}, the units on x-axis are 0 and 1
 5 {number}, the units on x-axis are 0, 1, 2, 3, 4 and 5
bezierScaleX

(static) bezierScaleY :number

The bezierScaleY field specifies the number of units to be displayed on the y-axis.
Type:
  • number
Example
1 {number}, the units on y-axis are 0 and 1
 5 {number}, the units on y-axis are 0, 1, 2, 3, 4 and 5
bezierScaleY

(static) clipBezier :boolean

The clipBezier field specifies if the control clips the entire bezier to its client area.
Type:
  • boolean
Example
false {boolean}, shows the bezier curve un-clipped
  true {boolean}, clips the bezier curve
clipBezier

(static) colorBezier :string

The colorBezier field defines the color to show the bezier's curve.
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color (hides the bezier curve)
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorBezier

(static) colorBezierControl :string

The colorBezierControl field specifies the CSS color to display the control points.
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color (hides the bezier control points)
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorBezierControl

(static) colorBezierScale :string

The colorBezierScale field defines a color to show the lines of the scale.
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorBezierScale

(static) colorBezierScaleControl :string

The colorBezierScaleControl field specifies the color to display the control-scale point.
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorBezierScaleControl

(static) colorBezierValue :string

The colorBezierValue field defines the color to show the background of the values on the bezier curve (while the value is between margins).
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorBezierValue

(static) colorBezierValueOutside :string

The colorBezierValueOutside field defines the color to show the background of the values on the bezier curve (while the value is outside of margins).
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorBezierValueOutside

(static) colorLineBezierControl :string

The colorLineBezierControl field defines the CSS color to show the line between control point and bezier's origin.
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color (hides the line between control point and bezier's origin)
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorLineBezierControl

(static) colorShadowBezierValue :string

The colorShadowBezierValue field specifies the shadow's color for bezier values (while the value is between margins).
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorShadowBezierValue

(static) colorShadowBezierValueOutside :string

The colorShadowBezierValueOutside field specifies the shadow's color for bezier value (while the value is outside of margins).
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorShadowBezierValueOutside

(static) colorTextBezierScale :string

The colorTextBezierScale field defines the color to display the scale (excluding the margins).
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorTextBezierScale

(static) colorTextBezierValue :string

The colorTextBezierValue field defines the color to show the values on the bezier curve (while the value is between margins).
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorTextBezierValue

(static) colorTextBezierValueOutside :string

The colorTextBezierValueOutside field defines the color to show the values on the bezier curve (while the value is outside of margins).
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorTextBezierValueOutside

(static) colorTextMarginsBezierScale :string

The colorTextMarginsBezierScale field defines the CSS color to display the margins of the scale.
Type:
  • string
Example
null {null}, defines a black-color
 "transparent" {string}, defines a transparent-color
 "red" {string}, defines a red-color
 "rgb(255,0,0)" {string}, defines a red-color
 "rgba(255,0,0,0.5)" {string}, defines a 50% red-color
colorTextMarginsBezierScale

(static) formatBezierValue :string

The formatBezierValue field specifies a general expression that defines the values to be shown on the curve, based on the progress. The formatBezierValue expression supports the following keywords:
  • "value" {number}, indicates a value between 0 and 1, indicating the time,
  • "scale" {number}, specifies the count of elements on the progress scale.
.
Type:
  • string
Example
null {null}, shows values in default format
 "``" {string}, no values are displayed
 "value format 2" {string}, shows the value with 2 decimals
 "scale * value format 2" {string}, shows the scaled values with 2 decimals
formatBezierValue

(static) formatColorBezierValue :string

The formatColorBezierValue field specifies a general expression that defines the intensity of the color to show the values, based on the progress (see also colorBezierValue) The formatColorBezierValue expression supports the following keywords:
  • "value" {number}, a numeric expression that specifies the x-position to request the color (a value between 0 and 1)
  • "color" {number}, A RGB component to be converted (a value between 0 and 255)
The formatColorBezierValue property converts the RGB components of colorBezierValue property. The colorBezierValue property defines the color to show the background of the values on the bezier curve (while the value is between margins).
Type:
  • string
Example
"0", indicates a black color or rgb(0,0,0) 
 "255", indicates a white color or rgb(255,255,255) 
 "255*value", returns a value between 0 and 255 that defines the RGB component based on the time/value.
 "color", indicates the original color (colorBezierValue property)
formatColorBezierValue

(static) highlightBezierScaleProgress :boolean

The highlightBezierScaleProgress field highligths the value on the bezier, on the progress scale as well.
Type:
  • boolean
Example
false {boolean}, unhighligths the values on axis
  true {boolean}, highligths the values on axis
highlightBezierScaleProgress

(static) locked :boolean

The locked field indicates whether the control is locked(protected) or unlocked.
Type:
  • boolean
Example
false {boolean}, unlocks the control
  true {boolean}, locks the control (the user can not change the bezier control points)
locked

(static) pArgBezierValue :object

The pArgBezierValue field holds different properties to customize the object's primitive (see also primitiveBezierValue). The pArgBezierValue parameter can include different properties for predefined primitive such as:
  • exontrol.D.P.RoundRect or "RoundRect" => {x: 24, y:24}
  • exontrol.D.P.Arc or "Arc" => {startAngle: 0, sweepAngle: Math.PI/2}
  • exontrol.D.P.Pie or "Pie" => {startAngle: 0, sweepAngle: Math.PI/2}
  • exontrol.D.P.PieRing or "PieRing" => {startAngle: 0, sweepAngle: PI/2, width: 10}
  • exontrol.D.P.EllipticPolygon or "EllipticPolygon" => {edges: 6, startAngle: -Math.PI/2}
  • exontrol.D.P.Polygon or "Polygon" => {points: [[0,100],[50,0],[100,100]]}
  • exontrol.D.P.Star or "Star" => {edges: 6, startAngle: -Math.PI/2, deep: 0.5, tilt: 0.5}
  • exontrol.D.P.Star or "Spline" => {points: [[0,100],[50,0],[100,100]], tension: 0, alpha: 0.5, closed: false}
.
Type:
  • object
pArgBezierValue

(static) primitiveBezierValue :string

The primitiveBezierValue field defines the type of frame the object is displaying (see also pArgBezierValue) The primitiveBezierValue could be any of the following predefined values:
  • "Rect" {string}, defines a rectangular-object
  • "RoundRect" {string}, defines a round rectangular-object. The pArgBezierValue.x, pArgBezierValue.y define the radius of round-corners.
  • "Ellipse" {string}, defines an elliptic-object
  • "Pie" {string}, defines a pie-object. The pArgBezierValue.startAngle property defines the angle (radians) the pie starts from. The pArgBezierValue.sweepAngle property defines the length (radians) of the pie.
  • "Arc" {string}, defines an arc-object. The pArgBezierValue.startAngle property defines the angle (radians) the arc starts from. The pArgBezierValue.sweepAngle property defines the length (radians) of the arc.
  • "Oval" {string}, defines an oval-object.
  • "Circle" {string}, defines a circle-object.
  • "Triangle" {string}, defines a triangle-object.
  • "EllipticPolygon" {string}, defines an elliptic-polygon-object. The pArgBezierValue.edges property defines the number of edges within the elliptic-polygon. The pArgBezierValue.startAngle property defines the angle (radians) the elliptic-polygon starts from.
  • "Polygon" {string}, defines a polygon-object. The pArgBezierValue.points property defines points of the polygon.
  • "Star" {string}, defines a star-object. The pArgBezierValue.edges property defines the number of edges of the star. The pArgBezierValue.startAngle property defines the angle (radians) the star-object starts from. The pArgBezierValue.deep defines the star's deepness, while pArgBezierValue.tilt defines the star's tile as a number betwee 0 and 1
  • "Spline" {string}, defines the Catmull-Rom spline-primitive (a curve that goes through its control points). The pArg.points property defines the control-points of the curve. The pArg.tension property specifies the tension of the curve, as a value ptFrom 0(round) to 1 (rectangular). The pArg.alpha specifies the alpha of the curve (0.5 by default), while pArg.closed defines a closed curve
  • "Summary" {string}, defines a summary-object (outlines the summary-bar)
  • "Deadline" {string}, defines a deadline-object (outlines the deadline-bar)
.
Type:
  • string
primitiveBezierValue

(static) readOnly :boolean

The readOnly field indicates whether the control is read-only (no changes are allowed).
Type:
  • boolean
Example
false {boolean}, unlocks the control
  true {boolean}, locks the control (the user can not change the bezier control points)
readOnly

(static) restrictBezier :boolean

The restrictBezier field specifies whether the control points of the bezier curve are limited to [0,1] range.
Type:
  • boolean
Example
false {boolean}, no limit for P1 and P2 control points
  true {boolean}, limits the P1 and P2 control points to [0,1] range
restrictBezier

(static) showBezierControl :boolean

The showBezierControl field specifies whether the P1 and P2 control points of the bezier are shown on the client.
Type:
  • boolean
Example
false {boolean}, hides the P1 and P2 control points of the bezier
 true {boolean}, shows the P1 and P2 control points of the bezier
showBezierControl

(static) showBezierCoord :boolean

The showBezierCoord field indicates whether the control displays the current coordinates of the bezier being displayed ( P1 and P2 control points).
Type:
  • boolean
Example
false {boolean}, hides the bezier's coordinates
  true {boolean}, shows the bezier's coordinates
showBezierCoord

(static) showBezierDuplicateControl :boolean

The showBezierDuplicateControl field indicates whether the P1 and P2 control points (duplicate) of the bezier are shown on the client. A duplicate control point is shown on the bezier's client edge, when the control point does not fit the control area.
Type:
  • boolean
Example
false {boolean}, hides the P1 and P2 control points (duplicate) of the bezier
 true {boolean}, shows the P1 and P2 control points (duplicate) of the bezier
showBezierDuplicateControl

(static) showBezierScale :boolean

The showBezierScale field indicates whether the scale time/progress is displayed.
Type:
  • boolean
Example
false {boolean}, hides the scale time/progress
  true {boolean}, shows the scale time/progress
showBezierScale

(static) showBezierScaleControl :boolean

The showBezierScaleControl field indicates whether the control displays a control-scale point, that allows you to change the scale to display the values on the bezier.
Type:
  • boolean
Example
false {boolean}, hides the control-scale point
  true {boolean}, shows the control-scale point
showBezierScaleControl

(static) showBezierValue :boolean

The showBezierValue field indicates whether the values are shown on the bezier curve.
Type:
  • boolean
Example
false {boolean}, hides the values are shown on the bezier curve
 true {boolean}, shows the values are shown on the bezier curve
showBezierValue

(static) sizeBezier :number

The sizeBezier fiels defines the size of the bezier's curve in pixels.
Type:
  • number
Example
1 {number}, shows a bezier curve of 1-pixels wide
 5 {number}, shows a bezier curve of 5-pixels wide
sizeBezier

(static) sizeBezierControl :array

The sizeBezierControl field defines the size in pixels to display the control points.
Type:
  • array
Example
null {null}, defines the default size for bezier control points
 [0,0] {array}, defines the empty bezier control points
 [4,4] {array}, defines the a 4x4 bezier control points
sizeBezierControl

(static) sizeHoverPointControl :number

The sizeHoverPointControl field defines the size to increase the bezier's control points when the mouse pointer hovers it.
Type:
  • number
Example
null {null}, indicates the sizeHoverPointControl's default value
 0 {number}, no change of the size to display the bezier's control points when the mouse pointer hovers it
 4 {number}, increases by 4 the size to display the bezier's control points when the mouse pointer hovers it
sizeHoverPointControl

(static) tfi :string|object

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

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

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

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

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

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

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient 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
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
tfi

(static) wheelChange :number

The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel.
Type:
  • number
Example
0 {number}, locks any action the mouse's wheel performs
  5 {number}, increases the control's value by 5 once the user rotates the mouse's wheel
wheelChange