API / geotoolkit / gauges / LinearGauge / LinearGauge
gauges.LinearGauge.LinearGauge
Implements a class which defines a linear gauge. Linear gauge is a rectangular shape (possibly with round corners), which represents a range of data. If horizontal - range is represented from left to right, if vertical, range is represented from bottom to top (always from min to max). The linear gauge supports adding one axis which can be placed on either sides of the main shape, or in the center. A indicator fill and a needle are the tools which are used to visualize the current value of the gauge. Fill is filling the gauge shape from min to the current value on the axis. Needle positions itself on the current value on top of the indicator shape.
↳
LinearGauge
Constructors
Methods
Css Properties
| Name | Type | Description |
|---|---|---|
animationfunction | Functions | Name of an easing function in function registry which will define the animation behavior |
animationtime | number | |
background | BackgroundStyleOptions | Properties for rectangular background of the gauge |
background-fillstyle | string | Background fillstyle |
background-fillstyle | FillStyle | Background fillstyle |
background-fillstyle-color | string | Color in CSS form |
background-fillstyle-evenoddmode | boolean | Even-odd fill mode |
background-fillstyle-fillpattern | Pattern | Pattern |
background-fillstyle-fillpattern-containername | string | An optional container name, which creates an image pattern. This parameter is used for serialization if you want to save are reference to pattern instead of the pattern itself |
background-fillstyle-fillpattern-patternname | string | Name of this pattern for indexing |
background-fillstyle-fillpattern-scalable | boolean | Flag that sets scalability of the pattern coordinates, or relative to the shape it is filling (It is not supported) |
background-fillstyle-foreground | string | Foreground color |
background-fillstyle-pattern | Pattern | Pattern |
background-linestyle | string | Background linestyle |
background-linestyle | LineStyle | Background linestyle |
background-linestyle-color | string | Color in CSS form |
background-linestyle-fill | string | Optional fill style to be used to fill lines generated with this style |
background-linestyle-fill | FillStyle | Optional fill style to be used to fill lines generated with this style |
background-linestyle-linecap | CapStyle | The line cap style |
background-linestyle-linedashoffset | number | Line dash offset of dashed line |
background-linestyle-linejoin | JoinStyle | The line join style |
background-linestyle-pixelsnapmode | boolean | Pixel Snap Mode, default( |
background-linestyle-scalable | boolean | True if width should depend on transformation |
background-linestyle-unit | string | Optional unit for the width |
background-linestyle-width | number | string | The line thickness |
background-visible | boolean | Background visibility |
bounds | Rect | Bounds of the gauge in parent model limits. Will override x,y,widht,height |
bounds-height | number | Height |
bounds-readonly | boolean | Readonly |
bounds-width | number | Width |
bounds-x | number | Left |
bounds-y | number | Top |
clipping | boolean | Container group clipping |
clipstyle | ClipStyle | Clipping style |
clipstyle-evenodd | boolean | True if evenodd mode is on ('nonzero' mode otherwise) |
clipstyle-geometry | GraphicsPath | Clipping geometry |
clipstyle-geometry-bounds | Rect | Bounds |
clipstyle | GraphicsPath | Clipping style |
cssclass | string | The css class name of this node |
csscursor | string | CSS cursor associated with node |
cssstyle | string | CSS style to be applied to inserted elements |
fillstyle | string | A new fill style |
fillstyle | FillStyle | A new fill style |
height | number | Height of the gauge in its parent model limits |
id | string | number | Id of the node, its a unique identifier |
indicator | IndicatorOptions | Properties pertaining to indicator and its fill |
indicator-backgroundfill | string | Fill style of the background of indicator |
indicator-backgroundfill | FillStyle | Fill style of the background of indicator |
indicator-backgroundline | string | Line style of the background of indicator |
indicator-backgroundline | LineStyle | Line style of the background of indicator |
indicator-cornerradius | number | string | Corner radius of the indicator shape in CSS notation, relative to the width of the shape. (50% will create a circle) |
indicator-fillposition | DynamicElementPosition | Layer position of the fill |
indicator-fillwidth | number | string | Fill width |
indicator-height | number | string | Height of the indicator in CSS format, relative to the gauge height |
indicator-valuefillstyle | string | Fill style of the value fill in the indicator |
indicator-valuefillstyle | FillStyle | Fill style of the value fill in the indicator |
indicator-valuelinestyle | string | Line style of the value fill in the indicator |
indicator-valuelinestyle | LineStyle | Line style of the value fill in the indicator |
indicator-width | number | string | Width of the indicator in CSS format, relative to the gauge width |
linestyle | string | Line style |
linestyle | LineStyle | Line style |
localtransform | Transformation | Local transformation |
localtransform-dx | number | X axis translation |
localtransform-dy | number | Y axis translation |
localtransform-xx | number | X scale |
localtransform-xy | number | Xy skew |
localtransform-yx | number | Yx skew |
localtransform-yy | number | Y scale |
margins | number | string | It has properties for specifying the margins for each side |
name | string | Name of the node. It is often used for debugging purposes or to simplify queries |
namestyle | NameOptions | Properties of the test displaying name of the gauge |
namestyle-alignment | AnchorType | Defines where in the region the name text will be positioned |
namestyle-color | string | Color of name text |
namestyle-displaystrategy | ValueDisplayStrategies | A display strategy to define how the name text fits the region it is rendered in |
namestyle-font | string | Font of name text |
namestyle-position | Regions | Region in which to render the name text |
namestyle-properties | Options | See |
namestyle-properties-cssclass | string | The css class name of this node |
namestyle-properties-id | string | number | Id of the node, its a unique identifier |
namestyle-properties-name | string | Name of the node. It is often used for debugging purposes or to simplify queries |
namestyle-properties-selectable | boolean | Selectable node, a boolean to determine if selection should consider this node |
namestyle-properties-tag | any | Custom information associated with node. It is a user object which can be used by client code to store information or attach an application object to the shape |
namestyle-properties-visible | boolean | Visibility of the node, a boolean to determine if the node should be rendered or not |
namestyle-properties-z-index | number | Define node z-index |
namestyle-properties | Options | See |
namestyle-properties-clipstyle | ClipStyle | Clipping style |
namestyle-properties-clipstyle | GraphicsPath | Clipping style |
namestyle-properties-csscursor | string | CSS cursor associated with node |
namestyle-properties-cssstyle | string | CSS style to be applied to inserted elements |
namestyle-properties-localtransform | Transformation | Local transformation |
namestyle-properties-margins | number | string | It has properties for specifying the margins for each side |
namestyle-properties-opacity | number | Node opacity (from 0 to 1). If it is undefined or null it inherits property from the parent. It changes globalAlpha on the rendering context |
namestyle-properties-opacityblendmode | BlendMode | Node opacity mode to blend it |
namestyle-properties-scalescrollstrategy | ScaleScrollStrategy | Scale scroll strategy |
namestyle-properties-scalescrollstrategy-enabled | boolean | Enable flag |
namestyle-properties-transform | string | Additional CSS transformation applied to node or 'none' |
namestyle-properties-transform | Transformation | Additional CSS transformation applied to node or 'none' |
namestyle-properties | Options | See |
namestyle-properties-fillstyle | string | Style applied on fill |
namestyle-properties-fillstyle | FillStyle | Style applied on fill |
namestyle-properties-linestyle | string | Style applied on outline |
namestyle-properties-linestyle | LineStyle | Style applied on outline |
namestyle-properties | Options | See |
namestyle-properties-alignment | AnchorType | Alignment according to the anchor point |
namestyle-properties-ax | number | Anchor x position |
namestyle-properties-ay | number | Anchor y position |
namestyle-properties-height | number | Shape height |
namestyle-properties-ispointingup | boolean | Defines whether the shape is always pointing up |
namestyle-properties-layoutstyle | LayoutStyle | Layout style to specify how to lay out shape |
namestyle-properties-layoutstyle-constraint | SizeConstraint | Layout constrains |
namestyle-properties-layoutstyle-flexgrow | number | Number specifying how much the item will grow relative to the rest of the items inside the same container |
namestyle-properties-layoutstyle-flexshrink | number | Number specifying how much the item will shrink relative to the rest of the items inside the same container |
namestyle-properties-layoutstyle-float | string | Float position |
namestyle-properties-layoutstyle-position | string | Layout position |
namestyle-properties-layoutstyle-size | number | string | Layout size |
namestyle-properties-maxdimension | Dimension | Maximum size for rendering |
namestyle-properties-maxdimension-height | number | Height of dimension |
namestyle-properties-maxdimension-width | number | Width of dimension or properties |
namestyle-properties-mindimension | Dimension | Minimum size for rendering |
namestyle-properties-preserveaspectratio | boolean | Preserve aspect ratio of the anchored shape |
namestyle-properties-preservereadingorientation | boolean | Preserve reading orientation for local transform |
namestyle-properties-preserverightangle | boolean | Preserve right angle for local transformation |
namestyle-properties-rotationangle | number | Rotation angle at anchor |
namestyle-properties-sizeisindevicespace | boolean | Is coordinate in device space |
namestyle-properties-useminmaxdimensions | boolean | Use the min max dimensions to limit visual size |
namestyle-properties-width | number | Shape width |
namestyle-properties | Options | See |
namestyle-properties-autosize | boolean | Automatically fit shape bounds to text size, default is true Set it to false if you have more than one paragraph inside with different alignment |
namestyle-properties-ellipsisstring | string | String ellipsis that renders if ellipsis is true |
namestyle-properties-padding | number | |
namestyle-properties-paddingstyle | number | string | Inner padding style in device coordinates |
namestyle-properties-radius | number | Border radius in device coordinates |
namestyle-properties-showellipsis | boolean | Ellipsis flag |
namestyle-properties-sizemode | SizeMode | Text size mode, default value depends on width and height settings |
namestyle-properties-text | string | Text to display |
namestyle-properties-textstyle | string | TextStyle to display |
namestyle-properties-textstyle | TextStyle | TextStyle to display |
namestyle-properties-textstyle-alignment | AlignmentStyle | Alignment |
namestyle-properties-textstyle-autosize | boolean | Auto font size on high definition display |
namestyle-properties-textstyle-background | string | Background style |
namestyle-properties-textstyle-background | FillStyle | Background style |
namestyle-properties-textstyle-baseline | BaseLineStyle | Base line |
namestyle-properties-textstyle-color | string | Color in CSS form |
namestyle-properties-textstyle-fill | FillStyle | Text fill style |
namestyle-properties-textstyle-font | string | Font see |
namestyle-properties-textstyle-fonturl | string | The place from which the font will be loaded, if null - uses system fonts. It can be base64 with url keyword |
namestyle-properties-textstyle-lineheight | string | number | Line height |
namestyle-properties-textstyle-multiline | boolean | Allow multi-line text |
namestyle-properties-textstyle-outline | string | Outline style |
namestyle-properties-textstyle-outline | LineStyle | Outline style |
namestyle-properties-textstyle-overflowwrap | OverflowWrapStyle | Overflow wrap |
namestyle-properties-textstyle-strikethrough | string | Strikethrough style |
namestyle-properties-textstyle-strikethrough | LineStyle | Strikethrough style |
namestyle-properties-textstyle-textoverflow | TextOverflowStyle | Text overflow |
namestyle-properties-textstyle-underline | string | Underline style |
namestyle-properties-textstyle-underline | LineStyle | Underline style |
namestyle-properties-textstyle-underlineoffset | string | number | Underline offset distance |
namestyle-properties-textstyle-whitespace | WhiteSpaceStyle | White space |
namestyle-properties-textstyle-wordbreak | WordBreakStyle | Word break |
namestyle-properties-texttransform | Transform | Text-transform (uppercase, lowercase, capitalize) |
namestyle-properties-userheight | number | Height |
namestyle-properties-userwidth | number | Width |
namestyle-textstyle | string | Text style of the name text. If provided, overrides font and color |
namestyle-textstyle | TextStyle | Text style of the name text. If provided, overrides font and color |
namestyle-visible | boolean | Visibility of the name text |
needle | NeedleOptions | JSON with needle properties |
needle-geometry | Group | A group containing the geometry of the needle |
needle-geometry-automodellimitsmode | boolean | Auto model limits mode |
needle-geometry-bounds | Rect | Define position of the group in the parent |
needle-geometry-clipping | boolean | Enable clipping, this does not consider the clipstyle, it is related to bounds-clipping |
needle-geometry-clipstyle | ClipStyle | Clipping style |
needle-geometry-clipstyle | GraphicsPath | Clipping style |
needle-geometry-contentorientation | Orientation | Content orientation |
needle-geometry-cssclass | string | The css class name of this node |
needle-geometry-csscursor | string | CSS cursor associated with node |
needle-geometry-cssstyle | string | CSS style to be applied to inserted elements |
needle-geometry-fillstyle | string | Fill style |
needle-geometry-fillstyle | FillStyle | Fill style |
needle-geometry-horizontalflip | boolean | Horizontal axis goes from right to left |
needle-geometry-id | string | number | Id of the node, its a unique identifier |
needle-geometry-infinity | boolean | Mode to render outside the model limits |
needle-geometry-layoutstyle | LayoutStyle | Layout style to be used for parent layout |
needle-geometry-linestyle | string | Line style |
needle-geometry-linestyle | LineStyle | Line style |
needle-geometry-localtransform | Transformation | Local transformation |
needle-geometry-margins | number | string | It has properties for specifying the margins for each side |
needle-geometry-modellimits | Rect | Define inner model coordinates of the group |
needle-geometry-name | string | Name of the node. It is often used for debugging purposes or to simplify queries |
needle-geometry-opacity | number | Node opacity (from 0 to 1). If it is undefined or null it inherits property from the parent. It changes globalAlpha on the rendering context |
needle-geometry-opacityblendmode | BlendMode | Node opacity mode to blend it |
needle-geometry-padding | number | string | It has properties for specifying the padding for each side |
needle-geometry-pickingchildren | boolean | Enable picking children |
needle-geometry-scalescrollstrategy | ScaleScrollStrategy | Scale scroll strategy |
needle-geometry-selectable | boolean | Selectable node, a boolean to determine if selection should consider this node |
needle-geometry-tag | any | Custom information associated with node. It is a user object which can be used by client code to store information or attach an application object to the shape |
needle-geometry-transform | string | Additional CSS transformation applied to node or 'none' |
needle-geometry-transform | Transformation | Additional CSS transformation applied to node or 'none' |
needle-geometry-verticalflip | boolean | Vertical axis goes from bottom to top |
needle-geometry-viewcache | boolean | View cache to cache child nodes |
needle-geometry-visible | boolean | Visibility of the node, a boolean to determine if the node should be rendered or not |
needle-geometry-z-index | number | Define node z-index |
needle-height | number | string | |
needle-width | number | string | Width of needle in CSS format (height if gauge is horizontal) |
opacity | number | Node opacity (from 0 to 1). If it is undefined or null it inherits property from the parent. It changes globalAlpha on the rendering context |
opacityblendmode | BlendMode | Node opacity mode to blend it |
orientation | Orientation | Orientation of the gauge |
range | Range | Range displayed by this gauge |
range-high | number | Upper range boundary |
range-low | number | Lower range boundary |
range-max | number | |
range-min | number | |
scalescrollstrategy | ScaleScrollStrategy | Scale scroll strategy |
selectable | boolean | Selectable node, a boolean to determine if selection should consider this node |
tag | any | Custom information associated with node. It is a user object which can be used by client code to store information or attach an application object to the shape |
transform | string | Additional CSS transformation applied to node or 'none' |
transform | Transformation | Additional CSS transformation applied to node or 'none' |
units | string | Units in which data is represented in this gauge |
value | number | Value of the gauge to set at initiation |
valuestyle | ValueOptions | Properties of the test displaying name of the gauge |
valuestyle-alignment | AnchorType | Defines where in the region the value text will be positioned |
valuestyle-color | string | Color of name text |
valuestyle-displaystrategy | ValueDisplayStrategies | A display strategy to define how the value text fits the region it is rendered in |
valuestyle-font | string | Font of value text |
valuestyle-format | string | Format of value to set on number formatter |
valuestyle-position | Regions | Region in which to render the name text |
valuestyle-properties | Options | See |
valuestyle-properties | Options | See |
valuestyle-properties | Options | See |
valuestyle-properties | Options | See |
valuestyle-properties | Options | See |
valuestyle-textstyle | string | Text style of the value text. If provided, overrides font and color |
valuestyle-textstyle | TextStyle | Text style of the value text. If provided, overrides font and color |
valuestyle-visible | boolean | Visibility of the value text |
visible | boolean | Visibility of the node, a boolean to determine if the node should be rendered or not |
width | number | Width of the gauge in its parent model limits |
x | number | X coordinate of left top corner of the gauge in its parent model limits |
y | number | Y coordinate of left top corner of the gauge in its parent model limits |
z-index | number | Define node z-index |
Methods
▸ addAlarm(alarm): LinearGauge
Adds an alarm to the axis. Alarm handler will be called every time value set on the axis falls within alarm's range
▸ addAxis(name, axis, props?): LinearGauge
Adds an axis to the gauge
| Name | Type | Description |
|---|---|---|
name | string | Name of the new axis |
axis | AxisType | New axis to add |
Optional props | AxisOptions | JSON with axis properties |
▸ addCssClass(cssclass): LinearGauge
Adds new css class to node
| Name | Type | Description |
|---|---|---|
cssclass | string | string[] | css class name('s) |
this
▸ addCustomComponent(component, region, layer): LinearGauge
Adds a custom component to provided specified region. A custom component is a group with any geometry inside. The group bounds will be changed to fit the region it is added to. To maintain the size of your custom group it is better to add a custom region to the gauge.
| Name | Type | Description |
|---|---|---|
component | Group<Node> | A group with custom shape(s) |
region | string | Name of the region to add component to. If such region does not exist nothing will happen and the custom shape will not be added |
layer | string | name of gauge layer to add component |
NumericGauge.addCustomComponent
▸ addIndicatorRegion(name, region?): void
Adds a region, or an array of regions to the gauge. Regions of indicator are indexed by the name that you provide. if no such name has been passed into the method, it will be impossible to do any further manipulations with this region.
| Name | Type | Description |
|---|---|---|
name | string | string[] | Region | Region[] | Name of the region to add or a region which has the name set to it |
Optional region | Region | Region[] | Region(s) to add |
void
▸ addInvalidateHandler(handler): LinearGauge
Add invalidate handler
Deprecated
since 4.0, use Node.on instead
| Name | Type | Description |
|---|---|---|
handler | Function | handler to be notified about invalidation |
this
NumericGauge.addInvalidateHandler
▸ addRegion(name, region?): LinearGauge
Adds a new region to the gauge. Region is a rectangular area on the gauge defined by x, y, width and height all set in CSS format.
Throws
When name is not provided to the custom region
| Name | Type | Description |
|---|---|---|
name | string | Options | Name of the region or a json with region parameters (including name) |
Optional region | Options | JSON with region parameters |
▸ Protected applyOpacity(context): LinearGauge
This method is called to apply opacity if it is specified on the rendering context. The default implementation sets global alpha on the rendering context
| Name | Type | Description |
|---|---|---|
context | RenderingContext | Rendering Context |
this
▸ Protected applyResponsiveStyle(): void
Apply a responsive style rules it is exists
void
NumericGauge.applyResponsiveStyle
▸ checkCollision(context): boolean
Check if gauge falls within visible area on the screen
| Name | Type | Description |
|---|---|---|
context | RenderingContext | Rendering Context |
boolean
true if object is inside of rendarable area
▸ cleanAlarms(): LinearGauge
Removes all attached alarms
this
▸ clearAxes(): void
Clears linear gauge axes
void
▸ clearRegions(): LinearGauge
Removes all the regions from the scene
▸ clone(): Node
All subclasses should override copyConstructor or provide custom implementation for this method
clone
▸ connectStyle(style, type, callback): LinearGauge
Connects style.
This convenience method subscribes a listener to given style for the specified type.
And automatically un-subscribes listener if node is disposed to prevent memory leaks
| Name | Type | Description |
|---|---|---|
style | EventDispatcher | connect style |
type | string | type of event or property |
callback | AttributeCallback<EventDispatcher> | function to be called |
this
▸ Protected copyConstructor(gauge): LinearGauge
Copy constructor function Used to clone gauge
| Name | Type | Description |
|---|---|---|
gauge | LinearGauge | gauge for cloning |
▸ disconnectStyle(style, type, callback): LinearGauge
Disconnect style
This convenience method un-subscribes a listener to given style for the specified type.
| Name | Type | Description |
|---|---|---|
style | EventDispatcher | connect style |
type | string | type of event or property |
callback | AttributeCallback<EventDispatcher> | function to be called |
this
▸ displayRegions(name?): LinearGauge
Debug method to display regions of the gauge in different colors
| Name | Type | Description |
|---|---|---|
Optional name | string | If you want to display only one region, pass its name here |
▸ dispose(): void
Disposes this node, once disposes a node should not be used anymore.
Clear all listeners, and disconnect styles to avoid memory leaks.
Also aggressively 'cleanup' this node by setting some of its members to null.
void
▸ enableClipping(clipping): LinearGauge
Sets innergroup clipping
| Name | Type | Description |
|---|---|---|
clipping | boolean | clipping |
▸ enableEventPropagation(enable): LinearGauge
Enable event propagation from the node hierarchy from bottom to top
This option is similar to DOM Event bubbling, which allows to get any event from child node. By default it is disabled for better performance.
Example
import {Group} from '@int/geotoolkit/scene/Group';
import {Events as SceneEvents} from '@int/geotoolkit/scene/Node';
const parentGroup = new Group()
.setName('ParentGroup')
.enableEventPropagation(true);
const childGroup = new Group()
.setName('ChildGroup');
parentGroup.addChild(childGroup);
parentGroup.on(SceneEvents.Invalidate, (eventName, sender, args) => {
// Got notifications from all children of parent group
});
childGroup.invalidate();| Name | Type | Description |
|---|---|---|
enable | boolean | enable |
this
NumericGauge.enableEventPropagation
▸ enumerateNodes(callback, target?): void
Enumerate children nodes
| Name | Type | Description |
|---|---|---|
callback | Callback<Node | CustomComponent | Alarm> | callback |
Optional target | QueryBuilder<any> | target |
void
▸ execute(delegate): LinearGauge
Executes delegate and return the result. It allows us to keep all initialization calls in one place,
and we do not need to scroll up or down in IDE to find how and where it was initialized.
Example
// All setters (.setName() for example) returns reference to the this.
// In order to modify inner object like LineStyle or Pattern, to get this object (property) we should call getter to get object reference.
// Then modify it as shown below in Option 1 or you can use execute methods shown in Option 2.
import {Group} from '@int/geotoolkit/scene/Group';
import {Rect} from '@int/geotoolkit/util/Rect';
// Option 1
const group = new Group()
.setName('MyGroup')
.setBounds(new Rect(0, 0, 42, 16))
.enableClipping(true)
.setTag({'type': 'sometype'});
group.getLineStyle().setPattern('pattern');
return group;
// Options 2 ( using execute method )
return group
.execute(function () {
this.getLineStyle()
.setPattern("pattern");
});| Name | Type | Description |
|---|---|---|
delegate | (this: LinearGauge) => void | Function to execute |
The result if any or this
▸ execute<T>(delegate): T
| Name |
|---|
T |
| Name | Type |
|---|---|
delegate | (this: LinearGauge) => T |
T
▸ Protected filter(context): boolean
Filter node
| Name | Type | Description |
|---|---|---|
context | RenderingContext | Rendering Context |
boolean
flag filter flag ("true" to render node; "false" otherwise)
▸ getAlarm(name): Alarm
Gets the alarm referenced by provided name or index. If alarm name is not set or no such index exists, null will be returned.
| Name | Type | Description |
|---|---|---|
name | string | number | Name of alarm or its index in iterator |
▸ getAlarms(filter?): Iterator<Alarm>
Gets an iterator over existing alarms in the gauge
| Name | Type | Description |
|---|---|---|
Optional filter | (item: Alarm) => boolean | a filter function. Returns all axes if not provided |
▸ getAnimation(): string
Returns the name of animation function associated with this gauge
string
▸ getAnimationStyle(): AnimationStyle
Return animation style
animationStyle current animation style
NumericGauge.getAnimationStyle
▸ getAnimationTime(): number
Returns time in which a full animation cycle is finished (in seconds)
number
▸ getAxes(filter?): Iterator<Group<Node>>
Returns an iterator over existing axes groups in this gauge
| Name | Type | Description |
|---|---|---|
Optional filter | (item: Group<Node>) => boolean | a filter function. Returns all axes groups if null |
▸ getAxis(name): Axis
Gets an axis by its name or index from axes iterator
| Name | Type | Description |
|---|---|---|
name | string | number | Name of the axis or its index |
▸ getAxisProperties(name?): AxisOptions | Record<string, AxisOptions>
Gets properties pertaining to axis of the gauge
| Name | Type | Description |
|---|---|---|
Optional name | string | Name of the axis to get properties. If null, properties will be retrieved from all axes |
AxisOptions | Record<string, AxisOptions>
properties, empty if no axis of name 'name' exists
▸ getBackgroundStyle(): BackgroundStyleOptionsOut
Returns background styles
NumericGauge.getBackgroundStyle
▸ getBounds(): Rect
Returns current bounds of the gauge
▸ getClassName(): string
string
▸ getClipStyle(): ClipStyle
Gets the current clipping style
clipping style
▸ getCss(): CssStyle
Return CSS style
▸ getCssClass(): string
Returns css class name to be used to apply CSS style
string
the css class name
▸ getCssClasses(): string[]
Gets list of css class names which applied to this node
string[]
▸ getCssTransform(): string
Returns CSS transformation
string
▸ getCustomComponent(index): Group<Node>
Returns a registered custom component by its index
| Name | Type | Description |
|---|---|---|
index | string | number | Index or name of the component to return |
Null if no such index exists
NumericGauge.getCustomComponent
▸ getCustomComponents(filter?): Iterator<Group<Node>>
Return iterator on registered custom components
| Name | Type | Description |
|---|---|---|
Optional filter | (item: Group<Node>) => boolean | a filter function. Returns all nodes if null |
NumericGauge.getCustomComponents
▸ getFunctionRegistry(): FunctionRegistry
Returns function registry which provides handlers for gauges animation and alarms
registry New registry to set
NumericGauge.getFunctionRegistry
▸ getId(): string | number
Returns the associated identifier of the node
string | number
The node's id
▸ Protected getInvalidateMethod(): AttributeCallback<EventDispatcher>
Gets invalidate method
AttributeCallback<EventDispatcher>
method to invalidate this object
NumericGauge.getInvalidateMethod
▸ getLayoutStyle(): LayoutStyle<string | number>
Returns the current layout of the gauge
LayoutStyle<string | number>
▸ getLocalTransform(): Transformation
Retrieves the transformation of bounds to parent
transform the local transform.
NumericGauge.getLocalTransform
▸ getMarginsStyle(): SpaceStyle<string | number>
Return margins style
SpaceStyle<string | number>
▸ getName(): string
Returns the node name
string
The node name
▸ getNameProperties(): NameOptionsOut
Gets properties of value text
NumericGauge.getNameProperties
▸ getNeedleProperties(): Required<NeedleOptions>
Returns properties pertaining to needle shape of the gauge
Required<NeedleOptions>
properties
▸ getOpacity(): number
Returns current node opacity
number
opacity
▸ getOpacityBlendMode(): BlendMode
Returns current node opacity
opacity blend mode
NumericGauge.getOpacityBlendMode
▸ getOrientation(): Orientation
Returns orientation of the gauge.
▸ getParent(): Node
Return parent node
parent node
▸ getProperties(): OptionsOut
Gets properties pertaining to Linear Gauge
properties
▸ getProperty(name): any
Gets dynamic property by name. These properties can be used as a property bags
| Name | Type | Description |
|---|---|---|
name | string | property name |
any
▸ getPropertyKeys(): string[]
Returns known properties keys
string[]
▸ getRange(): Range
Returns range displayed by this range
▸ getRegion(name): Region
Returns the region registered with provided name.
| Name | Type | Description |
|---|---|---|
name | string | Name of the region to return |
▸ getRenderingFilter(): IFilter
Return filter to be used for rendering and picking
current filter
NumericGauge.getRenderingFilter
▸ getResponsiveStyle(): ResponsiveStyle
Return responsive style
NumericGauge.getResponsiveStyle
▸ getRoot(): Node
Returns root node.
If node doesn't have parent then it returns itself.
the root node
▸ getScaleScrollStrategy(): Delegate
Gets scale scroll strategy
scale scroll strategy
NumericGauge.getScaleScrollStrategy
▸ getSceneTransform(): Transformation
Returns transformation from node to root scene
a transformation from node to root scene
NumericGauge.getSceneTransform
▸ getTag(): any
Returns the object associated with the node by user.
any
The node's user-object
▸ getValue(): number
Returns the current value of the axis
number
▸ getValueProperties(): ValueOptionsOut
Gets properties of value text
Format of value to set on number formatter
NumericGauge.getValueProperties
▸ getVisible(): boolean
Return visibility of the node
boolean
true if node is visible
▸ getWorldTransform(): Transformation
Retrieves the local transformation of the node which represents multiplication of parent to bounds and contents transformations.
transform the world transform.
NumericGauge.getWorldTransform
▸ getZIndex(): number
Returns node z-index (null if not set)
number
▸ hasAxis(axis): boolean
Checks if the gauge contains specified axis
boolean
▸ hasCssClass(cssClass): boolean
Check if node has specified css class
| Name | Type | Description |
|---|---|---|
cssClass | string | css class name |
boolean
▸ hasEventListener(type, callback?): boolean
Check if a list of event listeners for this type contains this listener
| Name | Type | Description |
|---|---|---|
type | string | type of event or property |
Optional callback | Function | to be called, if null, check if any callback is registered |
boolean
▸ hideRegions(): LinearGauge
Hides the regions displayed for debug reasons
▸ invalidate(bounds?, force?): LinearGauge
Invalidate area of the shape. This method invalidates parent by default. invalidated from parent to root node.
| Name | Type | Description |
|---|---|---|
Optional bounds | Rect | bounds of the invalid rectangle in the inner node coordinates |
Optional force | boolean | true if parent should be invalidated immediately if null is provided then cache (if any will be completely refreshed) otherwise only specified rect or node.bounds will be refreshed |
this
▸ Protected invalidateParent(bounds?, force?): LinearGauge
Invalidate parent and notify all listeners. NOTE: Don't keep arguments of the event, because instance can be changed
Fires
| Name | Type | Description |
|---|---|---|
Optional bounds | Rect | bounds of the invalid rectangle in the inner node coordinates |
Optional force | boolean | force rendering |
this
▸ isDisposed(): boolean
Returns whether this object has been disposed
boolean
▸ isEventPropagationEnabled(): boolean
Return true if event propagation is enabled from child to parent
boolean
NumericGauge.isEventPropagationEnabled
▸ isNotificationEnabled(): boolean
return state of notification
boolean
current notification state
NumericGauge.isNotificationEnabled
▸ isSelectable(): boolean
Returns true if node can be picked/selected.
boolean
The selectable flag
▸ isSilent(): boolean
Return true if the event dispatcher doesn't notify any events
boolean
▸ notify<E>(type, source, args?): LinearGauge
Notify listeners of the Node
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | type of event |
source | NumericGauge | source who called the event |
Optional args | EventMap[E] | event arguments |
this
▸ off<E>(type?, callback?): LinearGauge
Detach listener on event. Calling .off() with no arguments removes all attached listeners. Calling .off(type) with no callback removes all attached listeners for specific type.
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
Optional type | E | type of the event |
Optional callback | (eventType: E, sender: LinearGauge, args: EventMap[E]) => void | function to be called |
this
▸ on<E>(type, callback): LinearGauge
Attach listener on event that will be called whenever the specified event is delivered to the target
If the callback function is already in the list of event listeners for this target, the function is not added a second time.
If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an "on" call, the second function will also be added to the list of event listeners for that target.
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | type of event or property |
callback | (eventType: E, sender: LinearGauge, args: EventMap[E]) => void | to be called |
this
▸ Protected onParentChanged(node): LinearGauge
This method is called when parent changes. Do not call it directly.
| Name | Type | Description |
|---|---|---|
node | Node | node to change parent |
this
▸ Protected onVisibilityChanged(): void
This method is called if visibility is changed. Send event Events.VisibilityChanged
void
NumericGauge.onVisibilityChanged
▸ Protected postRendering(context): void
To be called after rendering. Call this method if you override method render
| Name | Type | Description |
|---|---|---|
context | RenderingContext | Rendering Context |
void
▸ Protected preRendering(context): void
Occurs before rendering this method sets clipping by default. Call this method if you override method render
| Name | Type | Description |
|---|---|---|
context | RenderingContext | Rendering Context |
void
▸ registerAnimationStyle(root): void
Register animation style.
| Name | Type | Description |
|---|---|---|
root | Node | root node for node |
void
NumericGauge.registerAnimationStyle
▸ removeAlarm(name): LinearGauge
Removes an alarm by its name, index, or instance of alarm. The alarm will never be called again and reference to it will be removed. Does nothing if no such alarm has been added before
| Name | Type | Description |
|---|---|---|
name | string | number | Alarm | Name of alarm or its index in iterator |
this
▸ removeAxis(name): LinearGauge
Removes an axis from the gauge. If no such axis exists, nothing will be done.
| Name | Type | Description |
|---|---|---|
name | string | number | Name of the axis or its index |
▸ removeCssClass(cssclass): LinearGauge
Removes css class from node
| Name | Type | Description |
|---|---|---|
cssclass | string | string[] | css class name('s) |
this
▸ removeCustomComponent(component): LinearGauge
Removes a registered custom component from the gauge. If such component was not registered, does nothing.
| Name | Type | Description |
|---|---|---|
component | number | Group<Node> | The component which has to be deleted, or its index in iterator. |
NumericGauge.removeCustomComponent
▸ removeIndicatorRegion(name): void
Removes an earlier added region from the indicator
| Name | Type | Description |
|---|---|---|
name | string | Region | region name or region |
void
▸ removeInvalidateHandler(handler): LinearGauge
Remove invalidate handler
Deprecated
since 4.0, use Node.off instead
| Name | Type | Description |
|---|---|---|
handler | Function | handler to be notified about invalidation |
this
NumericGauge.removeInvalidateHandler
▸ removeRegion(name): LinearGauge
Deletes a region from the layout. Only custom added regions can be removed. Will do nothing if no such region was registered
| Name | Type | Description |
|---|---|---|
name | string | Name of the region |
▸ render(context): LinearGauge
Renders node
| Name | Type | Description |
|---|---|---|
context | RenderingContext | The rendering context to be used to draw the node |
▸ renderAsync(context, callback): void
Render node in asynchronous mode. Default implementation creates call method "render" inside
| Name | Type | Description |
|---|---|---|
context | RenderingContext | The rendering context to be used to draw the node |
callback | () => void | callback function |
void
▸ rotate(theta, x, y): LinearGauge
Rotate bounds around a given coordinate
| Name | Type | Description |
|---|---|---|
theta | number | angle to rotate node, in radians |
x | number | x coordinate to rotate around |
y | number | y coordinate to rotate around |
this
▸ scale(xx, yy): LinearGauge
Scale node
| Name | Type | Description |
|---|---|---|
xx | number | x scale factor |
yy | number | y scale factor |
this
▸ setAnimation(name): LinearGauge
Sets the name of animation function in function registry corresponding to this axis
| Name | Type | Description |
|---|---|---|
name | string | Name of the function. This function has to be registered in the registry, otherwise no animation will be applied. |
▸ setAnimationStyle(animationStyle): LinearGauge
Sets animation style
| Name | Type | Description |
|---|---|---|
animationStyle | Type | animation style |
NumericGauge.setAnimationStyle
▸ setAnimationTime(time): LinearGauge
Sets time required to accomplish a full animation run in between two values (in seconds)
| Name | Type | Description |
|---|---|---|
time | number | Time in seconds to perform the animation |
this
▸ setAxisProperties(name, props): LinearGauge
Sets properties pertaining to axis of the gauge
| Name | Type | Description |
|---|---|---|
name | string | Name of the axis to apply properties. Name can also be passed inside props JSON. |
props | AxisOptions | properties |
this
▸ setBackgroundStyle(props): LinearGauge
Sets background styles
| Name | Type | Description |
|---|---|---|
props | BackgroundStyleOptions | object containing background styles |
NumericGauge.setBackgroundStyle
▸ setBounds(bounds): LinearGauge
Sets bounds to the gauge
| Name | Type | Description |
|---|---|---|
bounds | Rect | New bounds |
▸ setClipStyle(style): LinearGauge
Sets a new clipping style
| Name | Type | Description |
|---|---|---|
style | GraphicsPath | ClipStyle | Options | a new clipping style |
this
▸ setCss(style, merge?): LinearGauge
Sets CSS style. This style will be applied for all inserted elements
| Name | Type | Description |
|---|---|---|
style | Type | CSS style to be applied to inserted elements |
Optional merge | boolean | merge flag |
this
▸ setCssClass(name): LinearGauge
Sets css class name of the node to be used to apply CSS style
| Name | Type | Description |
|---|---|---|
name | string | css class name of the node |
this
▸ setCssTransform(transform): LinearGauge
Set CSS transformation
| Name | Type | Description |
|---|---|---|
transform | string | Transformation | transformation css transformation instruction or Transformation instance |
this
▸ setFunctionRegistry(registry): LinearGauge
Sets function registry which will provide handlers for gauges animation and alarms
| Name | Type | Description |
|---|---|---|
registry | FunctionRegistry | New registry to set |
NumericGauge.setFunctionRegistry
▸ setId(id): LinearGauge
Allows the user to associate any identifier
| Name | Type | Description |
|---|---|---|
id | string | number | object id |
this
▸ setLayoutStyle(layoutStyle, merge?): LinearGauge
Specify desired layout style
| Name | Type | Description |
|---|---|---|
layoutStyle | LayoutStyle<string | number> | Options<string | number> | desired layout style |
Optional merge | boolean | true if you want to merge layoutStyle with existing attribute, false by default |
▸ setLocalTransform(localTransform): LinearGauge
Sets local transformation to be used to transform from local to parent coordinate
| Name | Type | Description |
|---|---|---|
localTransform | Transformation | local transformation for this node |
NumericGauge.setLocalTransform
▸ setMarginsStyle(margins, merge?): LinearGauge
Sets margins style
| Name | Type | Description |
|---|---|---|
margins | Type<string | number> | margins style |
Optional merge | boolean | true if you want to merge marginsStyle with existing attribute, false by default |
this
▸ setName(name): LinearGauge
Sets the name of the gauge
| Name | Type | Description |
|---|---|---|
name | string | The new gauge name |
▸ setNameProperties(props): LinearGauge
Sets properties pertaining to text representing gauge name
| Name | Type | Description |
|---|---|---|
props | NameOptions | Object with properties |
NumericGauge.setNameProperties
▸ setNeedle(params): LinearGauge
Sets the needle for the axis
| Name | Type | Description |
|---|---|---|
params | Object | JSON with needle properties |
Optional params.center | Point | |
Optional params.geometry | Group<Node> |
this
▸ setNeedleProperties(props): LinearGauge
Sets properties pertaining to needle shape of the gauge
| Name | Type | Description |
|---|---|---|
props | NeedleOptions | properties |
▸ setNotification(notify, force?): LinearGauge
set notification state
| Name | Type | Description |
|---|---|---|
notify | boolean | flag set to invalidate parent or not |
Optional force | boolean | true if parent should be invalidated immediately |
this
▸ setOpacity(opacity, blendMode?): LinearGauge
Sets node opacity
| Name | Type | Description |
|---|---|---|
opacity | number | node opacity from 0 to 1 |
Optional blendMode | BlendMode | opacity blend mode. If it is normal, opacity will be replaced. |
this
▸ setProperties(props?): LinearGauge
Sets properties pertaining to linear gauge and its components.
| Name | Type | Description |
|---|---|---|
Optional props | Options | properties |
▸ setProperty(name, value): LinearGauge
Sets dynamic property by name
| Name | Type | Description |
|---|---|---|
name | string | property name |
value | any | property value |
this
▸ setRange(range): LinearGauge
Sets range displayed by this gauge
| Name | Type | Description |
|---|---|---|
range | Range | the range to set |
▸ setRange(min, max): LinearGauge
Sets range displayed by this gauge
| Name | Type | Description |
|---|---|---|
min | number | Lower bounds of the range |
max | number | Higher bound of the range |
▸ setRegionSize(regionType, size): LinearGauge
For North, South sides sets height, for East and West sets width, for custom regions sets x, y, width and height
| Name | Type | Description |
|---|---|---|
regionType | string | Name of the region |
size | string | number | Region | Width or height of a side in CSS format, or an object with properties for custom regions |
▸ setRenderingFilter(filter): LinearGauge
Sets filter to be applied before rendering and picking
| Name | Type | Description |
|---|---|---|
filter | IFilter | filter to set |
this
NumericGauge.setRenderingFilter
▸ setResponsiveStyle(style): LinearGauge
Sets responsive style.
| Name | Type | Description |
|---|---|---|
style | Options | ResponsiveStyle | responsive style |
this
NumericGauge.setResponsiveStyle
▸ setScaleScrollStrategy(strategy?): LinearGauge
Sets scale scroll strategy
| Name | Type | Description |
|---|---|---|
Optional strategy | Delegate | scale scroll strategy |
this
NumericGauge.setScaleScrollStrategy
▸ setSelectable(selectable): LinearGauge
Allows to select node. If node is not selectable then child node is not selectable.
| Name | Type | Description |
|---|---|---|
selectable | boolean | flag to allow node selection |
this
▸ setSilent(bool): LinearGauge
Set silent mode
| Name | Type | Description |
|---|---|---|
bool | boolean | flag to enable silent mode |
this
▸ setTag(tag): LinearGauge
Allows the user to associate any arbitrary object with the node.
| Name | Type | Description |
|---|---|---|
tag | any | The object to be associated with the node. |
this
▸ setValue(val, skipAnimation?): LinearGauge
Sets current value of the gauge
| Name | Type | Description |
|---|---|---|
val | number | New value for the gauge |
Optional skipAnimation | boolean | Specifies if animation should be avoided |
this
▸ setValueProperties(props): LinearGauge
Sets properties pertaining to text representing gauge value
| Name | Type | Description |
|---|---|---|
props | ValueOptions | Object with properties |
NumericGauge.setValueProperties
▸ setVisible(value): LinearGauge
Sets visibility of the node. Send event Events.VisibilityChanged
| Name | Type | Description |
|---|---|---|
value | boolean | flag specifying visibility of the node |
this
▸ setZIndex(value): LinearGauge
Sets z-index for node (set null for default)
| Name | Type | Description |
|---|---|---|
value | number | index determining node z-position |
this
▸ shear(shx, shy): LinearGauge
Shear this node's bounds
| Name | Type | Description |
|---|---|---|
shx | number | x-axis shear |
shy | number | y-axis shear |
this
▸ toString(): string
Returns a string representation of this object (generally the classname)
string
A string representation
▸ translate(tx, ty): LinearGauge
Translate bounds
| Name | Type | Description |
|---|---|---|
tx | number | x translation |
ty | number | y translation |
this
▸ unregisterAnimationStyle(root): void
Unregister animation style.
| Name | Type | Description |
|---|---|---|
root | Node | root node for node |
void
NumericGauge.unregisterAnimationStyle
▸ updateSceneTransformation(): LinearGauge
Update scene transformation
this
NumericGauge.updateSceneTransformation
▸ updateState(regions?, changes?): LinearGauge
Update state. These methods reset node state and update state for children. this method is useful to refresh a scene graph
| Name | Type | Description |
|---|---|---|
Optional regions | Rect[] | optional array to return invalid rectangles in the parent coordinates |
Optional changes | StateChanges | optional parameter to specify a reason of changes |
this
▸ Protected updateTimeStamp(): LinearGauge
Update time stamp to indicate that Node or Children has been changed.
this
▸ Static enableSceneGraphNotification(enabled): void
Enable / disable all notifications
| Name | Type | Description |
|---|---|---|
enabled | boolean | sets if this object sends notifications |
void
NumericGauge.enableSceneGraphNotification
▸ Static findParent<T>(node, classType, filter?): InstanceType<T>
Find root of the node with specified type
| Name | Type |
|---|---|
T | extends Constructor<any> |
| Name | Type | Description |
|---|---|---|
node | Node | node to start search |
classType | T | type of the class to search for |
Optional filter | (node: Node) => boolean | additional filter to apply |
InstanceType<T>
▸ Static findParent(node, classType, filter?): Node
Find root of the node with specified type
| Name | Type | Description |
|---|---|---|
node | Node | node to start search |
classType | string | interface name to search for |
Optional filter | (node: Node) => boolean | additional filter to apply |
▸ Static getClassName(): string
string
▸ Static isSceneGraphNotificationEnabled(): boolean
Return status of the global notification for all nodes.
boolean