does anyone know how to dynamically change the size of the indicator bar?
binding variables to the width and height did not work. I
also tried changing the "surface" component but no luck
below is the isolated capacity indicator bar code.
<!-- Graphics and Paint for the inner bars and background -->
<GeometryComposition
graphicsTarget="{[capacitySurface]}"
propertyChange="initChange(event);">
<fills>
<SolidFill
id="colorOne"
color="{cpOne.selectedColor}"/>
<SolidFill
id="colorTwo"
color="{cpTwo.selectedColor}"/>
<SolidFill
id="colorThree"
color="{cpThree.selectedColor}"/>
<SolidFill
id="colorFour"
color="{cpFour.selectedColor}"/>
<ComplexFill
id="complex">
<SolidFill
color="{cpFour.selectedColor}"/>
<BlendFill
blendMode="multiply">
<BitmapFill
id="crosshatch"
source="@Embed('assets/65003.png')"/
</BlendFill>
</ComplexFill>
<LinearGradientFill
id="highlight"
angle="90">
<GradientStop
color="#FFF"
alpha=".3"/>
<GradientStop
color="#FFF"
alpha=".05"/>
</LinearGradientFill>
<LinearGradientFill
id="shadow"
angle="90"
blendMode="multiply">
<GradientStop
color="#000"
alpha=".01"/>
<GradientStop
color="#000"
alpha=".5"/>
</LinearGradientFill>
<LinearGradientFill
id="inset"
angle="90">
<GradientStop
color="#CCC"
alpha=".2"
ratio="0"
ratioUnit="pixels"/>
<GradientStop
color="#FFF"
alpha=".3"
ratio="16"
ratioUnit="pixels"/>
</LinearGradientFill>
</fills>
<strokes>
<SolidStroke
id="whiteStroke"
color="#FFF"
weight="1"
alpha=".15"/>
<SolidStroke
id="darkStroke"
color="#000"
weight="1"
alpha=".2"/>
</strokes>
<RegularRectangle
id="insetRect"
width="{capacityWidth.value}"
height="{capacitySurface.height}"
fill="{inset}"/>
<RegularRectangle
id="fourthRect"
width="{capacitySlider.values[3]}"
height="{capacitySurface.height}"
fill="{complex}"/>
<RegularRectangle
id="thirdRect"
width="{capacitySlider.values[2]}"
height="{capacitySurface.height}"
fill="{colorThree}"/>
<RegularRectangle
id="secondRect"
width="{capacitySlider.values[1]}"
height="{capacitySurface.height}"
fill="{colorTwo}"/>
<RegularRectangle
id="firstRect"
width="{capacitySlider.values[0]}"
height="{capacitySurface.height}"
fill="{colorOne}"/>
<RegularRectangle
id="shadowRect"
width="{capacityWidth.value}"
height="{capacitySurface.height}"
fill="{shadow}"/>
<VerticalLineRepeater
x="20"
y="0"
y1="{capacitySurface.height}"
moveOffsetX="20"
count="{capacityWidth.value/20}"
stroke="{darkStroke}"/>
<VerticalLineRepeater
x="21"
y="0"
y1="{capacitySurface.height}"
moveOffsetX="20"
count="{capacityWidth.value/20}"
stroke="{whiteStroke}"/>
<RoundedRectangleComplex
id="highlightRect"
bottomLeftRadius="10"
bottomRightRadius="10"
width="{capacityWidth.value}"
height="{capacitySurface.height/2}"
fill="{highlight}"/>
</GeometryComposition>
<!-- Masked Surface and Filter for the Capacity Indicator -->
<Surface
id="capacitySurface"
verticalCenter="0"
horizontalCenter="0"
width="{capacityWidth.value}"
height="40"
mask="{roundMask}">
<GeometryGroup
id="roundMask">
<RoundedRectangle
width="{capacityWidth.value}"
height="{capacitySurface.height}"
cornerRadius="20"
fill="{colorOne}"/>
</GeometryGroup>
<filters>
<filters:GlowFilter
color="#000000"
alpha=".1"
blurX="4"
blurY="4"
inner="true"
quality="6"/>
</filters>
</Surface>
