2 Replies Latest reply on Aug 5, 2015 12:10 PM by Grant Trotter

    Display ticker of time spent on page

    Grant Trotter Level 1

      I want to show the user the time that has elapsed since they came to the page in a ticker that updates every second. So it would say...


      00:00

      00:01

      00:02

      00:03

      ...


      I'm investigating some different methods of doing this, but I'm not an expert in Javascript and I'm very new to Edge Animate. So as I try to figure it out, I wanted see if I could get some input on the right way(s) to do this.


      I've been toying with creating a symbol that has a 1 second looping timeline, and having an action triggered on that timeline. But that requires you to get the time at the start, and then access and manipulate it, and that gets easy to mess up/do poorly.


      Or you could create a loop that increments every second, probably using setInterval(), and just have it ++ a counter variable. But I'm not sure if that would run asynchronously from everything else.

       

      So if anybody has treaded similar waters, I would greatly appreciate some input!

       

      Many thanks!

        • 1. Re: Display ticker of time spent on page
          Grant Trotter Level 1

          This is what I've got right now. It's great as far as I can tell. Does anybody have any improvements to suggest?


          ------------------------------------------------------------


          //Create and reference variables

          sym.setVariable('secondCounter', 0);

          var secondCounter = sym.getComposition().getStage().getVariable('secondCounter');

           

          sym.setVariable('minutesCounter', 0);

          var minutesCounter = sym.getComposition().getStage().getVariable('minutesCounter');

           

          sym.setVariable('hoursCounter', 0);

          var hoursCounter = sym.getComposition().getStage().getVariable('hoursCounter');

           

          setInterval(function() {

            //Count seconds

            secondCounter++;

           

            //Convert seconds to minutes

            if(secondCounter == 60) {

            secondCounter = 0;

            minutesCounter++;

            }

           

            //Convert minutes to hours

            if(minutesCounter == 60) {

            minutesCounter = 0;

            hoursCounter++;

            }

           

            //This line for testing only. To view this output, use Inspect Element or something.

            console.log('hoursCounter: ' + hoursCounter + ', minutesCounter: ' + minutesCounter + ', secondCounter: ' + secondCounter);

          }, 1000);

          // ^Set time here in milliseconds

          • 2. Re: Display ticker of time spent on page
            Grant Trotter Level 1

            Here's an improved version.

             

            I wanted it to show a 0 in the 10s place if the counter was less than ten. So I wanted 00:00:00, not 0:0:0.

             

            And before I had made all the variables globally accessible, which is not necessary. The only one that needs to be globally accessible (for my purposes) is timerCombined, which you can access with:

            sym.getComposition().getStage().getVariable('timerCombined');

            sym.getComposition().getStage().setVariable('timerCombined', 'whatever value');


            ----------------------------------------------

             

            //Create variables

            //"...Formatted" variables are to say "00:00:00" instead of "0:0:0"

            var secondCounter = 0;

            var secondCounterFormatted = '00';

             

            var minuteCounter = 0;

            var minuteCounterFormatted = '00';

             

            var hourCounter = 0;

            var hourCounterFormatted = '00';

             

            //Combining all into one

            sym.setVariable('timerCombined', '00:00:00');

             

            setInterval(function() {

              //Count seconds

              secondCounter++;

              if(secondCounter < 10) {

              secondCounterFormatted = '0' + secondCounter;

              } else {

              secondCounterFormatted = secondCounter

              }

             

              //Convert seconds to minutes

              if(secondCounter == 60) {

              secondCounter = 0;

              minuteCounter++;

              if(minuteCounter < 10) {

              minuteCounterFormatted = '0' + minuteCounter;

              } else {

              minuteCounterFormatted = minuteCounter

              }

              }

             

              //Convert minutes to hours

              if(minuteCounter == 60) {

              minuteCounter = 0;

              hourCounter++;

              if(hourCounter < 10) {

              hourCounterFormatted = '0' + hourCounter;

              } else {

              hourCounterFormatted = hourCounter;

              }

              }

             

              sym.getComposition().getStage().setVariable('timerCombined', (hourCounterFormatted + ':' + minuteCounterFormatted + ':' + secondCounterFormatted));

            }, 1000);

            // ^Set time here in milliseconds