MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    How can I change the variable value of the config after the magic mirror is run? I want to change the config of MMM-embedYoutube through MMM-Modulebar.

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    9 Posts 2 Posters 1.3k Views 2 Watching
    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.
    • E Offline
      emrhssla
      last edited by emrhssla

      I use MMM-Modulbar.
      In the original MMM-Modulebar code, only the following are added:
      if(num==1){
      console.log(“button number”+num);
      console.log(“video_id”+modules[i].config.video_id);
      modules[i].config.video_id=“r6A7Fsci7Ds”;
      console.log(“video_id”+modules[i].config.video_id);
      }
      but failed.
      num is the number of the button and modules[i] is about which module is pressed.
      All the consoles were reported to have changed to normal, but the module did not actually change its config in screen.
      The original code is as follows, and the modified part of the code is from the 96th-101th lines.

      
      Module.register("MMM-Modulebar",{
      	
      	requiresVersion: "2.1.0",
      	
          defaults: {
              // Allow the module to force modules to be shown (if hidden and locked by another module ex. profile-switcher).
              allowForce: false,
              // Determines if the border around the buttons should be shown.
              showBorder: true,
              // The minimum width for all the buttons.
              minWidth: "0px",
              // The minimum height for all the buttons.
              minHeight: "0px",
              // The location of the symbol relative to the text. Options: left, right, top or bottom
              picturePlacement: "left",
              // The direction of the bar. Options: row, column, row-reverse or column-reverse
              direction: "row",
      		// The speed of the hide and show animation.
      		animationSpeed: 1000,
              // The default button 1. Add your buttons in the config.
      		buttons: {
                  "1": {
      				// The modules exact name to be affected.
      				module: "clock",
      				// The text to be displayed in the button.
      				text:	"Clock",
      				// Then symbol from font-awesome!
                      symbol: "clock-o"
                  }
      		}
          },
      
          // Define required styles.
      	getStyles: function(){
      		return ["font-awesome.css", "MMM-Modulebar.css"];
      	},
      
          // Override dom generator.
          getDom: function() {
              var menu = document.createElement("span");
              menu.className = "modulebar-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));
              }
              return menu;
          },
      
      	// Creates the buttons.
          createButton: function (self, num, data, placement) {
      		// Creates the span elemet to contain all the buttons.
      		var item = document.createElement("span");
              // Builds a uniqe indentity / button.
      		item.id = self.identifier + "_button_" + num;
              // Sets a class to all buttons.
      		item.className = "modulebar-button";
              // 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 curent 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("_");					
      					// Checks if idnum is set in config.js. If it is, it only hides that module, if not hides all modules with the same name.
      					if (idnr[1] == data.idnum || data.idnum == null) {
      						// Check if the module is hidden.
      						if (modules[i].hidden) {
      							// Check if there is a "showURL" defined.
      							if (data.showUrl != null) {
      								// Visiting the show URL.
      								fetch(data.showUrl);
      								// Prints the visited hideURL.
      								console.log("Visiting show URL: "+data.showUrl);
      							}
      							if(num==1){
      								console.log("button number"+num);
      								console.log("video_id"+modules[i].config.video_id);	
      								modules[i].config.video_id="r6A7Fsci7Ds";	
      								console.log("video_id"+modules[i].config.video_id);						
      							}
      							modules[i].show(self.config.animationSpeed, {force: self.config.allowForce});
      							// Prints in the console what just happend (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});
      							// Prints in the console what just happend (adding the ID). 
      							console.log("Hiding "+modules[i].name+" ID: "+idnr[1]);
      							// Check if there is a "hideURL" defined.
      							if (data.hideUrl != null) {
      								// Visiting the the URL.
      								fetch(data.hideUrl);
      								// Prints the visited hideURL.
      								console.log("Visiting hide URL: "+data.hideUrl);
      							}
      						}
      					}
      				}
      			}
      		});
      		// Fixes the aligning.
              item.style.flexDirection = {
                  "right"  : "row-reverse",
                  "left"   : "row",
                  "top"    : "column",
                  "bottom" : "column-reverse"
              }[placement];
      		// Sets the border around the symbol/picture/text to black.
              if (!self.config.showBorder) {
                  item.style.borderColor = "black";
              }
      		// Adds the Font-Awesome symbol if specified.
              if (data.symbol) {
                  var symbol = document.createElement("span");
                  symbol.className = "modulebar-picture fa fa-" + data.symbol;
      			// Sets the size on the symbol if specified.
                  if (data.size) {
                      symbol.className += " fa-" + data.size;
                      symbol.className += data.size == 1 ? "g" : "x";
                  }
      			// Align the symbol with a margin.
                  if (data.text && placement === "left") {
                      symbol.style.marginRight = "4px";
                  }
      			// Adds the symbol to the item.
                  item.appendChild(symbol);
      
      		// Adds a picture if specified.
      		} else if (data.img) {
                  var image = document.createElement("img");
                  image.className = "modulebar-picture";
                  image.src = data.img;
      			// Sets the size of the picture if specified.
                  if (data.width)  image.width  = data.width;
                  if (data.height) image.height = data.height;
      			// Align the picture with a margin.
                  if (data.text && placement === "left") {
                      image.style.marginRight = "4px";
                  }
      			// Adds the picture to the item.
                  item.appendChild(image);
              }
      		// Adds the text if specified.
              if (data.text) {
                  var text = document.createElement("span");
                  text.className = "modulebar-text";
                  text.innerHTML = data.text;
      			// Align the text with a margin.
                  if ((data.symbol || data.img) && placement === "right") {
                      text.style.marginRight = "4px";
                  }
      			// Adds the text to the item.
                  item.appendChild(text);
              }
      		// All done. :)
              return item;
      	},
      	notificationReceived: function(notification, payload) {
      		if(notification === "DOM_OBJECTS_CREATED"){
      			this.hide()
      		}
      	}
      });	
      
      Module.register("MMM-EmbedYoutube1", {
      	defaults: {
      		autoplay: false,
      		color: "red",
      		controls : true,
      		disablekb: false,
      		fs: true,
      		height: 400,
      		width: 600,
      		loop: false,
      		modestbranding: false,
      		rel : false,
      		showinfo : false,
      		video_id : "r6A7Fsci7Ds",
      		playlist: "",
      		
      		searchlist1: "쯔위"
      	},
      	getDom: function () {
      		var wrapper = document.createElement("div");
      
      		// Parameter
      		var params = "";
      		var search_list="&listType=search&list=";
      		search_list += this.config.searchlist1;
      
      		params += (this.config.autoplay) ? "autoplay=1" : "autoplay=0";
      		params += (typeof this.config.color !== "undefined" && this.config.color != "red")? "&color=" + this.config.color:"";
      		params += (this.config.controls)? "&controls=1":"&controls=0";
      		params += (this.config.disablekb)? "&disablekb=1":"";
      		params += (this.config.fs)? "":"&fs=0";
      		//params += (videoList != "" && (typeof this.config.playlist === "undefined" || this.config.playlist == "")) ? videoList : "&playlist=" + this.config.video_id; // required playlist to loopable
      		params += (this.config.loop) ? "&loop=1" : "";
      		params += (this.config.modestbranding) ? "&modestbranding=1" : "";
      		params += (this.config.rel)? "&rel=1": "&rel=0";
      		params += (this.config.showinfo)? "&showinfo=1": "&showinfo=0";
      		params += search_list; 
      
      		var videoId = this.config.video_id +"?version=3";
      		if (typeof this.config.playlist !== "undefined" && this.config.playlist != "")
      			videoId = "playlist?list=" + this.config.playlist + "&";
      
      		wrapper.innerHTML = "<iframe width=\"" 
      		+ this.config.width +"\" height=\"" 
      		+ this.config.height 
      		+ "\" src=\"https://www.youtube.com/embed/" 
      		+ videoId + "&"+ params +"\" frameborder=\"0\" allowfullscreen></iframe>";
      		return wrapper;
      	},
      	notificationReceived: function(notification, payload) {
      		if(notification === "DOM_OBJECTS_CREATED"){
      			this.hide()
      		}
      	}
      });
      

      0_1554735533228_02f2c68a-9f6d-4af8-b8f9-b3927d0a9b47-image.png

      0_1554735462364_edeaa8c1-7464-4369-bd51-31d15b17868a-image.png

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

        @emrhssla module configs are only processed once

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        E 1 Reply Last reply Reply Quote 0
        • E Offline
          emrhssla @sdetweil
          last edited by

          @sdetweil omg…Is there really no solution?

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

            @emrhssla and u have no idea how each module uses the config.

            Mine create some internal variable at start time, and pass all that to my node helper with a private notice… So even if u could send me another config block I wouldn’t use it.

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            E 1 Reply Last reply Reply Quote 0
            • E Offline
              emrhssla
              last edited by

              This post is deleted!
              1 Reply Last reply Reply Quote 0
              • E Offline
                emrhssla @sdetweil
                last edited by

                @sdetweil So you mean to use functions like recievedsendnotification? That’s because I’m a beginner. I’d appreciate it if you could give me a hint.

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

                  @emrhssla yes, from outside a module, all you can do is sendNotification…

                  but the module config is setup and defined before start() is called… i don’t know what you would do that could really work effectively.

                  you ‘might’ be able to inspect the module object and locate its config variable and then check and copy over any missing items (defined in the module defaults) into the config object you created, and then replace the existing config object…

                  but no guaranty that the module will use those new values… a couple of my modules would not…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  E 2 Replies Last reply Reply Quote 0
                  • E Offline
                    emrhssla @sdetweil
                    last edited by

                    @sdetweil My purpose of coding is to show YouTube on various topics. MMM-Embedyoutube was renamed in many ways. ex)MMM-Embeddyoutube1 implements buttons where the game subject YouTube, MMM-Embeddyoutube2 is the exercise subject YouTube,…), where the corresponding module appears once again and the corresponding module disappears. Press button 1 to run MMM-Embedyoutube1 and hide remaining YouTube modules. When button 2 is pressed, it runs MMM-Embeddyoutube2 and hides the remaining YouTube modules. However, if the position of the Embeddyoutube is in the same position, the replay click or other click does not work. ex)Position of all modules botom-center

                    So I gave up various Embeddyoutube modules and did it with one Embeddyoutube module. Press button 1 to switch the video_id of Embeddyoutube to the game-themed YouTube video_id. Press button 2 to switch the video_id of the Embedyoutube to the exercise subject YouTube video_id. However, the console has also changed, but not on the real screen. I can’t think of another way. I’ll try the sendnotification() for now.

                    1 Reply Last reply Reply Quote 0
                    • E Offline
                      emrhssla @sdetweil
                      last edited by

                      @sdetweil success using notification! thank you!

                      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 Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy