Read the statement by Michael Teeuw here.
[HOW_TO] MagicMirror as Desktop Wallpaper (all platform : updated)
-
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
andnode-gyp
(It requiresVisual 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
-
@mmrize Very nice
-
-
-
@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
-
@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!
-
@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 :(. -
@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, butnormal 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.
-
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
-
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? -
@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.