• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

MM as Desktop background (for MacOS / Linux)

Scheduled Pinned Locked Moved Show your Mirror
7 Posts 4 Posters 2.7k Views 5 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.
  • M Offline
    MMRIZE
    last edited by MMRIZE Aug 30, 2021, 11:47 AM Aug 30, 2021, 11:45 AM

    screenshot.png

    Though I’m not using Windows anymore, I always envy the Rainmeter despite its ridiculous instability and low performance.
    10 minutes ago, suddenly I remembered the idea that the Electron could be used for that purpose. That means I can use MM as a desktop wallpaper. So I did.

    Here’s how to do it.

    For disclaimers, Electron cannot hook Windows Desktop by itself. There are a few solutions for that, but I don’t want to hack MM heavily. For Windows, use Rainmeter.

    custom.css

    :root {
      --color-text: #DDD;
      --color-text-dimmed: #BBB;
      --color-text-bright: #fff;
      --color-background: rgba(0, 0, 0, 0);
     /* make fonts color brighter */
    
      --font-size: 2vh;
      --font-size-small: 0.75rem;
    
      --gap-body-top: 20px;
      --gap-body-right: 120px;
      --gap-body-bottom: 20px;
      --gap-body-left: 40px;
    /* adjust margin for your screen */
    }
    
    * {
      text-shadow: 2px 2px 5px #000000; /* make text more readable on the background image */
    }
    
    

    config.js

    In the case of Linux, some options might need to be modified.

    electronOptions: {
      /*
      x: 1920,
      y: -320,
      width: 3360,
      height: 1892,
      */
      width: 1920,
      height: 1200,
      fullscreen:  false,
      backgroundColor: '#00000000',
      titleBarStyle: 'none',
      frame: false,
      type: 'desktop',
      hasShadow: false,
      transparent: true,
      resizable:   false,
    },
    
    
    • width, height : Your screen resolution
    • x, y : position offset from 0, 0 for the left-upper corner of MM screen.

    If you are using multi-screen like this and you want to place MM to secondary monitor;
    dualscreen.png
    You can adjust x and y to move MM to the secondary monitor.

    js/electron.js

    I’m not sure this is necessary. but when above modification is not enough, try this.

    // line 22 of electron.js
    // Change this line
    app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required");
    
    // to this.
    app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required", "enable-transparent-visuals");
    

    carbon (1).png
    This needs source modification. I already made a PR to enable customizing electron switches, but this online source modification is needed before acceptance of that PR.

    I tested it on macOS, and I believe it will be working on Linux also. Have good luck.

    S 1 Reply Last reply Aug 30, 2021, 11:56 AM Reply Quote 1
    • S Offline
      sdetweil @MMRIZE
      last edited by Aug 30, 2021, 11:56 AM

      @mmrize u can pass the electronOptions in config.js

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      M 1 Reply Last reply Aug 30, 2021, 11:59 AM Reply Quote 0
      • M Offline
        MMRIZE @sdetweil
        last edited by Aug 30, 2021, 11:59 AM

        @sdetweil said in MM as Desktop background (for MacOS / Linux):

        u can pass the electronOptions in config.js

        Yup, I did it so of course. But the switch (not electronOptions) is not customizable in MM.

        S 1 Reply Last reply Aug 30, 2021, 12:00 PM Reply Quote 0
        • S Offline
          sdetweil @MMRIZE
          last edited by Aug 30, 2021, 12:00 PM

          @mmrize yes, correct.

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • B Offline
            boblewis
            last edited by Jul 24, 2023, 6:14 PM

            @MMRIZE why your weather app is overlapping with other apps?

            M 1 Reply Last reply Jul 24, 2023, 9:52 PM Reply Quote 0
            • M Offline
              MMRIZE @boblewis
              last edited by Jul 24, 2023, 9:52 PM

              @boblewis ??? I cannot catch your words. More details?

              A 1 Reply Last reply Jul 24, 2023, 11:28 PM Reply Quote 0
              • A Offline
                ankonaskiff17 @MMRIZE
                last edited by Jul 24, 2023, 11:28 PM

                @MMRIZE I think he sees icons in front of the weather module, doesn’t realize MM is the desktop

                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