<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:chid="com.chid.*"
    layout="absolute"
    backgroundGradientColors="[#333333,#666666]" 
    viewSourceURL="srcview/index.html">

    <mx:Style source="assets/style/style.css"/>

    <mx:Label text="Simple Meter" top="30" right="30" styleName="title"/>

    <!-- configuration options -->
    <mx:HBox top="90" right="20" bottom="20" left="20">

            <mx:Grid width="50%">
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Meter Width:" /></mx:GridItem>
                    <mx:GridItem><mx:HSlider id="hs_meterWidth" minimum="20" maximum="250" tickInterval="1" liveDragging="true" value="100" width="200"/></mx:GridItem>
                </mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Meter Height:" /></mx:GridItem>
                    <mx:GridItem><mx:HSlider id="hs_meterHeight" minimum="50" maximum="500" tickInterval="1" liveDragging="true" value="300" width="200"/></mx:GridItem>
                </mx:GridRow>
                <mx:GridRow><mx:GridItem><mx:Spacer height="10" /></mx:GridItem></mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Value:" /></mx:GridItem>
                    <mx:GridItem><mx:HSlider id="hs_value" minimum="0" maximum="{hs_valueMax.value}" tickInterval="1" snapInterval="1" liveDragging="true" value="70" width="200"/></mx:GridItem>
                </mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Max Value:" /></mx:GridItem>
                    <mx:GridItem><mx:HSlider id="hs_valueMax" minimum="0" maximum="1000" tickInterval="1" snapInterval="1" liveDragging="true" value="100" width="200"/></mx:GridItem>
                </mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Value Color/Alpha:" /></mx:GridItem>
                    <mx:GridItem>
                        <mx:ColorPicker id="cp_value" selectedColor="0x000000"/>
                        <mx:NumericStepper id="ns_valueAlpha" minimum="0" maximum="1" value=".8" stepSize=".1" width="50" textAlign="right"/>
                    </mx:GridItem>
                </mx:GridRow>
                <mx:GridRow><mx:GridItem><mx:Spacer height="10" /></mx:GridItem></mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Range 1:"/></mx:GridItem>
                    <mx:GridItem>
                        <mx:ColorPicker id="cp_range1" selectedColor="0x00ff00"/>
                        <mx:NumericStepper id="ns_range1" minimum="0" maximum="{ns_range2.value}" value="75" width="50" textAlign="right"/>
                        <mx:Label text="%"/>
                    </mx:GridItem>
                </mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Range 2:"/></mx:GridItem>
                    <mx:GridItem>
                        <mx:ColorPicker id="cp_range2" selectedColor="0xffff00"/>
                        <mx:NumericStepper id="ns_range2" minimum="{ns_range1.value}" maximum="100" value="85" width="50" textAlign="right"/>
                        <mx:Label text="%"/>
                    </mx:GridItem>
                </mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Range 3:"/></mx:GridItem>
                    <mx:GridItem>
                        <mx:ColorPicker id="cp_range3" selectedColor="0xff0000"/>
                        <mx:Label text="100" width="50" textAlign="right"/>
                        <mx:Label text="%"/>
                    </mx:GridItem>
                </mx:GridRow>
                <mx:GridRow><mx:GridItem><mx:Spacer height="10" /></mx:GridItem></mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Show Label:" /></mx:GridItem>
                    <mx:GridItem><mx:CheckBox id="cb_showLabel" selected="true" /></mx:GridItem>
                </mx:GridRow>
                <mx:GridRow>
                    <mx:GridItem><mx:Label text="Label Color/Size:" /></mx:GridItem>
                    <mx:GridItem>
                        <mx:ColorPicker id="cp_labelText" selectedColor="0xffffff" enabled="{cb_showLabel.selected}"/>
                        <mx:NumericStepper id="ns_fontSize" minimum="10" maximum="100" value="30" width="50" enabled="{cb_showLabel.selected}" textAlign="right"/>
                    </mx:GridItem>
                </mx:GridRow>
            </mx:Grid>

        <!-- example meter -->
        <chid:degrafaMeter
            width="{hs_meterWidth.value}" 
            height="{hs_meterHeight.value}"
            _currentValue="{hs_value.value}" 
            _valueColor="{cp_value.selectedColor}"
            _valueAlpha="{ns_valueAlpha.value}" 
            _valueMax="{hs_valueMax.value}"
            _range1Color="{cp_range1.selectedColor}" 
            _range2Color="{cp_range2.selectedColor}" 
            _range3Color="{cp_range3.selectedColor}" 
            _range1Percent="{ns_range1.value}" 
            _range2Percent="{ns_range2.value}" 
            _labelTextColor="{cp_labelText.selectedColor}" 
            _labelFontSize="{ns_fontSize.value}" _showLabel="{cb_showLabel.selected}"
         />

    </mx:HBox>

</mx:Application>