https://github.com/seesharpsoft/mmm-overlay
Lightweight module for MagicMirror² to add an overlay for showing any kind of module contents
https://github.com/seesharpsoft/mmm-overlay
magicmirror magicmirror-module magicmirror2 magicmirror2-module
Last synced: 5 months ago
JSON representation
Lightweight module for MagicMirror² to add an overlay for showing any kind of module contents
- Host: GitHub
- URL: https://github.com/seesharpsoft/mmm-overlay
- Owner: SeeSharpSoft
- License: mit
- Created: 2025-01-04T19:55:48.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-04T22:11:19.000Z (about 1 year ago)
- Last Synced: 2025-01-19T07:33:02.059Z (about 1 year ago)
- Topics: magicmirror, magicmirror-module, magicmirror2, magicmirror2-module
- Language: JavaScript
- Homepage: https://github.com/SeeSharpSoft/MMM-Overlay
- Size: 17.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MMM-Overlay
This is a lightweight module for [MagicMirror²][mm] to have a modal overlay to show any kind of modules.
## Installation
### Install
In your terminal, go to your [MagicMirror²][mm] Module folder and clone MMM-Overlay:
```bash
cd ~/MagicMirror/modules
git clone https://github.com/SeeSharpSoft/MMM-Overlay.git
```
### Update
```bash
cd ~/MagicMirror/modules/MMM-Overlay
git pull
```
## Using the module
### Update `index.html`
This module requires a new region definition in the `index.html` file of MagicMirror (root).
Add the following line in the `MagicMirror/index.html` within the body tag:
```html
```
like this
```html
...
...
...
```
### Config
To use this module, add it to the modules array in the `config/config.js` file:
```js
{
module: "MMM-Overlay",
config: {
active: false
}
}
```
**Note:** Do not add a position to this module.
If a module should render in the overlay, use `overlay` as position value, like
```js
{
module: "weather",
position: "overlay",
config: {
...
}
}
```
## Configuration options
Option| Possible values | Default |Description
------|-----------------|---------|-----------
`active`| `boolean` | false |Whether the overlay is active/visible
## Sending notifications to the module
By default, the overlay is not active/visible. Its visibility can be controlled by sending notifications.
Notification|Description
------|-----------
`OVERLAY.SHOW`|Shows (activates) the overlay
`OVERLAY.HIDE`|Hides (deactivates) the overlay
`OVERLAY.ACTIVE`|Payload must contain `true`/`false`
## Developer commands
- `npm install` - Install devDependencies like ESLint.
- `npm run lint` - Run linting and formatter checks.
- `npm run lint:fix` - Fix linting and formatter issues.
[mm]: https://github.com/MagicMirrorOrg/MagicMirror