# WebFront Visualisierung > Symcon Dokumentation · Deutsch · erzeugt am 2026-09-26 > Index: https://www.symcon.de/de/llms.txt Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/ > **Achtung:** Das WebFront wird weiterhin unterstützt. Allerdings gibt es seit der 7.0 die [Kachel Visualisierung](tile-visualization.md) als modernere Visualisierung. Auch wenn das WebFront immer noch nutzbar ist und bezüglich Fehlern und Kompatibilität weiter gepflegt wird, erhält es keine neuen Features mehr. Es wird empfohlen, die neue Kachel Visualisierung zu verwenden. > **Hinweis:** Das WebFront muss nicht konfiguriert werden und ist ohne jegliche erweiterte Einstellungen vollständig benutzbar. Alle hier vorgestellten Möglichkeiten sind optional und können von erfahrenen Benutzern verwendet werden, um die Visualisierung noch besser an Ihre Bedürfnisse anzupassen. Das WebFront bietet eine einfache und ansprechende Möglichkeit, Geräte anzuzeigen und zu schalten, Bilder anzuzeigen und Skripte auszuführen. ### WebFront Versionen | Version | Beschreibung | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | WebFront | Die HTML5 Version vom WebFront lässt sich mit den aktuellen Versionen der gängigsten Webbrowser aufrufen und bedienen. Dazu gehören:
* Google Chrome (64+) [offiziell empfohlen]
* Mozilla Firefox (58+)
* Apple Safari (OS X 11.1+)
* Opera (50+)
* Microsoft Edge (42+)
* Microsoft Internet Explorer (11+)
* Apple iOS (10.0+)
* Google Android (6.0+) | | Mobile (iOS) | IP-Symcon Mobile ist eine native App, die direkt über den AppStore heruntergeladen werden kann. Es werden alle iOS-Geräte unterstützt, die iOS 10.x oder neuer installiert haben.
IP-Symcon Mobile für iPhone, iPod touch und iPad im iTunes App Store | | Mobile (Android) | Das Android Gegenstück zu IP-Symcon Mobile ist auch eine native App, die direkt über Google Play heruntergeladen werden kann.
IP-Symcon Mobile für Android Geräte bei Google Play | ### Einrichtung Um ein WebFront einzurichten muss ein WebFront Konfigurator vorhanden sein. Standardmässig wird mit der Installation ein WebFront erstellt und befindet sich im Objektbaum unter "Visualisierung Instanzen". ![WebFront Visualisierung](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/61423e52ee-1790424938/webfront-konfigurator.png) Sollen weitere WebFront eingerichtet werden, so kann dieses im Objektbaum über das "+" -> "Instanz" -> "WebFront Visualization" hinzugefügt werden. Dies erstellt eine neue WebFront Visualisierung, welche komplett individuell konfiguriert werden kann. ### Konfiguration Grundsätzlich läuft das WebFront ohne weitere Konfiguration. Es können allerdings diverse Einstellungen gemacht werden. Die entsprechende Dokumentation kann den Unterseiten von diesem Dokument entnommen werden. Die generelle, versionsübergreifende Konfiguration wird weiter unten beschrieben. Eine Auswahl von Icons für Objekte im WebFront ist unter WebFront [Icons](icons.md) zu finden. ### Konfiguration öffnen Die Konfiguration kann durch einen Doppelklick im Objektbaum auf die WebFront Visualisierung geöffnet werden. ![WebFront Visualisierung](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/61423e52ee-1790424938/webfront-konfigurator.png) Informationen über die einzelnen Einstellungen und Konfigurationsmöglichkeiten kann unter [WebFront](webfront-visualization.md) gefunden werden. ### Visualisierungen In IP-Symcon Basic ist eine Visualisierung verfügbar, die jedoch nur sehr eingeschränkt verändert werden kann. In der IP-Symcon Professional Edition können insgesamt bis zu fünf WebFront Visualisierungen erstellt werden, die eigenständig über die WebFront-Startseite aufgerufen und bei Bedarf mit einem Passwort abgesichert werden können. Eine Visualisierung kann als eigenständige Einheit - für z.b. ein Visualisierungsobjekt - erstellt werden, eine spezielle Ansicht für den Wartungstechniker darstellen oder einfach nur eine sicherheitsspezifische Trennung erzeugen. Pro Visualisierung sind dieselben Optionen verfügbar und können beliebig angepasst werden. In der Unlimited Edition sind beliebig viele Visualisierungen erstellbar. ## Web Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/ _Benötigt Symcon >= 3.0_ > **Achtung:** Die Möglichkeit zur Konfiguration des WebFronts benötigt eine __IP-Symcon Professional__ oder __IP-Symcon Unlimited__ Edition > **Achtung:** Im WebFront können nur Objekte angezeigt und hinzugefügt werden, welche zuvor in der [Verwaltungskonsole](management-console.md) im [Objektbaum](management-console.md) erstellt wurden. Der WebFront Editor hat keine Möglichkeit neue Kategorien oder Objekte zu erstellen. Er dient nur dazu vorhandene Objekte nach eigenen Vorstellungen zu arrangieren. > **Hinweis:** Skripte, die durch das WebFront ausgeführt werden, beinhalten diese [Systemvariablen](../concepts/automations.md) > **Hinweis:** Es wird empfohlen im [Objektbaum](management-console.md) die Struktur des WebFronts mit Links aufzubauen. Diese können dann via [Kategorie](../concepts.md) im [WebFront-Editor](webfront-visualization.md) ausgewählt werden. ### Bedienung Am oberen Bildschirmrand können im WebFront eingerichtete Elemente ausgewählt werden. Dies sind standardmäßig IP-Symcon zur Gebäudesteuerung und Wetter zur Anzeige der aktuellen Wetterdaten und Voraussagen des Deutschen Wetterdienstes. Ein Klick auf einen Modulnamen zeigt dieses im Mittelteil an. Der aktuelle Modulname wird heller hinterlegt. Im Mittelteil werden die Hauptelemente eines Moduls angezeigt. Die weiteren Leisten am oberen Bildschirmrand bieten Steuerungsmöglichkeiten zur aktuell ausgewählten Kategorie. ### WebFront-Editor [Video](https://www.youtube.com/embed/523XW-o7d1k?rel=0&cc_load_policy=1) ### Konfigurieren Die Konfiguration ist in mehrere Teile aufgeteilt. In jedem Reiter können verschiedene Einstellungen angepasst werden. In diesem Artikel werden primär die Einstellungsmöglichkeiten für das normale WebFront vorgestellt. In den einzelnen Reitern können folgende Einstellungen angepasst werden: | Reiter | Beschreibung | | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | | [Editor](webfront-visualization.md)
(ab 5.0) | Startet den WebFront Editor | | [Darstellung](webfront-visualization.md) | Konfiguration von einem Titel und Icon im Login-Birdschirm | | [Sicherheit](webfront-visualization.md) | Ermöglich die Einstellung eines Passwortes zur Zugriffskontrolle und einer speziellen IP-AutoStart Funktion | | [Benachrichtigungen](webfront-visualization.md) | Erlaubt das Versenden von Test-Nachrichten an konfigurierte Geräte und das Löschen. | | [Struktur](webfront-visualization.md)
(bis 4.4) | Konfiguration der einzelnen Elemente aus denen ein WebFront besteht | ### Weiteres WebFront einrichten > **Achtung:** Um mehr als ein WebFront zu nutzen wird eine __IP-Symcon Professional__ oder __IP-Symcon Unlimited__ Edition benötigt. Im Widget-Bereich "Visualisierung" in der Verwaltungskonsole kann die jeweilige WebFront Visualisierung geöffnet werden. Um eine neue Visualisierung und somit ein neues WebFront zu erstellen, kann man im Objektbaum auf "+" -> "Instanz" klicken. Der Name der Visualisierungs-Instanz ist auch der Anzeigename des WebFronts im Browser. ## Benachrichtigungen Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/benachrichtigungen/ Der Reiter bietet eine Übersicht über die registrierten Geräte. Es kann ausgewählt werden, ob das jeweilige Gerät Meldungen empfängt. Auch kann eine Testnachricht verschickt werden. ![Benachrichtigungenmenü im WebFront-Konfigurator](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/benachrichtigungen/3eabca2d3e-1790424938/webfront-konfigurator-benachrichtigungen.png) ### Registrierung zum Push-Nachrichten Dienst Sobald ein Mobilgerät sich in einem WebFront das erste Mal erfolgreich einloggt, wird dieses Gerät automatisch zum Push-Nachrichten Dienst für diesen Konfigurator hinzugefügt. Wenn keine Push-Nachrichten an dieses Gerät versendet werden sollen, so muss dieses Gerät explizit für den Empfang im Konfigurator deaktiviert werden. Zu beachten ist, dass die Registrierung zum Push-Nachrichten Dienst unberührt bleibt, falls das Kennwort für den Konfigurator geändert wird oder der Mobilzugriff komplett deaktiviert wird. Wird ein Gerät komplett aus der Liste entfernt, so wird es beim nächsten Login wie ein unbekanntes Gerät behandelt und erneut zum Push-Nachrichten Dienst hinzugefügt. ### Notification Control Die Nachrichten werden via Notification Control versendet. Weitere Informationen befinden sich unter [Notification Control](../modules/notification-control.md) . ## Darstellung Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/darstellung/ ### Darstellung Die Darstellung kümmert sich um das Aussehen und mögliche Standardeinstellungen des WebFronts. ![Darstellungsmenü im WebFront-Konfigurator](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/darstellung/4ce6ba9bdf-1790424938/webfront-konfigurator-darstellung.png) ### Name, Icon, Sichtbarkeit Über "Konfigurieren" können verschiedene Standardeinstellung ausgewählt werden. ### Skin Ab IP-Symcon 3.0 ist es möglich das WebFront über Skins zu gestalten. Weitere Informationen sind im [Skin Control](../modules/skin-control.md). ### Verschachtelung Diese Option ist seit IP-Symcon 5.5 standardmäßig aktiviert und ermöglicht die Darstellung von Verschachtelung (z.B. Instanzen unterhalb von Instanzen). Die mobilen Apps in der Version 5.5 und neuer unterstützen diese Option ebenfalls. Diese Option kann nach dem Aktivieren nicht mehr deaktiviert werden, da diese langfristig entfernt werden soll. ### Standardeinstellung für Popup-Graphen Hier kann eine Standardauswahl für Graphen im Popupfenster festgelegt werden. Was welcher Begriff genau bedeutet kann unter [Darstellungsarten von Charts](../concepts.md) nachgelesen werden. ## Editor Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/ Über den Button "WebFront Editor öffnen" unter "Editor" im WebFront Konfigurator kann der Editor gestartet werden. ![Editor starten](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/ba5b6ccde0-1790424938/webfront-konfigurator-editor.png) > **Achtung:** Um den WebFront Editor vollständig nutzen zu können muss mindestens eine Professional Lizenz vorhanden sein. Ansonsten ist der Umfang extrem reduziert. ### Verwendung des Editors ![WebFront Editor](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/95eb25e143-1790424938/webfront-editor.png) Im Editor wird das [WebFront](webfront-visualization.md) wie gewohnt angezeigt und ist um Konfigurationselemente erweitert. So kann durch einen Klick auf das Plus ein weiteres [Element](webfront-visualization.md) hinzugefügt werden. Hinzugefügte Elemente können über einen Klick auf den Stift konfiguriert werden. Es öffnet sich ein Dialog, in dem die Parameter des Elements eingestellt werden können. Die einzelnen Parameter der verschiedenen Elemente sind auf den einzelnen Dokumentationsseiten erklärt. Nach einer Anpassung der Parameter werden diese durch einen Klick auf den Haken im Dialog übernommen. Alternativ kann ein Element im Konfigurationsdialog auch durch einen Klick auf den Mülleimer gelöscht werden. Abschließend müssen die Änderungen durch einen Klick auf den grünen Haken oben links bestätigt werden, ansonsten werden sie nicht gespeichert. ### Übersicht der verfügbaren Elemente | Element | Beschreibung | | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Kategorie](../concepts.md) | Über dieses Element lässt sich eine Kategorie und all seine Unterobjekte im WebFront anzeigen. Die ID der anzuzeigenden Kategorie kann über den Startkategorie Parameter verändert werden. | | [Graph](webfront-visualization.md) | Über dieses Element werden die im Archiv Modul eingestellten Graphen direkt angezeigt. Normalerweise können Graphen über das Icon links vom Wert der Variable aufgerufen werden. Falls Graphen direkt in z.B. [Menüleisten](webfront-visualization.md) oder [Seitenteiler](webfront-visualization.md) eingebettet werden sollen, kann dies über das Graphen Element geschehen. | | [Externe Seite](webfront-visualization.md) | Dieses Element fügt eine externe Seite in das WebFront über ein IFrame ein. Die Parameter-URL und Intervall sind verfügbar. | | [Inhaltswechsler](webfront-visualization.md) | Über den Inhaltswechsler können mehrere [Bilder](../concepts.md), [Streams](../concepts.md), [HTML-Boxen](object-presentation.md), [Text-Boxen](object-presentation.md) oder Mail-Instanzen([IMAP](../modules/imap.md), [POP3](../modules/pop3.md)) innerhalb einer Seite umgeschaltet werden. | | [Seitenteiler](webfront-visualization.md) | Über Seitenteiler kann die WebFront-Ansicht in zwei Teile aufgespaltet werden und in jeden Teil ein beliebig anderes Element eingefügt werden. Wenn Seitenteiler in Seitenteiler eingefügt werden, kann somit z.B. ein QuadView nachgebildet werden. | | [Menüleiste](webfront-visualization.md) | Über Menüleisten können im oberen Bereich benutzerdefinierte Menüleisten erstellt werden, die auf weitere Elemente verweisen. | | [Wetter (DWD)](webfront-visualization.md) | Zeigt das Wetter des DWD mit der Möglichkeit an, einzelne Bereiche Deutschands genauer auszuwählen und zwischen einem normalen Bild oder einem Radarbild zu wechseln. | | [Uhrzeit Widget](webfront-visualization.md) | Zeigt die aktuelle Uhrzeit an. | | [Info Widget](webfront-visualization.md) | Kann entweder dazu verwendet werden ein statisches Icon anzuzeigen oder verknüpft mit einer Variable deren Inhalt/Icon, welcher/welches je nach Variablenwert unterschiedlich sein kann. | | [Logout Widget](webfront-visualization.md) | Dieses Element fügt ein Widget hinzu, über das man zum Auswahlbildschirm der WebFronts zurückgeleitet wird. | | [Idle Widget](webfront-visualization.md) | Dieses Element fügt ein unsichtbares Widget hinzu, welches nach einer Zeit Untätigkeit auf eine bestimmte Seite wechselt. | ## Externe Seite Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/externe-seite/ Dieses Element ermöglicht die Anzeige externer Webseiten. Es sind sowohl lokal gespeicherte Seiten, als auch externe Internetseiten darstellbar. Auch ist es möglich, die Seite automatisch in einem bestimmten Intervall aktualisieren zu lassen. ![externe Seite](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/externe-seite/c8ed6955b8-1790424938/webfront-externeseite.png) ### Externe Internetseiten Externe Internetseiten sind im normalen URL-Format anzugeben, also z.B. [https://www.symcon.de](https://www.symcon.de). ### Eigenschaften * __Titel:__ Titel für das Element in der Menüleisten-Navigation. Standardmäßig wird “Externe Seite” angezeigt. * __Icon:__ Icon, das in der Menüleisten-Navigation neben dem Titel angezeigt wird. Standardmäßig wird kein Icon angezeigt. * __URL:__ Hier ist die Adresse der Seite anzugeben, deren Inhalt angezeigt werden soll. * __Intervall:__ Optional kann hier das automatische Aktualisierungsintervall für die Seite in Sekunden angegeben werden. * __Sicherheit:__ Optional kann das Sandboxing deaktiviert werden. Dies kann in einigen Fällen dazu führen, dass die externe Seite euer WebFront deaktiviert und sich selbst in voller Größe darstellt. ## Graph Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/graph/ Der Vollbild-Graph wird direkt im WebFront eingerichtet. Er ermöglicht die Anzeige einer einzelnen geloggten [Variable](../concepts.md) oder eines Medienobjekts vom Typ [Chart](../concepts.md) . ![Graph](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/graph/b81df44127-1790424938/webfront-graph.png) ### Eigenschaften * __Titel:__ Titel für das Element in der TabPane-Navigation. Wird kein eigener Wert angegeben, so wird automatisch der Objektname der gewählten Variablen angezeigt. * __Icon:__ Icon, das in der TabPane-Navigation neben dem Titel angezeigt wird. Standardmäßig wird kein Icon angezeigt. * __Zeitspanne:__ Der Anzeigebereich des Graphen kann hier auf Stunde, Tag, Woche, Monat oder Jahr gesetzt werden. * __Variable:__ Hier ist eine geloggte Variable oder Chart-Mediendatei für die Anzeige auszuwählen. * __Zeige Extremwerte:__ Gibt an, ob der Graph mit oder ohne Extremwertkurven, falls verfügbar, angezeigt wird. * __Dynamische Skalierung:__ Wird die dynamische Skalierung aktiviert, so wird der Graph dynamisch entsprechend des minimalen und des maximalen Werts im Zeitbereich skaliert. Andernfalls erfolgt die Skalierung entsprechend des im Variablenprofil der gewählten Variable angegebenen Minimums und Maximums. * __Hohe Dichte:__ Erhöht die Datenpunktdichte, wodurch der Graph genauer wird. Funktioniert nur mit Line-Charts oder geloggten Variablen auf "Standard"-Logging. * __Zeige Legende:__ Schaltet die Legende Ein/Aus. * __Intervall (Sek.):__ Der dargestellte Graph wird automatisch entsprechend dem hier eingestellten Intervall in Sekunden aktualisiert. Standardmäßig geschieht dies alle 300 Sekunden. ## Idle Widget Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/idle-widget/ Das Idle-Widget bietet die Möglichkeit im Widget-Bereich einer Menüleiste einen unsichtbaren Timer zu erstellen. Dieser ist nur im Editormodus sichtbar und wechselt nach einer einstellbaren Zeit Untätigkeit die angezeigte Seite. > **Achtung:** [Seitenteiler](webfront-visualization.md) und die [Menüleisten](webfront-visualization.md) selbst können nicht direkt angesprungen werden. Dies sind rein optische Elemente. Elemente innerhalb des [Seitenteiler](webfront-visualization.md) oder z.B. hinzugefügte Kategorien in der [Menüleisten](webfront-visualization.md) können ausgewählt werden. ### Eigenschaften ![Konfiguration des Widgets](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/idle-widget/3eced60072-1790424938/webfront-idlewidget.png) * __Timeout (sec):__ Nach welcher Zeit Untätigkeit auf die eingestellte Seite gewechselt werden soll. * __Page:__ Die Seite auf welche gewechselt werden soll. ## Info Widget Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/info-widget/ Das Info-Widget bietet die Möglichkeit im Widget-Bereich einer Menüleiste, ein festes Icon, ein dynamisches Icon zu einer Variable oder einen textuellen Variablenwert anzuzeigen. Zusätzlich kann ein Skipt ausgewählt werden, das beim Anklicken des Widgets ausgeführt wird. ### Anzeigevarianten | Icon-Darstellung | Text-Darstellung | | ------------------------------------ | ------------------------------------ | | ![Webfront temperaturicon](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/info-widget/7c147dbd3e-1790424938/webfront-temperaturicon.png) | ![Webfront temperaturtext](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/info-widget/e62bc27308-1790424938/webfront-temperaturtext.png) | * Ein festes Icon kann mit der Eigenschaft Icon zur Anzeige ausgewählt werden. Hierbei ist zu beachten, dass weder Typ noch Variable angegeben werden dürfen. * Ein dynamisches Icon wird angezeigt, wenn eine Variable angegeben und Typ auf Icon gesetzt ist. Welches Icon angezeigt wird und welche Icons standardmäßig verfügbar sind, ist unter [Icons](icons.md) beschrieben. Soll das Icon “Transparent” angezeigt werden, so wird das Widget ausgeblendet. Auf diese Weise lassen sich Informations-Icons dynamisch einblenden, z.B. wenn ein Gerät einen Batteriewechsel benötigt. * Der aktuelle Variablenwert wird textuell anhand des der Variable zugeordneten [Variablenprofils](../concepts.md) formatiert, wenn eine Variable angegeben ist und der Typ auf Text eingestellt ist. ### Eigenschaften * __Icon:__ Hier kann ein festes Icon zur Darstellung ausgewählt werden. * __Typ:__ Der Typ bestimmt, ob eine Variable als Text oder als Icon dargestellt werden soll. * __Variable:__ Hier kann eine Variable ausgewählt werden, die entsprechend des gewählten Typs dargestellt wird. * __Bei Klick:__ Ein Skript, das bei Klick auf das Widget ausgeführt wird, lässt sich hier einstellen. ## Inhaltswechsler Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/inhaltswechsler/ Der Inhaltswechsler dient zur Anzeige folgender Objekte: * Email-Instanzen ([IMAP](../modules/imap.md), [POP3](../modules/pop3.md)) * String-Variablen mit Variablenprofil [~TextBox](object-presentation.md) oder [~HTMLBox](object-presentation.md) * Medien-Objekte vom Typ [Bild](../concepts.md) oder [Stream](../concepts.md) ### Darstellung ![inhalts wechsler](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/inhaltswechsler/eb11bb8564-1790424938/webfront-inhaltswechsler.png) Wird ein darstellbares Objekt direkt im Konfigurator als Quellobjekt zur Anzeige ausgewählt, so wird auch nur dieses Objekt angezeigt. Andernfalls werden alle darstellbaren direkten Unterobjekte des ausgewählten Quellobjekts zur Anzeige ausgewählt. Wird dabei mehr als ein darstellbares Unterobjekt gefunden, so wird eine Auswahlleiste zum Umschalten zwischen den Unterobjekten eingeblendet. Bei editierbaren String-Variablen vom Typ ~TextBox erscheint dabei auch ein Button, um das On-Screen-Keyboard zum Bearbeiten des Textes aufzurufen. Das Umschalten zwischen den darzustellenden Objekten kann auch automatisch erfolgen, wenn ein Änderungsintervall angegeben wird. ### Eigenschaften * __Titel:__ Titel für das Element in der Menüleisten-Navigation. Wird kein eigener Wert angegeben, so wird automatisch der Objektname des gewählten Quellobjekts angezeigt. * __Icon:__ Icon, das in der Menüleisten-Navigation neben dem Titel angezeigt wird. Standardmäßig wird kein Icon angezeigt. * __Quellobjekt:__ Das Objekt, das direkt angezeigt werden soll oder dessen Unterobjekte angezeigt werden sollen. * __Änderungsintervall:__ Intervall in Sekunden, in dem automatisch zwischen den darzustellenden Objekten gewechselt wird. Der Standardwert von "0" deaktiviert die Funktion. * __Hochskalieren:__ Gibt an, ob anzuzeigende Bilder automatisch hochskaliert werden, wenn Platz verfügbar ist. Standardmäßig wird nicht hochskaliert. * __Runterskalieren:__ Ist diese Option aktiviert, werden Bilder, wenn nicht genügend Platz verfügbar ist, automatisch runterskaliert. Die Option ist standardmäßig aktiviert. * __Seitenverhältnis beibehalten:__ Sofern Hochskalieren oder Runterskalieren aktiviert ist, ist mit dieser Option einstellbar, ob das Seitenverhältnis der zu skalierenden Bilder beim Skalieren beibehalten wird, oder nicht. Standardmäßig wird das Seitenverhältnis beibehalten. ## Kategorie Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/kategorie/ Das Kategorie-Element ermöglicht die Anzeige der Objekte, die sich in einer Kategorie befinden, sowie die Navigation in Unterkategorien. ![Kategorie](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/kategorie/1290121d61-1790424938/webfront-kategorie.png) ### Objektbereich Im Objektbereich werden die Unterobjekte der zur Ansicht ausgewählten Kategorie dargestellt. Nähere Informationen und mögliche Darstellungsarten, sind im Bereich [Objekt-Darstellung](object-presentation.md) zu finden. ### Navigationsleiste Sofern die angezeigte Kategorie sichtbare Unterkategorien hat, wird automatisch eine Kategorie-Navigationsleiste angezeigt. Wird über die Navigation eine Unterkategorie ausgewählt, so wird im Objektbereich deren Inhalt dargestellt. Besitzt eine so angezeigte Kategorie ebenfalls sichtbare Unterkategorien, so wird die Navigation automatisch erweitert. Selbstverständlich werden auch per Link-Objekt verknüpfte Kategorien in der Navigationsleiste angezeigt. Über die Eigenschaft “Zeige Navigation” lässt sich die Kategorieleiste bei Bedarf ausblenden. ### Eigenschaften * __Titel:__ Titel für das Element in der Menüleisten-Navigation. Wird kein eigener Wert angegeben, so wird automatisch der Objektname der gewählten Startkategorie gesetzt. Wird der Wert gesetzt, aber der Text leer gelassen, so wird der Titel nicht angezeigt. * __Icon:__ Icon, das in der Menüleisten-Navigation neben dem Titel angezeigt wird. Standardmäßig wird kein Icon angezeigt. * __Startkategorie:__ Kategorie, deren Inhalt vom Element dargestellt wird. Standardmäßig wird die Hauptkategorie mit "ID 0" angezeigt. * __Zeige Navigation:__ Mit dieser Option lässt sich steuern, ob die Navigationsleiste angezeigt wird, sofern sich unterhalb der Startkategorie Unterkategorien befinden. Standardmäßig wird die Navigationsleiste angezeigt. ### Besonderheiten * Wird der Titel auf einen leeren Text gesetzt und kein Icon angegeben, so wird das Kategoriemodul in der Navigation nicht angezeigt, bleibt aber über [WFC_SwitchPage](../modules/webfront-visualization.md) erreichbar. * Soll eine Kategorie im WebFront zwar mit Icon aber ohne Titel angezeigt werden, muss ein Leerzeichen im Titel (" ") angegeben werden. ## Logout Widget Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/logout-widget/ Das Logout-Widget bietet die Möglichkeit im Widget-Bereich einer Menüleiste, einen Button anzuzeigen. Bei Benutzung wird man auf den WebFront-Login zurückgebracht. ### Eigenschaften * __Timeout (Sek.):__ Timeout, welches bei Inaktivität automatisch einen Logout ausführt. Bei Wert = 0 ist dieser ausgeschaltet. ## Menüleiste Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/menueleiste/ Das Menüleiste ist ein Element, das die Navigation zwischen allen anderen Typen von Elementen ermöglicht, sowie Widgets darstellen kann. ### Darstellung ![Menüleiste](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/menueleiste/6b9b55561e-1790424938/webfront-menueleiste.png) Am oberen Rand der Menüleiste befindet sich eine Navigationsleiste, darunter der Inhaltsbereich. In der Navigationsleiste werden auf der linken Seite zunächst, sofern gewählt, das _“Untericon”_ und der _“Untertitel”_ angezeigt. Rechts daneben folgt der Navigationsbereich, der für alle den Menüleisten untergeordneten Elemente anklickbare Felder mit deren Icon und Titel, sofern eingestellt, anzeigt. Durch Anklicken eines Feldes wird im Inhaltsbereich der Menüleiste der Inhalt des zugeordneten Elements angezeigt. Am linken Rand der Navigationsleiste befindet sich der Widget-Bereich, in dem alle der Menüleiste untergeordneten Widgets angezeigt werden. Die Menüleiste wird aufgrund der gebotenen Navigationsfähigkeiten in der Regel als das oberste Element einer WebFront-Konfiguration verwendet. Selbstverständlich kann die Menüleiste dabei auch weitere Menüleisten aufnehmen. Reicht die Bildbreite nicht aus, um alle Navigationsfelder anzuzeigen, so werden automatisch anklickbare Pfeile zum Scrollen des Navigationsbereichs eingeblendet. Die Breite des Navigationsbereichs verkleinert sich dabei bis auf 100 Pixel. Danach wird der Widget-Bereich verkürzt. ### Eigenschaften * __Titel:__ Titel der Menüleiste in der Navigation einer gegebenenfalls übergeordneten Menüleiste. Standardmäßig wird "Menüleiste" angezeigt. * __Icon:__ Icon, das in der Navigation einer gegebenenfalls übergeordneten Menüleiste neben dem Titel angezeigt wird. Standardmäßig wird kein Icon angezeigt. * __Untertitel:__ Text, der am linken Rand der Navigationsleiste angezeigt wird. Standardmäßig wird kein Text angezeigt. * __Untericon:__ Icon, das am linken Rand der Navigationsleiste angezeigt wird. Standardmäßig ist kein Icon ausgewählt. ## Seitenteiler Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/seitenteiler/ Der Seitenteiler ist ein Layout-Element, das zwei Unterelemente horizontal oder vertikal aufgeteilt darstellen kann. Auf diese Weise lassen sich z.B. ein Inhalt-Wechsler für die Kamera-Ansicht neben einer Kategorie anzeigen. Da unterhalb eines Seitenteiler auch weitere Layout-Elemente wie andere seitenteiler und Menüleisten eingefügt werden können, ist eine individuelle Layout-Anpassung des WebFronts möglich. ![Seitenteiler](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/seitenteiler/03a561822b-1790424938/webfront-seitenteiler.png) ### Aufteilung der Unterelemente Mit der Eigenschaft "Aufteilung" lässt sich einstellen, ob die beiden Unterelemente des Seitenteilers übereinander angezeigt werden sollen (horizontale Aufteilung), oder nebeneinander (vertikale Aufteilung). Wie viel Platz die Unterelemente bekommen, wird nun über die Eigenschaften _"Größe"_, _"Größeneinheit"_ und _"Verhältnis Ziel"_ bestimmt. Mit _"Verhältnis Ziel"_ lässt sich bestimmen, ob man sich bei dem über _"Größe"_ und _"Größeneinheit"_ einstellbaren Wert auf das erste oder zweite Unterelement beziehen möchte. Das angezielte Element bekommt dann den Platz zugewiesen, der über die Eigenschaft _"Größe"_ in der eingestellten _"Größeneinheit"_ angegeben ist. ### Beispiel Es soll ein Bild mit einer Bildbreite von 640 Pixeln rechts neben einer Kategorie angezeigt werden. Hierzu gibt man dem Seitenteiler für die Eigenschaft "Aufteilung" den Wert Vertikal, setzt das _"Verhältnis Ziel"_ auf zweites Element, _"Größe"_ auf 640 und _"Größeneinheit"_ auf Pixel. Nun erstellt man im WebFront-Konfigurator unterhalb des Seitenteilers ein Unterelement vom Typ Kategorie und ein Unterelement vom Typ Inhalt-Wechsler. Bei den Unterelementen ist die Positions so einzustellen, dass die Kategorie Position 0 und der Inhalt-Wechsler Position 1 erhält. Nun können die Unterelemente so konfiguriert werden, dass die gewünschte Kategorie und das gewünschte Bild angezeigt werden. ### Eigenschaften | Eigenschaft | Beschreibung | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Titel | Der Titel für das Element in der Menüleisten-Navigation. Standardmäßig wird "Seitenteiler" angezeigt. | | Icon | Das Icon, welches in der Menüleisten-Navigation neben dem Titel angezeigt wird. Standardmäßig wird kein Icon angezeigt. | | Aufteilung | Hier lässt sich auswählen, ob die Trennung der beiden Unterelemente horizontal oder vertikal erfolgen soll. Standardmäßig wird horizontal getrennt. | | Größe | Die Größe des für die Aufteilung gewählten Unterelements entsprechend der Größeneinheit. Der Standardwert ist 50. | | Größeneinheit | Hier kann ausgewählt werden, ob sich die Größe auf Prozent oder auf Pixel bezieht. Standardmäßig werden Prozent genommen. | | Hautpelement | Über diese Eigenschaft lässt sich auswählen, ob das erste oder das zweite Unterelement des Seitenteilers entsprechend der angegebenen Größenangabe angezeigt wird. Standardmäßig ist das erste Element ausgewählt. | | Rand anzeigen | Mit dieser Eigenschaft lässt sich der standardmäßig zur Trennung der Unterelemente angezeigte Rand ein- oder ausblenden. | ## Uhrzeit Widget Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/uhrzeit-widget/ Das Uhrzeit-Widget ermöglicht die Anzeige des aktuellen Datums und der aktuellen Uhrzeit im Widget-Bereich einer Menüleiste. Sofern kein benutzerdefiniertes Anzeigeformat eingestellt ist, richtet sich die Darstellung nach der im Webbrowser eingestellten Landessprache. Es kann dabei für das Datumsformat und das Zeitformat jeweils zwischen den Standardformatierungen "Versteckt", "Kurz", "Mittel", "Lang" und "Komplett" gewählt werden. Das benutzerdefinierte Format ist bei Bedarf, entsprechend der datePattern-Tabelle unter [dojotoolkit.org/reference-guide/dojo/date/locale/format.html](http://dojotoolkit.org/reference-guide/dojo/date/locale/format.html) einzugeben. ![Uhrzeit Widget](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/uhrzeit-widget/07d089a263-1790424938/webfront-uhrzeitwidget.png) ### Eigenschaften * __Datumsformat:__ Hier kann ein vordefiniertes Muster für die Formatierung des Datums ausgewählt werden. * __Zeitformat:__ Wie auch beim Datumsformat lässt sich hier ein vordefiniertes Muster für die Formatierung der Uhrzeit auswählen. * __Benutzerdefiniertes Format:__ Optional kann hier ein benutzerdefiniertes Format angegeben werden. ## Wetter (DWD) Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/editor/wetter-dwd/ Das Wetter-Element ermöglicht die Anzeige der Wettervorhersage des Deutschen Wetterdienstes für Deutschland und die einzelnen Bundesländer in Text und Bild. ![Wetter (DWD)](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/editor/wetter-dwd/9f1ccf4abf-1790424938/webfront-wetterdwd.png) ### Navigationsleiste Im oberen Bereich befindet sich die Navigationsleiste. Hier lässt sich, sofern über die Eigenschaft “Region” eingestellt, zwischen dem Wetterbericht für Deutschland und dem gewählten Bundesland wechseln. Zusätzlich lässt sich der Vorhersagezeitraum zwischen Heute, Morgen, 3. Tag und 4. Tag wechseln. ### Vorhersagebereich Im Vorhersagebereich ist rechts der Vorhersagetext zu lesen und links daneben eine passende Wetterkarte. ### Eigenschaften * __Titel:__ Titel für das Element in der Menüleisten-Navigation. Standardmäßig wird “Wetter” angezeigt. * __Icon:__ Icon, das in der Menüleisten-Navigation neben dem Titel angezeigt wird. Standardmäßig wird kein Icon angezeigt. * __Region:__ Optional kann hier ein Bundesland ausgewählt werden, dessen Wettervorhersage sich anstelle der deutschlandweiten Vorhersage in der Navigationsleiste anzeigen lässt. ## Sicherheit Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/sicherheit/ In diesem Reiter kann eine Passwortabfrage für das WebFront und dessen Editor eingerichtet werden. Weitere Sicherheitsinformationen können unter [Sicherheit](../getting-started.md) eingesehen werden. ![Sicherheitsmenü im WebFront-Konfigurator](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/sicherheit/523a864118-1790424938/webfront-konfigurator-sicherheit.png) ### Erfordere Passwort Für jeden Konfigurator kann ein Passwort als Zugriffschutz vergeben werden. Dieses Passwort wird vor dem Zugriff des jeweiligen Konfigurators gefordert, oder bei der Konfiguration innerhalb der mobilen Apps. Zusätzlich kann die Spezialoption aktiviert werden, dass das Passwort nicht innerhalb des lokalen Netzwerk gefordert wird. Dieses Passwort gilt nur für den Zugriff auf das System und dessen Komponenten. Die Abfrage der verfügbaren Konfiguratoren (Mobile) und der WebFront-Startseite (Übersicht) ist jederzeit ohne Passwort möglich. ### Autostart für IP-Adresse Eine besondere Funktion ist der Auto-Start, welcher einen Konfigurator direkt ohne Passwortabfrage öffnet, wenn die IP-Adresse mit einer der eingetragenen IP-Adressen in dieser Liste übereinstimmt. Über diese Funktion kann z.B. auf einem Touch-Panel ein WebFront direkt geöffnet werden, ohne den normalen Auswahldialog angezeigt zu bekommen und ohne die Passwortabfrage beantworten zu müssen. Es ist zu beachten diese Funktion nur innerhalb eines sicheren Netzwerks zu benutzen. > **Hinweis:** Ab IP-Symcon 5.5 wird auch die CIDR Notation unterstützt, sodass z.B. 192.168.1.0/24 alle Adresse von 192.168.1.1 bis 192.168.1.255 enthält. > **Achtung:** Diese Funktion steht nicht zur Verfügung, sofern Anfragen an IP-Symcon über einen Reverse-Proxy oder über den Connect-Dienst gehen, da der Ursprung dann nicht sicher und zuverlässig verifiziert werden kann. Eine Ausnahme ist der CIDR Wert 0.0.0.0/0, welcher alle Anfragen unabhängig der Herkunft umleitet und somit grundsätzlich unsicher ist. Dieser wird auch für die o.g. Ausnahmen ausgewertet und leitet somit alle Anfragen unabhängig des Ursprungs weiter. #### Aufruf über URL Es gibt Situationen (z.B. in Verbindung mit NAT) bei denen die Autostart via IP nicht funktioniert. In diesen Fällen kann eine URL mit dem WebFront-Passwort gestartet werden. ```php // Grundgerüst für den URL Aufruf http://:3777/?password=# // Beispiel als Start mit dem Chromium Browser // Passwort: "geheim", WebFrontInstanzID: = 12345 chromium-browser --start-fullscreen 192.168.1.123:3777/?password=geheim#12345 ``` > **Achtung:** Achtung dies birgt ein Sicherheitsrisiko, da die URL das WebFront Passwort in Klartext überträgt und in der URL sichtbar ist. ## Struktur (veraltet) Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/web/struktur/ > **Achtung:** Diese Funktion ist nur bis Version 4.4 vorhanden und wurde komplett durch den [Editor](webfront-visualization.md) abgelöst. Der Konfigurator kann __Elemente__ enthalten, die in der Visualisierung als Reiter ausgehend vom oberen linken Rand anfangen und zusätzlich __Widgets__ enthalten, die in einem extra Bereich am oberen rechten Rand beginnen. Dieser Bereich ist dem SysTray von Windows ähnlich. Ein Element oder Widget kann über den __Hinzufügen__ Button eingefügt und entsprechend konfiguriert werden. Ein Element besteht aus einer eindeutigen ID, die automatisch vergeben wird, einer Position und einer dem Element entsprechenden Konfiguration. Die ID kann vom Benutzer beim Erstellen angegeben werden, um das Element bei Aktionen besser wiedererkennen zu könne. Die ID hat keinen Zusammenhang mit den ObjektIDs der Instanzen oder Variablen. Die Position gibt jeweils die Position im Reiter oder der Widget-Leiste an und muss einen Wert größer gleich Null erhalten. Wenn zwei Elemente die gleiche Positionsnummer haben, wird die Reihenfolge durch den Titel des Elements definiert. ![Strukurmenü im WebFront-Konfigurator](https://www.symcon.de/media/pages/service/dokumentation/komponenten/webfront-visualisierung/web/struktur/be99193cbf-1790424938/webfront-konfigurator-struktur.png) ### Übersicht der verfügbaren Elemente | Element | Beschreibung | | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Kategorie](../concepts.md) | Über dieses Element lässt sich eine Kategorie und all seine Unterobjekte im WebFront anzeigen. Die ID der anzuzeigenden Kategorie kann über den Startkategorie Parameter verändert werden. | | [Graph](webfront-visualization.md) | Über dieses Element werden die im Archiv Modul eingestellten Graphen direkt angezeigt. Normalerweise können Graphen über das Icon links vom Wert der Variable aufgerufen werden. Falls Graphen direkt in z.B. Menüleisten oder Seitenteiler eingebettet werden sollen, kann dies über das Graphen Element geschehen. | | [Externe Seite](webfront-visualization.md) | Dieses Element fügt eine externe Seite in das WebFront über ein IFrame ein. Die Parameter-URL und Intervall sind verfügbar. | | [Inhaltswechsler](webfront-visualization.md) | Über den Inhaltswechsler können mehrere Mediendateien, Strings, HTMLBoxen, StringBoxen, Mail-Instanzen oder externe Seiten innerhalb einer Seite umgeschaltet werden. | | [Seitenteiler](webfront-visualization.md) | Über Seitenteiler (ehemals Container) kann die WebFront-Ansicht in zwei Teile aufgespaltet werden und in jeden Teil ein beliebig anderes Element eingefügt werden. Wenn Seitenteiler in Seitenteiler eingefügt werden, kann somit z.B. ein QuadView nachgebildet werden. | | [Menüleiste](webfront-visualization.md) | Über TabPanes können im oberen Bereich benutzerdefinierte Menüleisten erstellt werden, die auf weitere Elemente verweisen. | | [Wetter (DWD)](webfront-visualization.md) | Zeigt das Wetter des DWD mit der Möglichkeit an, einzelne Bereiche Deutschands genauer auszuwählen und zwischen einem normalen Bild oder einem Radarbild zu wechseln. | | [Uhrzeit Widget](webfront-visualization.md) | Zeigt die aktuelle Uhrzeit an. | | [Info Widget](webfront-visualization.md) | Kann entweder dazu verwendet werden ein statisches Icon anzuzeigen oder verknüpft mit einer Variable deren Inhalt/Icon, welcher/welches je nach Variablenwert unterschiedlich sein kann. | | [Logout Widget](webfront-visualization.md) | Dieses Element fügt ein Widget hinzu, über das man zum Auswahlbildschirm der WebFronts zurückgeleitet wird. | | [Idle Widget](webfront-visualization.md) | Dieses Element fügt ein unsichtbares Widget hinzu, welches nach einer Zeit Untätigkeit auf eine bestimmte Seite wechselt. | ## Mobile Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/mobile/ Die Mobile Visualisierung für Mobile Geräte kann über den jeweiligen AppStore heruntergeladen werden und enthält dort auch die aktuellste Beschreibung der Funktionen der App. ( __Android:__ [IP-Symcon Mobile bei Google Play](https://play.google.com/store/apps/details?id=de.symcon.visualization) / __iOS:__ [Symcon Visualization für iPhone, iPod touch und iPad im iTunes App Store](https://apps.apple.com/de/app/symcon-visualization/id1566124129) ) Diese Seite soll als Beschreibung und Referenz für häufig gestellte Fragen und Funktionen dienen, welche mögliche Unterschiede der Apps zueinander aufführen. Desweiteren stellt keine App Anspruch auf volle Kompatibilität zum WebFront. Diese dienen als Erweiterung zu IP-Symcon, um schnell und unkompliziert auf die Grundfunktionen des Systems zugreifen zu können. Für eine vollständige Visualisierung kann und muss auf das WebFront zurückgegriffen werden. Hier ist auch keine Änderung vorgesehen, da die Mobile Applikationen mit immer mehr werdenden Funktionen langsamer werden würde. Das würde aber mit dem Hauptmerkmal “Geschwindigkeit” kollidieren. Die Dokumentation der Push-Nachrichten befindet sich im Abschnitt [Notification Control](../modules/notification-control.md) > **Achtung:** Es ist zu beachten, dass der Zugriff auf das System über die mobilen Apps standardmäßig deaktiviert ist. Es wird durch die Fehlermeldung "Kein gültiger Konfigurator angegeben!" darauf hingewiesen. Es muss im gewünschten WebFront Konfigurator die mobile Nutzung aktiviert werden. ### Funktionen, die absichtlich nicht verfügbar sind * Benutzerdefinierte Icons werden nicht geladen, da dies einen beträchtlichen Geschwindkeitsverlust bedeuten würde und außerdem mehrere Icongrößen z.B. für das Retina Display erfordern würde, die die wenigsten der User zur Hand haben. * Mehrfachverschachtelungen sind nicht verfügbar. So soll auf mobilen Geräten die Displayfläche optimal genutzt werden. ### Funktionen, die sich anders als das WebFront verhalten * Boolean-Variablen werden standardmäßig als An/Aus (Switch, CheckBox) dargestellt. Dieses Verhalten kann über die WebFront Visualisierung Instanz verändert werden, sodass nur ~Switch Profile diese Darstellung haben. ### WebFront Freigabelink Über erstellte WebFront Freigabelinks lässt sich die App direkt starten und mit einem WebFront verknüpfen. Sollte dieses WebFront in der App noch nicht vorhanden sein, wird automatisch ein Konfigurator eingerichtet. Es gibt 2 Arten von Links: Für Server ohne SSL: __symcon://www.webfront.info/#98765__ Für Server mit SSL: __symcons://mein.ssl-server.com/#12345__ Sollte der Server/Konfigurator nicht in der App Liste stehen, so wird dieser automatisch hinzugefügt und geöffnet. Somit kann zum Beispiel, ohne dass manuelle Einstellungen notwendig werden, dem Besuch Zuhause oder gar dem Tagungsteilnehmer ein schneller Zugriff auf das lokale WebFront ermöglicht werden. ### Bekannte Fehler * Bei aktiviertem SSL können extern geladene Inhalte (z.B. Bilder) nicht geladen werden, wenn das Zertifikat nicht vom Browser akzeptiert wurde. * Bestimmte Profile und Status-/Variablen (z.B. bei HomeMatic Fensterkontakten oder LCN Relais) können in der Mobile App geschaltet werden. Diese Möglichkeit der Aktion wird im WebFront farbig (grün/rot) dargestellt und bedeutet, dass entweder ein Aktionsskript definiert oder dass eine Standardaktion verfügbar ist. Soll das Verhalten geändert werden, gibt dieses Thema im Forum entsprechende Antwort: [Veränderbarkeit von unveränderlichen Variablen](https://community.symcon.de/t/veraenderbarkeit-von-unveraenderlichen-variablen/24061) ### Tipps & Tricks * Falls beim Ladevorgang ein JSON-Fehler auftritt, muss überprüft werden, ob mindestens IP-Symcon 3.1 #3367 installiert wurde. ## Legacy-Icons Quelle: https://www.symcon.de/de/service/dokumentation/komponenten/webfront-visualisierung/legacy-icons/ > **Hinweis:** Das WebFront verwendet die Legacy-Icons, nicht die üblichen Icons der Kachelvisualisierung. ### Icontyp Es wird unterschieden zwischen "normalen" Icons und adaptiven Icons. Normale Icons ändern ihr Aussehen nicht, wobei adaptive Icons sich der gesetzten Variable je nach Wert im Aussehen anpassen. Adaptive Icons orientieren sich dabei anhand der im Profil eingestellten Min/Max Werte. Diese werden als 0%-100% gehandhabt. Soll es als 100%-0% gehandhabt werden, muss ein ".Reversed" im Profilnamen angegeben werden. Die einzelnen Adaptiven Icon (z.B. Intensity-25) können auch direkt angegeben werden und werden dann als "normales" Icon eingebunden. ### Benutzerdefinierte Icons einbinden Ab IP-Symcon 3.0 werden benutzerdefinierte Icons über Skins eingebunden. Weitere Informationen befinden sich im Entwicklerbereich als SDK: [Skins SDK](../developer/sdk-tools.md) ### Auswahl in der Verwaltungskonsole Die Icon-Auswahl in der Verwaltungskonsole wurde auf die aktuellen Icons hin optimiert. Dennoch können die Legacy-Icons eingestellt werden, indem der Iconname manuell in das entsprechende Feld eingetragen wird. ### Übersicht der Icons Folgende Icons sind im WebFront enthalten und können an den jeweiligen Stellen in IP-Symcon ausgewählt werden. Ein Sonderfall ist das Icon __Transparent__. Wird dieses Icon ausgewählt, so kann ein anderes Icon, welches niedriger in der Hierarchie ist (s.o.), überschrieben werden, so dass kein Icon angezeigt wird. Dies kann als Stilelement verwendet werden, um z.B. bei verlinken Objektkategorien kein Icon anzuzeigen, obwohl die Kategorie ein Icon zugewiesen hatte. ### Icons `aircraft`, `alert`, `arrowRight`, `backspace`, `basement`, `bath`, `battery`, `bed`, `bike`, `book`, `bulb`, `calendar`, `camera`, `car`, `caret`, `cat`, `climate`, `clock`, `close`, `closeall`, `cloud`, `cloudy`, `cocktail`, `cross`, `database`, `dining`, `distance`, `doctorBag`, `dog`, `doll`, `dollar`, `door`, `download`, `drops`, `duck`, `edit`, `electricity`, `energyProduction`, `energySolar`, `energyStorage`, `erlenmeyerFlask`, `euro`, `execute`, `eyes`, `factory`, `favorite`, `female`, `fitness`, `flag`, `flame`, `floorLamp`, `flower`, `fog`, `garage`, `gas`, `gauge`, `gear`, `graph`, `groundFloor`, `handicap`, `heart`, `help`, `hollowArrowDown`, `hollowArrowLeft`, `hollowArrowRight`, `hollowArrowUp`, `hollowDoubleArrowDown`, `hollowDoubleArrowLeft`, `hollowDoubleArrowRight`, `hollowDoubleArrowUp`, `hollowLargeArrowDown`, `hollowLargeArrowLeft`, `hollowLargeArrowRight`, `hollowLargeArrowUp`, `hourglass`, `houseRemote`, `image`, `information`, `intensity`, `internet`, `ips`, `jalousie`, `key`, `keyboard`, `kitchen`, `leaf`, `light`, `lightning`, `link`, `lock`, `lockClosed`, `lockOpen`, `macro`, `mail`, `male`, `melody`, `menu`, `minus`, `mobile`, `moon`, `motion`, `move`, `music`, `network`, `notebook`, `ok`, `pacifier`, `paintbrush`, `pants`, `party`, `people`, `plug`, `plus`, `popcorn`, `power`, `presence`, `radiator`, `raffstore`, `rainfall`, `recycling`, `remote`, `repeat`, `return`, `robot`, `rocket`, `script`, `shift`, `shower`, `shuffle`, `shutter`, `sink`, `sleep`, `sleet`, `snow`, `snowflake`, `sofa`, `speaker`, `speedo`, `stars`, `sun`, `sunny`, `tV`, `talk`, `tap`, `teddy`, `tee`, `telephone`, `temperature`, `thunder`, `title`, `topFloor`, `tree`, `turnLeft`, `turnRight`, `umbrella`, `unicorn`, `ventilation`, `wC`, `warning`, `wave`, `wellness`, `windDirection`, `windSpeed`, `window`, `xBMC` ### Adaptive Icons `aircraft`, `alert`, `arrowRight`, `backspace`, `basement`, `bath`, `battery-0`, `battery-50`, `battery-100`, `battery`, `bed`, `bike`, `book`, `bulb`, `calendar`, `camera`, `car`, `caret`, `cat`, `climate`, `clock`, `close`, `closeall`, `cloud`, `cloudy`, `cocktail`, `cross`, `database`, `dining`, `distance`, `doctorBag`, `dog`, `doll`, `dollar`, `door-0`, `door-100`, `door`, `download`, `drops`, `duck`, `edit`, `electricity`, `energyProduction`, `energySolar`, `energyStorage-0`, `energyStorage-25`, `energyStorage-50`, `energyStorage-75`, `energyStorage-100`, `energyStorage`, `erlenmeyerFlask`, `euro`, `execute`, `eyes-0`, `eyes-100`, `eyes`, `factory`, `favorite`, `female`, `fitness`, `flag`, `flame`, `floorLamp-0`, `floorLamp-100`, `floorLamp`, `flower`, `fog`, `garage-0`, `garage-25`, `garage-100`, `garage`, `gas`, `gauge`, `gear`, `graph`, `groundFloor`, `handicap`, `heart`, `help`, `hollowArrowDown`, `hollowArrowLeft`, `hollowArrowRight`, `hollowArrowUp`, `hollowDoubleArrowDown`, `hollowDoubleArrowLeft`, `hollowDoubleArrowRight`, `hollowDoubleArrowUp`, `hollowLargeArrowDown`, `hollowLargeArrowLeft`, `hollowLargeArrowRight`, `hollowLargeArrowUp`, `hourglass-0`, `hourglass-30`, `hourglass-60`, `hourglass-100`, `hourglass`, `houseRemote`, `image`, `information`, `intensity-0`, `intensity-25`, `intensity-50`, `intensity-75`, `intensity-100`, `intensity`, `internet`, `ips`, `jalousie-0`, `jalousie-50`, `jalousie-100`, `jalousie`, `key`, `keyboard`, `kitchen`, `leaf`, `light-0`, `light-1`, `light-25`, `light-50`, `light-75`, `light-100`, `light`, `lightning`, `link`, `lock-0`, `lock-100`, `lock`, `lockClosed`, `lockOpen`, `macro`, `mail`, `male`, `melody`, `menu`, `minus`, `mobile`, `moon`, `motion`, `move`, `music`, `network`, `notebook`, `ok`, `pacifier`, `paintbrush`, `pants`, `party`, `people`, `plug`, `plus`, `popcorn`, `power`, `presence-0`, `presence-100`, `presence`, `radiator`, `raffstore-0`, `raffstore-50`, `raffstore-100`, `raffstore`, `rainfall`, `recycling`, `remote`, `repeat`, `return`, `robot`, `rocket`, `script`, `shift`, `shower`, `shuffle`, `shutter`, `sink`, `sleep`, `sleet`, `snow`, `snowflake`, `sofa`, `speaker-0`, `speaker-1`, `speaker-25`, `speaker-50`, `speaker-100`, `speaker`, `speedo-0`, `speedo-25`, `speedo-50`, `speedo-75`, `speedo-100`, `speedo`, `stars`, `sun`, `sunny`, `tV`, `talk`, `tap`, `teddy`, `tee`, `telephone`, `temperature-0`, `temperature-25`, `temperature-50`, `temperature-75`, `temperature-100`, `temperature`, `thunder`, `title`, `topFloor`, `tree`, `turnLeft`, `turnRight`, `umbrella`, `unicorn`, `ventilation`, `wC`, `warning`, `wave`, `wellness`, `windDirection`, `windSpeed-0`, `windSpeed-30`, `windSpeed-60`, `windSpeed-100`, `windSpeed`, `window-0`, `window-100`, `window`, `xBMC` > **Hinweis:** Folgende Icons sind erst ab IP-Symcon 5.0/Symcon Mobile 5.0 verfügbar: Bath, Bike, Book, Cloudy, Doll, Door, Download, EnergyProduction, EnergySolar, EnergyStorage, Favorite, Fitness, FloorLamp, Gas, Handicap, Heart, Help, Link, Menu, Pants, Party, People, Presence, Raffstore, Remote, Sink, Sleet, Sunny, Teddy, Tee, Thunder, Umbrella