Multiple Layouts for Auxilary Displays

[cweinhofer]

I’d like to propose a feature addition which would make it easy for people to have their MM displayed on additional screens. My guess is that many people have a pile of old phones and tablets sitting around collecting dust and adding functionality like this would make it very easy to repurpose these as useful extensions of their MagicMirror.

The main idea is to provide a framework so people can bring up the MM info on these auxiliary screens using the built-in webserver. Because these screens will likely be smaller than the main MM display (presumably a large monitor), my suggestion provides a way to remove and/or reposition modules without having to run multiple MM instances (more on that below).

I’m not a programmer, but I’ve tried to devise a solution that will allow for this functionality at a basic level, but at the same time be comparatively simple and backward compatible.

1. Add an integer option named displays as the first option in the config file. The default value for this would be 1 in which case the config file would work as it does now. If the value is 2 or greater, two additional options would become available.
2. Under port, port would become an alias for port-display1 (or vise-versa) and additional options named port-display2, port-display3, etc. would be required, matching the number of displays. This will allow the alternate configurations to be accessed using the webserver address and an alternate port number.
3. The same would occur under position within each module, i.e. position becomes an alias for position-display1 and then add position-display2, position-display3, etc.
4. Add a value of hidden to the list of possible values for position. If the value is hidden, the module is not shown on that display.
5. Add a CSS class to each display so that the content can be styled individually. e.g.

.display2 .clock .time {
	font-size: 72px;
}

Here is my thinking for the above:

• Making the current option name an alias for …display1 allows for backward compatibility, so no one’s install gets broken. The display on the local machine would always use the first config (i.e. …display1).
• For most modules, 90% of the configuration would stay the same for all displays. The main thing people would need to change is where and/or whether the module appears. Additional styling changes could be accomplished through using the additional CSS class.

Also, I know that what I’m suggesting could also be accomplished through running multiple MM instances (which is what I currently do), but that has some downsides:

• multiple instances means multiple API calls and/or HTTP POST requests from sensors. In my case, I handle the multiple HTTP POST requests by using CNAMEs on my router to make my MM machine look like multiple machines and then program the sensor to run the same HTTP POST routine multiple times for each machine. Thankfully my router and sensor firmwares (OpenWRT and Arduino) allow for this, but others would not.
• multiple instances means having to maintain multiple config and CSS files. With 90% of the config and CSS files being the same for all instances, making changes means having to make notes (or use a file compare utility) to make sure the changes are copied over to all the instances.

These aren’t a huge deal if you’re only running a second instance, but become quite unwieldy if you’re running 4 or 5 (my guess is that if you had a MM display in each room of your house, you’d want quite a few different layouts.

Thanks for your consideration!

[sdetweil]

I think this can be done with the media detection in CSS as the content is about to be displayed

I do this in another app

root{
  --scale-factor: 1;  /* set default scaling in case we have partial window, debug or in vm terminal window */
  --design-width: 1920px;
  --design-height: 1080px;
}

@media screen and (orientation: landscape) {
    :root{
        --scale-factor: var(width) / var(--design-width);
     };
 }
 @media screen and (orientation: portrait) {
    :root{
        --scale-factor: var(width) / var(--design-height);
     };
 }

then one can use the scale-factor in other css entries, for example

--gap-body-top: calc( 60px * var(--scale-factor)); --gap-body-right: calc( 60px * var(--scale-factor)); --gap-body-bottom: calc( 60px * var(--scale-factor)); --gap-body-left: calc( 60px * var(--scale-factor));