Perspective - Cylindrical Tank

Component Palette Icon:

Description

A component that looks like a 3D cylindrical tank with some liquid inside. Component 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	New in 8.1.24 Format to apply to value which is then used as the display value. Available options include: None Integer Percent Currency	value: string
unit	New in 8.1.24 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 Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Example

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