MMM-OnThisDay

This is a module for the awesome MagicMirror². It displays historical events from Wikipedia based on the current date.

Default mode:

Carousel mode with optional progress bar:

Install the module

Go to modules folder

cd modules

Clone this module from Github

git clone https://github.com/nkl-kst/MMM-OnThisDay

Switch to newly created module folder

cd MMM-OnThisDay

Install dependencies

npm install --only=prod

After adding this module to your config (see below) restart your MagicMirror.

Update the module

Go to modules folder

cd modules/MMM-OnThisDay

Pull changes from Github

git pull

Install new dependencies

npm install --only=prod

Since this repository ignores the automatically generated package-lock.json, pulling changes should always work. If not, try to reset your module with git reset --hard before pulling new changes.

Using the module

To use this module, add the following configuration block to the modules array in the config/config.js file:

let config = {
    modules: [
        {
            module: 'MMM-OnThisDay',
            position: 'top_right', // All available positions
            config: {
                // See below for configurable options, this is optional
            },
        },
    ],
};

Configuration options

All options are optional so the module works out of the box.

Option	Description
language	Events language. If the language is set to null (default), the global Mirror language ist used. See Language. Type: String Default: null
animationSpeed	Duration of content refresh animation in seconds. Type: Number Default: 1
updateInterval	Time between loading new events data in seconds. Type: Number Default: 3600 (1 hour)
carousel	Show events in carousel mode (one event at a time). Type: Boolean Default: false
carouselInterval	Time between events in carousel mode in seconds. Use auto for word count based intervals. Type: Number or String Default: 30 (30 seconds)
carouselIntervalWordFactor	Used to calculate the event display duration when using carouselInterval: 'auto'. Type: Number Default: 1 (1 second
carouselProgress	Display a progress indicator for carousel intervals. Type: Boolean Default: false
maxEvents	Display up to the given number of events if supported. Type: Number Default: null
reverseOrder	Display events in reversed order if supported. Type: Boolean Default: false
maxWidth	Max width of the displayed events content. Type: String Default: 400px
textSize	CSS class to set the text size, use MagicMirror core classes here Type: String Default: xsmall

Language

The global configured language of your MagicMirror is used by default in this module. Use the language config option to change it. See the Wikimedia Feed API reference for supported languages.

Styling

MM wraps the module content in a div with the module name as a CSS class, e.g. <div class="MMM-OnThisDay"> ... </div>. So you could just add something like this to your css/custom.css:

.MMM-OnThisDay {
    background: rgba(0, 0, 0, 0.35);
}

Problems

If you have any problems or questions, feel free to open an issue. There are many possible improvements for this module so please let me know if you miss something.

Developer notes

To run all unit tests just fire this command in the module folder

# Run tests
npm test

License: MIT

See LICENSE