• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Alternating Modules to save on real estate

Scheduled Pinned Locked Moved Requests
9 Posts 4 Posters 5.1k Views 3 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.
  • A Offline
    amanzimdwini
    last edited by Jul 19, 2016, 5:30 PM

    There are now so many wonderful modules out there that my MM is a bit crowded :)

    So the logical question arises: might it be possible to alternate two modules in one location?

    I’m thinking along the lines of
    postion: top_left
    {module 1 = weather
    module2 = tasklist
    switchtime = 120 seconds}
    and every two minutes weather and tasklist would alternate.

    Thanks,
    Karl

    1 Reply Last reply Reply Quote 1
    • K Offline
      KirAsh4 Moderator
      last edited by KirAsh4 Jul 20, 2016, 12:13 AM Jul 20, 2016, 12:10 AM

      This would be a crude way of doing it, by creating another module to manipulate the ones you want swapping. It’s crude, but it gets the job done. Ideally this would be just a routine that allows you to tell it which modules to swap, as opposed to them being hard coded like they are in this code. But, this is just to show that it’s possible. One caveat is that if one module is wider than the other, you will notice things on your screen jump around a bit. That’s just the way CSS works when an element gets removed, and the nature of the flexible regions that we use.

      This code swaps the default calendar and clock modules every 10 seconds, with a 2 seconds fade delay. The 'config.js' portion is simply:

          {
            module: 'my_swap',
          },
      

      and in 'modules/my_swap/' I have the following file called 'my_swap.js':

      Module.register("my_swap",{
      
        // Default module config.
        defaults: {
        },
      
        // Define required scripts.
        getScripts: function() {
          return ["moment.js"];
        },
      
        start: function() {
          Log.log("Starting module: " + this.name);
          this.DOMloaded = 0;
          this.isHidden = 0;
      
          var self = this;
          setInterval(function() {
            self.swapModules();
          }, 1000);
        },
      
        notificationReceived: function(notification, payload, sender) {
          if (notification === 'DOM_OBJECTS_CREATED') {
            this.DOMloaded = 1;
          }
        },
      
        // swapModules.
        swapModules: function() {
      
          var now = moment();
          var self = this;
      
          if (!(now.seconds() % 10)) { // Update on the tens (00, 10, 20, 30, 40, and 50)
            if (this.DOMloaded) {
              if (self.isHidden) {
                MM.getModules().exceptModule(this).enumerate(function(module) {
                  if (module.name === "clock") {
                    module.hide(2000, function() {
                      MM.getModules().exceptModule(this).enumerate(function(module) {
                        if (module.name === "calendar") {
                          module.show(2000, function() {
                          });
                        }
                      });
                    });
                  }
                });
                self.isHidden = 0;
              } else {
                MM.getModules().exceptModule(this).enumerate(function(module) {
                  if (module.name === "calendar") {
                    module.hide(2000, function() {
                      MM.getModules().exceptModule(this).enumerate(function(module) {
                        if (module.name === "clock") {
                          module.show(2000, function() {
                          });
                        }
                      });
                    });
                  }
                });
                self.isHidden = 1;
              }
            }
          }
        }
      });
      

      A Life? Cool! Where can I download one of those from?

      A 1 Reply Last reply Jul 20, 2016, 3:55 AM Reply Quote 2
      • A Offline
        amanzimdwini @KirAsh4
        last edited by Jul 20, 2016, 3:55 AM

        @KirAsh4
        That was fast. Thanks. I’ll give it a whirl.

        Yes, I understand about all the caveats - I like the fading: that will make the jumping less obvious. But that problem already exists if you place the news-ticker at bottom_center, since it will vary between 2 and three lines. And I guess I could force the alternating modules to have the same width.

        BTW: thanks for teaching how to program modules. I love learning this way.

        1 Reply Last reply Reply Quote 0
        • K Offline
          KirAsh4 Moderator
          last edited by KirAsh4 Jul 20, 2016, 4:54 PM Jul 20, 2016, 5:02 AM

          The fading doesn’t make it less obvious. It happens because of the different sizes per module. Fade or not, you will see the other modules in the same region jump to adjust to the new sizing. Some days my calendar will have long entries, and it makes the clock above it move. So when I hide/show the calendar, the clock will jump back and forth. The regions being flexible is what allows for longer entries on the calendar to be seen, for example. Same with the news ticker as you’ve discovered. Having fixed regions can cause other problems as well.

          But, this should be a start for you. As I mentioned, it’s crude, and hard coded. I much rather have a function you can pass details to but I will leave that as an exercise for you. :)

          A Life? Cool! Where can I download one of those from?

          1 Reply Last reply Reply Quote 1
          • K Offline
            KirAsh4 Moderator
            last edited by Jul 20, 2016, 8:16 PM

            By the way, this works best if the two modules you are trying to swap are right below each other in the 'config.js' file. For example, if you’re trying to swap ModA and ModB, your 'config.js' should list them together

            modules: [
            		{
            			module: 'ModA',
            		},
            		{
            			module: 'ModB',
            		},
            ],
            

            if you have a ModC in between them, it won’t ‘swap’ properly, it’ll just turn them off in alternate fashion while keeping them in their respective location. So you’ll end up with:

            startup
            ModA
            ModC
            ModB
            
            then
            ModC
            ModB
            
            then
            ModA
            ModC
            
            alternating ...
            

            Not particularly ideal …

            A Life? Cool! Where can I download one of those from?

            A 1 Reply Last reply Jul 21, 2016, 8:54 PM Reply Quote 1
            • A Offline
              amanzimdwini @KirAsh4
              last edited by Jul 21, 2016, 8:54 PM

              @KirAsh4
              Thanks! I messed around a bit with it - here is what I came up with. (and yes, 99.999% is yours!)
              Still, here it is for anyone else who wants to play with it. But ALL credit goes to @KirAsh4

              This works best for me for MMM-Wunderground and MMM-Wunderlist - which I keep at top-right.
              a) my config.js extract:

                              {
                                      module: 'my_swap',      // as supplied by KirAsh4
                                      config: {
                                              showsecs: 30,   // seconds each module is shown (default =30)
                                                              // 30 is a "relaxed" speed
                                              fadems: 4000,   // fade time in ms (default = 4000)
                                                              //  4000 is also very relaxed - no coffee yet.
                                              modA: 'MMM-WunderGround',  // both modules need to be listed NEXT
                                              modB: 'MMM-Wunderlist'     // they should be of similar size, 
                                                                         // and in the same location.
                                                                         // These two are _prefect_ 
                                              }
                              },
                              {
                                      module: 'MMM-WunderGround',
                                      position: 'top_right',
                                      config: {
                                              apikey: '****',
                                              pws: '****',
                                              lang: 'EN',
                                              fctext: '1',
                                              fcdaycount: "5",
                                              fcdaystart: "0",
                                              hourly: '1',
                                              hourlyinterval: "3",
                                              hourlycount: "1",
                                              alerttime: 10000,
                                              alerttruncatestring: "english:",
                                              fade: true
                                      }
                              },
                              {
                                      module: 'MMM-Wunderlist',
                                      position: 'top_right', 
                                      config: {
                                              accessToken: '****',
                                              clientID: '****',
                                              lists: [
                                                      'MagicMirror'
                                                      ],
                                              interval: 60,
                                              fadePoint: 0.9,
                                              fade: true
                                              }
                              },
              

              Then the file my_swap.js ( in \modules\my_swap) needs to look like this:

              Module.register("my_swap",{
              
                // Default module config.
                defaults: {
                      modA: "MMM-NonExistA",  // if we dont know the EXACT NAME, we don't do anything!
                      modB: "MMM-NonExistB",  //    ="=
                      showsecs: 30,           //  as in compliments
                      fadems: 4000            //    ="=
                },
              
                // Define required scripts.
                getScripts: function() {
                  return ["moment.js"];
                },
              
                start: function() {
                  Log.log("Starting module: " + this.name);
                  this.DOMloaded = 0;
                  this.isHidden = 0;
              
                  var self = this;
                  setInterval(function() {
                    self.swapModules();
                  }, 1000);
                },
              
                notificationReceived: function(notification, payload, sender) {
                  if (notification === 'DOM_OBJECTS_CREATED') {
                    this.DOMloaded = 1;
                  }
                },
              
                // swapModules.
                swapModules: function() {
              
                  var now = moment();
                  var self = this;
              
                      var mod1 = this.config.modA     // yank from config file
                      var mod2 = this.config.modB
                      var fadems = this.config.fadems
                      var showsecs = this.config.showsecs
              
                  if (!(now.seconds() % showsecs)) { 
                    if (this.DOMloaded) {
                      if (self.isHidden) {
                        MM.getModules().exceptModule(this).enumerate(function(module) {
                          if (module.name === mod1) {
                            module.hide(fadems, function() {
                              MM.getModules().exceptModule(this).enumerate(function(module) {
                                if (module.name === mod2) {
                                  module.show(fadems, function() {
                                  });
                                }
                              });
                            });
                          }
                        });
                        self.isHidden = 0;
                      } else {
                        MM.getModules().exceptModule(this).enumerate(function(module) {
                          if (module.name === mod2) {
                            module.hide(fadems, function() {
                              MM.getModules().exceptModule(this).enumerate(function(module) {
                                if (module.name === mod1) {
                                  module.show(fadems, function() {
                                  });
                                }
                              });
                            });
                          }
                        });
                        self.isHidden = 1;
                      }
                    }
                  }
                }
              });
              

              Works great for me! Thanks again for the clean code to play with. You should submit it as an official module.

              1 Reply Last reply Reply Quote 1
              • K Offline
                KirAsh4 Moderator
                last edited by Jul 21, 2016, 9:05 PM

                Yep, what you did is pretty much the idea. You figured it out and used your modules in the code. It needs to be rewritten a bit to allow for configurable module names. Possibly also allow more than just 2 modules to be swapped. There are some other things I can think of but it’s not something that’s at the top of the list for me. It is sitting in my dev repository, but it’ll be a bit before I focus on it. I’m glad what I wrote is helping you out though.

                A Life? Cool! Where can I download one of those from?

                T 1 Reply Last reply May 19, 2020, 7:21 AM Reply Quote 2
                • T Offline
                  tobias789 @KirAsh4
                  last edited by May 19, 2020, 7:21 AM

                  @KirAsh4 Is it also possible to create alternating modules from the same type? In my case, I’m trying to alternate 2 calendar modules. Thank you very much for your answer.

                  N 1 Reply Last reply May 20, 2021, 2:13 PM Reply Quote 0
                  • N Offline
                    niksadon @tobias789
                    last edited by niksadon May 20, 2021, 2:21 PM May 20, 2021, 2:13 PM

                    @tobias789 said in [Alternating Modules it to save on real estate](/post/75481):

                    @KirAsh4 Is it also possible to create alternating modules from the same type? In my case, I’m trying to alternate 2 calendar modules. Thank you very much for your answer.

                    Unfortunately, no. You can only alternate between the two modules, as prescribed in the manual.

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • 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