Module Position

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

maxbachmann

@strawberry-3-141

The Message I already thought yesterday that it’s better To just Do
This.sendNotification(buildthemessagetring)
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
I just did Not replace your Test strings By the right Part of The objects yet ;)
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?

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

maxbachmann

@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

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

maxbachmann

yes already saw that yesterday forgot to replace it ;)
yes decided to do some majopr changes to improve it (hope to finish them today)
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

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.

maxbachmann

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

strawberry 3.141

@maxbachmann If you create a github repo, than I can make suggestions what you could improve

maxbachmann

@strawberry-3-141 I will when I finished, but have to do some other stuff for the speech recognition first. Will let you know when I posted it on github