[HOW_TO] MagicMirror as Desktop Wallpaper (all platform : updated)

[MMRIZE]

Since MM 2.17 (2021-10-01), You can use your MM as Desktop wallpaper (like Rainmeter of window). Easy.

Environment

• MagicMirror >= 2.17

For MacOS / Linux

configuration

// in your config.js add these lines.
// (ADDED 2024-05-16) These lines should be placed inside of `config`, not end of file.
// I forgot to mention it because it seemed so obvious. Surprisingly, it seems to be misunderstood as appending these to the end of the file.


electronOptions: {
	width: 1920,
	height: 1200,
	fullscreen:  false,
	backgroundColor: '#00000000',
	titleBarStyle: 'none',
	frame: false,
	type: 'desktop',
	hasShadow: false,
	transparent: true,
	resizable:   false,
},
electronSwitches: ["enable-transparent-visuals"],

That’s all.

For Windows 10

Requirements

• You might not have python > 3.7 and node-gyp(It requires Visual Studio Tools to install).
• So, Read this link and setup your environment. (Install Visual Studio things and python)

Install

Unlike Mac/Linux, for Windows, you need some hacks for preparation.

cd ~/MagicMirror # Your magicmirror directory
npm install --save electron-wallpaper-napi
# If fails, you might hava some issues about Visual Studio things. Read above;

Then, open js/electron.js with your editor, and add these two lines;

//around line 7
...
const electron = require("electron");
const core = require("./app.js");
const Log = require("logger");

const electronWallpaper = require('electron-wallpaper-napi')  // <-- Insert

// Config
let config = process.env.config ? JSON.parse(process.env.config) : {};
...

and

// around line 50
...
// Create the browser window.
mainWindow = new BrowserWindow(electronOptions);
electronWallpaper.attachWindow(mainWindow)  // <-- Insert
...

Configuration

// in your config.js add these lines.

electronOptions: {
	//width: 1920,
	//height: 1080,
	//x: 0,
	//y: 0,
	fullscreen:  true,
	backgroundColor: '#00000000',
	frame: false,
	type: 'desktop',
	transparent: true,
},
electronSwitches: ["enable-transparent-visuals"],
  

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 */
}

replace or add this to contents of your custom.css

[mumblebaj]

@mmrize Very nice

[doctorwhen]

@mmrize I just use pcmanfm https://gitlab.com/doctorfree/Scripts/-/blob/master/MagicMirror/backgrounds.sh

[MMRIZE]

@doctorwhen
Interesting. I know pcmanfm can set desktop wallpaper with image, but is it possible also application to locate in background layer?

Anyway, now we can do it natively since 2.17

[doctorwhen]

@mmrize no, pcmanfm cannot run an application in the desktop background layer, just a wallpaper image. so, i take my comment back, i did not fully understand what you are talking about. but, now i want to try running magicmirror as my desktop background!

[lexcyr]

@mmrize Hello
i just tried it on Xubuntu, the background stay black for me and not transparent. so i can’t see my desktop icons anymore :(.

[MMRIZE]

@lexcyr
In the Linux environment, some additional options might be needed or modified (I mentioned it in README)
Anyway, you’ve said;

so i can’t see my desktop icons anymore

It means, your MM is not placed on the desktop layer, but normal application layer. (And your transparent setting also doesn’t work)
I doubt you probably miss these;

• Your MM might not be 2.17.
• Or your configuration was wrong.

[OscarVsp]

Hello, thank for this !

I’ve followed configuration for linux, and i also had to add the custom css content to have transparency. It works well expect one issue: the mouse click don’t go through magicmirror, so i can’t click on folder/app on the desktop.

Is it normal, and am i supposed to only use the menu to launch app or am i missing something ? I looked on the electron documentation but i didn’t found answer to this…

Thanks for your help

[MMRIZE]

@OscarVsp

I’ve tested MacOS and Windows, but not Linux, sorry. But Electron Manual says type: 'desktop' options would work on Linux Environment too.
What kind of Linux are you using?

[MMRIZE]

@OscarVsp
You can check whether MM is really ‘most-bottomed’. Adjust some CSS to check whether MM is “COVERING but just transparent” against other icons or applications.