MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. tonkxy
    3. Posts
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    T
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 15
    • Groups 0

    Posts

    Recent Best Controversial
    • RE: How to Hide Modules After Start (using setTimeout)

      @sdetweil I’ve tried a few things and just am struggling with this notification received. Any advice with what I have so far?

      /grabs information needed for refresh
      notificationReceived: function (notification, payload, sender) {
      	  if (notification === 'MODULE_DOM_CREATED') {
      		var modules = MM.getModules();
      // Lists through all modules for testing.
      				for (var i = 0; i < modules.length; i++) {
      				// Check if the current module is the one.
      				if (modules[i].name === data.module) {
      					// Splits out the module number of the module with the same name.
      					var idnr = modules[i].data.identifier.split("_");
      					// Check if the idnum is an array or not
      					if (Array.isArray(data.idnum)) {
      						// If it's an array, check what numbers are in it.
      						var idnumber = data.idnum.find(function(element) {
      							// Number of the module is found in the array.
      							return element == idnr[1]; 
      						});
      					// If idnum is not an array.
      					} else {
      						// Set the module id to hide.
      						var idnumber = data.idnum;
      					}
      		// Hides the module.
      							modules[i].hide(self.config.animationSpeed, {force: self.config.allowForce});
      							// Sets the defined symbol for hidden module.
      							if (typeof data.symbol2 !== 'undefined') {
      								symbol.className = faclassName + data.symbol2;
      								// Set the size if it's set.
      								if (data.size) {
      									symbol.className += " fa-" + data.size;
      									symbol.className += data.size == 1 ? "g" : "x";
      								}
      							// Sets the defined image for hidden module.
      							} else if (typeof data.img2 !== 'undefined') {
      								image.className = "menubar-picture";
      								image.src = data.img2;
      							}
      							
      							// Prints in the console what just happened (adding the ID). 
      							console.log("Hiding "+modules[i].name+" ID: "+idnr[1]);
      		}}}
      },
      
      posted in Troubleshooting
      T
      tonkxy
    • RE: How to Hide Modules After Start (using setTimeout)

      @sdetweil I am wanting the mirror to start, and once it starts and after it builds the menu it will auto hide the modules instead of me having to click through the buttons. I am just trying to autohide them once without clicking the button. Then have the option to toggle on and off. I hope that makes more sense

      posted in Troubleshooting
      T
      tonkxy
    • How to Hide Modules After Start (using setTimeout)

      Hello!
      I am using the MMM-ModuleBar. It creates a menu of my modules and makes buttons I was trying to set up after the menu is built, it will hide the modules automatically instead of wating for an onclick scenario. I am unsure where to put the function… Here is what I am looking at so far, I have it trying to hide modules after the menu is built. Should I build a for loop like in the getDom? Thank you for your help!

      // Override dom generator.
      	getDom: function() {
      		var overlay = document.createElement("div");
      
      		var menu = document.createElement("span");
      		menu.className = "menubar-menu";
      		menu.id = this.identifier + "_menu";
      		menu.style.flexDirection = this.config.direction;
      		// Sends each button to the "createButton" function be created.
      		for (var num in this.config.buttons) {
      			menu.appendChild(this.createButton(this, num, this.config.buttons[num], 
      			this.config.picturePlacement, overlay));
      
      		}
      		menu.appendChild(overlay);
      		return menu;
      	},
      setTimeout(function(){
      menu.hide({self.config.animationSpeed, {force: self.config.allowForce});
      //modules[i].hide(self.config.animationSpeed, {force: self.config.allowForce});
      // Sets the defined symbol for hidden module.
      //if (typeof data.symbol2 !== 'undefined') {
      //symbol.className = faclassName + data.symbol2;
      	// Set the size if it's set.
      //	if (data.size) {
      //	symbol.className += " fa-" + data.size;
      //	symbol.className += data.size == 1 ? "g" : "x";
      //	}
      // Sets the defined image for hidden module.
      //	} else if (typeof data.img2 !== 'undefined') {
      //	image.className = "menubar-picture";
      //	image.src = data.img2;
      //	}					
      	// Prints in the console what just happened (adding the ID). 
      //	console.log("Hiding "+modules[i].name+" ID: "+idnr[1]);
      }, 15000);
      
      	// Creates the buttons.
      	createButton: function (self, num, data, placement, overlay) {
      		var hidden = true;
      		// Creates the span element to contain all the buttons.
      		var item = document.createElement("span");
      		// Builds a unique identity / button.
      		item.id = self.identifier + "_button_" + num;
      		// Sets a class to all buttons.
      		item.className = "menubar-button";
      		//takes awesome font icon name
      		var faclassName = "menubar-picture ";
      		// Makes sure the width and height is at least the defined minimum.
      		item.style.minWidth = self.config.minWidth;
      		item.style.minHeight = self.config.minHeight;
      		// Collects all modules loaded in MagicMirror.
      		var modules = MM.getModules();
      		// When a button is clicked, the module either gets hidden or shown depending on current module status.
      		item.addEventListener("click", function () {
      		
      				// Lists through all modules for testing.
      				for (var i = 0; i < modules.length; i++) {
      				// Check if the current module is the one.
      				if (modules[i].name === data.module) {
      					// Splits out the module number of the module with the same name.
      					var idnr = modules[i].data.identifier.split("_");
      					// Check if the idnum is an array or not
      					if (Array.isArray(data.idnum)) {
      						// If it's an array, check what numbers are in it.
      						var idnumber = data.idnum.find(function(element) {
      							// Number of the module is found in the array.
      							return element == idnr[1]; 
      						});
      					// If idnum is not an array.
      					} else {
      						// Set the module id to hide.
      						var idnumber = data.idnum;
      					}
      					// Checks if idnum is set in config.js. If it is, it only hides that modules with those numbers and name, if not hides all modules with the same name.
      					if (idnr[1] == idnumber || data.idnum == null) {
      						// Check if the module is hidden.
      						if (modules[i].hidden) {
      							// Shows the module.
      							modules[i].show(self.config.animationSpeed, {force: self.config.allowForce});
      							// Sets the defined symbol for shown module.
      							if (typeof data.symbol !== 'undefined') {
      								symbol.className = faclassName + data.symbol;
      								// Set the size if it's set.
      								if (data.size) {
      									symbol.className += " fa-" + data.size;
      									symbol.className += data.size == 1 ? "g" : "x";
      								}
      							// Sets the defined image for shown module.
      							} else if (typeof data.img !== 'undefined') {
      								image.className = "menubar-picture";
      								image.src = data.img;
      							}
      							
      							// Prints in the console what just happened (adding the ID). 
      							console.log("Showing "+modules[i].name+" ID: "+idnr[1]);
      							
      
      						} else {
      							// Hides the module.
      							modules[i].hide(self.config.animationSpeed, {force: self.config.allowForce});
      							// Sets the defined symbol for hidden module.
      							if (typeof data.symbol2 !== 'undefined') {
      								symbol.className = faclassName + data.symbol2;
      								// Set the size if it's set.
      								if (data.size) {
      									symbol.className += " fa-" + data.size;
      									symbol.className += data.size == 1 ? "g" : "x";
      								}
      							// Sets the defined image for hidden module.
      							} else if (typeof data.img2 !== 'undefined') {
      								image.className = "menubar-picture";
      								image.src = data.img2;
      							}
      							
      							// Prints in the console what just happened (adding the ID). 
      							console.log("Hiding "+modules[i].name+" ID: "+idnr[1]);
      							}
      						}
      					}
      			
      			}
      
      		});
      
      posted in Troubleshooting
      T
      tonkxy
    • RE: Connecting Modules to Each Other

      @sdetweil Great advice.

      I stepped through and you were right on two things. When it starts, it defaults with the else case, because it hasn’t fetched the type yet. Once it does fetch the type I was resetting it in the myJob() function causing it to be undefined again.

      I appreciate the break down on this. JS is definitely giving me a run for my money on learning it.

      posted in Troubleshooting
      T
      tonkxy
    • RE: Connecting Modules to Each Other

      @sdetweil when you say stop you mean in my debug to see where im losing the value?

      posted in Troubleshooting
      T
      tonkxy
    • RE: Connecting Modules to Each Other

      @sdetweil funny you say that. Ive been reading and you offered the solution on someone using compliments + weather. My issue is when i step through to set image, the type is back to undefined and not carried from the notification. Im wondering if its in my order as to why its going back to undefined

      posted in Troubleshooting
      T
      tonkxy
    • RE: Connecting Modules to Each Other

      @sdetweil that definitely was part of it.

      I am able to successfully see the payload in notifications. Just working a way to retain it and be able to use in setImage. Thank you!

      posted in Troubleshooting
      T
      tonkxy
    • RE: Connecting Modules to Each Other

      @sdetweil great callout! I did not know I could debug. I do get a type back. I did the break trick on where its in an if statement and the type is still undefined in setImage

      posted in Troubleshooting
      T
      tonkxy
    • RE: Connecting Modules to Each Other

      @mmrize I took some time to try and figure this one out… sadly a lot of weather API’s are falling out, so some references use darkskies and that is out. I did write this up and so far the only issue I am having is at setImage the type variable is not being filled with a value.

      When i run npm start dev and I have the log return the value of type it does say info undefined… so it seems im not pulling off currentweather correctly with openweather as my api

      defaults: {
              height: "600px",   // your display's resolution in pixels. Enter in config.js
              width: "1024px",    // your display's resolution in pixels. Enter in config.js
              updateInterval: 60 * 60 * 100,
          },
      //set current weather from moduel
      currentWeatherType: "weather, currentweather",
      //scripts
      getScripts: function(){
      	return ["moment.js" , "moment-timezone.js"];
      },
         
      	
      start: function () {
      	  this.timer = null
      	  this.url = null
      	  this.setImage()
      },
      
      getDom: function () {
      	  console.log(">", this.url)
      	  var dom = document.createElement('div')
      	  dom.style.backgroundImage = `url(${this.url})`
      	  dom.style.height = '100vh' // do in css
      	  dom.style.width = '100vw'
      	  dom.style.backgroundSize = 'cover'
      	  return dom
      },
      //From data currentweather set weather type
      	setCurrentWeatherType: function(type){
      	this.currentWeatherType = type;
      },
      
      notificationReceived: function (notification, payload, sender) {
      	  if (notification === 'DOM_OBJECTS_CREATED') {
      	    this.job()
      	  }
      //weather dom
      	if(notification === "CURRENTWEATHER_TYPE"){
      		this.setCurrentWeatherType(payload.type);
      	}
      },
      
      
      job: function () {
      	  clearTimeout(this.timer)
            	  this.updateDom()
           	  this.setImage()
        	  this.timer = setTimeout(() => {
          	  this.job()
        	}, this.config.updateInterval)
      },
      
      
      setImage: function () {
        let rand = Math.floor(Math.random() * 4)+1; //randomn number to pick gif
      	var day = new Date();
      	var hour = day.getHours();
      	var type = this.currentWeatherTemperature;
      //if criteria for folders
      //	if(hour >= 22 || hour <= 4){
      //	folder = "Night";
      //	}else
      //	if(hour <= 10){
      //	folder = "Morning";
      //	}else
      //	if(hour <= 17){
      //	folder = "Afternoon";
      
      	if(type = "rain"){ //testing weather to see if it passes if condition
      		folder = "Afternoon";
      	}else folder = "Morning";
      
      	this.url = "modules/MMM-MainScreen/images/" + folder +"/" + rand +".gif";
      	}
      
      });
      
      posted in Troubleshooting
      T
      tonkxy
    • Connecting Modules to Each Other

      Hello!

      I am wanting to take the variables from a weather module and use that to decide a background. Do I need to rebuild current weather in my module, or can i import it essentially in order to use the variables / gather temps?

      Thank you for your time!

      posted in Troubleshooting
      T
      tonkxy
    • RE: Need Help Changing Background Image Based on Time

      @easty i am! Im going to integrate it with weather conditions. It’ll have a gif background that resembles the time of day / condition. Ill be adding in overlays for hrly breakdowns, 5 day etc.

      posted in Troubleshooting
      T
      tonkxy
    • RE: Need Help Changing Background Image Based on Time

      @MMRIZE @sdetweil
      Thank you both so much! That did work by the way! It worked once I moved the dom AND I was missing Module: (name), which is just dumb on my part. I appreciate the help and for solving my issue with this!!!

      Question, do you guys have a favorite beginners place for Magic Mirror? I feel I am missing some fundamentals and would love to take a recommendation.

      posted in Troubleshooting
      T
      tonkxy
    • RE: Need Help Changing Background Image Based on Time

      Good catch! I accidentally removed that. So, I have added it back in and tried a few spots before reaching out again. I am still not getting a background to populate… I am not sure if maybe a variable is missing or what else I could be lacking in this. Thank you for your help!

      defaults: {
          bgName: "",         // .jpg, .gif, .png, Full screen animated gifs too!
          videoName: " ",     // your local picture files go in "images" folder of MMM-EasyBack
          youTubeID: "",      // YouTube ID from the YouTube url
          height: "600px",   // your display's resolution in pixels. Enter in config.js
          width: "1024px",    // your display's resolution in pixels. Enter in config.js
          animationSpeed: "0",
          updateInterval: 60 * 60 ,
      },
      
      start: function() {
          self = this;
          this.timer = null;
         	
      },
      
      notificationReceived: function(notification, payload, sender){
      
          if (notification === 'DOM_OBJECTS_CREATED'){
      
              this.myJob();
          }
      },self.updateDom();
          myJob: function(){
       	clearTimeout = (this.timer);
      	let rand = Math.floor(Math.random()*2)+1;
              let hour = (new Date()).getHours();
      
      	if(hour <= 16){
                  folder="Afternoon";
                  } else if(hour >= 16 ){ folder = "Late";
              }
      
      	this.timer = setTimeout(() => {	
      	this.updateDom();
      	if (this.config.bgName != "") {
                  this.url = "modules/MMM-MainScreen/images/" + folder +"/" + rand +".gif";
              } else if (this.config.vidoeName != "") {
                  this.url = "modules/MMM-MainScreen/videos/" + this.config.video;
              }
      	
      	this.myJob();
      	},this.config.updateInterval);
      },
      
      
      getStyles: function() {
          return ["MMM-EasyBack.css"]
      },
      
      // Override dom generator.
      getDom: function() {
      
        if (this.config.youTubeID != '') {
      
          var iframe = document.createElement("IFRAME");
          iframe.classList.add("iframe");
          iframe.style = "border: 0 none transparent ";
          iframe.width = this.config.width;
          iframe.height = this.config.height;
          type="text/javascript";
          iframe.src="https://www.youtube.com/embed/" + this.config.youTubeID + "?autoplay=1&loop=1&playlist=" + this.config.youTubeID;
      
          return iframe;
      
        } else
      
          var wrapper = document.createElement("div");
      
          var image = document.createElement("img");
          if (this.config.bgName != '') {
              image.src = this.url;
              image.className = "photo";
              console.log("MMM-EasyBack: Now showing image background")
              wrapper.appendChild(image);
      
          }else {
              console.log("MMM-EasyBack error: Please enter either image OR video in config.js NOT BOTH");
          }
      
          return wrapper;
      },
      });
      
      
      posted in Troubleshooting
      T
      tonkxy
    • RE: Need Help Changing Background Image Based on Time

      @mmrize Thank you so much for the guidance!
      I am still really new to messing around in this area so I may not fully grasp your solution. I have been using the EasyBack as a guide to adjusting to what I want. I am unable to now get any kind of a background to show up.

      defaults: {
          bgName: "",         // .jpg, .gif, .png, Full screen animated gifs too!
          videoName: " ",     // your local picture files go in "images" folder of MMM-EasyBack
          youTubeID: "",      // YouTube ID from the YouTube url
          height: "600px",   // your display's resolution in pixels. Enter in config.js
          width: "1024px",    // your display's resolution in pixels. Enter in config.js
          animationSpeed: "0",
          updateInterval: 60 * 60 * 1000,
      },
      
      start: function() {
      
          this.timer = null;
      },
      
      notificationReceived: function(notification, payload, sender){
      
          if (notification === 'DOM_OBJECTS_CREATED'){
              self = this;
              this.url ='';
              
              this.myJob();
          }
      },
          myJob: function(){
              clearTimeout(this.timer);
              let rand = Math.floor(Math.random()*2)+1;
              let hour = (new Date()).getHours();
      
              if(hour <= 16){
                  folder="Afternoon";
                  } else if(hour >= 16 ){ folder = "Late";
              }
              if (this.config.bgName != "") {
                  this.url = "modules/MMM-EasyBack/images/" + folder +"/" + rand +".gif";
              } else if (this.config.vidoeName != "") {
                  this.url = "modules/MMM-EasyBack/videos/" + this.config.video;
              }
              this.timer = setTimeout(myJob, 1000) {
                 
                  this.myJob();
      
              }, this.config.updateInterval);
          },
      
      
      
      
      getStyles: function() {
          return ["MMM-EasyBack.css"]
      },
      
      // Override dom generator.
      getDom: function() {
      
        if (this.config.youTubeID != '') {
      
          var iframe = document.createElement("IFRAME");
          iframe.classList.add("iframe");
          iframe.style = "border: 0 none transparent ";
          iframe.width = this.config.width;
          iframe.height = this.config.height;
          type="text/javascript";
          iframe.src="https://www.youtube.com/embed/" + this.config.youTubeID + "?autoplay=1&loop=1&playlist=" + this.config.youTubeID;
      
          return iframe;
      
        } else
      
          var wrapper = document.createElement("div");
      
          var image = document.createElement("img");
          if (this.config.bgName != '') {
              image.src = this.url;
              image.className = "photo";
              console.log("MMM-EasyBack: Now showing image background")
              wrapper.appendChild(image);
      
          }else {
              console.log("MMM-EasyBack error: Please enter either image OR video in config.js NOT BOTH");
          }
      
          return wrapper;
      },
      });
      
      posted in Troubleshooting
      T
      tonkxy
    • Need Help Changing Background Image Based on Time

      Hello, I am trying to set the mirror to change the background image based on the time of day. I am unsure how to check time , remake the random number and then change the background image. I am able to see when it updates on a short interval (the photo flashes) but stays the same and doesnt regrab a random number/folder based on time. Any help is appreciated!

      defaults: {
              bgName: "",         // .jpg, .gif, .png, Full screen animated gifs too!
              videoName: " ",     // your local picture files go in "images" folder of MMM-EasyBack
              youTubeID: "",      // YouTube ID from the YouTube url
              height: "600px",   // your display's resolution in pixels. Enter in config.js
              width: "1024px",    // your display's resolution in pixels. Enter in config.js
              animationSpeed: "0",
              updateInterval: 60 * 60 * 1000,
          },
      
          start: function() {
              self = this;
              this.url ='';
      	rand = Math.floor(Math.random() * 2)+1; //randomn number to pick gif
      	rand = 1;
      	var day = new Date();
      	var hour = day.getHours();
      	var minutes = day.getMinutes();
      
      	if(hour <= 16){
      	folder="Afternoon";
      	} else if(hour >= 16 ){ folder = "Late";
      	}
              setInterval(function() {
              self.updateDom(self.config.animationSpeed || 0);
              }, this.config.updateInterval);
      
              if (this.config.bgName != "") {
                  this.url = "modules/MMM-MainScreen/images/" + folder +"/" + rand +".gif";
              } else if (this.config.vidoeName != "") {
                  this.url = "modules/MMM-MainScreen/videos/" + this.config.video;
              }
      	
          },
      
      
          getStyles: function() {
              return ["MMM-MainScreen.css"]
          },
      
          // Override dom generator.
          getDom: function() {
      
            if (this.config.youTubeID != '') {
      
              var iframe = document.createElement("IFRAME");
              iframe.classList.add("iframe");
              iframe.style = "border: 0 none transparent ";
              iframe.width = this.config.width;
              iframe.height = this.config.height;
              type="text/javascript";
              iframe.src="https://www.youtube.com/embed/" + this.config.youTubeID + "?autoplay=1&loop=1&playlist=" + this.config.youTubeID;
      
              return iframe;
      
            } else
      
              var wrapper = document.createElement("div");
      
              var image = document.createElement("img");
              if (this.config.bgName != '') {
                  image.src = this.url;
                  image.className = "photo";
                  console.log("MMM-MainScreen: Now showing image background")
                  wrapper.appendChild(image);
      
              }else {
                  console.log("MMM-MainScreen error: Please enter either image OR video in config.js NOT BOTH");
              }
      
              return wrapper;
          },
      });
      
      posted in Troubleshooting
      T
      tonkxy
    • 1 / 1