# Tile Visualization > Symcon documentation · English · generated on 2026-09-26 > Index: https://www.symcon.de/en/llms.txt Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/ _Requires Symcon >= 7.0_ The Tile Visualization provides a representation of your system that visualizes the entire Object Tree or just a part of it. The visualization can be used via browser or via apps. ### Connecting with the visualization Connecting is one of the few points where apps and browsers differ: [Connecting with Apps](tile-visualization.md) [Connecting with Browser](tile-visualization.md) ### Main View The visualization represents objects from IP-Symcon as tiles and is oriented to the Object Tree. One page of the visualization thus corresponds to the content of one category. How the individual object types are displayed is described in the [object-presentation](object-presentation.md) ![Console configuration](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/c5ca53858e-1790424938/console_configuration.png) ### Tiles Tiles have different display modes. **Minimized view** When tiles are displayed under a category alongside others, they use the minimized view. These are described in the [object-presentation](object-presentation.md) described in more detail. The size of the tile can also have an influence on the content of the tile. ![Left a large Mediaplayer tile with all controls. On the right a small Mediaplayer tile with less controls.](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/4891fd2c92-1790424938/tile_minimized_light.png) **Maximized view** Each tile can be maximized using the two arrows in the upper right corner. Depending on the object type and configuration, a maximized view is available. If there is none, the object itself or all child objects are displayed in a list. Even if there is an extended display, you can switch to the list display at any time by clicking the list icon in the upper right corner. ![On the left an opened Mediaplayer tile which shows a playlist next to all controls. On the right a list of all variables under the Mediaplayer tile.](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/10f409829a-1790424938/tile_maximized_light.png) ### Elements of the visualization The visualization is divided into different areas: ![Start light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/f24edf037d-1790424938/start_light.png) **Appbar** At the top of the screen is the appbar. On the left side, an overview of the categories can be accessed via the navigation menu. On the right side is the search by default and buttons for edit mode, notifications, sharing the visualization and settings. In the [instance configuration](tile-visualization.md) these options can be deactivated or even more presentations like the current date can be added. **Start Area** Below the appbar is the start area. The content can be changed in the [instance configuration](tile-visualization.md) can be customized. A welcome message is displayed here by default. Additionally, a number of automations and favorites can be displayed here. For narrower screens such as smartphones, the display is slightly adjusted to make better use of the available space. **Category Bar** The category bar summarizes all categories that are in the current category. If needed, the bar wraps around to show all all of them. In the [instance configuration](tile-visualization.md), the category bar can be hidden, allowing categories to be displayed with the other objects below them in the object area. **Object Area** Here all objects from IP-Symcon like variables and instances are displayed as tiles. The position and size of these can be changed at any time. Likewise the content of the individual tiles can be adapted. This information is stored in grid configurations for different screen sizes. More details can be found in section [Individualization](tile-visualization.md). **Sidebar** The sidebar can be opened via the icon in the top left corner. All categories are displayed here in a tree view and can be used for navigation. Next to the name of the visualization, a button can be used to switch between the available visualizations of the server. ![Sidebar of the tile visualization with selection for visualizations](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/5c52af6966-1790424938/seitenleiste.png) ### Setup To set up the tile visualization, a tile visualization instance must exist. By default, an instance is created with the installation and is located in the object tree under "Visualization Instances". ![Tile visualization in the object tree](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/03c60a8b87-1790424938/visualization_instance.png) If further tile visualizations are to be set up, this can be added in the object tree via the "+" -> "Instance" -> "Tile Visualization". This creates a new tile visualization, which can be configured completely independently. ### Configuration Basically, the tile visualization runs without any further configuration. However, various settings can be made. Information about the individual settings and configuration options can be found at [instance configuration](tile-visualization.md). The configuration can be opened by double-clicking on the visualization tile in the object tree. ### Multiple visualizations In IP-Symcon Basic one visualization is available. In IP-Symcon Professional Edition, a total of up to five tile visualizations can be created, which can be accessed independently via the visualization start page and secured with a password if required. A visualization can be created as a stand-alone entity - for example, for a visualization object -, represent a special view for the maintenance technician, or simply create a security-specific separation. The same options are available per visualization and can be customized as desired. In the Unlimited Edition, any number of visualizations can be created. ## Individualization Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/individualization/ _Requires Symcon >= 7.0_ ## Edit layout Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/individualization/edit-layout/ _Requires Symcon >= 7.0_ ### Default values The position of the tiles results from the position of the corresponding objects in the Object Tree. The positioning runs from top left to right and from top to bottom. All tiles have an assigned default size. The initial default sizes result from the selected [grid-configuration](tile-visualization.md). This is selected based on the device type of screen size and orientation to choose the best possible initial values for the tiles. These default sizes can be adjusted for each display type of a tile in the settings under Visualization>Grid Settings. The resolution of the grid on which the tiles are arranged can also be determined here. The width of the grid is fixed. Since it is possible to scroll vertically, the height of the grid is not limited. ![Default grid light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/individualisierung/layout-bearbeiten/379b72e600-1790424938/default_grid_light.png) ### Edit Mode On each page of the visualization, the Edit Mode can be activated via the pencil icon in the appbar. The position of the tiles can be changed by Drag & Drop. The size can be changed by dragging the points on the edges. When the edit mode is activated, three new options are offered in the appbar. The current changes can be saved or discarded. In addition, the layout can be reset to the default sizes. The reset only applies to the currently edited category. Once a layout has been saved, it can no longer be changed by position changes in the console. A hint to this effect appears the first time you adjust the layout. If there is empty space between the tiles, it can be removed via the recycle bin. ![Edit light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/individualisierung/layout-bearbeiten/829a0778bb-1790424938/edit_light.png) ## Edit Tiles Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/individualization/edit-tiles/ _Requires Symcon >= 7.0_ The presentation of the individual objects results in principle from the object type and with variables approximately still from the variable profile. For more details, refer to the section [Object-Presentation](object-presentation.md). How instances are represented is determined by the subordinate variables. IP-Symcon automatically selects the appropriate element. To configure the appearance of a tile you have to open it and switch to the edit mode with the pencil. ![Tile config light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/individualisierung/kacheln-bearbeiten/5c8192f5f6-1790424938/tile_config_light.png) ## Designs Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/individualization/designs/ _Requires Symcon >= 7.0_ You can switch between different designs in the settings under Visualization using the cogwheel on the right in the appbar. > **Note:** Background and text color as well as font of the HTMLBox are influenced by the design. ![Designs light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/individualisierung/designs/370277f94a-1790424938/designs_light.png) ### edit designs ![Design editor](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/individualisierung/designs/63e4d3362a-1790424938/design-editor.png) As of version 8.1, the designs can be edited using the pencil in the corner of the tiles. Individual colors can be changed as desired and saved locally via "Save changes". The settings can be downloaded as a file and uploaded to another visualization using the corresponding buttons. Settings can be reset at any time using the arrow symbol. ### Parameter | Color | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Accent Color | The color of interactive elements (sliders, buttons) | | Tile | The color of the tiles | | Background | The color of the background on which the tiles are displayed | | Background Text | The color of text and icons displayed on the background | | Appbar | The color of the bar at the top of the visualization | | Appbar Text | The color of text and icons on the appbar | | Automatic title size | The size of the titles of the individual tiles (Per Tile: Each tile adjusts its title size optimally. Per Category: Within a category, all title sizes are uniform and based on the smallest title. Fixed Size: All titles have a fixed size) | | Fixed title size | Visible with automatic title size “Fixed size” (Big, Medium, Small) | | Accent Text | The color of text and icons on controls in the accent color | | Tile Text | The color of icons and text on standard tiles | | Dark Tile Text | The color of text and icons on tiles that are darker than the default due to dynamic background colors | | Light Tile Text | The color of text and icons on tiles that are lighter than the default due to dynamic background colors | | Error Color | The background color of error banners and faulty tiles | | Error Text | The color of texts and icons on error banners | | Corner Radius | The size of the corners of the tiles (from 0 - pointed to 10 - very flattened) | ## Grid Configuration Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/individualization/grid-configuration/ _Requires Symcon >= 7.0_ Grid configurations are used to display the visualization uniformly on different devices. The configurations store position and size of the tiles as well as their configuration. In the settings the tile resolution and the default sizes per grid configuration can be changed. ![Settings for the grid configuration](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/individualisierung/gitterkonfiguration/6f688c546f-1790424938/grid_tablet_light.png) There are three grid configurations, each with default sizes optimized for one type of device: Computer, Tablet and Mobile. The appropriate grid configuration is selected based on the operating system and screen size. If necessary, the grid configuration can be selected manually. ### Orientation All grid configurations store the settings in combination with the orientation. Thus, configurations for portrait and landscape orientation can be made for each grid configuration. In the app, the appropriate grid configuration for the current orientation is selected. In the browser, only the Landscape orientation is available. ### Grid Settings The default settings for the currently selected grid configuration can be adjusted in the grid settings. In the app, both the Portrait and Landscape settings are available; in the browser, only the Landscape orientation is available. ![Grid settings](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/individualisierung/gitterkonfiguration/9ea38cde0c-1790424938/darstellungsprofile-gittereinstellungen.png) In the dropdown at the top, you can select what the standard size should be configured for. All [Object Presentations](object-presentation.md) and "All Tiles" are available. When selecting "All tiles", the size of the displayed tile can be adjusted in the same way as [Edit layout](tile-visualization.md), the general default size for all presentations can be configured. If an object presentation is selected, an individual default size can be configured for this. The "Use the default size for this tile type" switch deactivates the individual default size and therefore uses the general default size for this object display. This results in the following size for each tile in the visualization: * If this has been set via [Edit layout](tile-visualization.md) an individual size has been defined for the tile, this will be used * If "Use the default size for this tile type" is deactivated, the individual default size is used for this object display * If "Use the default size for this tile type" is activated, the general standard size configured via "All Tiles" is used for this object display. The "Grid Resolution" slider can be used to define the resolution of the grid on which the tiles are placed. A higher resolution therefore enables a more detailed adjustment of width and height. Clicking the "Reset Grid Settings" button resets the default sizes and grid resolution to the default values for the current grid configuration and orientation. ### Synchronization The configuration can be synchronized on all devices via the Symcon server. This way, each end device loads the same grid configuration. The synchronization can also be switched to manual. The customized grid configuration is then synchronized via a button in the settings. If no changes are to be made to the end device, a read-only mode can also be activated. The settings for the different synchronization modes can be found in the [Instance configuration](tile-visualization.md). ### Buttons for synchronization | Button | Description | | -------------------- | ------------------------------------------------------------ | | Upload configuration | Uploads the local configuration to the server | | Delete locally | Deletes the local configuration | | Delete Globally | Deletes the local configuration and the server configuration | ## Instance Configuration Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/instance-configuration/ _Requires Symcon >= 7.0_ #### Start category The Selected category defines from where the visualization is built. #### Show welcome message The greeting is displayed in the start area of the visualization and can be configured via various parameters. | Show greeting | Description | | ------------- | ----------------------------------------------------------------------------------------------------------- | | Automatic | The text is adjusted based on the time of day and can optionally be extended with a name. | | None | The greeting will be hidden. If no favorites or automations are available, the entire start area is hidden. | | Variable | The greeting text is set to the value of a variable. The type is not relevant here. | #### Display mode of the Visualization | Display Mode | Description | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | Tiles (Default) | All objects are displayed as tiles. Where possible, [Summarized_Presentations](object-presentation.md) are shown. | | Tiles (List) | All objects are displayed as tiles. Initially, all instances are displayed as [list](object-presentation.md). | | List (Legacy) | All objects are displayed in a large list without tiles. | Translated with DeepL.com (free version) ![View of the visualization in a list view](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/13e2a5201c-1790424938/legacy_list.png) #### Category Display This setting serves as a basis and can be [overwritten](tile-visualization.md) individually for each category. | Presentation | Description | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Category bar (single line) | All subcategories of the current category are displayed in one line at the top of the screen. If the number of categories exceeds the width of the screen, it can be scrolled horizontally. | | Category bar (multi-line) | All subcategories of the current category are displayed in a line at the top of the screen. If the number of categories exceeds the width of the screen, the categories are displayed in several lines. | | Tiles | Categories are displayed as tiles like all other objects. This means that the size and position can be changed freely. | | Only in sidebar | The categories are only displayed in the [sidebar](tile-visualization.md) | ![On the left, categories are displayed above all tiles. On the right, categories are displayed with all objects as tiles](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/fae5f9a3c1-1790424938/category_display.png) #### Configuration Synchronization How synchronization works is explained in the section [Grid Configuration](tile-visualization.md). | Mode | Description | | --------- | ------------------------------------------------------------------------------------------------------- | | Automatic | Every change to the layout is immediately synchronized with the server and therefore all devices | | Manual | Local changes must be uploaded in the settings so that they can also be synchronized with other devices | | Read only | The configuration can only be changed locally the devices and cannot be uploaded to the server | ### Automations Here a list of [Automations](../concepts/automations.md), which are then available in the start bar. Each automation can be given its own name and icon. ![Left a list of automations. Right: Automations in the visualization on a smartphone.](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/e50078078c-1790424938/automations_config.png) ### Favorites Any objects can be added as favorites. They are displayed as normal tiles in the upper part of the screen. In the version for large screens, these can be accessed via the heart button. ![On the left a list of favorites. On the right favorites are displayed as tiles in the visualization.](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/29a6d3ade9-1790424938/favorites_config.png) ### Appbar If there is not enough space for the configured elements, surplus elements are combined in a menu. ![Left the configuration of the appbar. On the right the resulting appbar.](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/b961f3be5c-1790424938/appbar_config.png) ### Chart display ![Configuration of the charts.](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/b20c1c98cd-1790424938/chart_settings.png) Here you can set the default settings for charts. What exactly which term means can be found under [Display types of charts](https://www.symcon.de/service/documentation/basics/media/charts/#Display types). ### Further configuration | Page | Description | | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | | [Notifications](tile-visualization.md) | Allows push messages to be sent and configured devices to be managed. | | [Security](tile-visualization.md) | Allows you to set a password for access control and a special IP AutoStart function. | | [Virtual Hosts](tile-visualization.md) | Allow visualizations to be distributed across different virtual hosts | ## Notifications Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/instance-configuration/notifications/ The tab provides an overview of the registered devices. It is possible to select whether the respective device receives messages. A test message can also be sent. ![Notifications menu in the instance configuration](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/benachrichtigungen/762679e33d-1790424938/notifications.png) ### registration to push messages service Once a mobile device successfully logs into a visualization for the first time, that device is automatically added to the push message service for that instance. If no push messages are to be sent to this device, then this device must be explicitly deactivated for reception in the list. It should be noted that the registration to the push message service remains unaffected if the password for the visualization is changed. If a device is completely removed from the list, it will be treated as an unknown device the next time it logs in and will be added to the push message service again. ### Notification Control Messages will be sent via Notification Control. More information can be found at [Notification Control](../modules/notification-control.md) . ## Security Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/instance-configuration/security/ Access to a visualization can be secured in various ways. Further security information can be found at [Security](https://www.symcon.de/service/documentation/security/). ![Security menu in the instance configuration of the visualization](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/sicherheit/83330f12f4-1790424938/security.png) ### Access Each of the available access types offers different setting options. ##### With password (secure) A password can be assigned as access protection for each visualization instance. This password is required before accessing the respective visualization via browser and mobile apps. In addition, the special option can be activated so that the password is not required within the local network. This password only applies to access to the system and its components. It is possible to query the available visualizations at any time without a password. ##### Without password (insecure) Without a password, external access is blocked by default. However, if the visualization should be deliberately accessible to the public, this can be deactivated with the option "Allow external access, even if no password is set". ##### With login (secure) > **Note:** Access with login is a paid extension that can be purchased for any existing IP-Symcon license. For a suitable demo version, please contact our [Support](https://www.symcon.de/en/contact-us/#RBAC%20Extension). The extension can be purchased directly in the [Shop](https://www.symcon.de/en/shop/enterprise/ips-enterprise-rbac). Access with login allows only authorized users or users with an authorized role to open the visualization. The required authorization for users and roles can be assigned via the respective buttons. To display a visualization only for authorized users, the corresponding option can be activated. Users and roles can be managed via the [Authorization control](../modules/permission-control.md). #### Autostart for IP address A special function is the auto-start, which opens a visualization directly without a password prompt if the IP address matches one of the IP addresses entered in this list. This function can be used, for example, to open a visualization directly on a touch panel without the normal selection dialog being displayed and without having to answer the password prompt. Please note that this function should only be used within a secure network. > **Note:** The CIDR notation is also supported, so that e.g. 192.168.1.0/24 contains all addresses from 192.168.1.1 to 192.168.1.255. > **Warning:** This function is not available if requests are sent to IP-Symcon via a reverse proxy or via the Connect service, as the origin cannot then be verified safely and reliably. An exception is the CIDR value 0.0.0.0/0, which redirects all requests regardless of their origin and is therefore fundamentally insecure. This is also evaluated for the above exceptions and therefore forwards all requests regardless of their origin. ##### call via URL There are situations (e.g. in connection with NAT) where the autostart via IP does not work. In these cases, a URL can be called directly. ```php // Basic structure for the URL call http://:3777/# // Example as start with the Chromium Browser // VisualizationInstanceID: = 12345 chromium-browser --start-fullscreen 192.168.1.123:3777/#12345 ``` ## Virtual Hosts Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/instance-configuration/virtual-hosts/ > **Note:** Virtual Hosts is a paid extension that can be purchased for any existing Symcon license. For a suitable demo version, please contact our [Support](https://www.symcon.de/en/contact-us/#BACnet%20Extension). The extension can be purchased directly in the [Shop](https://www.symcon.de/en/shop/enterprise/ips-enterprise-vhosts). Virtual hosts can be used to define a list of hosts that can access the visualization. If the visualization is called from a host that is not in the list, the visualization is not displayed. If the list is empty, the visualization is visible for all hosts. ![Vhost konsole](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/virtuelle-hosts/f9ea0f67a2-1790424938/vhost-konsole.png) With the above configuration of two visualizations, the start pages are displayed as follows. ![Vhost visu](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/instanzkonfiguration/virtuelle-hosts/9e87389b76-1790424938/vhost-visu.png) ## Apps Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/apps/ _Requires Symcon >= 7.0_ The apps can be downloaded from the respective appstore (iOS, [Android](https://play.google.com/store/apps/details?id=de.symcon.visualization)). The mobile apps do not differ in functionality from the visualization in the browser. Only the setup process is different. ### Connecting to the Tile Visualization via the Apps There are three ways to connect to a visualization. These are explained below. Also, the app can be opened directly in a demo visualization. #### Automatic search If the mobile device is connected to the same network as the IP-Symcon server, it can be found with the automatic search. The first tile shows the found IP-Symcon Servers. These can be tapped and then the corresponding visualization can be selected. If a password is set for the visualization, it must be entered now. If there is only one IP-Symcon server with a visualization in the network, it will be opened directly. ![Search light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/apps/12a678fa56-1790424938/search_light.png) #### QR code The QR code needed for scanning can be obtained from the visualization widget in the management console or from an already opened visualization. To scan the code, the necessary permissions must be granted in the app. After the code is scanned, the desired visualization can be selected and the password can be entered. ![Qr light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/apps/162373c775-1790424938/qr_light.png) #### Add manually To add an IP-Symcon server manually just enter the IP address and port of the server into the input field. Alternatively you can use the connect address or your own DynDNS address. ![Manual light](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/apps/a2e5a6cbc9-1790424938/manual_light.png) ### Settings All configured servers and visualizations are saved on the device. New servers can be set up via the gear in the appbar under the item 'Server'. If a server is selected, the pencil in the lower right corner can be used to edit the saved visualizations. ![Left an overview of the configured servers and tiles for setting up a new one. In the middle an overview of the set up visualizations. On the right a dialog to select all visualizations](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/apps/748b55e016-1790424938/server_settings_light.png) ## Browser Source: https://www.symcon.de/en/service/documentation/components/tile-visualization/browser/ _Requires Symcon >= 7.0_ ### Connecting to the tile visualization in the browser The tile visualization can be opened via "[ServerIP]:3777/" in a browser. If the WebFront visualization is still set as default, the Tile-Visualization can be accessed via "[ServerIP]:3777/tile/". ### Select visualization ![Kachel visualisierung auswahl](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/browser/7fd71ddb67-1790424938/kachel-visualisierung-auswahl.png) A list of the visualizations available on this server will then appear in the browser. If a visualization is password protected, this is symbolized by a lock icon. With one click the visualization to be opened can be selected. If the visualization is not password protected, it will be opened directly. ![Kachel visualisierung passwort](https://www.symcon.de/media/pages/service/dokumentation/komponenten/kachel-visualisierung/browser/f9e3844f13-1790424938/kachel-visualisierung-passwort.png) Otherwise a text field appears for entering the password. There the password must be entered and finally confirmed with Enter. If the password is correct, the visualization will be opened.