Skip to content
MagicMirror² utility module that provides a simple on screen menu for control
JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img Initial Public Release Jun 24, 2017
.gitignore Initial commit Jun 21, 2017
CHANGELOG.md Merge branch 'wip' -- Updated [0.1.5] & Reverted [0.1.4] (not working) Oct 12, 2018
LICENSE Initial commit Jun 21, 2017
MMM-OnScreenMenu.css Initial Public Release Jun 24, 2017
MMM-OnScreenMenu.js Merge branch 'wip' -- Updated [0.1.5] & Reverted [0.1.4] (not working) Oct 12, 2018
README.md
mousetrap.min.js Initial Public Release Jun 24, 2017
node_helper.js Added MINIMIZE, FULLSCREEN and DEVTOOLS options (Part of #4) Feb 10, 2018
package.json Merge branch 'wip' -- Updated [0.1.5] & Reverted [0.1.4] (not working) Oct 12, 2018

README.md

MMM-OnScreenMenu - Simple On-Screen Menu for controlling the MagicMirror²

This is a module for the MagicMirror².

The MMM-OnScreenMenu Module provides a small, customizable, material-style floating action button menu for controlling the MagicMirror².

View the live demo/mockup here: https://codepen.io/shbatm/pen/OggMbr/

Basic Functions:

  1. Control the power to the screen (On/Off/Toggle).
  2. Manage the Mirror (Shutdown/Reboot/Restart MM², Refresh/Minimize Window, Toggle Fullscreen mode, Open DevTools).
  3. Module Visibility (Show/Hide/Toggle).
  4. Send Notifications to Other Modules:
    • Switch Profiles in MMM-ProfileSwitcher
    • Perform other module functions from a button in the menu.

The menu is designed to be controllable from multiple devices:

  • Mouse Control
  • Touchscreen Control
  • Keyboard Control
  • Bluetooth Remote via MMM-KeyBindings
  • Module Notifications from other modules

Screenshots


Left: Touch Mode; Middle: Hidden/Mouseover Mode; Right: Demo

Installation

cd ~/MagicMirror/modules
git clone https://github.com/shbatm/MMM-OnScreenMenu
cd MMM-OnScreenMenu/
npm install

Using the module

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

var config = {
    modules: [
        {
            module: 'MMM-OnScreenMenu',
            position: 'bottom_right',
            /* Valid positions: 'top_right', 'top_left', 'bottom_right', 'bottom_left' */
            config: {
                touchMode: true,
                enableKeyboard: true,
                // ... see more options below
            }
        }
    ]
}

Configuration options

Option Description
menuName Optional - Set the name of the menu. Only needs to be changed if using multiple instances of the module.
Default: "MAIN".
touchMode Optional - Enable Touch Mode for the menu.
When enabled, the menu button will always be visible and all tooltips will be shown when the menu is open.
When disabled, the menu will only appear when hovered over, clicked, or opened with a menu key.
Default: true
enableKeyboard Optional - Enable basic keyboard control.
Menu can be controlled with the ContextMenu key (usually next to Right-Alt), Arrow Up/Down, and Enter.
Default: true

To customize keys: manually edit the setupMousetrap function in MMM-OnScreenMenu.js.
enableKeyBindings Optional - Enable integration with MMM-KeyBindings for bluetooth remote and better keyboard control. See KeyBindings Config below.
menuItems See Menu Items below.
pm2ProcessName The pm2 Process Name to control using STOP and RESTART menu items.
Default: "mm"

Menu Items

Default Menu:

To customize, add the whole block to the module config and customize.

menuItems: {
    monitorOff: { title: "Turn Off Monitor", icon: "television", source: "SERVER" },
    refresh: { title: "Refresh", icon: "recycle", source: "LOCAL" },
    restart: { title: "Restart MagicMirror", icon: "refresh", source: "ALL" },
    reboot: { title: "Reboot", icon: "spinner" },
    shutdown: { title: "Shutdown", icon: "power-off" }
},

Menu Item Configurations:

Option Description
title The title to show when hovered over.
icon The Font Awesome icon to use.
source Optional - When to show the menu item:
  •  "ALL" or omitted: on any instance of the MM²
  •  "SERVER": only the main MM² screen
  •  "LOCAL": only when viewing the mirror from a remote browser window.
name Module Menu Items Only - The module name to control
notification Notify Menu Items Only - The notification title to send.
payload Notify Menu Items Only - The notification payload to send.

Available Menu Items:

  • Monitor/Screen Power Control:
    • Turn Screen On - monitorOn
    • Turn Screen Off - monitorOff
    • Toggle Screen Power - monitorToggle
  • System Control:
    • Refresh the browser page - refresh
    • Minimize the browser window (if using electron) - minimize
    • Toggle Fullscreen Mode (if using electron) - toggleFullscreen
    • Open DevTools window (if using electron) - openDevTools
    • Reload the MM² script (if using pm2) - restart
    • Stop the MM² script (if using pm2) - stop
    • Reboot the server - reboot
    • Shutdown the server - shutdown
    • Default commands are for running MM² using PM2 & Electron on Debian Linux (Raspian); e.g. the default installation. You can customize reboot, shutdown, restart commands as needed in node_helper.js. and set the PM2 process name using the pm2ProcessName config option (Default: "mm")
  • Module Control:
    • Hide a module - moduleHideX
    • Show a module - moduleShowX
    • Toggle module visibility - moduleToggleX
    • X is a unique number for each item, e.g. moduleHide1 for the first hide module item
    • Add module's name to the menu item definition (see Menu Item Configurations above)
    • If you have multiple instances of a module, add an instance name to both that module's config and the menu item (see third example below)
    • Examples:
      moduleHide1: { title: "Hide Clock", icon: "minus-square", name: "clock" },
      moduleShow1: { title: "Show Clock", icon: "plus-square", name: "clock" },
      moduleToggle1: { title: "Toggle iFrame", icon: "info-circle", name: "MMM-iFrame", instance: "Frame1"}
         # For example above, in MMM-iFrame-s config section, you also need to add `instance: "Frame1"`
  • Notifications:
    • Send a Module Notification to another module - notifyX
    • X is a unique number for each item, e.g. notify1 for the first notification item
    • Example - Change profile on MMM-ProfileSwitcher:
      notify1: {  title: "Switch to Profile", 
                  icon: "eye", 
                  notification: "CURRENT_PROFILE", 
                  payload: "DESIRED_PROFILE_NAME_HERE" },
  • Change Menu Visibitliy/Mode:
    • Toggle Touch Mode: toggleTouchMode
    • Move the Menu: changeMenuPosition_<NEW_POSITION>
    • Examples:
      toggleTouchMode: { title: "Toggle Touch Mode", icon: "eye-slash" }
      changeMenuPosition_top_right: { title: "Move Menu to Top Right", icon: "arrows" }
  • Delayed Actions:
    • Perform any of the above actions after a delay - delayedX
    • X is a unique number for each item, e.g. delayedX for the first delayed item
    • Example - Refresh the browser page after 5 seconds
      delayed1: {  title: "Delayed Refresh",
                   icon: "recycle",
                   action: "refresh", // Name of action to perform
                   delay: 5000, // Delay in ms
                } 
    • Repeatedly calling the menu item restarts the timer.
    • To add a menu item that cancels a previously started delay, create a second unique menu item (e.g. delayed2) and add actionName: 'itemToCancel', abort: true to it's config.
    • Example - Cancel the delayed refresh example above:
      delayed2: {  title: "Cancel Refresh",
                   icon: "cancel",
                   actionName: "delayed1",
                   abort: true,
                } 

Calling actions from another module

Any valid menu item can be called from another module by sending a notification similar to the one below. Note: The item passed does NOT actually need to be in the menu's config; it just needs to be valid in the context listed above.

// Basic Action Item Notification
this.sendNotification('ONSCREENMENU_PROCESS_ACTION', 'menuItemName');
// Advanced Action Item Notification (e.g. module show/hide control, etc.), send payload as an object with the relevent details required.
//     Example 1: Toggle Clock Module via Notification
this.sendNotification('ONSCREENMENU_PROCESS_ACTION', { actionName:'moduleToggle1', name: 'clock'})
//     Example 2: Turn monitor off after a 60-second delay
this.sendNotification('ONSCREENMENU_PROCESS_ACTION', { actionName:'delayed1', action:'monitorOff', delay: 60000})

Sample Configuration (Default)

You can copy and paste the following into your config file modules section for a starting point.

{
    module: 'MMM-OnScreenMenu',
    position: 'bottom_right',
    /* Valid positions: 'top_right', 'top_left', 'bottom_right', 'bottom_left' */
    config: {
        touchMode: true,
        menuItems: {
            monitorOff: { title: "Turn Off Monitor", icon: "television", source: "SERVER" },
            restart: { title: "Restart MagicMirror", icon: "recycle", source: "ALL" },
            refresh: { title: "Refresh MagicMirror", icon: "refresh", source: "LOCAL" },
            reboot: { title: "Reboot", icon: "spinner", source: "ALL" },
            shutdown: { title: "Shutdown", icon: "power-off", source: "ALL" },
        },
        enableKeyboard: true,
    }
},

Controlling the Menu from another module

The menu can be controlled via notifications from another module, for instance buttons using the MMM-MPR121 module.

To toggle the menu open/closed:

this.sendNotification('ONSCREENMENU_TOGGLE_MENU', '') // Single Menu
this.sendNotification('ONSCREENMENU_TOGGLE_MENU', { menuName: "MAIN" }) // Multiple Menus

To select an item by it's position in the list, zero-based (e.g. 3rd down = 2):

this.sendNotification('ONSCREENMENU_BY_NUMBER', 1) // 2nd item, single menu
this.sendNotification('ONSCREENMENU_BY_NUMBER', 
    { menuName:"MAIN",
      itemNumber: 1
    }) // 2nd item, multiple menus

To navigate up/down/select using notifications, set enableKeyBindings: true in your config (even if you are not using the KeyBindings module) and use the following notification format:

Notification: 'KEYPRESS'
Payload: *see section below for keynames (e.g. ArrowUp for up)*

KeyBindings Config

The default configuration for MMM-KeyBindings is below. This can be customized by adding to the normal module config.

        // MMM-KeyBindings Settings
        enableKeyBindings: false,
        keyBindingsMode: "OSM",
        keyBindings: {
            Up: "ArrowUp",
            Down: "ArrowDown",
            Select: "Enter",
            Close: "Return",
            Menu: "Menu"
        },
        kbMultiInstance: true,
        keyBindingsTakeFocus: "Menu"

Development Path

This module is an ever-continuing work in progress, if you would like to request a feature or report a bug, please see the Issues.

You can’t perform that action at this time.