MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    UNSOLVED How to Hide Modules After Start (using setTimeout)

    Troubleshooting
    3
    8
    250
    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.
    • T
      tonkxy last edited by

      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]);
      							}
      						}
      					}
      			
      			}
      
      		});
      
      S 2 Replies Last reply Reply Quote 0
      • S
        sdetweil @tonkxy last edited by

        @tonkxy I don’t understand your question

        should you loop like in getDom.?

        the click event handler will tell you which button object was clicked.

        the pointer

        this

        will be pointing at the button object
        u can query attributes u set at create time

        u can set arbitrary attributes to hold info.
        number, name, …

        Sam

        Create a working config
        How to add modules

        T 1 Reply Last reply Reply Quote 0
        • T
          tonkxy @sdetweil last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • S
            sdetweil @tonkxy last edited by sdetweil

            @tonkxy if u mean where to enable the timer

            u should wait to all the modules are loaded

            that is a notification_received event

            then do your setTimeout there

            and the when the timer expires do the loop thru all the modules to hide.

            Sam

            Create a working config
            How to add modules

            T 1 Reply Last reply Reply Quote 0
            • T
              tonkxy @sdetweil last edited by

              @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]);
              		}}}
              },
              
              S 1 Reply Last reply Reply Quote 0
              • S
                sdetweil @tonkxy last edited by

                @tonkxy see the doc, that’s the wrong notification

                https://docs.magicmirror.builders/development/core-module-file.html#notificationreceived-notification-payload-sender

                Sam

                Create a working config
                How to add modules

                hamptonlindsay 1 Reply Last reply Reply Quote 0
                • hamptonlindsay
                  hamptonlindsay @sdetweil last edited by hamptonlindsay

                  @sdetweil I can’t open this link 😞

                  S 1 Reply Last reply Reply Quote 0
                  • S
                    sdetweil @hamptonlindsay last edited by

                    @hamptonlindsay go to the MagicMirror GitHub page, click the documentation link, then the three bar menu top left, pick module development

                    Sam

                    Create a working config
                    How to add modules

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy