Below is the link to the application: http://degrafa.org/source/CapacityIndicator/CapacityIndicator.html
--- In [email protected], "kaushal.shah05" <kshah0...@...> wrote: > > 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> >
