MMM-Page-Selector: A page switcher that can set positions of modules

[rudibarani]

@Veldrovive If I got your new pages-implementation right, we define a name for a module which is later used to organize the page layout. Is that correct? Would it be possible to give multiple names to the same module (not have on module configured and shown multiple times via different names)?

It would be helpful for modules with rate-limited APIs, if different parts of one module should be shown at different locations on the same page. I would like to achieve this via a custom css which addresses your name-tag.

If this where possible, I would like to take this one step further in the future and implement a distance based layout which keeps the information most important to me readable throughout the room, when I prepare for my way to work. Changing the layout via css could be dynamic and would not involve a whole page refresh as it occurs when switching between pages.

[Veldrovive]

Ok, I’ve implemented persistent pages. In order to access them right now, you need to be in the development branch since I don’t have the time to do extensive testing.

I’m not exactly sure what you mean when you say “not have on module configured and shown multiple times via different names”. You do not want to have the same module shown multiple times on the same page?
If the module was shown multiple times by this module, then all the instances would have the same config and I don’t see how that would help with rate-limited APIs.
Could you clarify?

[rudibarani]

Thanks for the persistent pages. I can try them today or tomorrow.

Regarding showing one module multiple times: I do not want to put e.g. “clock” multiple times into the config.js and show it in different places on the screen.

My idea was - and I hope that I got the concept right - that if the same module (which is implemented only once in the config.js and calls the API only once) could be shown multiple times on one page. Then I could set multiple name-tags for that module and address each representation of this module separately via the name-tag in the custom.css file and show/hide/scale different parts of the module at different locations on the screen. This could be of general use for other people as well.

My next step after this would be to learn how to inject css info dynamically - e.g. to keep infos about my upcoming trains/flights, the traffic-map to the station and weather info at my destination at the same visual size as I move throughout the room. This I would like to achieve with a distance measurement via PIR or doppler-microwave-sensor.

I hope this helps to explain the idea I had.

[Veldrovive]

The way that this system would have to work could not reduce API calls. Duplicating the module would simply send two calls instead of one. As I understand it, a large rework of how magic mirror works at a much baser level than what this module does would be necessary to change that.
It would be possible to have one module shown in different places by assigning it multiple names, but I don’t see how that would really be useful.

[rudibarani]

OK - thank for your feedback.

Do you have any idea on how to change the css-info or the class of a module on the fly? Would this be possible through notifications?

[Veldrovive]

I’ve worked with changing the classes of modules on the fly during my work on this module.
In order to change the class of a module or some modules:

MM.getModules().withClass(/*Your module name or list of names*/).enumerate(module => {
    ref = document.getElementById(module.data.identifier);
    if(ref === null){
        Log.log("Module does not exist")
    }else{
        ref.classList.add("Your new class")
        // Or if you want to get rid of a class
        ref.classList.remove("Your old class")
    }
})

[rudibarani]

@veldrovive Thank you very much!

[rudibarani]

Dear @Veldrovive,

sorry for not getting back to you anytime sooner. I am still struggling to get my mirror to work again. I updated MMM-Page-Selector from a version prior the changes with the second config-layout to your development branch to try out persistent pages.

Since then, my mirror is very slow and unusable. If I try the new layout, my mirror stays black. If I try the old layout for the config file, it sometimes shows an image after a long period of time - but so slow, you can see how the site is being built up.

I will need some time, hopefully this weekend, to reduce my current config to just MMM-Page-Selector and add one module after the other to see if the problem originates from MMM-Page-Selector or the combination with another module.

[rudibarani]

Dear @Veldrovive,

I have reduced my config file to very few modules but my MagicMirror keeps restarting every few seconds. That does not happen, if I stick with the “old” style of configuring Pages within MagicMirror. It seems, I make a general mistake with the way, the second Page setup should be done.

Would you mind having a look, why this slimmed down version does not work?

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
  address: '0.0.0.0', // Address to listen on, can be:
  // - 'localhost', '127.0.0.1', '::1' to listen on loopback interface
  // - another specific IPv4/6 to listen on a specific interface
  // - '', '0.0.0.0', '::' to listen on any interface
  // Default, when address config is left out, is 'localhost'
  port: 8080,
  ipWhitelist: [
    '127.0.0.1',
    '::ffff:127.0.0.1',
    '::1',
    ['192.0.0.60', '192.0.0.189']
  ], // Set [] to allow all IP addresses
  // or add a specific IPv4 of 192.168.1.5 :
  // ['127.0.0.1', '::ffff:127.0.0.1', '::1', '::ffff:192.168.1.5'],
  // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
  // ['127.0.0.1', '::ffff:127.0.0.1', '::1', '::ffff:192.168.3.0/28'],

  language: 'de',
  timeFormat: 24,
  units: 'metric',
  customCss: 'css/custom.css',

  modules: [
    {
      module: 'MMM-Page-Selector',
      position: 'top_bar',
      config: {
        defaultPage: 'tag', // Tag
        displayTitle: true, // disable in production mode
        persistentPages: true,
        selectPageNotif: ['SELECT_PAGE'],
        incrementPageNotif: ['PAGE_UP'],
        decrementPageNotif: ['PAGE_DOWN']
      }
    },
    {
      module: 'alert',
      disabled: false,
      config: {}
    },
    {
      module: 'MMM-WatchDog',
      disabled: false,
      config: {
        // See 'Configuration options' for more information.
      }
    },
    {
      module: 'MMM-Remote-Control',
      disabled: false
    },
    {
      module: 'MMM-Remote-Control-Repository',
      disabled: false
    },
    {
      module: 'updatenotification',
      disabled: false
    },
    {
      module: 'MMM-Snow',
      disabled: true, // final: set to false, hide in Remote Control & Save
      config: {
        // See 'Configuration options' for more information.
        flakeCount: 111,
        theme: 'winter' // Possible values are winter, love, and water
      }
    },
    {
      module: 'MMM-Love',
      disabled: true, // final: set to false, hide in Remote Control & Save
      config: {
        // See 'Configuration options' for more information.
        flakeCount: 111,
        theme: 'love' // Possible values are winter, love, and water
      }
    },
    {
      module: 'MMM-ip',
      disabled: false,
      config: {}
    },
    {
      module: 'clock',
      disabled: false,
      config: {
        clockBold: false,
        displaySeconds: false,
        dateFormat: 'dddd, ll'
      }
    },
    {
      module: 'MMM-TextClock',
      disabled: false,
      config: {
        layout: 'Field', // options are 'Line' and 'Field'
        its24: 'ES IST', // text before hour
        to24: ' ', // text between hour and minute
        after24: 'UHR', // text after minute
        marked: 'color: white; font-weight: 400;', // css code to mark current time in Field layout
        offset: 2 // standard: 2
      }
    },
    {
      module: 'newsfeed',
      disabled: false,
      config: {
        // The config property is optional.
        // If no config is set, an example calendar is shown.
        // See 'Configuration options' for more information.
        feeds: [
          {
            title: 'Tagesschau',
            url: 'http://www.tagesschau.de/xml/rss2'
          }
        ]
      }
    }
  ], // top_bar, top_left, top_center, top_right, upper_third, middle_center, lower_third, bottom_left, bottom_center, bottom_right, bottom_bar, fullscreen_above, and fullscreen_below
  pages: {
    tag: {
      'clock': 'bottom_left',
      'newsfeed': 'bottom_bar'
    },
    abend: {
      'clock': 'bottom_left',
      'newsfeed': 'bottom_bar'
    },
    nacht: {
      'MMM-TextClock': 'bottom_center' // Bottom Center nur für MMM-TextClock verwenden. CSS verändert!!!
    },
    wochenende: {
      'clock': 'bottom_left',
      'newsfeed': 'bottom_bar'
    },
    annika: {
      'clock': 'bottom_left',
      'newsfeed': 'bottom_bar'
    },
    phillip: {
      'updatenotification': 'top_bar',
      'clock': 'bottom_left',
      'newsfeed': 'bottom_bar'
    },
    kinder: {
      'clock': 'bottom_left',
      'newsfeed': 'bottom_left'
    },
    system: {
      'updatenotification': 'bottom_bar',
      'MMM-ip': 'bottom_right',
      'MMM-Remote-Control': 'bottom_right' // uncomment the following line to show the URL of the remote control on the mirror
    },
    test: {
      'updatenotification': 'bottom_bar'
    }
  },
  exclusions: {
  }
};

/** ************* DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== 'undefined') {
  module.exports = config;
}

[robiv8]

I guess it’s the MM-WatchDog module
Check that out

MMM-WatchDog module keeps an eye on your UI and quits app in case the UI crashes. If you combine this with the PM2 process manager, MM2 will automaticly restart after a UI failure.

So you said: “my MagicMirror keeps restarting every few seconds.”

[Veldrovive]

Yep, I can verify that it is in fact WatchDog.
I can also provide an explanation and a patch that you can do yourself. The way I made it possible to not include the position prop anymore is by building a temporary config, loading that one, restarting magic mirror, and then replacing the temporary with the original. I’m really sure of the underlying reason, but this process seems to trigger WatchDog to trigger an abort.
As robiv says, combined with pm2, this causes a restart loop.
The two easiest ways to get around this are:

1. Don’t use watchdog. If you don’t think that you are going to experience crashes, then that works
2. Give a position prop to every module. Including position props doesn’t change any of the visual function and that way, Page-Selector never triggers a restart and the problem doesn’t occur in the first place. The config for any given module should follow this format:

{
    module: 'MMM-module-name',
    position: 'any_position' //It doesn't matter what it is
    disabled: false,
    config: {
        ...
    }
},

I will try to find a way to make the modules play well together, but that might take a while.

[robiv8]

Hallo Veldrovive,
I just asked you a question on GitHub about Button.
Should I write this here or on GitHub? Where do you prefer it?

[Veldrovive]

Hey robiv,
I do actually prefer to have issues opened on GitHub. That way I can more easily keep track of them and also it provides a record of my work in case I want to use it in order to prove my merit.
Thanks for asking.

[robiv8]

OK Thanks.
It’s not really an issue, its a question about Button with Selector Howto ;-)

[rudibarani]

@veldrovive @robiv8 Thank you two for the quick feedback and nailing it down so quickly.
I will disable Watchdog for the time being. I was using it as I experienced crashes when using an iFrame module for video playback (ISS livestream on my night-page). But it should be OK to live without that for a while.

[rudibarani]

@veldrovive said in MMM-Page-Selector: A page switcher that can set positions of modules:

Ok, I’ve implemented persistent pages. In order to access them right now, you need to be in the development branch since I don’t have the time to do extensive testing.

Thanks again for the persistent pages feature. I have tried it all day in different scenarios and it was working reliably and as expected. :clapping_hands:

[rudibarani]

@veldrovive PS: I tried following your workaround and just wanted to let you know that it works :) Now I am able to use your new config option for pages which makes it so much easier to set them up! Great idea to implement it!

[Veldrovive]

@rudibarani
Good stuff. I’m glad everything is working out.

[rudibarani]

@veldrovive I got the second page layout working with MMM-Watchdog: added a position-value to each module as you suggested and changed the settings to a heartbeat of 5 sec and a restart interval, in case the feedback is not sufficient, of 31 sec. Maybe the default values where just to tight and interfered with your tricks to layout the pages.

How does MMM-Page-Selector decide about the order in which modules within the same location are stacked on top of each other? I have would like to move an instance of MMM-DWD-WarnWeather below MMM-MyWeather but changing the order in the “pages” part of the layout does not have an effect on the order on the screen.

[Veldrovive]

@rudibarani Good to know that’s a solution.
Right now, modules are stacked in the order that they appear in the config file. If a module is above another in the config, it will be above that other one on the page.
However, with a little work, that could be changed. Do you think that it would be helpful to be able to change that on a page to page basis?