Skip to content

Latest commit

 

History

History
99 lines (73 loc) · 2.23 KB

README.md

File metadata and controls

99 lines (73 loc) · 2.23 KB

MMM-Overlay

This is a lightweight module for MagicMirror² to have a modal overlay to show any kind of modules.

Installation

Install

In your terminal, go to your MagicMirror² Module folder and clone MMM-Overlay:

cd ~/MagicMirror/modules
git clone https://github.com/SeeSharpSoft/MMM-Overlay.git

Update

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:

<div class="region overlay"><div class="container"></div></div>

like this

<html>
    <head>
      ...
    </head>
    <body>
        ...
        <div class="region fullscreen above"><div class="container"></div></div>
        <div class="region overlay"><div class="container"></div></div> <!-- recommended position is at the end of the region divs -->
        <script ... />
          ...
    </body>
</html>

Config

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

    {
        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

    {
        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.