MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Module Position

    Scheduled Pinned Locked Moved Development
    34 Posts 5 Posters 15.6k Views 4 Watching
    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.
    • M Offline
      maxbachmann
      last edited by

      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.141S 1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @maxbachmann
        last edited by

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

        Please create a github issue if you need help, so I can keep track

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

          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

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

            @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.141S 1 Reply Last reply Reply Quote 0
            • strawberry 3.141S Offline
              strawberry 3.141 Project Sponsor Module Developer @maxbachmann
              last edited by

              @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

              Please create a github issue if you need help, so I can keep track

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

                @strawberry-3-141 ty that works.

                Added the possibility

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

                so I can prepend and append the module

                1 Reply Last reply Reply Quote 0
                • justjim1220J Offline
                  justjim1220 Module Developer @maxbachmann
                  last edited by

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

                  "Life's Too Short To Dance With Ugly People"
                  Jim Hallock - 1995

                  M 1 Reply Last reply Reply Quote 0
                  • M Offline
                    maxbachmann @justjim1220
                    last edited by 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

                    justjim1220J 1 Reply Last reply Reply Quote 0
                    • justjim1220J Offline
                      justjim1220 Module Developer @maxbachmann
                      last edited by

                      @maxbachmann

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

                      "Life's Too Short To Dance With Ugly People"
                      Jim Hallock - 1995

                      M 1 Reply Last reply Reply Quote 0
                      • M Offline
                        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.141S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 2 / 4
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy