Coder Social home page Coder Social logo

mmm-pages's Introduction

MMM-pages

This MagicMirror² Module allows you to have pages in your magic mirror! Want to have more modules in your magic mirror, but want to keep the format? Or, want to have grouped modules that are themed together? Look no further!

Click here to see an example of it in action!

Note that this module does not provide any method of manually changing the page! You should ask other developers to add a notification to their modules, or add one yourself!

Installation

In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules

Clone this repository:

git clone https://github.com/edward-shen/MMM-pages.git

Configure the module in your config.js file.

<self-promotion>

To display what page you're on, I'd highly recommend checking out my page indicator module.

<\self-promotion>

Using the module

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

modules: [
    {
        module: 'MMM-pages',
        config: {
                modules:
                    [[ "weatherforecast", "newsfeed"],
                     [ "calendar", "compliments" ]],
                fixed: ["clock", "currentweather", "MMM-page-indicator"],
        }
    }
]

Configuration options

Option Type Default Value Description
modules [[String...]...] [] A 2D String array of what each module should be on which page. Notethat all entries must take their class name (e.g. this module's class name is MMM-pages, while the default modules may just have newsfeed, without the MMM- prefix.
excludes None None Deprecated Use fixed instead.
fixed [String...] ["MMM-page-indicator"] Which modules should show up all the time.
animationTime int 1000 Fading animation time. Set to 0 for instant change. Value is in milliseconds (1 second = 1000 milliseconds).
rotationTime int 0 Time, in milliseconds, between automatic page changes.
delayTime int 0 Time, in milliseconds, of how long should a manual page change linger before returning to automatic page changing. In other words, how long should the timer wait for after you manually change a page. This does include the animation time, so you may wish to increase it by a few seconds or so to account for the animation time.

For the module configuration option, the first element of the outer array should consist of elements that should be on the first page. The second element should consist of elements that should be on the second page, and so forth.

Regarding notifications

This module responds to the notification PAGE_CHANGED. The payload should be an integer. Note that this has strict error checking, so "3" will not work, while 3 will. Also do note that to switch to page 1, you need to send 0 to the module. This uses a zero-based numbering system.

Let's say that you want to change the indicator to page 3. In your code, you would write:

this.sendNotification("PAGE_CHANGED", 2);

This would cause the module to change show that you are on page 3.

You can also just send PAGE_INCREMENT or PAGE_DECREMENT without any payloads to have the module change the displayed page by one. If you attach a payload to these commands, it will attempt to the nth next page or nth previous page.

This module keeps internal track of how many pages you have, defined by your config in the config file. There is no way to dynamically change the pages you have. If there arises a need, please create an issue.

This module sends one notification, MAX_PAGES_CHANGED to assist display modules with how many pages they should display. However, this module does not enforce what page other modules should indicate. This is intentional, because any other module that needs a page change notification should be receiving from the notification system.

Finally, if you want to know what page you're currently on, send a QUERY_PAGE_NUMBER notification. The module will respond with a PAGE_NUMBER_IS notification, with the payload of the current page number.

FAQ

  • Help! My module is (above/below) another module in the same region but I want it to be somewhere else!

    The order of your config.js determines your module location. If you have two modules, both with position:bottom_bar, the one that is first listed will appear on top. The rest will appear in the same order you defined them in. If you want this module to be at the very bottom, define this module as the last module in your config.js file. If you want it to be on top in that region, make sure no other module is defined before it that has the same region.

  • Can I make a pull request?

    Please do! Feel free; I love improvements!

  • I want more config options!

    Please make an issue. Thanks!

mmm-pages's People

Contributors

edward-shen avatar dependabot[bot] avatar cowboysdude avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.