Read the statement by Michael Teeuw here.
Different looks based on browser / user-agent
-
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.