Displays a single magic mirror module at a time, rotating through the list of configured modules in a carousel-like fashion.
Switch branches/tags
Nothing to show
Clone or download
izanbard and barnabycolby Fixing README typo (#8)
* adding new config
altering the transition function sugnature

* altering the transition function sugnature

* altering the transition function sugnature

* add functionality for per position rotating

* correcting indexing of positions array

* change show hide spped to make for cleaner transitions

* update README
reorder the defaults

* correct typos in README

* refactor to reduce repeated code

* refactor to reduce repeated code

* refactor to reduce repeated code

* refactor to reduce repeated code

* move var declarations

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* fixing errors in the build

* adding the first pass of my slides implementation

* refactor to reduce repeated code

* refactor to reduce repeated code

* protecting a call to undefined

* fixing bad call()

* fixing my undefined checks

* JSLINT alternative ideas on checking for undefined

* trying to fix the unit tests

* trying to fix the unit tests

* update README to include new options

* update README to include new options

* fix typos in readme
Latest commit 1ebf97b Feb 3, 2017

README.md

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.

Build Status

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