Bringing the WallberryTheme to MagicMirror²
The WallberryTheme
module re-themes MagicMirror² to look like a beautiful photo-box wall display. It adds a new font, styles, and periodically changing background image pulled from Unsplash.com.
The WallberryTheme also comes packaged with two companion modules for displaying the time (WB-clock
) and weather (WB-weather
).
REQUIRED API KEYS:
The WB-weather companion module has now been completely refactored with some great new features:
WBProvider
class.Go check out the details in WB-weather's README.
WallberryTheme has new options for dealing with light text on bright background images!
The addBackgroundFade
option allows you to add soft gradient backgrounds to the top and bottom regions of your magic mirror, providing more contrast for the modules in those regions. These gradients use Unsplash's color data to automatically shift to the general color hue of the photo, so they blend better with the image.
The autoDimOn
feature auto-detects bright images and automatically dims them, ensuring bright images don't wash out your text and dark images remain vibrant.
No background fade, auto dim set to off:
With addBackgroundFade and autoDimOn (on their default settings):
To use this module and its companion modules:
WallberryTheme
folder to your MagicMirror/modules
directoryconfig/config.js
file like in the following example:modules: [
// Base WallberryTheme adds new font, styles, and a rotating background image pulled from Unsplash.com
{
module: "WallberryTheme",
position: "fullscreen_below", // Required Position
config: {
unsplashAccessKey: "Your Unsplash API Key", // REQUIRED
collections: "2589108" // optional - leave empty for a random photo
}
},
// WB-clock adds local time (Optional Module)
{
module: "WallberryTheme/WB-clock",
position: "top_bar", // highly suggest using top_bar position
config: {
localCityName: "Seattle", // optional
otherCities: [
{name: "DC", timezone: "US/Eastern"}, // optional
{name: "Anchorage", timezone: "US/Alaska"} // optional
]
}
},
// WB-weather adds weather (Optional Module)
{
module: "WallberryTheme/WB-weather",
position: "bottom_bar", // Highly suggested location
config: {
// See "Configuration options" for more information.
apiKey: "Your openweathermap API key", // REQUIRED
latitude: 47.603230, // REQUIRED
longitude: -122.330276 // REQUIRED
}
}
]
The following properties of WallberryTheme
can be configured. For more information on how to configure the WB-clock and WB-weather modules see their individual README files.
Option | Type | Description |
---|---|---|
unsplashAccessKey |
String | Your Unsplash API access key. Sign up for free at https://unsplash.com/developers. Demo accounts are allowed 50 API requests per hour . This value is REQUIRED |
collections |
String | A comma-separated list of Unsplash collection IDs that photos should be pulled from. Collection IDs can be found in the URL of the collection, shown in the highlighted part of this screenshot: Example: "1538150,162213" Default value: "" (no collection, theme will use a random Unsplash photo) |
queries |
Array | A list of queries to search for on Unsplash. When multiple queries are specified, one gets randomly picked every refresh. Example: ["cars", "new york", "black cat"] Default value: [] |
updateInterval |
Number | How often the photo should change (Milliseconds). Default value: 300000 (5 minutes) |
orientation |
String | What screen orientation photos should be optimized for. Possible values: "portrait" , "landscape" , or "squarish" Default value: "portrait" |
backgroundOpacity |
Number | Controls the darkness of the background photo. Possible values: Any number from 0.0 (black screen) to 1 (fully bright image)E.G.: 0.5 would be the background at half brightnessDefault value: 1 |
brightImageOpacity |
Number | Controls the darkness of bright photos (determined by autoDimOn ). Only used when autoDimOn is true . Possible values: Any number from 0.0 (black screen) to 1 (fully bright image)Default value: 0.85 |
autoDimOn |
Boolean | Automatically darkens bright photos to the value set by brightImageOpacity . Possible values: true (on) or false (off) Default value: true |
addBackgroundFade |
Array | Adds darker gradient backgrounds to the top bar region and/or bottom bar regions of MagicMirror (helps with readability for bright or busy background images). Possible values: "top" will add a gradient background to the top bar region, "bottom" will add a gradient background to the bottom bar region. Set to an empty list to remove all gradients. Default value: ["top", "bottom"] |
clearCacheOnStart |
Boolean | Clears Electron's cache on MagicMirror startup, preventing an issue where Electron would sometimes encounter a CORS error when trying to load a previously cached background image (see this issue here for details). Possible values: true (on) or false (off) Default value: true |
imageHeight |
String or Number | Use "auto" to use your screen's height, or specify a hardcoded width in pixels. Default value: "auto" |
imageWidth |
String or Number | Use "auto" to use your screen's width, or specify a hardcoded width in pixels. Default value: "auto" |
imageOptions |
String | See Unsplash documentation for supported parameters. Default value: "fit=crop" |
Contributions of all kinds (pull requests, bug reports, feature suggestions, documentation, etc) are all welcome and encouraged.
If you're enjoying the WallberryTheme and wanna make my day:
Huge thanks to everyone who has contributed and made the WallberryTheme better!
dev
branch
[Unreleased]
section.Visit the Changelog file to see the latest changes to the project :)