This is an extension to the MagicMirror project, allowing the modules to be displayed in a rotating carousel instead of displaying all of them at once. There are three modes available:
'global'
- All modules not cited in theignoreModules
config are rotated, displaying only one at a time for the duration oftransitionInterval
. This is particularly useful on small screens where there may not be enough space to display several components at once.'positional'
- Modules are grouped byposition
setting and rotated within a position except for modules listed in that position'signoreModules
, anoverrideTransitionInterval
can also be set to rotated different position at different speeds.'slides'
- groups of modules can be assigned to be displayed at the same time (regardless ofposition
), an unlimited number of these "slide" groups can be set up.
Run these commands at the root of your magic mirror install.
cd modules
git clone https://github.com/barnabycolby/MMM-Carousel
To use this module, add the following configuration block to the modules array in the config/config.js
file:
var config = {
modules: [
{
module: 'MMM-Carousel',
config: {
// See below for configurable options
}
}
]
}
Note that a position
setting is not required.
The following properties can be configured:
Option | Description |
---|---|
mode |
This value is OPTIONAL Possible values: 'global' or 'positional' or 'slides'
Default value: 'global'
|
transitionInterval |
The number of milliseconds to display each module for.
This value is OPTIONAL Possible values: Any valid int
Default value: 10000
|
ignoreModules |
A list of module names whom should not be considered as part of the carousel. For example, the `alert` module should be able to display a notification at any time, by ignoring it we can prevent the plugin from hiding any notifications. NOTE: is only used in 'global' and 'slides' modes. Ignored modules in 'slides' mode are shown on every slide..
This value is OPTIONAL Possible values: String array
Default value: []
|
top_bar
top_left
top_center
top_right
upper_third
middle_center
lower_third
bottom_left
bottom_center
bottom_right
bottom_bar
|
Determines if this position should be rotated and which modules in this position should be ignored. NOTE: is only used when mode is 'positional' otherwise ignored.
This value is OPTIONAL Possible values: Object with keys; enabled , a boolean to rotate this position or not,
ignoredModules , a String array of modules names to ignore.
overrideTransitionInterval , a int a transition time for this position only.
Default value: {enabled: false, ignoreModules: [], overrideTransitionInterval: 10000}
|
slides |
An array of string arrays. Each string array is a list of content for an individual slide. The slides will be rotated as a complete set using the transitionInterval setting. Ignored modules (ignoreModules ) will be diplayed on all slides.
This value is OPTIONAL Possible values: array of String array
Default value: [[]]
|
slideLengths |
An array of integers. Each integer is the length of time an individual slide will remain active on screen, in milliseconds. If these values are not provided for a given slide, will fall back first to the overrideTransitionInterval setting, if present, then to the transitionInterval if no overrideTransitionInterval or slideLengths value is set.
This value is OPTIONAL Possible values: array of integers
Default value: []
|
var config = {
modules: [
{
module: 'MMM-Carousel',
config: {
transitionInterval: 10000,
ignoreModules: ['clock'],
mode: 'global'
}
}
]
}
var config = {
modules: [
{
module: 'MMM-Carousel',
config: {
transitionInterval: 10000,
ignoreModules: [],
mode: 'positional',
top_left: {enabled: true, ignoreModules: [], overrideTransitionInterval: 15000},
top_right: {enabled: true, ignoreModules: ['currentweather']}
}
}
]
}
var config = {
modules: [
{
module: 'MMM-Carousel',
config: {
transitionInterval: 10000,
ignoreModules: ['clock', 'alert'],
mode: 'slides',
slides: [
['calendar', 'compliments', 'currentweather'],
['weatherforecast', 'MMM-Trello', 'planetrise', 'newsfeed'],
['MMM-fitbit']
]
}
}
]
}
var config = {
modules: [
{
module: 'MMM-Carousel',
config: {
transitionInterval: 10000,
ignoreModules: ['clock', 'alert'],
mode: 'slides',
slides: [
['calendar', 'compliments', 'currentweather'],
['weatherforecast', 'MMM-Trello', 'planetrise', 'newsfeed'],
['MMM-fitbit']
],
slideLengths: [
// in this example, slide 1 will stay on screen for 5 seconds,
// slide 2 for 10 seconds, and slide 3 for 15 seconds
5000, 10000, 15000
]
}
}
]
}