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.

emrhssla · Apr 8, 2019, 3:12 PM

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

sdetweil · Apr 8, 2019, 3:12 PM

@emrhssla module configs are only processed once

emrhssla · Apr 8, 2019, 3:14 PM

@sdetweil omg…Is there really no solution?

sdetweil · Apr 8, 2019, 3:28 PM

@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.

emrhssla · Apr 8, 2019, 5:09 PM

This post is deleted!

emrhssla · Apr 8, 2019, 5:12 PM

@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.

sdetweil · Apr 8, 2019, 5:18 PM

@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…

emrhssla · Apr 9, 2019, 3:12 AM

@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.

emrhssla · Apr 10, 2019, 2:36 PM

@sdetweil success using notification! thank you!