@fozi
Once I was the original creator of this module (and many others)
For some personal reasons, I couldn’t maintain my modules anymore at that time by myself. But I didn’t want to break the maintenance of the modules for the community. So I transferred all the ownership to any volunteer who wants to take over. I believed that they could keep the module’s maintenance and develop more than me.

After one and a half years passed, I return to this scene now.
What I see is, …
Some modules are being maintained still well, some are abandoned, some are, …

Well, I will not claim my ownership back, those modules are not mine anymore from my discard. And I believe everyone has his own good mind. So I don’t care.

However, a little sorry to you for this situation though.

@bert269
Those configurations have to be located in config.
You put them outside config.

@nneuland
Just question.
Do you want Fixed IP inside your LAN(e.g Home Network) or Static IP from outside of LAN?

@tonkxy
Just for reference, there is a similar module already. You’d better get a hint from it.
https://github.com/BrianHepler/MMM-WeatherBackground
It derive the background image from unsplash collections by weather and season condition(and ideally, everything if it can be translated and notified from any modules.)

@jamesarm

Hmmm. In my test, there be no issue.

Anyway, try these steps;

1. Update and Upgrade your MM to the latest version. If you can, Upgrade Electron and Node also.
2. Remove MMM-GoogleTTS then reinstall (without electron-rebuild)
3. Get credentials and config you need.
4. Try execution.
5. Is there an error? what kind of? show me.
6. IF you are doubting electron-rebuild issue, try server only mode. (Still do not electron-rebuild yet)
7. in server only mode and browser trial, it works?
8. If it works, now do electron-rebuild process. Is there any error in process?

@sdetweil you are right. It was just an example. :)

@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

@jamesarm
I was the original author of it. I’ll look inside tomorrow. I ran away from the my exmodules for personal reasons for a while.

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

@assassins
Well, sorry. I have no idea anymore.