{"id":33251364,"url":"https://github.com/edward-shen/MMM-page-indicator","last_synced_at":"2025-11-21T17:02:06.299Z","repository":{"id":86079941,"uuid":"94369130","full_name":"edward-shen/MMM-page-indicator","owner":"edward-shen","description":"MagicMirror² module to display what page you're on.","archived":false,"fork":false,"pushed_at":"2025-10-17T21:44:10.000Z","size":962,"stargazers_count":51,"open_issues_count":1,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-10-18T23:13:00.974Z","etag":null,"topics":["indicator","magicmirror","pagination"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edward-shen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-06-14T20:10:41.000Z","updated_at":"2025-10-17T21:43:22.000Z","dependencies_parsed_at":"2025-05-17T20:23:24.800Z","dependency_job_id":"7571de83-4e7e-4984-bf8e-ca31ea9dcc6e","html_url":"https://github.com/edward-shen/MMM-page-indicator","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/edward-shen/MMM-page-indicator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edward-shen%2FMMM-page-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edward-shen%2FMMM-page-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edward-shen%2FMMM-page-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edward-shen%2FMMM-page-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edward-shen","download_url":"https://codeload.github.com/edward-shen/MMM-page-indicator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edward-shen%2FMMM-page-indicator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285655011,"owners_count":27209077,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-21T02:00:06.175Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["indicator","magicmirror","pagination"],"created_at":"2025-11-17T00:00:30.828Z","updated_at":"2025-11-21T17:02:06.294Z","avatar_url":"https://github.com/edward-shen.png","language":"JavaScript","funding_links":[],"categories":["Mirror Utilities"],"sub_categories":[],"readme":"# MMM-page-indicator\n\n**MMM-page-indicator** is a [MagicMirror²][mm] module that indicates which page is currently visible. It serves as an indicator and provides an easy way to switch pages by clicking on the circle representing the page you want to navigate to.\n\nThis module works well with [MMM-pages], but it is compatible with any module that sends the `PAGE_CHANGED` notification.\n\n## Screenshot\n\n![Screenshot](examples/screenshot.png)\n\n## Project Status\n\nThis module is in **maintenance mode**. It is a small but mature and does what it is supposed to do.\n\nWe will be keeping this module compatible with the latest version of MagicMirror², but we don't plan to add any new features or make any major changes to the codebase.\n\nIf you have any issues or bugs, please feel free to open an issue.\n\n## Installation\n\nIn your terminal, go to your MagicMirror's module directory and clone this repository:\n\n```bash\ncd ~/MagicMirror/modules\ngit clone https://github.com/edward-shen/MMM-page-indicator\n```\n\n### Update\n\nJust enter the module's directory, pull the update and install the dependencies:\n\n```bash\ncd ~/MagicMirror/modules/MMM-page-indicator\ngit pull\n```\n\n## Configuration\n\nTo use this module, add it to the modules array in the `config/config.js` file:\n\n```js\n    {\n        module: 'MMM-page-indicator',\n        position: 'bottom_bar',\n        config: {\n            activeBright: true,\n        }\n    },\n```\n\n### Configuration options\n\nAll configuration options are optional.\n\n| Option                  | Description                                                                                           |\n| ----------------------- | ----------------------------------------------------------------------------------------------------- |\n| `pages`                 | Number of pages that you have.\u003cbr/\u003e**Value type:** `int`\u003cbr/\u003e**Default value:** `3`                   |\n| `activeBright`          | Should the active circle be bright.\u003cbr/\u003e**Value type:** `boolean`\u003cbr/\u003e**Default value:** `false`      |\n| `inactiveDimmed`        | Should the inactive circles be dimmed?\u003cbr/\u003e**Value type:** `boolean`\u003cbr/\u003e**Default value:** `true`    |\n| `inactiveHollow`        | Should the inactive circles be hollow?\u003cbr/\u003e**Value type:** `boolean`\u003cbr/\u003e**Default value:** `true`    |\n| `showPageNumberOnHover` | Should the page number be shown on hover?\u003cbr/\u003e**Value type:** `boolean`\u003cbr/\u003e**Default value:** `true` |\n\n## Styling\n\nWith the CSS classes `active-page` and `page-{i}` you can easily style the page indicators. The `active-page` class is applied to the currently active page indicator, while the `page-{i}` class is applied to the page indicator of page number `i`. This allows you to change the color, icon and other properties of the indicators.\n\nWithout styling, the indicators will look like this:\n\n![screencast 1](examples/screencast_1_without-styling.gif)\n\nBelow are some styling examples. Just add them to your `custom.css` file (usually located in `~/MagicMirror/css/`) to test them on your system. With CSS you can do a lot of things, so feel free to experiment with the styles.\n\n### Example: Changing the icon of a page indicator\n\nYou can assign a different icon per page indicator. This example sets the page 2 indicator to a orange star.\n\n![screencast 2](examples/screencast_2_orange-star.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see the CSS\u003c/summary\u003e\n\n```css\n.MMM-page-indicator .page-2::before {\n  color: orange;\n  content: \"⭐\";\n}\n```\n\n\u003c/details\u003e\n\n### Example: Animating the active page indicator\n\nThis example extends the one above and adds a pulsing effect to the active page indicator.\n\n![screencast 3](examples/screencast_3_pulsing-active.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see the CSS\u003c/summary\u003e\n\n```css\n.MMM-page-indicator .page-2::before {\n  color: orange;\n  content: \"⭐\";\n}\n\n@keyframes pulse {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.3);\n    opacity: 0.6;\n  }\n}\n\n.MMM-page-indicator .active-page {\n  animation: pulse 1.2s ease-in-out infinite;\n}\n```\n\n\u003c/details\u003e\n\n### Example: Adding description text to the page indicators\n\nThis is an advanced example which adds a description text to the page indicators and changes every indicator to a different icon.\n\n![screencast 4](examples/screencast_4_with-description.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see the CSS\u003c/summary\u003e\n\n```css\n.MMM-page-indicator .indicator::before {\n  font-size: 1.5rem;\n  font-weight: 600;\n  font-variant-emoji: text;\n  line-height: 1.6;\n  letter-spacing: 0.2rem;\n  white-space: pre;\n  padding: 0px 15px;\n}\n\n.MMM-page-indicator .page-0::before {\n  content: \"🏠 \\A Home\";\n}\n\n.MMM-page-indicator .page-1::before {\n  content: \"📅 \\A Calendar\";\n}\n\n.MMM-page-indicator .page-2::before {\n  content: \"⭐ \\A News\";\n}\n\n.MMM-page-indicator .page-3::before {\n  content: \"⛅ \\A Weather\";\n}\n\n@keyframes pulse {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.3);\n    opacity: 0.6;\n  }\n}\n\n.MMM-page-indicator .active-page {\n  color: orange;\n  font-variant-emoji: text;\n  animation: pulse 5s ease-in-out infinite;\n}\n```\n\n\u003c/details\u003e\n\n### Example: Rectangular progress-style indicators\n\nTurn the dots into elongated bars with a sweeping highlight similar to carousel indicators. The active bar turns red and shows a yellow streak sliding across it.\n\n![screencast 5](examples/screencast_5_rectangular-indicators.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see the CSS\u003c/summary\u003e\n\n```css\n.MMM-page-indicator {\n  --indicator-width: 80px;\n  --indicator-height: 4px;\n  --indicator-streak-width: 8px;\n  --indicator-gap: 8px;\n  --indicator-color: #e1e2e4;\n  --indicator-active-color: #e40000;\n  --indicator-streak-color: yellow;\n  --indicator-streak-blur: 2px;\n  --indicator-sweep-duration: 5s;\n}\n\n.MMM-page-indicator .circle-wrapper {\n  margin: 0 var(--indicator-gap);\n}\n\n.MMM-page-indicator .indicator {\n  display: inline-block;\n  width: var(--indicator-width);\n  height: var(--indicator-height);\n  border-radius: 2px;\n  background: var(--indicator-color);\n  position: relative;\n  overflow: hidden;\n  color: transparent;\n}\n\n.MMM-page-indicator .indicator::before {\n  content: \"\";\n}\n\n.MMM-page-indicator .active-page {\n  background: var(--indicator-active-color);\n}\n\n.MMM-page-indicator .active-page::after {\n  content: \"\";\n  position: absolute;\n  top: -150%;\n  bottom: -150%;\n  left: calc(var(--indicator-streak-width) * -2);\n  width: var(--indicator-streak-width);\n  background: var(--indicator-streak-color);\n  filter: blur(var(--indicator-streak-blur));\n  opacity: 0.9;\n  animation: indicator-sweep var(--indicator-sweep-duration) linear infinite;\n  pointer-events: none;\n}\n\n@keyframes indicator-sweep {\n  0% {\n    transform: translateX(0);\n  }\n\n  100% {\n    transform: translateX(\n      calc(var(--indicator-width) + (var(--indicator-streak-width) * 2))\n    );\n  }\n}\n```\n\n\u003c/details\u003e\n\n## Sending notifications to the module\n\nThis 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.**\n\nLet's say that you want to change the indicator to page 3. In your code, you would write:\n\n```js\nthis.sendNotification(\"PAGE_CHANGED\", 2);\n```\n\nThis would cause the module to change show that you are on page 3.\n\nIf you wish to change the number of pages, you need to send a `MAX_PAGES_CHANGED` notification with your payload as an integer.\n\n```js\nthis.sendNotification(\"MAX_PAGES_CHANGED\", 4);\n```\n\nThis would now show that there are now 4 pages to display.\n\nYou 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](https://github.com/edward-shen/MMM-pages#notifications). If you are not using MMM-pages, the indicator will ignore the payload and just change the displayed page by one.\n\n## FAQ\n\n- Help! My module is (above/below) another module in the same region but I want it to be somewhere else!\n\n  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.\n\n- Can I make a pull request?\n\n  Please do! I'd love for this to be integrated in many modules!\n\n- I want more config options!\n\n  Please make an issue. Thanks!\n\n## Developer commands\n\n- `npm install` - Install dependencies for development.\n- `node --run lint` - Run linting checks.\n- `node --run lint:fix` - Fix linting issues.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.\n\n## Changelog\n\nAll notable changes to this project will be documented in the [CHANGELOG](CHANGELOG.md) file.\n\n[mm]: https://github.com/MagicMirrorOrg/MagicMirror\n[MMM-pages]: https://github.com/edward-shen/MMM-pages\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedward-shen%2FMMM-page-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedward-shen%2FMMM-page-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedward-shen%2FMMM-page-indicator/lists"}