Different looks based on browser / user-agent

Alvinger

I do realize that this is probably off-topic for the bulk of the users.

I intend to run multiple mirrors off of one server instance. I will have one “complete” Magic Mirror installation (including physical mirror) but want to show the content on several other screens, not all of them mirrors!

There is a very simple way of doing this and that is selecting showed content based on browser / user-agent strings. In my case I will use the Midori browser (and maybe Chromecast) for mirrors. All my other devices will use Chrome. So anything with Chrome in the user-agent will be shown a custom theme while the rest will show the “standard” theme.

To accomplish this the user-agent needs to be saved so that the CSS can select theme based on it. I did a quick hack of index.html in the MagicMirror folder. I added the following right after the -tag:

<script>
  var b = document.body;
  b.setAttribute("data-useragent"), navigator.userAgent);
  b.setAttribute("data-platform"), navigator.platform);
</script>

I can then use custom.css to define a different look based on the above. In my case I wanted to have something other than a black background, i.e. a different background image. To get this I added the following in custom.css:

body[data-useragent*="Chrome"] {
  background-image: url("background.jpg");
}

This works great (I had to put the background.jpg in the css folder but I am sure there is another way).

Now I just need to figure out how to set values in config.js to customize the modules shown. Any suggestions?

Interesting so following, as have in mind similar plans but feeding some relevant info from our Ai down to specific screens.

Do keep me updated, as a server set up and API per config mirror may be the way forward.