6 Replies Latest reply on Sep 8, 2010 5:24 AM by djh88ukwb

    Timer and HSlider linked

    djh88ukwb Level 1

      Hello all.

       

      I have the following application:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="init()">
          <fx:Declarations>
              <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
          </fx:Declarations>

          <fx:Script>
              <![CDATA[
                  import flash.utils.Timer;
                  import flash.events.TimerEvent;
                 
                  private const TIMER_INTERVAL:int = 10;
                  private var baseTimer:int;
                  private var t:Timer;
                 
                  private function init():void {
                      t = new Timer(TIMER_INTERVAL);
                      t.addEventListener(TimerEvent.TIMER, updateTimer);
                  }
                  private function updateTimer(evt:TimerEvent):void {
                      var d:Date = new Date(getTimer() - baseTimer);
                      counter.text = dateFormatter.format(d);
                  }
                  private function startTimer():void {
                      baseTimer = getTimer();
                      t.start();
                  }
                  private function stopTimer():void {
                      t.stop();
                  }
              ]]>
          </fx:Script>
              <s:Button label="Start timer" click="startTimer()"  x="10" y="10"/>
              <s:Button label="Stop timer" click="stopTimer()"  x="95" y="10"/>
              <s:BorderContainer x="10" y="39" width="350" height="30">
                      <s:HSlider minimum="0" maximum="120" verticalCenter="0" left="10" width="275"/>
                      <mx:Label id="counter" fontSize="14" verticalCenter="0" right="10" textAlign="right"/>
              </s:BorderContainer>
         
      </s:Application>

       

      Basically, when you click start timer, a timer starts up in seconds and minutes.

       

      I also have a HSlider, but at the moment it does nothing.

       

      Im having a few problems.  Basically i want to limit the timer, so when it reaches 120 seconds, or two minutes it stops.  THen i want to link the current time to the HSlider, so as the timer increases the HSLider moves.  Kinda like a progress bar so the user knows how long they have left until the two minute mark.

       

      If anyone can help me get this working that would be great !

        • 1. Re: Timer and HSlider linked
          Flex4Education

          Hi

           

          To solve both Problem make a new var for the timer count :

           

          private var timerCount:int = 0;

           

          and give the HSlider an Id. (I'll use TimerSlider)

           

          in the TimerEvent:

           

           

               timerCount++;

               TimerSlider.value = timerCount;

               if (timerCount >= 120)

                    {

                         stopTimer();

                    }

           

           

           

          Think that should work.

           

          F4E

          1 person found this helpful
          • 2. Re: Timer and HSlider linked
            djh88ukwb Level 1

            THank you for the reply.

            It kinda works, although my timer only goes upto 1 second now.

             

            My code is as follows

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="init()">
                <fx:Declarations>
                    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
                </fx:Declarations>

                <fx:Script>
                    <![CDATA[
                        import flash.events.TimerEvent;
                        import flash.utils.Timer;
                       
                        private const TIMER_INTERVAL:int = 10;
                        private var baseTimer:int;
                        private var t:Timer;
                        [Bindable] public var timerCount:int = 0;
                       
                        private function init():void {
                            t = new Timer(TIMER_INTERVAL);
                            t.addEventListener(TimerEvent.TIMER, updateTimer);
                        }
                        private function updateTimer(evt:TimerEvent):void {
                            var d:Date = new Date(getTimer() - baseTimer);
                            counter.text = dateFormatter.format(d);
                           
                            timerCount++;
                            TimerSlider.value = timerCount;
                            if (timerCount >= 120)
                            {
                                stopTimer();
                            }
                        }
                        private function startTimer():void {
                            baseTimer = getTimer();
                            t.start();
                        }
                        private function stopTimer():void {
                            t.stop();
                        }
                    ]]>
                </fx:Script>
                    <s:Button label="Start timer" click="startTimer()"  x="10" y="10"/>
                    <s:Button label="Stop timer" click="stopTimer()"  x="95" y="10"/>
                    <s:BorderContainer x="10" y="39" width="350" height="30">
                            <s:HSlider minimum="0" maximum="120" verticalCenter="0" left="10" width="275" id="TimerSlider"/>
                            <mx:Label id="counter" fontSize="14" verticalCenter="0" right="10" textAlign="right"/>
                    </s:BorderContainer>
               
            </s:Application>

             

            It only goes to 1 second and then stops.  THe Slider works thou, but again that only goes upto one second.

             

            Any idea?

            • 3. Re: Timer and HSlider linked
              djh88ukwb Level 1

              Jus an update.  I stuck a label on the canvas, and gave it a text value of ="{timerCount}".

               

              <s:Label x="10" y="77" text="{timerCount}"/>

               

              The value of the timer count is far different from the actual second that the timer is on.  I think this is why it causing it.  Becuase when the timer is on 1 second, the timerCount value is at 100.  And the limit is 120.  Therefore it stops just after one second.  IS there anyway to get the timerCount to be more lke the actual timer?

              • 4. Re: Timer and HSlider linked
                Flex4Education Level 1

                Hi

                 

                Sorry it's my fault.

                You'r timerEvent is called every 10 milliseconds, right?

                So edit 120 to 120000, and set the increase to 10:

                 

                                timerCount+=10;
                                TimerSlider.value = timerCount;
                                if (timerCount >= 120000)
                                {
                                    stopTimer();
                                }

                And calc the Slider value like this:

                 

                     TimerSlider.value = timerCount/1000;

                 

                Or in order, you linking the timerCount direct to your Slider, you can use this, if you want to keep the linking:

                 

                                timerCount+=0.01;
                                 TimerSlider.value = timerCount;
                                 if (timerCount >= 120)
                                 {
                                     stopTimer();
                                 }

                 

                 

                F4E

                • 5. Re: Timer and HSlider linked
                  djh88ukwb Level 1

                  Thanks alot ! =] Works a treat.

                   

                  No last question sorry.

                   

                  WHen using a mx:HSlider, is there anyway to disable the user from being able to click it ?

                   

                  I have set it to livedragging="false", but this still allows the user to be able to drag the pointer, it dosent set in the palce its dropped, but it can still be moved, and dosent look right when the HSlider is being used as a counter.  Is there a way that it can be touched at all, i have set the slider to enabled="false" but this dims it out slightly.

                   

                  Also is there a way to remove the pointer / icon that moves ?  At the moment i have showTrackHighlight="true" and i would prefer the pointer / icon to be hidden.  Is this possible?

                   

                  Thanks again!

                  • 6. Re: Timer and HSlider linked
                    djh88ukwb Level 1

                    Actually, no worries, i got it !

                     

                    <mx:HSlider minimum="0" maximum="7200" verticalCenter="0" left="10" width="275" id="TimerSlider" liveDragging="false" enabled="true" showTrackHighlight="true" thumbSkin="{null}" allowTrackClick="false"/>

                     

                    Thanks for all the help !