<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="black" xmlns:local="*" layout="vertical" horizontalScrollPolicy="off" viewSourceURL="srcview/index.html">
      <mx:HBox color="#FFFFFF" width="100%" height="100%"  verticalAlign="middle"  horizontalScrollPolicy="off">
          
          <mx:VBox verticalAlign="middle">
              <!--<mx:NumericStepper minimum="0" maximum="9999" stepSize="1" change="{led.value = event.target.value}"/> -->
              <mx:FormItem labelWidth="120" label="skew">
                  <mx:HSlider value="{led.charSkew}" minimum="0" maximum="20" change="{led.charSkew = led2.charSkew = event.target.value; led.refresh(); led2.refresh()}" width="40"/>
              </mx:FormItem>
              <mx:FormItem labelWidth="120" label="on color">
                  <mx:ColorPicker selectedColor="{led.charOnColor}" change="{led.charOnColor = led2.charOnColor = event.target.selectedColor; led.refresh(); led2.refresh()}"/>
              </mx:FormItem>
              <mx:FormItem labelWidth="120" label="off color">
                  <mx:ColorPicker selectedColor="{led.charOffColor}" change="{led.charOffColor = led2.charOffColor = event.target.selectedColor; led.refresh(); led2.refresh()}"/>
              </mx:FormItem>
              <mx:FormItem labelWidth="120" label="width">
                  <mx:HSlider id="hs_w" value="{led.charW}" minimum="0" maximum="200" change="{led.charW = led2.charW = event.target.value; led.refresh(); led2.refresh()}" width="40"/>
              </mx:FormItem>
              <mx:FormItem labelWidth="120" label="height">
                  <mx:HSlider id="hs_h" value="{led.charH}" minimum="0" maximum="200" change="{led.charH = led2.charH = event.target.value; led.refresh(); led2.refresh()}" width="40"/>
              </mx:FormItem>
              <mx:FormItem labelWidth="120" label="bar thickness">
                  <mx:HSlider value="{led.charThick}" minimum="0" maximum="{Math.min(hs_w.value/5,hs_h.value/5)}" change="{led.charThick = led2.charThick = event.target.value; led.refresh(); led2.refresh()}" width="40"/>
              </mx:FormItem>
          </mx:VBox>
          
          <mx:Spacer width="100"/>
          
          <mx:VBox width="100%" height="100%"  verticalAlign="middle" verticalGap="20" horizontalScrollPolicy="off">
              <mx:Label text="16 Segment Display" fontSize="20"/>
              <mx:FormItem labelWidth="120" label="text">
                  <mx:TextInput text="Hello World!" color="#000000" maxChars="20" change="{led.text = event.target.text}" creationComplete="{led.text = event.target.text}"/>
              </mx:FormItem>
              <local:flex_led_array id="led" width="100%" charType="{flex_led_char.DISPLAY_16_SEG}"/>
              
              <mx:Label text="7 Segment Display" fontSize="20"/>
              <mx:FormItem labelWidth="120" label="text">
                  <mx:TextInput text="12:01" restrict="[1,2,3,4,5,6,7,8,9,0,:]" color="#000000" maxChars="20" change="{led2.text = event.target.text}" creationComplete="{led2.text = event.target.text}"/>
              </mx:FormItem>
              <local:flex_led_array id="led2" width="100%" charType="{flex_led_char.DISPLAY_7_SEG}"/>
          </mx:VBox>
      </mx:HBox>
      
  </mx:Application>