Perspective - Vessel

Component Palette Icon:

An animated component that looks like a tank or vessel. Options include displaying fill level, the stand, and the agitator. 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
appearance	Options for the appearance of the component. Options are auto, p&id, mimic, and simple. If set to auto, the value is taken from the Perspective Session Property symbols.autoAppearance.	value: string
animationSpeed	The speed of the animation as a percent. Set to "0" to turn off animation. If set to auto, the setting is taken from the Perspective Session Property symbols.autoAnimationSpeed.	value: numeric
state	State of the animation. Built-in options are default, running, stopped, or faulted. Default is default. Built-in states and new states can be configured and applied on the Project Properties > Symbols page.	value: string
orientation	Orientation of the vessel. Options are horizontal or vertical. Default is vertical.	value: string
displayStand	Whether or not to display the stand for the vessel. Default is true.	value: boolean
displayAgitator	Whether or not to display the agitator in the vessel. Default is true.	value: boolean
displayFillLevel	Whether or not to display the fill level of liquid in the vessel. Default is true.	value: boolean
liquidColor	Color used to render the filled part of the vessel. 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.7.	value: numeric
liquidWarningColor	The warning color of the liquid in the tank. See Color Selector.	color
label	Label settings for the component.  text: Text for the label. Value is string. location: Label position relative to the vessel: top, bottom, left, right, or hidden. Default is bottom. Value is string. justify: Label text justification: left, center, right, or auto. Default is center. Value is string. style: Modify label text 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
value	Value settings for the component.   displayValueAsPercent Whether or not to display the value as a percentage. Value is boolean. value Text to display as value. Value is string. capacity Total capacity of the vessel. Default is 100. Value is numeric. location Value location relative to the vessel: top, bottom, right, or left. Default is bottom. Value is string. justify Value text justification: center, left, or right. Default is center. Value is string. style: Sets a style for the value. 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
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

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.orientation	horizontal
props.displayStand	true
props.liquidColor	#00ACAC
props.label.text	Lower Tank 23
props.label.location	bottom
props.label.style.fontWeight	bold
props.label.style.color	#804600
props.value.value	35
props.value.capacity	100
props.value.location	top
props.value.style.color	#00ACAC
props.value.style.fontFamily	Roboto
props.value.style.fontSize	18
props.value.style.fontWeight	bold