Canvas

The canvas represents the design of a room and it is meant to contain all the related tables.

By clicking an empty point into the canvas, it will be selected. Once the canvas is selected, the Inspector will start displaying some parameters to change the map appearance. The parameters are split in 2 different sections: Canvas and Layout.

Inspector

The canvas fieldset owns parameters that can be used to change the map appearance, such as the size of the map and its background.

Size

You can change the Width and Height of the map by editing the apposite fields. The value must be specified in pixel.

In case the used size is higher then the device screen bounds, the map will be wrapped within a scrollable box.

By checking the Proportional Size parameter, the width and height will have always the same value and the map will look like a square. After changing the map width, the height will be updated too with the same value.

Background

You can choose here the Background of the map, which can be a color or an image. By selecting the none option, the background of the map won't be forced and the default background color of the div will be taken. In this case, you may see different colors among the back-end and the front-end sections.

The color option can be selected to choose a color for the background. After selecting this option, a color picker field will be shown to choose a color. The background color of the map will be updated after hiding the color picker (just click outside).

The image option can be selected to display a background picture. After selecting this option, you will be able to pick an image from the apposite media field. It is possible to use the search box within the media field to sort the images by name.

Thanks to the Mode parameter, it is possible to repeat the background image horizontally and/or vertically. The cover option will adjust the size of the image to the bounds of the map.

The media field is able to display only images with a width equals or higher than 64 pixel.

By clicking the Upload Media button, the system will open a popup that might be used to upload one or more images at once. Just drag the images and drop them within the target area. After dropping the images, the popup will show their uploading progress. Once the images have been uploaded, they will be added to the media field and the popup will be automatically closed.

Layout

Instead, the parameters provided by the layout fieldset offer some tools that can be used to improve the alignments between the tables.

Grid

By checking the Display Grid option, the canvas will show a colored grid to help you aligning the tables horizontally and/or vertically. It is also possible to change the grid Size and its Color.

Even if the grid is active, you are still able to place the tables wherever you want.

When Snap to Grid option is checked, the tables will be automatically aligned to the grid. This feature is helpful in order to build grid layouts.

The grid adjustments will be applied while adding new tables into the canvas and while moving/resizing the tables.

Constraints

The Enable Constraints parameter acts as a magnetic force between the tables. In fact, when constraints are enabled, it is pretty easy to align the tables in position and size.

For example, when a table approaches to the horizontal axis of another table, it will be automatically attracted to that line.

The Constraints Accuracy parameter can be used to strengthen or weaker the magnetic force between the tables. The lower the accuracy, the higher the magnetic force (easier alignment, lower drawing freedom).