MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Making persistent and smooth visual timer

    Scheduled Pinned Locked Moved Development
    7 Posts 2 Posters 675 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K Offline
      Kiina
      last edited by

      So one problem with my module is that the pairing code for the oauth only has a 10 minute lifetime. I kinda wanna give the user a visual feedback on how long it’s still active, kinda like you see with 2fa applications.

      My first thought was: lets just make a circle with css animations that fills in 10 minutes. Easy, few lines of code. But since the dom refreshes it just starts from scratch everytime. My second approach was to think lets just use javascript, with something like progressbar.js. Just add the timer when the socket notification is received. But it seems like the javascript process is also terminating? Is there any other way than to run the timer in the node_helper and to pass the current value everytime? Especially since I have to use getDom to change the dom it’s all a bit fiddly since I also have to make sure the element stays persistent.

      S 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @Kiina
        last edited by sdetweil

        @kiina u don’t HAVE to start from scratch every time. if u have content created then save a pointer to it and return that…

        why is it trying to update?

        timer u have running

        just change the part that changed

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        K 1 Reply Last reply Reply Quote 1
        • K Offline
          Kiina @sdetweil
          last edited by

          @sdetweil Yeah I just realized I had the setInterval to update the DOM in there and never questioned why I put it there and had kinda forgotten about it. Maybe I should refactor so it only updates the dom when it really gets new information, it has been 4 years since I wrote that part of the module…

          Another small issue

          getScripts: function() {
          		return [ "node_modules/progressbar.js/dist/progressbar.min.js"];
          	},
          

          doesn’t seem to load. The file exists, I have it in my package.json. When i do like a cp node_modules/progressbar.js/dist/progressbar.min.js ./

          and

          getScripts: function() {
          		return [ "progressbar.min.js"];
          	},
          

          it works fine, but not when it’s in the node_modules folder? It tries to load the upper node_modules folder I think so

          getScripts: function() {
          		return ["modules/moduleName/node_modules/progressbar.js/dist/progressbar.min.js"];
          	},
          

          works fine but is probably not the best solution in case the module name changes.

          Plus it doesn’t seem like the domUpdate has a callback when it finished. Would be nice so I can load the progressbar when the dom container exists, instead of relying on setTimeout and praying for the best.

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @Kiina
            last edited by sdetweil

            @kiina this.file(node-modules…/filename) will give you the total path

            Would be nice so I can load the progressbar when the dom container exists, instead of relying on setTimeout and praying for the best.

            please explain a little better,… load the progressbar when the dom container exists

            u can use
            document.getElementByClassName(className)
            or
            document.getElementById(id)

            so u can know if it exists…

            it won’t til you pass thru getdom once probably

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            K 1 Reply Last reply Reply Quote 1
            • S Offline
              sdetweil @Kiina
              last edited by

              @kiina said in Making persistent and smooth visual timer:

              pairing code for the oauth only has a 10 minute lifetim

              and, why couldn’t you refresh under the cover for them???

              I do that for some apps that have refresh tokens… timer for time_to_live -5 or 10 seconds

              refresh
              restart timer

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • K Offline
                Kiina @sdetweil
                last edited by

                @sdetweil said in Making persistent and smooth visual timer:

                u can use
                document.getElementByClassName(className)
                or
                document.getElementById(id)

                so u can know it it exists…

                it won’t til you pass thru getdom once probably

                That’s what im doing. The issue is that without a callback from the getDOM you would probably have to loop that part.

                Following flow: The node_helper sends the socketnotification with the code for authentification. The dom updates to show this auth code and adds the div for the timer. When I call

                this.updateDom();
                initializeTimer();
                

                I will get that the current element with the id doesn’t exist since the initializeTimer executes before the dom is ready. So I would need to loop that until the dom is ready to add the timer onto it. Which is obviously a terrible idea. So having a callback or a promise would make that a lot easier. Because currently I would need to do something like that:

                this.updateDom();
                setTimeout(function() {
                initializeTimer();
                }, 1000);
                

                And pray that the dom changes already happened.

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @Kiina
                  last edited by sdetweil

                  @kiina create the timer in getDom() when u create the div, after updateDom() says content is available… u can save the div element in global and then have access to it from other places too…

                  when the global is not null… then u know it was created

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy