LevelIndicator

Overview

LevelIndicator is a component that shows a numeric value in graphic style, similar to the LED volume meter and resource meter used in Windows Task Manager.


API Reference | Tag Reference

Key Features

Basic Configuration

The value attribute of <o:levelIndicator> tag allows specifying the current level displayed by the LevelIndicator component. This attribute should be specified as a double number in range [0..1], where 0.0 corresponds to 0% and 1.0 corresponds to 100% display. You can specify the value as a inplace literal value such as "0.5" or as a value binding expression pointing to a property of type double.

<o:levelIndicator value="0.55" />

It's possible to flip the orientation of the LevelIndicator component using the orientation attribute, which can be specified as either "horizontal" (default), or "vertical".

<o:levelIndicator value="0.55" orientation="vertical"/>

The above code will produce the results that can be seen on the image at the right.

It is possible to customize the direction that should be used to fill the LevelIndicator component with color segments.
It can be done by specifying the fillDirection attribute of the <o:levelIndicator> tag. This attribute can take the following values:

  • "fromStart" – the filling of the LevelIndicator component will be done from the start, which corresponds to left-to-right direction for horizontal LevelIndicator and bottom-to-top direction for vertical LevelIndicator.
  • "fromEnd" (default) – the filling of the LevelIndicator component will be done from the end of the component, the opposite side to the component's label. This corresponds to right-to-left direction for horizontal LevelIndicator and top-to-bottom direction for vertical LevelIndicator.

Transition Levels and Colors

By default LevelIndicator displays green segments for values lower than 70%, yellow segments for values between 70% and 90%, and red segments for values higher than 90%. These transition levels where the color is changed can be customized using the transitionLevels attribute, which can either be specified in-place as a comma-separated list of color transition levels, such as "0.35, 0.6", which correspond to 35% and 60% as in the example below, or it can be specified as a value binding expression to any collection or array of double values corresponding to transition levels.

The colors for indicator's segments for different level areas can be customized using the colors attribute, which can either be specified in-place as a comma-separated list of color names, or as a binding to a collection/array of color names.

<o:levelIndicator value="0.8" orientation="horizontal"
                      colors="blue,orange,violet"
                      transitionLevels="0.35, 0.6"/>

The above code example will produce the following results.

Customizing Styles

You can change the size and style of the entire component using the <o:levelIndicator> tag's style and styleClass attributes. Size of a single segment can be customized using the segmentSize attribute, as shown on the examples below.

<o:levelIndicator value="0.8" orientation="horizontal"
                      style="background-color: #e6e6e6; border: 1px solid #333; width: 350px; height: 40px;"
                      segmentSize="5"
                      colors="blue,orange,violet"
                      transitionLevels="0.35, 0.6"/>

You can also customize the brightness of the "inactive" segments – the segments that are currently "turned off" to the right of the currently displayed level. This can be done by specifying the inactiveSegmentIntensity attribute as a double value in range [0..1], where 0 corresponds to a totally dimmed segments and 1 corresponds to the full brightness display like the one that is used for the "active" segments. The default value is 0.2, which corresponds to a 20% brightness.

Client-Side API

All client-side API methods are listed in the following table:

Method Description
getValue() Returns the currently displayed level in range [0..1]
setValue(level) Changes the currently displayed level to the passed value, which should be in range [0..1]
OpenFaces