LevelIndicator 2.x

TOCSTART

<div>
    <ul>
        <li><a href="#LevelIndicator2.x-Overview">Overview</a></li>
        <li><a href="#LevelIndicator2.x-KeyFeatures">Key Features</a></li>
        <li><a href="#LevelIndicator2.x-BasicConfiguration">Basic Configuration</a></li>
        <li><a href="#LevelIndicator2.x-TransitionLevelsandColors">Transition Levels and Colors</a></li>
        <li><a href="#LevelIndicator2.x-CustomizingStyles">Customizing Styles</a></li>
        <li><a href="#LevelIndicator2.x-ClientSideAPI">Client-Side API</a></li>
    </ul>
</div>
<p>TOCEND</p>

<p><cite>LevelIndicator</cite> 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.</p>

<p><span
        class="error">Unable to render embedded object: File (level-indicator-default-horizontal.png) not found.</span><br>
</p>


<h4><a name="LevelIndicator2.x-KeyFeatures"></a>Key Features</h4>

<ul>
    <li><a href="#LevelIndicator2.x-BasicConfiguration">Basic configuration</a></li>
    <li><a href="#LevelIndicator2.x-TransitionLevelsandColors">Transition levels and colors</a></li>
    <li><a href="#LevelIndicator2.x-CustomizingStyles">Extended styling</a></li>
</ul>


<h4><a name="LevelIndicator2.x-BasicConfiguration"></a>Basic Configuration</h4>
<table class="sectionMacro" border="0" cellpadding="5" cellspacing="0" width="100%">
    <tbody>
    <tr>
        <td class="confluenceTd" valign="top" width="90%">
            <p>The <b>e</b> as a inplace literal value such as <i>"0.5"</i> or as a value binding expression
                pointing to a property of type double.</p>

            <div class="code panel" style="border-width: 1px;">
                <div class="codeContent panelContent">

<o:levelIndicator value="0.55" />

                </div>
            </div>


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

            <div class="code panel" style="border-width: 1px;">
                <div class="codeContent panelContent">

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

                </div>
            </div>
            <p>The above code will produce the results that can be seen on the image at the right.</p>

            <p>It is possible to customize the direction that should be used to fill the <cite>LevelIndicator</cite>
                component with color segments.<br>
                It can be done by specifying the <b>fillDirection</b> attribute of the <u>
                    &lt;o:levelIndicator&gt;</u> tag. This attribute can take the following values:</p>
            <ul>
                <li><i>"fromStart"</i> – the filling of the <cite>LevelIndicator</cite> component will be done from
                    the start, which corresponds to left-to-right direction for horizontal
                    <cite>LevelIndicator</cite> and bottom-to-top direction for vertical <cite>LevelIndicator</cite>.
                </li>
                <li><i>"fromEnd"</i> (default) – the filling of the <cite>LevelIndicator</cite> 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 <cite>LevelIndicator</cite> and top-to-bottom
                    direction for vertical <cite>LevelIndicator</cite>.
                </li>
            </ul>


            <h4><a name="LevelIndicator2.x-TransitionLevelsandColors"></a>Transition Levels and Colors</h4>

            <p>By default <cite>LevelIndicator</cite> 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 <b>transitionLevels</b>
                attribute, which can either be specified in-place as a comma-separated list of color transition
                levels, such as <i>"0.35, 0.6"</i>, 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.</p>
        </td>
        <td class="confluenceTd" valign="top" width="10%">
            <p><span class="error">Unable to render embedded object: File (level-indicator-default-vertical.png) not found.</span>
            </p></td>
    </tr>
    </tbody>
</table>

<p>The colors for indicator's segments for different level areas can be customized using the <b>colors</b>
    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. </p>

<div class="code panel" style="border-width: 1px;">
    <div class="codeContent panelContent">

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

    </div>
</div>
<p>The above code example will produce the following results.</p>

<p><span
        class="error">Unable to render embedded object: File (level-indicator-with-custom-colors.png) not found.</span>
</p>

<h4><a name="LevelIndicator2.x-CustomizingStyles"></a>Customizing Styles</h4>

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

<div class="code panel" style="border-width: 1px;">
    <div class="codeContent panelContent">

<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"/>

    </div>
</div>

<p><span
        class="error">Unable to render embedded object: File (level-indicator-with-custom-css.png) not found.</span>
</p>

<p>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
    <b>inactiveSegmentIntensity</b> attribute as a double value in range [0..1], where <i>0</i> corresponds to a
    totally dimmed segments and <i>1</i> corresponds to the full brightness display like the one that is used for
    the "active" segments. The default value is <b>0.2</b>, which corresponds to a 20% brightness.</p>

<h4><a name="LevelIndicator2.x-ClientSideAPI"></a>Client-Side API</h4>

<p>All client-side API methods are listed in the following table:</p>

<div class="table-wrap">
    <table class="confluenceTable">
        <tbody>
        <tr>
            <th class="confluenceTh"> Method</th>
            <th class="confluenceTh"> Description</th>
        </tr>
        <tr>
            <td class="confluenceTd"> getValue()</td>
            <td class="confluenceTd"> Returns the currently displayed level in range [0..1]</td>
        </tr>
        <tr>
            <td class="confluenceTd"> setValue(level)</td>
            <td class="confluenceTd"> Changes the currently displayed level to the passed value, which should be in
                range [0..1]
            </td>
        </tr>
        </tbody>
    </table>
</div>