Module Position

[maxbachmann]

I just asked my friend google:

 var d = document.getElementById(wrapper);
 d.style.left = newx_pos;
 d.style.top = newy_pos;

is that how to do it?

[strawberry 3.141]

@maxbachmann no, you would get the module itself, the wrapper has an id with the identifier of the module, then you would get the wrapper of the position and would call appendChild with your module

[maxbachmann]

@strawberry-3-141 Can you help me with how that would look like in software? I am sorry this project is the first time I use javascript at all and absolutely clueless when it’s about the dom

[strawberry 3.141]

@maxbachmann

// get the module to move with it's identifier
var clock = document.getElementById('module_0_clock');

// append it to the region you like
document.querySelector('div.region.top.left div.container').appendChild(clock);    

it will work only if you already have a module in that position, otherwise you need to ovverride the style to display block

document.querySelector('div.region.top.left div.container').style.display = 'block';

that’s it

[maxbachmann]

@strawberry-3-141 So I always have to know wether there is already a element in that region? Is there a way to check all modules and return the ID’s of the elements that are in this position?

[maxbachmann]

@strawberry-3-141 and where to add that? is that already the “end code”? I tried in the domupdate function and it did not work, so I guess that was wrong

[strawberry 3.141]

it is safe to always run the code so you don’t need to check if there is a module necessarily.

it is not related to the get dom function, you can put it where ever you want except node_helper (because its not executed in the browser)

can you post the code of your module or upload it to github, then i can have a look

[maxbachmann]

In general I want to add it to all kind of modules so I can change the position when sending them a socketmessage to do so

[strawberry 3.141]

@maxbachmann i wouldn’t place that code in other modules, you can perform that from your module for every module, this isn’t magicmirror related. its pure dom manipulation.

[maxbachmann]

Ah did not know that ;) well yes then it’s definetly in my program. All my program does so far is subscribe to a mqtt broker, load some data and according to this show/hide modules. Now I want to add the possibility to move modules to different positions.
Can send the current code later

[maxbachmann]

@strawberry-3-141 so in general use all 3 commands and then it works in both senarios? where can I find the right ID for each module?

[strawberry 3.141]

@maxbachmann you can get all modules https://github.com/MichMich/MagicMirror/tree/master/modules#module-selection then iterate over them and when you find the module execute the cmds

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.style.display = 'block';
    }
});

something similar to this

[maxbachmann]

@strawberry-3-141 ty that works.

Added the possibility

region.insertBefore(instance, region.childNodes[0])

so I can prepend and append the module

[justjim1220]

@maxbachmann

If you look in your css folder you will find the main.css file. Open it and you will find all the regions. Compare them to where you have you modules set and it should help you figure it out.

[maxbachmann]

@justjim1220 it already works the way @strawberry-3-141 proposed :)
Only thing I am not quite sure about yet is when can I use const?
I have the code in socketmessagereceived. Can I use const in there when I do only give the variable one value each time it runs the function? Because for me it seems like the variables still exist when the function gets called again which would mean const does not work

[justjim1220]

@maxbachmann

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

[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]

@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

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?

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