MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Different looks based on browser / user-agent

    Scheduled Pinned Locked Moved General Discussion
    2 Posts 2 Posters 2.6k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • AlvingerA Offline
      Alvinger
      last edited by 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?

      1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User
        last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Sam, technical setup by Karsten.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy