The map interface editor

In the map-based interface, commands are not arranged in rows of icons, as in the Classic interface, but freely placed on a page: you can set a floor plan or photo as the background and position lights, shutters, and thermostats exactly where they are in the house. This page explains the map editor in Ilevia Manager.

Creating a map user

The interface type depends on the user. To create a map user:

1. Open Users > New user (or Users > Edit user for an existing user).

2. In User type, choose Map.

3. Enter the user name and password.

4. In Width and Height, specify the page size in pixels (1024 × 768 by default). Use the screen proportions on which the interface will be displayed.

5. Press Ok, then open the User Interface tab and select the user in User.

How the editor is structured

• Left column: the interface main menu (icons or scenarios). Use + to add an item and choose its icon.

• Top tabs: the pages of the selected item. The green + adds a page; the wheel next to the name opens the page options.

• Central area: the page, with the grid. At the bottom right are the zoom controls: zoom out, current value (click for actual size), zoom in, fit to window.

• Right panel: Components with the components to drag onto the page (and Label, a free text label); Structure with the tree of items, pages, and components.

• Bottom bars: editing commands and page settings (see below).

Choosing the background

Each page can have a background image: a floor plan, a rendering, or a photo of the room. You then place the commands on top of it.

1. Select the menu item and the page.

2. In the bottom bar, next to Background, press Select file.

3. Choose the image on the computer and press Open. Manager copies it into the project, then it is uploaded to the server together with the rest using Project > Upload to server.

The image is fit to the page while keeping its proportions and is centered. Use the × next to Select file to remove it; use Visible to show or hide it; Color is the color that remains visible where the image does not cover the page.

Positioning the components over the image

1. In the Components panel, drag the component onto the page, over the object it controls (the lamp, shutter, thermostat…).

2. Move it by dragging it; resize it using the handles at the corners and sides.

3. For an exact position, enter the coordinates in X, Y (top-left corner) and W, H (width and height) in the bottom bar. The values are in page pixels, that is, the user's Width × Height size.

The same component can appear multiple times, even on different pages: for example, the same light on the floor plan and on the room photo.

Tips for a good result:

• Work at actual size (Ctrl+1) to see how much space a command really occupies over the image.

• Reduce the grid (for example Grid 5 px) or disable it with Active when you need to center a command on a small object; with Shift + arrows you move it one pixel at a time.

• Reduce the size of the command with W and H or with Scale factor in the component options, so it does not cover the object in the photo.

• Lock the position (Ctrl+L or Lock component from the context menu) when the command is in place, so you do not move it by mistake.

• Do not change the page size afterward: positions are in pixels and do not follow the image. If you change the user's Width or Height, the commands stay where they were while the image is resized, and they must be repositioned.

To add text, drag Label onto the page and type the text in its options.

Selecting and moving

• Click selects an item; Ctrl/Shift + click adds it to or removes it from the selection.

• Dragging on an empty area selects all elements within the rectangle (hold Shift to add them).

• Alt + click selects the element underneath the selected one, if they overlap.

• Ctrl+A selects the whole page, Esc cancels the selection, Tab / Shift+Tab move to the next or previous element.

• Arrow keys: move the selection by one grid step; Shift + arrows by one pixel.

The command bar

Other keys: Ctrl+L locks or unlocks the position, Ctrl+K keeps proportions while resizing, Ctrl + mouse wheel or Ctrl + +/− zoom, Ctrl+0 fits the page to the window, Ctrl+1 shows it at actual size, Space + drag (or middle button, or Shift + mouse wheel) moves the view.

Page settings

The second bar applies to the open page:

The context menu

Right-clicking an element with the right mouse button opens a menu with additional functions.

Component options

Double-clicking a component (or Edit) opens Component options. At the top you find the group, name, and UID of the linked component.

In addition to the Classic interface options (Title with Sync name, Hidden, User group, Blink / Hide / Disable icon when, Readonly), the map includes:

For examples of the modes, see Component display modes.

Page options

The wheel next to the page name (or a double-click on the tab) opens Page options.

The displayed items can change from page to page: for example, on the first page of the menu item, set as Default tab, Enabled appears instead of Hidden, and the icon conditions are missing.

Before uploading

• Check the pages at actual size (Ctrl+1) to see how they will appear on the screen.

• Use Structure to verify that each page contains the correct components and that nothing is hidden by mistake.

• Upload the project with Project > Upload to server and test the interface in the app with the mapped user.