Page 1 of 1

flex chart: Gauge meter Component

PostPosted: Thu Apr 28, 2011 2:22 pm
by tomrff
flex chart: Gauge meter Component, full code in zip file
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" viewSourceURL="srcview/index.html">
<mx:Script>
    <![CDATA[
        private function init():void
        {
            cp_bg.selectedColor = gauge.getStyle("backgroundColor");
            hs_alpha.value = gauge.getStyle("backgroundAlpha");
            cp_tc.selectedColor = gauge.getStyle("tickColor");
            hs_matt.value = gauge.getStyle("majorTickThickness");
            hs_mitt.value = gauge.getStyle("minorTickThickness");
            hs_matl.value = gauge.getStyle("majorTickLength");
            hs_mitl.value = gauge.getStyle("minorTickLength");
            hs_margin.value = gauge.getStyle("tickInset");
           
            cb_fontsize.text = gauge.getStyle("scaleFontSize");
            cb_weight.selected = (gauge.getStyle("scaleFontWeight") == "bold");
            cb_style.selected = (gauge.getStyle("scaleFontStyle") == "italic");
            cp_fc.selectedColor = gauge.getStyle("scaleFontColor");
           
            cb_lfontsize.text = gauge.getStyle("labelFontSize");
            cb_lweight.selected = (gauge.getStyle("labelFontWeight") == "bold");
            cb_lstyle.selected = (gauge.getStyle("labelFontStyle") == "italic");
            cp_lfc.selectedColor = gauge.getStyle("labelFontColor");
           
            cp_boc.selectedColor = gauge.getStyle("borderColor");
            rbg_border.selectedValue = gauge.getStyle("borderStyle");
            hs_bot.value = gauge.getStyle("borderThickness");
            rbg_io.selectedValue = (gauge.scaleInside?'inside':'outside');
        }
    ]]>
</mx:Script>

<mx:Array id="fontFamilyArray">
    <mx:String>Arial</mx:String>
    <mx:String>Courier</mx:String>
    <mx:String>Courier New</mx:String>
    <mx:String>Geneva</mx:String>
    <mx:String>Georgia</mx:String>
    <mx:String>Helvetica</mx:String>
    <mx:String>Times New Roman</mx:String>
    <mx:String>Times</mx:String>
    <mx:String>Verdana</mx:String>
</mx:Array>

<mx:Array id="fontSizeArray">
        <mx:String>8</mx:String>
        <mx:String>9</mx:String>
        <mx:String>10</mx:String>
        <mx:String>11</mx:String>
        <mx:String>12</mx:String>
        <mx:String>14</mx:String>
        <mx:String>16</mx:String>
        <mx:String>18</mx:String>
        <mx:String>20</mx:String>
        <mx:String>22</mx:String>
        <mx:String>24</mx:String>
        <mx:String>26</mx:String>
        <mx:String>28</mx:String>
        <mx:String>36</mx:String>
        <mx:String>48</mx:String>
        <mx:String>72</mx:String>
    </mx:Array>
       
    <mx:HBox>
        <mx:Panel label="Controls" title="Controls" width="400" backgroundAlpha="0" verticalGap="0">
            <mx:TabNavigator creationPolicy="all" width="100%" height="100%" >
               
                <mx:VBox width="100%" height="100%" verticalGap="1" label="Styles">
                   
                    <mx:FormItem labelWidth="140" label="Size">
                        <mx:HSlider id="hs_size" snapInterval="1" minimum="50" maximum="500" value="{gauge.width}" change="{gauge.width = gauge.height = hs_size.value}"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Angle Range">
                        <mx:HSlider id="hs_arange" thumbCount="2" values="{[gauge.angleFrom,gauge.angleTo]}" minimum="{-Math.PI}" maximum="{Math.PI}" change="{gauge.angleFrom = hs_arange.values[0]; gauge.angleTo = hs_arange.values[1];}" liveDragging="false"/>
                    </mx:FormItem>
                   
                    <!--<mx:FormItem labelWidth="140" label="Cutaway">
                        <mx:CheckBox id="chb_cut" selected="{gauge.backgroundCutAway}" change="{gauge.backgroundCutAway = chb_cut.selected}"/>
                    </mx:FormItem> -->
       
                    <mx:FormItem labelWidth="140" label="Range">
                        <mx:HSlider id="hs_range" thumbCount="2" values="{[gauge.minimum,gauge.maximum]}"  minimum="0" maximum="20" change="{gauge.minimum = hs_range.values[0]; gauge.maximum = hs_range.values[1];}" liveDragging="false"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Value">
                        <mx:HSlider id="hs_value" creationComplete="{hs_value.executeBindings()}" value="{gauge.value}" minimum="{hs_range.values[0]}" maximum="{hs_range.values[1]}" change="{gauge.value = hs_value.value}" liveDragging="true"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Auto Return" direction="horizontal">
                        <mx:CheckBox id="cb_return" selected="false" change="{gauge.zeroReturn = cb_return.selected}"/>
                   
                            <mx:Label text="Rate"/>
                            <mx:HSlider id="hs_returnrate" enabled="{cb_return.selected}" width="60" snapInterval="1" minimum="1" maximum="50" value="{gauge.returnRate}" change="{gauge.returnRate = hs_returnrate.value}"/>
       
                    </mx:FormItem>
                    <mx:FormItem labelWidth="140" label="Interactive" direction="horizontal">
                        <mx:CheckBox id="cb_interact" selected="{gauge.interactive}" change="{gauge.interactive = cb_interact.selected}"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Label Position" direction="vertical">
                        <mx:HSlider id="hs_scalegap" value="{gauge.scaleGap}" minimum="-20" maximum="20" change="{gauge.scaleGap = hs_scalegap.value}" liveDragging="true"/>
                        <mx:RadioButtonGroup id="rbg_io" change="{gauge.scaleInside = (rbg_io.selectedValue == 'inside')}"/>
                        <mx:HBox>                   
                            <mx:RadioButton group="{rbg_io}" label="inside" selected="true" value="inside"/>
                            <mx:RadioButton group="{rbg_io}" label="outside" selected="false" value="outside"/>   
                        </mx:HBox>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Margin">
                        <mx:HSlider id="hs_margin" snapInterval="1" minimum="0" maximum="40" change="{gauge.setStyle('tickInset',hs_margin.value)}"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Lines">
                        <mx:HBox>
                            <mx:CheckBox id="chb_inn" label="Inner" selected="{gauge.showInnerLine}" change="{gauge.showInnerLine = chb_inn.selected}"/>
                            <mx:CheckBox id="chb_out" label="Outer" selected="{gauge.showOuterLine}" change="{gauge.showOuterLine = chb_out.selected}"/>
                        </mx:HBox>
                    </mx:FormItem>
                           
                    <mx:FormItem labelWidth="140" label="Fill Alpha">
                        <mx:HSlider id="hs_alpha" minimum="0" maximum="1" value="1" change="{gauge.setStyle('backgroundAlpha',hs_alpha.value);}"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Fill Color">
                        <mx:ColorPicker id="cp_bg" change="{gauge.setStyle('backgroundColor',cp_bg.value)}"/>
                    </mx:FormItem>

                    <mx:FormItem labelWidth="140" label="Tick Color">
                        <mx:ColorPicker id="cp_tc" change="{gauge.setStyle('tickColor',cp_tc.value)}"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Ticks">
                        <mx:HBox>
                            <mx:CheckBox id="chb_half" label="Half" selected="{gauge.showHalfTicks}" change="{gauge.showHalfTicks = chb_half.selected}"/>
                            <mx:CheckBox id="chb_qrt" label="Quarter" selected="{gauge.showQuarterTicks}" change="{gauge.showQuarterTicks = chb_qrt.selected}"/>
                        </mx:HBox>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Major Tick" direction="horizontal">
                        <mx:VBox verticalGap="-2">   
                            <mx:Label text="Thickness"/>
                            <mx:HSlider id="hs_matt" snapInterval="1" width="60" minimum="1" maximum="10" change="{gauge.setStyle('majorTickThickness',hs_matt.value)}"/>
                        </mx:VBox>
                        <mx:VBox  verticalGap="-2">                   
                            <mx:Label text="Length"/>
                            <mx:HSlider id="hs_matl" snapInterval="1" width="60" minimum="1" maximum="25" change="{gauge.setStyle('majorTickLength',hs_matl.value)}"/>
                        </mx:VBox>
                    </mx:FormItem>
                   
                   
                    <mx:FormItem labelWidth="140" label="Minor Tick" direction="horizontal">
                        <mx:VBox verticalGap="-2">   
                            <mx:Label text="Thickness"/>
                            <mx:HSlider id="hs_mitt" snapInterval="1" width="60" minimum="1" maximum="10" change="{gauge.setStyle('minorTickThickness',hs_mitt.value)}"/>
                        </mx:VBox>
                        <mx:VBox  verticalGap="-2">                   
                            <mx:Label text="Length"/>
                            <mx:HSlider id="hs_mitl" snapInterval="1" width="60" minimum="1" maximum="25" change="{gauge.setStyle('minorTickLength',hs_mitl.value)}"/>
                        </mx:VBox>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Border" direction="horizontal">
                        <mx:RadioButtonGroup id="rbg_border" change="{gauge.setStyle('borderStyle',rbg_border.selectedValue)}"/>
                        <mx:RadioButton group="{rbg_border}" label="solid" selected="true" value="solid"/>
                        <mx:RadioButton group="{rbg_border}" label="none" selected="false" value="none"/>   
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Border Color">
                        <mx:ColorPicker id="cp_boc" change="{gauge.setStyle('borderColor',cp_boc.value)}"/>
                    </mx:FormItem>
                   
                    <mx:FormItem labelWidth="140" label="Border Thickness">
                        <mx:HSlider id="hs_bot" snapInterval="1" minimum="1" maximum="10" change="{gauge.setStyle('borderThickness',hs_bot.value)}"/>
                    </mx:FormItem>
                   
                </mx:VBox>
               
                <mx:VBox width="100%" height="100%" verticalGap="1" label="Text">
                    <mx:FormItem labelWidth="140" label="Scale Font" direction="vertical">
                        <mx:HBox>
                            <mx:ComboBox id="cb_font" width="100" dataProvider = "{fontFamilyArray}" change="{gauge.setStyle('scaleFontFamily',cb_font.text)}"/>
                            <mx:ComboBox id="cb_fontsize" width="50" dataProvider = "{fontSizeArray}" change="{gauge.setStyle('scaleFontSize',cb_fontsize.text)}"/>
                            <mx:ColorPicker id="cp_fc" change="{gauge.setStyle('scaleFontColor',cp_fc.value)}"/>
                        </mx:HBox>
                        <mx:HBox>
                            <mx:CheckBox id="cb_weight" label="bold" change="{gauge.setStyle('scaleFontWeight',(cb_weight.selected?'bold':'normal'))}"/>
                            <mx:CheckBox id="cb_style" label="italic" change="{gauge.setStyle('scaleFontStyle',(cb_style.selected?'italic':'normal'))}"/>
                        </mx:HBox>
                    </mx:FormItem>
                    <mx:FormItem labelWidth="140" label="Label" >
                        <mx:TextInput id="ti_label" text="{gauge.label}" change="{gauge.label = ti_label.text}"/>
                    </mx:FormItem>
                    <mx:FormItem labelWidth="140" label="Label Font" direction="vertical">
                        <mx:HBox>
                            <mx:ComboBox id="cb_lfont" width="100" dataProvider = "{fontFamilyArray}" change="{gauge.setStyle('labelFontFamily',cb_lfont.text)}"/>
                            <mx:ComboBox id="cb_lfontsize" width="50" dataProvider = "{fontSizeArray}" change="{gauge.setStyle('labelFontSize',cb_lfontsize.text)}"/>
                            <mx:ColorPicker id="cp_lfc" change="{gauge.setStyle('labelFontColor',cp_lfc.value)}"/>
                        </mx:HBox>
                        <mx:HBox>
                            <mx:CheckBox id="cb_lweight" label="bold" change="{gauge.setStyle('labelFontWeight',(cb_lweight.selected?'bold':'normal'))}"/>
                            <mx:CheckBox id="cb_lstyle" label="italic" change="{gauge.setStyle('labelFontStyle',(cb_lstyle.selected?'italic':'normal'))}"/>
                        </mx:HBox>
                    </mx:FormItem>
                   
                </mx:VBox>
            </mx:TabNavigator>
        </mx:Panel>
        <local:Gauge minimum="0" maximum="4" id="gauge" width="200" height="200" borderStyle="solid" borderThickness="3" borderColor="#FFFD17" 
            backgroundColor="#000000" tickColor="#FFFD17"
            tickInset="0" majorTickLength="20" minorTickLength="7" majorTickThickness="3" minorTickThickness="2"
            scaleFontColor="#FFFD17" scaleFontFamily="Arial" scaleFontSize="20" scaleFontWeight="bold"
            labelFontColor="#FFFD17" labelFontFamily="Arial" labelFontSize="10" labelFontWeight="bold"
            creationComplete="init()" label="x1000 RPM" />   
           
       
       
       
       
    </mx:HBox>
</mx:Application>