• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 739 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 @sdetweil
    last edited by Jul 25, 2021, 6:39 PM

    @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 Jul 25, 2021, 7:09 PM Reply Quote 0
    • S Offline
      sdetweil @Kiina
      last edited by sdetweil Jul 25, 2021, 9:04 PM Jul 25, 2021, 7:09 PM

      @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 Jul 25, 2021, 9:12 PM Reply Quote 1
      • S Offline
        sdetweil @Kiina
        last edited by Jul 25, 2021, 7:12 PM

        @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 Jul 25, 2021, 9:12 PM

          @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 Jul 25, 2021, 9:20 PM Reply Quote 0
          • S Offline
            sdetweil @Kiina
            last edited by sdetweil Jul 25, 2021, 9:21 PM Jul 25, 2021, 9:20 PM

            @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
            1 / 1
            • First post
              7/7
              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