1 Reply Latest reply on Feb 1, 2010 11:32 PM by venkateshk

    Percentage fillup

    venkateshk

      <mx:Canvas id="a" borderStyle="solid" width="300" height="300" borderThickness="2" borderColor="black"/>

      this is my canvas

      <mx:HBox x="300" y="{Application.application.height-50}">
              <mx:ComboBox id="combo" dataProvider="{['A','B','C','D','E','F']}"/>
               <mx:Label text="Liters :" fontWeight="bold" fontSize="13"/>
              <mx:TextInput id="tiLiters" width="40"/>
              <mx:Button id="btn" label="Click" click="btnCall()"/>

      </mx:HBox>

      I hava a canvas with height & width are 300

      My assumption is that its a tank of capacity 1000 liters

      If i enter 200 liters in tiLiters text input and click on 'btn' button I need to calculate the percentage and I want to highlight the area of canvas with color with respect to that percentage I am not getting this thing please help me.......

      private function btnCall():void
                  {              
                          var liters:Number = parseFloat(tiLiters.text);
                          var capacity:Number = 1000;
                          var result:Number = (liters/capacity)*100;
                          if(liters<=capacity)
                          {
                              var box:Box = new Box();
                              //box.width = ;
                              //box.height = ;
                              box.setStyle("backgroundColor",0xFF0000);
                              a.rawChildren.addChild(box);
                          }
                          else
                          {
                              Alert.show("There is no sufficient area to fill");
                          }
                   }

      I wrote like above function but the probles is the width and height tof the box

      next time if i give another value for liters i want to again fill the with color beside the earlier filling area in this way i want  to fill total area with color

      upto capacity is over

        • 1. Re: Percentage fillup
          archemedia Level 4

          This should do it:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="components.*">
              <mx:Script>
                  <![CDATA[
                      import mx.controls.Alert;
                      import mx.containers.Box;
                     
                      [Bindable]
                      private var contentHeight:Number = 0;
                     
                     
                      private function btnCall():void
                      {             
                          var liters:Number = parseFloat(tiLiters.text);
                          var capacity:Number = 1000;
                         
                         
                          if(liters<=capacity)
                          {
                              contentHeight = (liters/capacity)*container.height;
                          }
                          else
                          {
                              Alert.show("There is no sufficient area to fill");
                          }
                      }

           


                  ]]>
              </mx:Script>
             
             
              <mx:HBox id="container"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" width="300" height="300" borderThickness="2" borderColor="black" verticalAlign="bottom">
                  <mx:Canvas id="fluid"
                      horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" width="300" height="{contentHeight}" backgroundColor="#FF0000"/>
              </mx:HBox>  

           

              <mx:HBox x="300" y="{Application.application.height-50}">
                  <mx:ComboBox id="combo" dataProvider="{['A','B','C','D','E','F']}"/>
                  <mx:Label text="Liters :" fontWeight="bold" fontSize="13"/>
                  <mx:TextInput id="tiLiters" width="40"/>
                  <mx:Button id="btn" label="Click" click="btnCall()"/>
              </mx:HBox>

          </mx:Application>

           

           

          Dany