---
title: "Vision - Level Indicator"
description: "A component filled with liquid that rises and falls as the Value property changes. Can be placed behind a symbol factor object that has a cutout in it."
---

# Vision - Level Indicator

> A component filled with liquid that rises and falls as the Value property changes. Can be placed behind a symbol factor object that has a cutout in it.

![](levelIndicator0.png)

**Component Palette Icon**

![](levelIndicator1.png)

## Properties
| Property 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Background Color 	| The color of the background. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). 	| Color 	| .background 	| Appearance 	|
| Border 	| The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.**Note**: The border is unaffected by rotation. As of 8.1.21, the "Button Border" and "Other Border" options are removed. 	| Border 	| .border 	| Common 	|
| Capacity 	| Total capacity of tank. 	| double 	| .capacity 	| Data 	|
| Cursor 	| The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. 	| int 	| .cursorCode 	| Common 	|
| Filled Color 	| Set the color of filled portion. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). 	| Color 	| .foreground 	| Appearance 	|
| Font 	| Font of text on this component. 	| Font 	| .font 	| Appearance 	|
| Font Color 	| The foreground color of the component. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). 	| Color 	| .fontColor 	| Appearance 	|
| Gradient 	| Indicates whether the level will be drawn as a 3D gradient. 	| boolean 	| .gradient 	| Appearance 	|
| Liquid Waves 	| Indicate whether liquid waves are drawn. 	| boolean 	| .waves 	| Appearance 	|
| Mouseover Text 	| The text that is displayed in the tooltip which pops up on mouseover of this component. 	| String 	| .toolTipText 	| Common 	|
| Name 	| The name of this component. 	| String 	| .name 	| Common 	|
| Orientation 	| Determines which direction the level "grows" for an increase in value. 	| int 	| .orientation 	| Appearance 	|
| Percent Format 	| Format string used for the percentage. 	| String 	| .percentFormat 	| Appearance 	|
| Quality 	| The data quality code for any Tag bindings on this component. 	| QualityCode 	| .quality 	| Data 	|
| Show Percentage 	| Indicates whether the percentage of tank filled is displayed. 	| boolean 	| .showPercent 	| Appearance 	|
| Show Value 	| Indicates whether the numeric value, capacity, and units are displayed. 	| boolean 	| .showValue 	| Appearance 	|
| Styles 	| Contains the component's styles. 	| Dataset 	| .styles 	| Appearance 	|
| Units 	| Units of measure for tank contents. 	| String 	| .units 	| Appearance 	|
| Value 	| Numeric value of tank's level. 	| double 	| .value 	| Data 	|
| Value Format 	| Format string used for the value. 	| String 	| .valueFormat 	| Appearance 	|
| Visible 	| If disabled, the component will be hidden. 	| boolean 	| .visible 	| Common 	|
| Wave Height 	| The height of each wave. 	| int 	| .waveHeight 	| Appearance 	|
| Wave Length 	| The length of each wave. 	| int 	| .waveLength 	| Appearance 	|

### Deprecated Properties
| Property 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Data Quality 	| The data quality code for any Tag bindings on this component. 	| int 	| .dataQuality 	| Deprecated 	|

## Scripting

### Component Functions
This component does not have component functions associated with it.

### Extension Functions
This component does not have extension functions associated with it.

### Event Handlers
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the [Component Events](ignition-modules/vision/scripting-in-vision/component-events/component-events.md) page

## Customizers
+ [Vision Component Customizers](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md)
+ [Style Customizer](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md#style-customizer)

## Examples

#### Level Indicator
![](levelIndicator2.png)

|Property Name|Value|
|:---|:---|
|Border|Line Border|
|Value|75|
|Units|Gallons|
|Show Value|True|
|Gradient|False|
|Filled Color|0,100,240|
|Font|Arial Black, Plain, 16|
|Wave Height|10|
|Wave Length|15|

#### Level Indicator
![](levelIndicator3.png)

Created using Symbol Factory Tanks > Tank with Rivets and Ladder. Then ungrouped twice. Fill paint set to 0,100,240.

|Property Name|Value|
|:---|:---|
|Border|Line Border|
|Value|75|
|Units|Gallons|
|Show Value|True|
|Gradient|False|
|Filled Color|0,100,240|
|Background Color|250,250,251|
|Font|Arial Black, Plain, 16|
|Wave Height|10|
|Wave Length|15|

```py title="Setting value through Scripting"
# You can set the component's value through scripting
event.source.parent.getComponent('Level Indicator').value = 5.4
 
# Alternatively, you can use the .setValue method to set the component's value
event.source.parent.getComponent('Level Indicator').setValue(5.4)
```