Skip to content

Custom Menus

Jump to bottom
Ezequiel Holzweissig edited this page Dec 27, 2020 · 1 revision

Custom Menus

With Remote Control, you have some handful option to choose and use. But that doesn't stop in what we add, you can add your own menu and create every button you need. In this section, we'll explain how you can create it, and what options you can use.

Create your menu

Inside your Remote Control you should have a file named custom_menu.example.json, that file should be rename to anything you like, always finishing with .json. Move that file to the config folder of your MagicMirror and place the name on the config of Remote Control.

config: {
    customMenu: "custom_menu.json",
},

Configure your menu

id

The id it's an important part of your menu, every id have to be different from each other or you can run into issues. Also, if you're using "type": "menu", the id would determine in which menu are you.

type

Since 2.3.0, sliders and inputs are available to add to your menu. Giving the next possibilities:

  • menu
  • button
  • slider
  • input

icon

You can change the icon showing in your button or menu. To see the available option, you can use FontAwesome. This is optional, you can opt to not give an icon to a button.

text

This is gonna define what your button says. In case you're using an input, this will be the placeholder before you write something on it. You can also translate the text according to the language of your MagicMirror with the %%TRANSLATE:{ID}%%, but remember to change it inside the translations folder of Remote Control as well. This is optional, you can opt to not give a text to your button.

items

Along with the "type": "menu", you should define the items that's gonna contain your new menu.

{
   "id": "custom",
   "type": "menu",
   "icon": "id-card-o",
   "text": "%%TRANSLATE:CUSTOM_MENU%%",
   "items": [{
         "id": "custom-item-1",
         "type": "item",
         "icon": "dot-circle-o",
         "text": "Menu Item 1",
         "action": "NOTIFICATION",
         "content": {
            "notification": "NOTIFICATION_TEXT_1",
            "payload": "This notification requires a string payload"
         }
   }]
}

action

This determines what your button should do when it's activated. There're plenty of things you can do, not only with our module but with every other one. To see all available options, you should use /api/module. To activate the actions of Remote Control, just add the action you're gonna use. To every other module, you should use notifications.

content

If you're using action, this is gonna let you change every aspect of your button. To send a custom notification, you can add the "notification" item inside content. The same way you can define a custom payload. Keep in mind that if you're using slider or input as a type, the value tag would be reserved to the actual value.

Clone this wiki locally