@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.

@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.

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.

Description

Shows the current Daily Melon Charts.

Screenshot

Download

[card:Kiina/MMM-melon]

---

Version 0.1

• Initial release

@j.e.f.f said in Persistent data:

I’m assuming you’re building a custom module where this isn’t practical

Yeah my module gets OAuth data back which needs to be stored if the user doesn’t want to authenticate the mirror everytime it restarts/crashes. So I hoped there was some kind of datastorage build in for small stuff. I will try it with a .json file

Is there any easy way build in to save Data from a Module so it can persist over restarts? I could probably save everything to a .json but I’m not sure if that is a good Idea. The documentation mentions nothing.

Description

It is my first module and currently very Basic. But it shows your airing TV shows from trakt. It is currently WIP and pull requests are always appreciated.

Screenshot

Download

[card:Kiina/MMM-trakt]

---

Version 0.1

• Initial release