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

shbatm

Description

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

Basic Functions:

Control the power to the screen (On/Off/Toggle).
Manage the Mirror (Shutdown/Reboot/Restart MM²/Refresh Window).
Module Visibility (Show/Hide/Toggle).
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

SEE LIVE DEMO/MOCKUP HERE: https://codepen.io/shbatm/pen/OggMbr/

First: Touch Mode; Middle: Hidden/Mouseover Mode; Last: Demo

Download:

Version 0.1.3

Added menu options for minimizing, toggle fullscreen mode, opening DevTools, stopping MM via PM2,
Added delayed menu items (e.g. call a function after a certain timeout–like to turn off the mirror after X seconds)
Added external control of the menu/functions from other modules via notifications–includes the ability to call any function the module knows how to handle, even if it’s not in the menu. This lets you use modules like MMM-Buttons or MMM-MPR121 to control the menu.

Version 0.0.9

Initial Public Release for Testing – please let me know via this thread or GitHub Issues if you find any bugs or have any feature requests; always open to feedback!

cowboysdude

I’ll have to test that on my touch screen
Looks great!

shbatm

New version posted with expanded options:

Version 0.1.3

Added menu options for minimizing, toggle fullscreen mode, opening DevTools, stopping MM via PM2,
Added delayed menu items (e.g. call a function after a certain timeout–like to turn off the mirror after X seconds)
Added external control of the menu/functions from other modules via notifications–includes the ability to call any function the module knows how to handle, even if it’s not in the menu. This lets you use modules like MMM-Buttons or MMM-MPR121 to control the menu.

See the full details of everything the menu can do on the GitHub README:

Remember to re-run npm install after updating:

cd ~/MagicMirror/modules/MMM-OnScreenMenu
git pull
npm install

cruunnerr

Thats pretty cool. Now i could install a button for each menu option

I like buttons. so i like this module. lol ^^

Impressive work. Thank you very much.

Mykle1

@shbatm

Don’t know how I missed this one. Excellent work, sir!

M1K3rSz

Really cool module , i’ve installed it, looks great!
But ummzzzh i’ve touched on the button Turn off Display, but after a restart mirror shows no display , maybe a stupid question but how can i turn it on again?

shbatm

@M1K3rSz – Glad you tried it! Sorry you ran into some trouble.

To get the monitor back on:

Via ssh: tvservice --preferred && sudo chvt 6 && sudo chvt 7
- Sets the HDMI output back on to preferred settings, then changes the virtual terminal off of then back on to the desktop channel. This is the same command that most modules that turn on the monitor uses.
Via notification sent from another module, such as MMM-Remote-Control:
- Notification: ‘ONSCREENMENU_PROCESS_ACTION’,
  Payload: { actionName:‘monitorOn’ }

The Monitor Off menu item is best used when you have another module that wakes up the mirror (PIR sensor, button, etc.).

M1K3rSz

@shbatm thanks for the quick reply, ive got it work again

sharmstr

Is there a way to disable hovering all together? I’m using an IR frame and while it does work, the issue is with hovering and closing the menu. Clicking the close (X) icon doesnt work because the cursor is still hovering over the menu, therefore keeping the menu open. You need to click somewhere else on the screen to get it to close. I looked for a way to disable hovering all together since I think that will solve the issue, but couldnt find a way.

dylan

Hi, is there any way to register multiple items in a single button?

Something such as (and I’ve tried this )…

moduleToggle1: {
    title: "TL> Clock etc",              
    icon: "eye-slash", 
    names: { 
             name: "clock", 
            name: "calendar"
    } 
},

Sorry if this is obvious, just a noob here!! Either way - this is an amazing plugin!!!