Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.15.0 is available! For more information about this release, check out this topic.

    Module Position

    Development
    5
    34
    5592
    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.
    • justjim1220
      justjim1220 Module Developer @maxbachmann last edited by

      @maxbachmann

      Sorry, still kinda new with this, that is beyond my scope!

      M 1 Reply Last reply Reply Quote 0
      • M
        maxbachmann @justjim1220 last edited by maxbachmann

        @justjim1220 Same for me I am absolutely new to javascript. I generally know the system const because I use a lot of c++, but testing here seems like the variables actually get not deleted after SocketNotificationreceived function ends. And I have absolutely no clue on when to use the type let and which advantage it offers over var, because on some variables let works on others only var. const actually never worked in there.

        I have my code here not fully ready yet:

        socketNotificationReceived: function(notification, payload) {
            if (notification === 'HIDE_SHOW') {
        	
        	var obj = JSON.parse(payload.data.toString());
        	
        	var max = obj.slots.length;
        
        	for (let i = 0; i < max; ++i){
                        if (obj.slots[i].slotName === "HIDE" ||
                            obj.slots[i].slotName === "SHOW") {
                            var HideShow = obj.slots[i].slotName;
                        }
                    }
        
                    for (let i = 0; i < max; ++i){
                        if (obj.slots[i].slotName === "MODULE") {
                            var Module = obj.slots[i].value.value;
        			break;
                        }
                    }
                    var Message = HideShow + "_" + Module;
        
        		
        		const moduleToMove = 'clock';
        		const targetRegion = 'top.left';
        		
        		MM.getModules().enumerate((module) => {
        		    if (module.name === moduleToMove) {
        		        const instance = document.getElementById(module.identifier);
        		        const region = document.querySelector(`div.region.${targetRegion} div.container`);
        		        region.appendChild(instance);
        			//region.insertBefore(instance, region.childNodes[0])
        		        region.style.display = 'block';
        		    }
        		});
              	this.loaded = true;
        	this.sendNotification(Message);
            }
        
            if (notification === 'ERROR') {
              this.sendNotification('SHOW_ALERT', payload);
            }
          }
        

        So at which positions would it be better to use const/let instead of var? And how is the performance of them? Because in c++ I definetly use const a lot for variables or member functions

        strawberry 3.141 1 Reply Last reply Reply Quote 0
        • strawberry 3.141
          strawberry 3.141 Project Sponsor Module Developer @maxbachmann last edited by strawberry 3.141

          @maxbachmann short version: with es6 you should never use var. it has scope issues. const doesn’t work exactly like in other programming languages. It only prevents from assigning a new reference so strings integers booleans … are fixed. But objects and arrays can still be modified.

          And you don’t want to keep this, it was only a placeholder for your notifications, thats why you thought is const always there.

          const moduleToMove = 'clock';
          const targetRegion = 'top.left';
          

          you should also be carefull setting the variable Module as it is a global variable of MM.

          I don’t get the part why you build the message string.

          Also you should consider creating another if/else as if (notification === 'HIDE_SHOW') { has nothing todo with changing positions of modules.

          Exactly what you are doing is bad it schould look more like this:

          socketNotificationReceived: function(notification, payload) {
              if (notification === 'HIDE_SHOW') {
          	
          	const obj = JSON.parse(payload.data.toString());
          	
          	const max = obj.slots.length;
          
                  let HideShow;
          	for (let i = 0; i < max; ++i){
                      if (obj.slots[i].slotName === "HIDE" ||
                          obj.slots[i].slotName === "SHOW") {
                          HideShow = obj.slots[i].slotName;
                      }
                  }
          
                  let module;
                  for (let i = 0; i < max; ++i){
                      if (obj.slots[i].slotName === "MODULE") {
                          module = obj.slots[i].value.value;
          		break;
                      }
                  }
                  // why do you build this message??? it's never used
                  const Message = HideShow + "_" + module;
          
          		
          		const moduleToMove = 'clock';
          		const targetRegion = 'top.left';
          		
          		MM.getModules().enumerate((module) => {
          		    if (module.name === moduleToMove) {
          		        const instance = document.getElementById(module.identifier);
          		        const region = document.querySelector(`div.region.${targetRegion} div.container`);
          		        region.appendChild(instance);
          			//region.insertBefore(instance, region.childNodes[0])
          		        region.style.display = 'block';
          		    }
          		});
                	this.loaded = true;
          	this.sendNotification(Message);
              }
          
              if (notification === 'ERROR') {
                this.sendNotification('SHOW_ALERT', payload);
              }
            }
          
          M 1 Reply Last reply Reply Quote 0
          • M
            maxbachmann @strawberry 3.141 last edited by maxbachmann

            @strawberry-3-141

            1. The Message I already thought yesterday that it’s better To just Do
              This.sendNotification(buildthemessagetring)
            2. I have hide/Show And Move in The Same If because it’s connected To a Speech recognition that gives me hide/Show And Move To The Same mqtt so they Are absolutely connected in My case, but yes HIDE_SHOW should get changed To HIDE_SHOW_MOVE
            3. I just did Not replace your Test strings By the right Part of The objects yet 😉
            4. have To try that later because yesterday I did change those variables To const but then it worked for The First command, but the Moment I Wanted To perform a Second Action like Showing again it did Not work anymore
              Thats Why I was Not Sure wether I am allowed To use const but will Look in that later

            Thx for The explanation so let is basically a local Variable, var a global definetly At a pretty Random position and const Is local And can’t Be changed right?

            1 Reply Last reply Reply Quote 0
            • M
              maxbachmann last edited by maxbachmann

              'use strict';
              /* global Module */
              
              /* Magic Mirror
               * Module: MMM-Snips
               *
               * By Max Bachmann
               * MIT Licensed.
               */
              
              Module.register('MMM-Snips', {
              
                //defaultvalues that get taken when not defined differently in the config file
                defaults: {
                  mqttServer: 'mqtt://192.168.178.35',
                  topic: 'hermes/intent/captn2:module_hide_show',
                },
              
                start: function() {
                  let self = this;
                  Log.info('Starting module: ' + self.name);
                  self.loaded = false;
                  self.updateMqtt(self);
                },
              
                //call the Node_helper
                updateMqtt: function(self) {
                  self.sendSocketNotification('MQTT_SERVER', 
                    {mqttServer: self.config.mqttServer, topic: self.config.topic });
                },
              
                socketNotificationReceived: function(notification, payload) {
                  let self = this;
                  
                  if (notification === 'HIDE_SHOW_MOVE') {
                    
                    //create a JSON object and retrieve the modulename, wether to show or hide it,
                    //the position to move it to and wether it should get prepended or appended
                    const obj = JSON.parse(payload.data.toString());
                    let HideShow;
                      for (let i = 0; i < obj.slots.length; ++i){
                        if (obj.slots[i].slotName === "HIDE" ||
                          obj.slots[i].slotName === "SHOW") {
                          HideShow = obj.slots[i].slotName;
                        }
                    }
              
                    let modulename;
                    for (let i = 0; i < obj.slots.length; ++i){
                      if (obj.slots[i].slotName === "MODULE") {
                        modulename = obj.slots[i].value.value;
              	  break;
                      }
                    }
              
                    let newposition;
                    let TopBottom;
                    for (let i = 0; i < obj.slots.length; ++i){
                      if (obj.slots[i].slotName === "POSITION") {
                        newposition = obj.slots[i].value.value;
                        for (let i = 0; i < obj.slots.length; ++i){
                          if (obj.slots[i].slotName === "TOPBOTTOM") {
                            TopBottom = obj.slots[i].value.value;
              	      break;
                          }
                        }
              	  break;
                      }
                    }
              
                    // When the Module is know and where to move it it get's moved to the new position
                    if (newposition != null && modulename != null){
                      MM.getModules().enumerate((module) => {
                        if (module.name === modulename) {
              	    const instance = document.getElementById(module.identifier);
              	    const region = document.querySelector(`div.region.${targetRegion} div.container`);
              	    if (TopBottom === "BOTTOM"){
                            region.appendChild(instance);
                          }else{
              	      region.insertBefore(instance, region.childNodes[0])
                          }
                          region.style.display = 'block';
              	  }
                      });
                    }
              
                    self.loaded = true;
              
                    // When the Module is know and wether to show or hide it then it gets shown/hidden
                    if (HideShow != null && modulename != null){
                      switch(modulename) {
              	  case "PAGEONE":
              	          
              	    break;
              	  case "PAGETWO":
              	          
              	    break;
              	  case "PAGETHREE":
              	          
              	    break;
              	  case "PAGEFOUR":
              	          
              	    break;
              	  default:
              	    self.sendNotification(HideShow + "_" + modulename);
              	}
                    }
                  }
                }
              });
              
              
              'use strict';
              
              /* Magic Mirror
               * Module: MMM-Snips
               *
               * By Max Bachmann
               * MIT Licensed.
               */
              const NodeHelper = require('node_helper');
              let mqtt = require('mqtt');
              
              module.exports = NodeHelper.create({
                start: function() {
                  console.log('MMM-mqtt_display started ...');
                },
              
                getMqtt: function(payload) {
                  let self = this;
                  //connects to a mqtt client
                  let client = mqtt.connect(payload.mqttServer);
              
                  //after connecting to the mqtt client subscribes to 
                  //'hermes/intent/captn2:module_hide_show'
                  client.on('connect', function() {
                    client.subscribe(payload.topic);
                  });
              
                  //When a message arrives that is in the right topic, the voicesession gets continued
                  //by sending a message with session id and ah answer text to 
                  //'hermes/dialogueManager/continueSession', so the hotword is not needed again
                  //Afterwards the original message gets send back to MMM-Snips
                  client.on('message', function(topic, message) {
                    if (topic === 'hermes/intent/captn2:module_hide_show') {
                      const messagestring = message.toString();
              	const obj = JSON.parse(messagestring);
              	let continueobj = {
              	  "sessionId":"",
              	  "text":"Kann ich sonst noch etwas für dich tun?"
              	}
              	continueobj.sessionId = obj.sessionId;
              	client.publish('hermes/dialogueManager/continueSession',
              	  JSON.stringify(continueobj))
                    	self.sendSocketNotification('HIDE_SHOW', {'data':messagestring})
                    }
                  });
                },
              
                //after getting called the getMqtt function gets called
                socketNotificationReceived: function(notification, payload) {
                  let self = this;
                  if (notification === 'MQTT_SERVER') {
                    self.getMqtt(payload);
                  }
                }
              });
              

              Thats my full code I use: Are there still things that should be different for performance, or just because thats not a usual way to do it 😉

              1 Reply Last reply Reply Quote 0
              • M
                maxbachmann last edited by

                @maxbachmann said in Module Position:

                self.sendNotification(HideShow + “_” + modulename);

                tells the other module to hide. I saw there is the function
                modulename.hide() , but I could not get it to work. Whats the name I have to use there to make it work?

                strawberry 3.141 1 Reply Last reply Reply Quote 0
                • strawberry 3.141
                  strawberry 3.141 Project Sponsor Module Developer @maxbachmann last edited by

                  @maxbachmann

                  I can see that you are still refering to targetRegion, but it’s nowhere defined.

                  const region = document.querySelector(`div.region.${targetRegion} div.container`);
                  

                  modulename.hide() can’t work, in your case modulename is just a string and a string doesn’t have a hide function, what you want instead is calling the hide function of the module instance, which would be in your case something like:

                  MM.getModules().enumerate((module) => {
                      if (module.name === modulename) {
                  	module.hide();
                      }
                  });
                  

                  There are more things to do, but what I spotted shouldn’t break anything.

                  1 Reply Last reply Reply Quote 0
                  • M
                    maxbachmann last edited by

                    1. yes already saw that yesterday forgot to replace it 😉

                    2. yes decided to do some majopr changes to improve it (hope to finish them today)

                    3. I am new to javascript why I asked because I don’t need to learn the stuff in a wrong way from start off. So any tips on improving the code that are a general thing so that I should think off when doing other stuff with javascript I am really interested in

                    1 Reply Last reply Reply Quote 1
                    • S
                      shbatm Module Developer last edited by shbatm

                      @maxbachmann -

                      This version of the MMM-Carousel module can move modules to different position on different “slides” – the slides can be changed automatically (interval based) or manually (keyboard/navigation buttons) or via Socket Notifications.

                      See the very bottom of the README file for how to set it up in your config.

                      1 Reply Last reply Reply Quote 0
                      • M
                        maxbachmann last edited by

                        @shbatm looks nice 😉 I might use this slide indicator for my module, thats a really nice idea

                        strawberry 3.141 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 3 / 4
                        • 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