Hide/Show Recipe

Anthony

Hello everyone. I hope you are all well. I am trying to make a recipe to show/hide some modules. Since I am not familiar with coding I am getting errors all the time when GA trying to load it. If anyone can inpect it and mention my mistakes so I can correct them it would be appriciated. Here is the recipe:

var recipe = {
  transcriptionHooks: {
    "SHOW_WIFI": {
      pattern: "We Have Guests",          
      command: "show wifi"
    },
    "HIDE_WIFI": {
      pattern: "close Wifi",           
      command: "hide wifi"
    },
  },    
  commands: {
    "show wifi": {
      moduleExec: {
        module: (param) => {
            this.sendNotification('SHOW_WIFI');
          }
        }
      },
      displayResponse: false,
      soundExec: {
        sound: "answers/enjoy.mp3",
      }
    },
    "hide wifi": {
      moduleExec: {
        module: (param) => {
          this.sendNotification('HIDE_WIFI');
        }
      }
    },
      displayResponse: false,
      soundExec: {
        sound: "answers/enjoy.mp3",
      },
    }
  }
}
exports.recipe = recipe

Thank you in advance.

alex69

what is your installed module which is supposed to execute show/hide command

Anthony

@alex69 Hello and thank you for your reply. The module is MMM-WiFiPassword. Originaly it has vocal support for MMM-Modal according to Readme.md. But I discovered that if I copy/paste the below part of code into my module’s .js file and with some modification to much my module name I can show/hide it by vocal commands:

    /////  Add this function to the modules you want to control with voice //////

    notificationReceived: function(notification, payload) {
        if (notification === 'HIDE_MOON') {
            this.hide(1000);
            //    this.updateDom(300);
        } else if (notification === 'SHOW_MOON') {
            this.show(1000);
            //   this.updateDom(300);
        }

    },

The comment on the first line is the author’s comment not mine. So this is what I did. Below is the module’s .js file with the part of code I added:

Module.register("MMM-WiFiPassword", {  
  defaults: {
	  qrSize: 125,
	  colorDark: "#000",
	  colorLight: "#fff",
	  authType: "WPA", // WEP, WPA, NONE
	  network: "REQUIRED", // Your Network ID
	  password: "REQUIRED", // Your Network Password
	  header: "Local WiFi Details", // Default heading
	  hiddenId: false, // Whether your Network ID is hidden
	  layoutVertical: true, // Whether to display in vertical (true), or horizontal (false) mode. 
	  showNetwork: true, // Display network name
	  showPassword: true, // Display password
	  showAuthType: true, // Dispay authentication type
	  debug: false
  },
  
  start: function () {
	  this.auth = "";
	  
	  switch(this.config.authType.toUpperCase()) {
		case "WPA":
		//case "WPA2":
		case "WEP":
			this.auth = this.config.authType.toUpperCase();
			break;
		case "none":
			this.auth = "nopass";
			break;
		default:
			this.auth = "nopass";
			break;
	  }
	  
	  //TODO: Allow for special characters
	  this.qrText = "WIFI:" +
	  "T:"  + this.auth +
	  ";S:" + this.config.network +
	  ";P:" + this.config.password +
	  ";H:" + this.config.hiddenId +
	  ";";
	  
  },
  
  getDom: function() {
	  var div = document.createElement("div");
	  div.id = "WiFiPassword";
	  div.className = "text";
	  if (!this.config.layoutVertical) {
		  div.style.height = this.config.qrSize + "px";
	  }
	  
	  if (this.config.header){
	  	var header = document.createElement('header');
	  	header.innerHTML = this.config.header;
	  	div.appendChild(header);
	  }
	  
	  var qrDiv = document.createElement("div");
	  qrDiv.id = "qrdiv";
	  qrDiv.className = "qr-image";
	  qrDiv.style = "width:" + this.config.qrSize + "px; background-color:" + this.config.colorLight;
	  if (this.config.layoutVertical) {
		qrDiv.className += " layout-vertical";
	  } else {
		qrDiv.className += " layout-horizontal";
	  }  
	  div.appendChild(qrDiv);

	  var textDiv = document.createElement("div");
	  textDiv.id = "textDiv";
	  div.appendChild(textDiv);
	

	  if (this.config.showNetwork) {
		var networkNameDiv = document.createElement("p");
		networkNameDiv.className = "text network";
		networkNameDiv.innerHTML = "<b>Network:</b> " + this.config.network;
		textDiv.appendChild(networkNameDiv);
	  }
	  
	  if (this.config.showPassword) {
		var networkPassDiv = document.createElement("p");
	  	networkPassDiv.className = "text password";
	  	networkPassDiv.innerHTML = "<b>Password:</b> " + this.config.password;
	  	textDiv.appendChild(networkPassDiv);
	  }
	 
	  if (this.config.showAuthType) {
		var networkTypeDiv = document.createElement("p");
	  	networkTypeDiv.className = "text network-type";
	  	networkTypeDiv.innerHTML = "<b>Authentication Type:</b> " + this.config.authType.toUpperCase();
	  	textDiv.appendChild(networkTypeDiv);
	  }
	  
	  if (this.config.debug) {
		var debugDiv = document.createElement("p");
		debugDiv.className = "text debug";
		debugDiv.innerHTML = "<b>QR String:</b> " + this.qrText;
		textDiv.appendChild(debugDiv);
	  }
	  if (this.config.hide) {
		this.hide()
	  }
	  	  
	  return div;
  },
  
  getScripts: function() {
	  return [
		'qrcode.min.js', // library that creates qrcode. Thanks to https://github.com/davidshimjs/qrcodejs
		'MMM-WiFiPassword.css',
	  ];
  },

	    notificationReceived: function(notification, payload) {
        if (notification === 'HIDE_WIFI') {
            this.hide(1000);
            //    this.updateDom(300);
        } else if (notification === 'SHOW_WIFI') {
            this.show(1000);
            //   this.updateDom(300);
        }

    },
  
  notificationReceived: function(notification, payload, sender) {
	switch(notification) {
		case "DOM_OBJECTS_CREATED":
			var qrDiv = document.getElementById("qrdiv");
			var qrOptions = {
				text: this.qrText,
				width: this.config.qrSize,
				height: this.config.qrSize,
				colorDark: this.config.colorDark,
				colorLight: this.config.colorLight,
				correctLevel: QRCode.CorrectLevel.H
			};
		  
			var qrCode = new QRCode(qrDiv, qrOptions);
			break;

		case "WIFIPASSWORD_MODAL":
			var fetchQrCode = document.getElementById("qrdiv").innerHTML;
			this.sendNotification("OPEN_MODAL", {
				template: "WifiPasswordModal.njk",
				data: {
					// Send config as data input to template
					layoutVertical: this.config.layoutVertical,
					qrSize: this.config.qrSize,
					header: this.config.header,
					colorLight: this.config.colorLight,
					network: this.config.network,
					password: this.config.password,
					authType: this.config.authType,
					showNetwork: this.config.showNetwork,
					showPassword: this.config.showPassword,
					showAuthType: this.config.showAuthType,
					debug: this.config.debug,
					// Send actual content
					content: fetchQrCode,
				},
			});
			break;
	  }
  },
  
  socketNotificationReceived: function() {
	  
  },
})

Of course If you know a better, easier, safer way for this to be done I would love to read it. Please keep in mind that I am newbie to this so what is very easy for you maybe is very difficult for me. Thank you.

venditti69500

I am not a developer, I try to bring my modest help if I can. Do you have the MMM-Remote-Control module or MMM-ModuleSchedulert ? because it seems to me that these two modules are able to hear the show / hide command.

bugsounet

really ?

So… I will code a recipe without modification for any modules

Note: If you make some change on a module, it will break update of it

@venditti69500: Don’t like this method too

Anthony

@venditti69500 I am so releived because my newbie mistakes make developers crazy . No, I have none of them installed. So this way is not right. I know it can be done with just recipes but I am trying to find how. To MM forum where I asked the same question someone reply to me that the module should already have suspend and resume functions, so nothing in the module needs to change and that in the recipe just hide()or show() the module. That’s easy to say . Also he told me that if the module does not provide it directly, the mm runtime does the suspend/resume for the module. Do you have any idea how can this be done?

Anthony

@bugsounet Hello and soory for my ideas but I am searching to find out. I know it will break the update but my idea was that if it worked for me I would make a pull request to merge the code. Please guide me if and when you have the time. Thank you in advance.

bugsounet

give me about 30 min and I’ll give it to you

Anthony

@bugsounet Of course you have all the time you need. Again thank you and sorry for my ignorance. And that the different between a newbie and a developer. I am trying 3 days now to make this work and you need only 30 minutes. Shame on me.

venditti69500

it’s not just the magic mirror, this man too @bugsounet . I was not talking about modifying the module, I use MMM-page-selector module in order to have 2 pages on my mirror, I then created a very basic recipe in the MMM-GA recipe folder using the page_increment/page_decrement actions to juggle with pages vocally. I was thinking of something similar.

bugsounet

This is a sample with “clock”:

var recipe = {
  transcriptionHooks: {
    "HIDE_CLOCK": {
      pattern: "Hide Clock",          
      command: "hide_clock"
    },
    "SHOW_CLOCK": {
      pattern: "Show Clock",          
      command: "show_clock"
    },    
  },    
  commands: {
    "hide_clock": {
      moduleExec: {
        module: () => {
          MM.getModules().enumerate((m)=> {
            if (m.name == "clock") m.hide(1000, {lockString: "RECIPE_LOCKED"})
          })
        }
      },
      soundExec: {
        chime: "close"
      }
    },
    "show_clock": {
      moduleExec: {
        module: () => {
          MM.getModules().enumerate((m)=> {
            if (m.name == "clock") m.show(1000, {lockString: "RECIPE_LOCKED"})
          })
        }
      },
      soundExec: {
        chime: "open"
      }
    },
  }
}
exports.recipe = recipe

bugsounet

explain:

if (m.name == "clock") m.hide(1000, {lockString: "RECIPE_LOCKED"})

m.name == "clock" => clock is the name of the module (case sesitive)
lockString: "RECIPE_LOCKED"} => RECIPE_LOCKED is the password for unlock the module (to not override your vocal rule with an other module)

(wow doing it in 15 min ! )

Sorry @Anthony I have not many time to respond actually, that’s why it don’t respond very quickly

bugsounet

@venditti69500 said in Hide/Show Recipe:

it’s not just the magic mirror, this man too @bugsounet . I was not talking about modifying the module, I use MMM-page-selector module in order to have 2 pages on my mirror, I then created a very basic recipe in the MMM-GA recipe folder using the page_increment/page_decrement actions to juggle with pages vocally. I was thinking of something similar.

Yes, naturaly, incoming notifications is coded natively

Anthony

@bugsounet Thank you so much for this. Tested and workes as expected. I really thought that you don’t reply bacause you are tired of all my “newbie questions”. The least I can do is buy you a coffee
One last thing. Can I add in this recipe the

 soundExec: {
        sound: "/../.mp3",
      },

function? And where exactly should I add it?

bugsounet

Thanks for this donate

I’ve Upgrade my code sample

bugsounet

@Anthony : it’s good ?

Anthony

@bugsounet It is not Just goog. It awesome. Now I will try to find out how to start the module hidden at start up. Thank you one more time. From now on whenever I post a question in the forum I will wait for your answer even if it will come in a month . The work and help you provide here deserves more than 1-2 coffees.

bugsounet

something like that ?

Sample:

var recipe = {   
  commands: {
    "hide_on_start": {
      moduleExec: {
        module: () => {
          MM.getModules().enumerate((m)=> {
            if (m.name == "clock") m.hide(1000, {lockString: "RECIPE_LOCKED"})
            if (m.name == "MMM-WiFiPassword") m.hide(1000, {lockString: "RECIPE_LOCKED"})
          })
        }
      }
    }
  },
  plugins: {
    onReady: "hide_on_start"
  }
}
exports.recipe = recipe

Note: modules will be hidden when GA is ready

Anthony

@bugsounet Goodmorning from Greece. Man I will try your addition and if it works I really have to buy you more coffees. If this works you have solved my biggest problem. Thanks one more time for your effort and your help. I will try it when I get home and let you know.

alex69

@Anthony it work very well ! @bugsounet is a real ass-kicker. I will try to change somethings on my recipe like you do for this in order to change pages

Solved Hide/Show Recipe