MMM-Wallpaper

This module is an extention for the MagicMirror.

The module is based on the work of delightedCrow to display a background image from Unsplash.

This module uses the predefined MagicMirror functions without any further stuff (except a own class to determine the brightness of the photo) and serves as self-explainatory module to dynamically add and change a background image.

To-Do's

Automatically resize image, when window is resized.

Installation

Open a terminal session, navigate to your MagicMirror's modules folder and execute git clone https://github.com/jupadin/MMM-Wallpaper.git, such that a new folder called MMM-Wallpaper will be created. Navigate inside the folder and execute npm install to install all dependencies. Activate the module by adding it to the config.js file of the MagicMirror as shown below.

cd modules
git clone https://github.com/jupadin/MMM-Wallpaper.git
cd MMM-Wallpaper
npm install

Using the module

    modules: [
        {
            module: 'MMM-Wallpaper',
            position: 'fullscreen_below',
            config: {
                updateInterval: 0,
                unsplashAPIKey: "", // REQUIRED
                query: false,
                collectionIDs: false,
                userName: false,
                photoID: false, 
                autoDim: true, 
                brightImageOpacity: 0.85, 
                imageOrientation: "landscape",
                imageWidth: "auto",
                imageHeight: "auto",
                imageOptions: "fit=fill&fill=blur",
            }
        }
    ]

Configuration options

The table below lists all possible configuration options. The following configuration options can be set and/or changed:

Module

Option	Type	Default	Description
`updateInterval`	`int`	`0`	Interval, when a new background image is fetched (`0` implies a single fetch)
`unsplashAPIKey`	`string`	`false`	APIKey to access the Unsplash databse REQUIRED
`query`	`string`	`false`	Search term for specific photos, from which a random photo should then be chosen as background
`collectionIDs`	`array`	`false`	List of Unsplash collection IDs (example: `[123, 456]`)
`userName`	`string`	`false`	User name of Unsplash user to further restrict the randomized photo selection.
`photoID`	`string`	`false`	The photoID can be found in the address bar in the standalone photo page. Note: This option (if set) disables the background image randomized background change by given collectionIDs and / or userName and / or query)
`autoDim`	`bool`	`true`	Automatically darken bright images
`brightImageOpacity`	`double`	`0.85`	Between 0 (black background) and 1 (visible opaque background), Note: Only used when `autoDim` is `true`
`imageOrientation`	`string`	`"landscape"`	Desired photo orientation - can be portrait, landscape, or squarish
`imageWidth`	`string`	`"auto"`	Set width to (current) screen / window width, or specify a hard-coded with in pixels
`imageHeight`	`string`	`"auto"`	Set height to (current) screen / window height, or specify a hard-coded height in pixels
`imageOptions`	`string`	`"fit=fill&fill=blur"`	Define special options to fetch photo. Possible other options: `fit=scale` or `fit=crop`. See https://unsplash.com/documentation#dynamically-resizable-images and https://docs.imgix.com/apis/rendering/size/fit for further details.

Further references

The idea to calculate the brightness of the photo is taken from the Magic Mirror module of delightedCrow and is based on Toni Tornado's answer on StackOverflow, which can be found here.

His working code at jsFiddle can be found at this jsFiddle.