Perspective - Cylindrical Tank

Component Palette Icon:

Description

This component looks like a 3D cylindrical tank with liquid inside. It can be configured so that the "liquid" rises and falls as the value property changes. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
value	Numeric value of the tank's level.	value: numeric
capacity	Total capacity of the tank. Default is 100.	value: numeric
liquidColor	Color used to render the filled part of the tank. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	color
tankColor	Color of the non-filled tank section. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	color
liquidOpacity	The opacity of the liquid in the tank. 0 is fully transparent, 1 is fully opaque. Default is 0.5.	value: numeric
liquidWarningColor	The warning color of the liquid in the tank. See Color Selector.	color
tankWarningColor	The tank warning color. See Color Selector.	color
warningThreshold	The warning appearance will be used when value as a percentage of the capacity exceeds this value. Default is 100	value: numeric
strokeWidth	The stroke width, in pixels, for the outside of the tank. Default is 1.	value: numeric
valueDisplay	Value display configuration. Renders and styles a value overlay in the tank. Click here to see valueDisplay properties.	object
style	Sets a style for this cylindrical tank. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

valueDisplay Properties

Name	Description	Property Type
enabled	Whether valueDisplay is shown. Default is true.	value: boolean
style	Modify the valueDisplay style using the style properties. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
format	Format to apply to value which is then used as the display value. Available options include: None Integer Percent Currency	value: string
unit	Unit value to display on value overlay: enabled: If true, will show either a prefixed or postfixed unit. Value is boolean. value: Unit value to display. Value is string. fix: Direction in which to place the unit. Either as a prefix or a postfix. Value is string.	object

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

Example

Property	Value
props.value	85
props.capacity	100
props.warningThreshold	80