Another custom gauge: The Thermometer class
After the blinking circular gauge, the partition gauge and light ramp gauges, here is another example of a gauge built with ILOG Elixir Gauges framework.
This gauge is defined as an MXML component:
<?xml version="1.0" encoding="utf-8"?>
<RectangularGauge xmlns:mx="http://www.adobe.com/2006/mxml" title="{bar.value + ' °C'}"
xmlns="http://www.ilog.com/2007/ilog/flex" xmlns:local="*" direction="vertical" titleStyleName="titleStyle">
<mx:Style>
.titleStyle
{
font-size: 10;
}
</mx:Style>
<mx:Number id="mainColor">0x5588AA
<scales>
<RectangularLinearScale minorTickInterval="1" majorTickInterval="10" minimum="0" maximum="40"
snapInterval="1" id="scale"/>
</scales>
<elements>
<local:ThermometerBackground width="100%" height="100%" id="back"
mainColor="{mainColor}"
>
<local:ThermometerBar value="20"
mainColor="{mainColor}"
x="{back.scaleOriginX}"
y="{back.scaleWidth/2}"
height="{back.scaleHeight - back.scaleWidth/2}"
width="{back.scaleWidth}"
animationDuration="200"
id="bar"/>
<RectangularScaleRenderer width="35" tickPlacement="leading"
fontSize="11"
x="{back.scaleOriginX-20}"
y="{back.scaleWidth/2}"
height="{back.scaleHeight - back.scaleWidth/2}"
buttonMode="true"
area="center"
minorTickWidth="1" majorTickWidth="1" majorTickLength="90%" minorTickLength="50%"
labelPlacement="leading"/>
</elements>
</RectangularGauge>
with 2 custom classes which inherit from gauges framework classes: ThermometerBackground (extends RectangleRenderer) and ThermometerBar (extends RectangularBarRenderer).
The gauge style is fully programmatic (no external assets are used), you can change the color of the gauge by using the mainColor attribute:
...
<local:Thermometer mainColor="0x188238">
...
The Flex Builder project containing the source code of this blog post is available here.
