I’d like to propose some functionality for people like me who want to display their MM info on two (or more) displays with slightly different configurations on each.

I’m not a programmer, but I’ve tried to devise a solution that will allow for the functionality at a basic level, but at the same time should be comparatively simple to program and backward compatible. I’ll give more of my rationale after the suggestion, so here goes:

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

• 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 built-in webserver with an alternate port number.

• The same would occur under within each module under position, i.e. position becomes an alias for position-display1 and then add position-display2, position-display3, etc.

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

• 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 rationale in the above proposal:

• Making the current option name an alias for “…display1” allows for backward compatibility, so no one’s install gets broken.

• If people are wanting multiple configs, they are likely using the built-in webserver to display these on other machines. The display on the local machine would always use the first config (i.e. …display1”).

• For most modules the same configuration would be acceptable for all displays. The main I’m guessing people would want to change is where and/or whether the module appears. Styling changes could then be accomplished through the additional CSS class.

• I know this way of doing it somewhat limits what can be done, but my guess is that most people who could benefit from this function would be willing to trade reduced customizability for getting the functionality actually added.

@sdetweil Thanks for the suggestion. I was hopeful as the style inspector showed that I could pretty much do what I wanted with

.MMM-BackgroundSlideshow {
    display: none;
}

Unfortunately, I wasn’t able to get it working based on the info in the link you sent. I did a little more digging and it looks like both Chrome and Firefox removed support for user stylesheets a few years back. My guess is that even if I could re-enable it (or find some extension that mimiced it) on the desktop, doing so on the mobile browser would probably be much difficult and/or impossible.

Do you know if the ability to have multiple configurations has been suggested before as a feature request? I’ve been mulling it over and I think I might have a way to implement this (in a limited sense) in a simpler way that wouldn’t require multiple config.js files.

TL;DR Is there a way to have a different config when the MM is accessed remotely via web vs what shows on the local display?

My magic mirror is set up to show clock data, weather data, info from a few temp sensors I have around the house. But I also use https://github.com/darickc/MMM-BackgroundSlideshow so it does double duty as a photo frame.

I also display the same info, minus the BackgroundSlideshow, on smaller screens that I have around the house (typically old tablets) using the web access. In order to not run the BackgroundSlideshow module on these secondary screens, I have to run a second instance – similar to what is described here: https://forum.magicmirror.builders/topic/15123/multiple-instances – which means my temp sensors have to send their data twice, my weather app has to make API calls twice, etc.

It would be great if there was a way to have only one MM instance, but display it’s info in two different configurations – one for local and one for remote.

@sdetweil Thanks for the suggestions. The browser options didn’t seem to work for me, but the viewport CSS did. I couldn’t use your file as-is, but was able to borrow from it to add to my custom CSS.

I ended up adding custom sizes for each element – one of the things I was trying to avoid – but it was the only workable solution I could come up with for now.

I was wondering if the CSS transform: scale(x); might be a solution for scaling the whole layout, but I’m not sure what element to apply it to. Maybe someone who is more knowledgeable can comment.

I know that the body margin, height, and width all need to be adjusted, not just the font size, so it would need to accommodate for that.

Here’s my custom CSS if anyone’s interested:

body {
	margin: 6vw;
	height: calc(100% - 12vw);
	width: calc(100% - 12vw);
	font-size: 9vw;
	line-height: 9vw;
}

.small {
	font-size: 9vw;
	line-height: 9.5vw;
}

.medium {
	font-size: 6vw;
	line-height: 6.5vw;
}

.large {
	font-size: 36vw;
	line-height: 36vw;
}

header {
  font-size: 6vw;
  line-height: 6vw;
  padding-bottom: 2vw;
  margin-bottom: 3vw;
}

.module {
  margin-bottom: 12vw;
}

I have come to appreciate having the info from my MagicMirror so much that I want to have little "mini"MagicMirrors in various rooms of my house.

This is quite easy using the drawerful of old smartphones I have and MM’s serveronly function on a secondary port. It’s great because the phones need very minimal configuration, just put the MM’s serveronly address in a browser.

The only snag I’m running into is that I would like the info to take up the whole screen rather then just part of the screen as would be typical with MM. (see images below)

I’m hoping someone can suggest a simple CSS trick that would scale the whole MM content. If possible, something that would scale based on the width of the screen would be even better – allowing for phones of different sizes or even tablets.

Thanks!

What I have with the default CSS is:

What I want is:

Thanks @sdetweil

I added my directory to the list, restarted MagicMirror, and I can now see the file.

For other’s reference, the code above is located in MagicMirror/js/server.js

Anyone know how I can put a file in the MagicMirror directory to allow it to be accessed (internally) via HTTP? It works if I put my file in the Modules folder, but I’d prefer not to do that to keep things cleaner. I tried putting the file in the MagicMirror folder directly and also a sub-folder I created, but both give me an error of “Cannot GET test.html”?

I just started setting up my MagicMirror and am a total newbie. I am not a coder / programmer – I’ve basically just mimicked the examples from the various modules in GitHub to do my configuration. So this is a pretty basic question, but one that other newbies may be wondering as well.

When entering a value for a config line, when do you need quotes?

At first, I just assumed you quoted everything. But I was changing something in my config file and noticed some unquoted values. After a little more investigation, I realized that there are a few values that only work if they are not quoted (e.g. plain numbers and boolean T/F).

Can someone confirm the specifics of this for us newbies?

In case I’m not being clear, it seems like you would do

port: 8080

without quotes but

units: "metric"

with quotes.

And a bonus question, should it be double quotes, single quotes, or can you use either one?