@Amit5001 so, you will need to write a module. mm runs inside a browser, electron, chrome, Firefox, … it displays one web page each module gets data from somewhere and builds a small blob of html, or dom content, and gives that to mm, which places it in the browser DOM in the position you configured the spec is here https://docs.magicmirror.builders/development/introduction.html you can use my SampleModule as a starting place, it’s got all the parts https://github.com/sdetweil/SampleModule something to do before that, is to figure out how u want it displayed and build the html to do that, it’s just text. you can test that output in any browser. a module is split into 2 parts. the part that runs in the browser and does all the display work I call it modulename.js cause it’s filename matches the module name. it’s the part that interfaces to mm but a browser cannot read files (incl database) or touch hardware directly. for security. browser cannot import or require to load libraries. so if u need to do that, you use the helper, called node_helper.js. there is a small communication mechanism between the two parts. modulename.js sends a message, send socket notification and the helper receives them, receiveSocketNotification when done the exact same calls are used in the other direction. helper sends module name.js receives. this is a private channel between this module and it’s helper.

@kayakbabe DRAT! I just crushed my microSD with my wheelchair. It is definitely time for bed.

@EphraimB you can view and save that as an image. the railroad tracks and terminals are not gonna move today… or anytime soon

@sdetweil Works as you wrote. Sadly its not in the documentation.

@Rattenjunge8080 So, i found a Solution, if anyone is interested, be my guest to copy this (spaghetti-code! I catch exceptions cause i am not able to check if and how many pictures are already loaded): /* MagicMirror² * Module: Scare * * By Rattenjunge8080 * */ Module.register("Scare", { // Default module config. defaults: { }, start: function(){ //The container which will be shown in DOM this.container = document.createElement("div"); this.visible = true; //set true via resume this.blocker = false; //block multiple DOM-calls image1 = document.createElement("img"); image1.src = '/modules/Scare/img1.jpg'; image1.classList.add("image1"); image2 = document.createElement("img"); image2.src = '/modules/Scare/img2.jpg'; image2.classList.add("image2"); }, // system notification your module is being hidden // typically you would stop doing UI updates (getDom/updateDom) if the module is hidden suspend: function(){ console.log('suspend'); this.visible = false; this.updateDom(1000); //TODO If in future not all pictures are removed->Delete the container: //this.container.remove(); }, // system notification your module is being unhidden/shown // typically you would resume doing UI updates (getDom/updateDom) if the module is shown resume: function(){ console.log('resume'); //TODO If in future not all pictures are removed->add here the container: //this.container = document.createElement("div"); this.visible = true; this.updateDom(); }, /* * Here the first Image will be added to a container, shown on screen * and a timer will count down. Let them feel safe for a while... * then a new image will pop up and a sound is played */ showImageAndPlaySound() { this.blocker = true; //TODO: Maybe useful in future //this.container.innerHTML = "<img src=\"/modules/Scare/OVAL.png\" width=\"200px\" height=\"500px\">"; //Put in picture to let it print on DOM this.container.appendChild(image1); this.updateDom(); console.log("set timeout 10s"); try { setTimeout(() => this.container.removeChild(image1), 10000); }catch (e) {console.log("catch timeout line 70");} setTimeout(() => this.container.appendChild(image2), 10000); this.updateDom(); //Generate the Audio from local file TODO auch mit setTimeout machen var audio = new Audio("/modules/Scare/sound.mp3"); audio.play(); this.blocker = false; }, /* * Here the first Image will be added to a container, shown on screen * and a timer will count down. Let them feel safe for a while... * then a new image will pop up and a sound is played */ getDom: function(){ if(this.visible){ if(this.blocker === false){ this.showImageAndPlaySound(); }else{} }else{ //When the Module is not shown, then remove the 2 Images try { this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); } catch (e) {console.log("catch remove child img 1");} try { this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); }catch (e) {console.log("catch remove child img 2");} } return this.container; } });

@jwilson5607 glad u got it working… if I hadn’t done my own chartjs module, I would have had no clue,

@bugsounet Thanks a lot for your kind informations.

@sdetweil Thanks Sam. Will give that a go.

@kylelamb1324 see my sample module it’s node helper receives a message and sends one back https://github.com/sdetweil/SampleModule its string identifying the message and some buffer of data, completely up to you, string, number, structure… then on the receiving side u get the identifier, so you can tell different messages apart and a pointer to the buffer sent by the sender socket notifications are private to your module an example use the node_helper does not get any of the info from config.js like the modulename.js does so, typically the first thing would be to send the this.config buffer to the node_helper

@thgmirror and there is a $HOME/.npm folder for npm, but I have no idea what all is stored there, and what needs to be persistent and not

@1BlauNitrox it’s 28 inch lcd monitor. Few years old. Don’t know the model

@SvenT the module should not update when it is suspended (hidden)

@MZ-BER lucky it’s a div table and not html table

@thgmirror it’s not ‘in an html’ it has to be loaded into a browser. and then u have to export it correctly, and THEN you can call it ft another script.

@sdetweil ok Thank you ❤

@bugsounet my apologies. I have deleted the post.

@banbutcher there is a little nosql db and lib in one https://www.npmjs.com/package/nosql

@enderflop cool key here is module name = foldername = filename = register name and node_helper.js has to be in the same folder

@1blaunitrox said in updateDom() blocks MagicMirror: I installed the software like in the docs show. my script fixes little odds and ends not covered by the doc

@sdetweil It works btw