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 theignoreModulesconfig 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 bypositionsetting and rotated within a position except for modules listed in that position'signoreModules, anoverrideTransitionIntervalcan 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-CarouselTo 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. Ingnored modules (ignoreModules) will be diplayed on all slides.
This value is OPTIONAL Possible values: array of String array
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']
]
}
}
]
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent