@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;
}
});
