Bugsounet Coding

    • Register
    • Login
    • Search
    This Forum is now reserved to registred users!

    Solved Hide/Show Recipe

    Recipes
    4
    32
    160
    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.
    • A
      Anthony Donators last edited by 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.

      1 Reply Last reply Reply Quote 0
      • A
        alex69 last edited by

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

        A 1 Reply Last reply Reply Quote 0
        • A
          Anthony Donators @alex69 last edited by

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

          1 Reply Last reply Reply Quote 0
          • V
            venditti69500 Donators last edited by

            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.

            A 1 Reply Last reply Reply Quote 0
            • bugsounet
              bugsounet Main Coder last edited by

              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 😕

              A 1 Reply Last reply Reply Quote 0
              • A
                Anthony Donators @venditti69500 last edited by

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

                1 Reply Last reply Reply Quote 0
                • A
                  Anthony Donators @bugsounet last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • bugsounet
                    bugsounet Main Coder last edited by

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

                    V 1 Reply Last reply Reply Quote 0
                    • A
                      Anthony Donators last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • V
                        venditti69500 Donators @bugsounet last edited by

                        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 1 Reply Last reply Reply Quote 0
                        • bugsounet
                          bugsounet Main Coder last edited by 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
                          
                          1 Reply Last reply Reply Quote 0
                          • bugsounet
                            bugsounet Main Coder last edited by 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 😕

                            1 Reply Last reply Reply Quote 0
                            • bugsounet
                              bugsounet Main Coder @venditti69500 last edited by

                              @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

                              A 1 Reply Last reply Reply Quote 0
                              • Referenced by  bugsounet bugsounet 
                              • A
                                Anthony Donators @bugsounet last edited by 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?

                                1 Reply Last reply Reply Quote 0
                                • bugsounet
                                  bugsounet Main Coder last edited by

                                  Thanks for this donate 😉

                                  I’ve Upgrade my code sample

                                  1 Reply Last reply Reply Quote 0
                                  • bugsounet
                                    bugsounet Main Coder last edited by

                                    @Anthony : it’s good ?

                                    A 1 Reply Last reply Reply Quote 0
                                    • A
                                      Anthony Donators @bugsounet last edited by

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

                                      1 Reply Last reply Reply Quote 0
                                      • bugsounet
                                        bugsounet Main Coder last edited by

                                        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

                                        A 1 Reply Last reply Reply Quote 1
                                        • A
                                          Anthony Donators @bugsounet last edited by

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

                                          A 2 Replies Last reply Reply Quote 0
                                          • A
                                            alex69 @Anthony last edited by

                                            @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💪🏼👌🏼

                                            A 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post
                                            Powered by NodeBB | @bugsounet ©2022