MMM-Carousel

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 the ignoreModules config are rotated, displaying only one at a time for the duration of transitionInterval. This is particularly useful on small screens where there may not be enough space to display several components at once.
• 'positional' - Modules are grouped by position setting and rotated within a position except for modules listed in that position's ignoreModules, an overrideTransitionInterval 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 of position), an unlimited number of these "slide" groups can be set up.

Installation

Run these commands at the root of your magic mirror install.

cd modules
git clone https://github.com/barnabycolby/MMM-Carousel

Using the module

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.

Configuration options

The following properties can be configured:

Option	Description
mode	'global' - All modules not cited in the ignoreModules config are rotated, displaying only one at a time for the duration of transitionInterval. This is particularly useful on small screens where there may not be enough space to display several components at once. 'positional' - Modules are grouped by position setting and rotated within a position except for modules listed in that position's ignoreModules, an overrideTransitionInterval 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 of position), an unlimited number of these "slide" groups can be set up. 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: [[]]

Example - Global Carousel

var config = {
    modules: [
        {
            module: 'MMM-Carousel',
            config: {
                transitionInterval: 10000,
                ignoreModules: ['clock'],
                mode: 'global'
            }
        }
    ]
}

Example - Positional Carousel

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']}
            }
        }
    ]
}

Example - Slides Carousel

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']
                ]
            }
        }
    ]
}