All Projects → edward-shen → MMM-page-indicator

edward-shen / MMM-page-indicator

Licence: MIT license
MagicMirror² module to display what page you're on.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to MMM-page-indicator

materialui-pagination
A simple pagination component for Material UI.
Stars: ✭ 31 (-6.06%)
Mutual labels:  pagination
MMM-NFL
National Football League Module for MagicMirror²
Stars: ✭ 22 (-33.33%)
Mutual labels:  magicmirror
EasyDataTable
易用和全面的纯Ajax分页插件(中文)
Stars: ✭ 18 (-45.45%)
Mutual labels:  pagination
MarketCycles.jl
Digital Signal Processing Indicators For Market Data.
Stars: ✭ 26 (-21.21%)
Mutual labels:  indicator
SimpleSlider
A simple slider allows you to easily use.
Stars: ✭ 78 (+136.36%)
Mutual labels:  indicator
continuation-token
A library for fast, reliable and stateless Web API pagination with Continuation Tokens.
Stars: ✭ 17 (-48.48%)
Mutual labels:  pagination
MMM-ShipmentTracking
Shipment Tracking Module for MagicMirror²
Stars: ✭ 24 (-27.27%)
Mutual labels:  magicmirror
MMM-Fuel
Gas Station price Module for MagicMirror²
Stars: ✭ 47 (+42.42%)
Mutual labels:  magicmirror
MultiIndicator
多功能指示器,适用于ViewPager 多场景
Stars: ✭ 44 (+33.33%)
Mutual labels:  indicator
data
Data providers
Stars: ✭ 31 (-6.06%)
Mutual labels:  pagination
loading
Laravel package to add loading indicator to pages while page is loading.
Stars: ✭ 38 (+15.15%)
Mutual labels:  indicator
repository
[PHP 7] Implementation and definition of a base Repository in Domain land.
Stars: ✭ 26 (-21.21%)
Mutual labels:  pagination
gorm-paginator
gorm pagination extension
Stars: ✭ 154 (+366.67%)
Mutual labels:  pagination
beer-app
🍺 Example App - Paginate API response with BLoC in Flutter
Stars: ✭ 20 (-39.39%)
Mutual labels:  pagination
redux-paginator
redux-paginator helps you deal with paginated API with Redux without the need to create new actions and reducers cases
Stars: ✭ 73 (+121.21%)
Mutual labels:  pagination
WallberryTheme
Bringing the WallberryTheme to MagicMirror²
Stars: ✭ 94 (+184.85%)
Mutual labels:  magicmirror
roove
Dating app based on firebase services and facebook login. MVVM-Kotlin-RxJava-Dagger-Databinding
Stars: ✭ 55 (+66.67%)
Mutual labels:  pagination
PagedLists
Paginated UITableView and UICollectionViews for iOS.
Stars: ✭ 69 (+109.09%)
Mutual labels:  pagination
MMM-mvgmunich
MagicMirror² Module to monitor public transport (U-bahn, tram, bus, S-Bahn) in Munich
Stars: ✭ 21 (-36.36%)
Mutual labels:  magicmirror
flutter easyloading
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web
Stars: ✭ 1,021 (+2993.94%)
Mutual labels:  indicator

Maintainer needed

Hello, it's been 5 years since I've written this! While I'm happy to see it thriving, it's also about time I step away. I haven't had a magic mirror up in years, and to be frank, I'm hoping someone else will be willing to take up maintainership of the project.

That being said, this is a very mature project in that it does not need frequent updates. It does what it needs to do, and there's really no need for it to have new features. I would still recommend using it today, if not because people rarely seem to have problems with it.

It's a very small project (with the intent to keep it this way), so if you're interested, please don't hesitate to reach out.


MMM-page-indicator

Example of MMM-page-indicator

This MagicMirror² Module is designed to indicate what "page" you are looking at. This module is designed to be an indicator only. By itself, it only offers a basic way to change the page, by clicking on the circle indicative of the page you wish to change to.

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-page-indicator.git

Configure the module in your config.js file.

Sending notifications to the module

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.

If you wish to change the number of pages, you need to send a MAX_PAGES_CHANGED notification with your payload as an integer.

this.sendNotification("MAX_PAGES_CHANGED", 4);

This would now show that there are now 4 pages to display.

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 are using MMM-pages with this module, sending an integer as a payload for a PAGE_INCREMENT or PAGE_DECREMENT notification will perform as described in the MMM-pages documentation. If you are not using MMM-pages, the indicator will ignore the payload and just change the displayed page by one.

Using the module

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

modules: [
    {
        module: 'MMM-page-indicator',
        position: 'bottom_bar',
        config: {
            pages: 3,
        }
    }
]

Configuration options

Option Description
pages Number of pages that you have.
Expected Value type: int.
activeBright Should the active circle be bright.
Expected Value type: boolean.
inactiveDimmed Should the inactive circles be dimmed?
Expected Value type: boolean.
inactiveHollow Should the inactive circles be hollow?
Expected Value type: boolean.

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! I'd love for this to be integrated in many modules!

  • I want more config options!

    Please make an issue. Thanks!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].