Compact Logic auf dem Smartphone – die Bedienoberfläche im Designer gestalten

Die Raumtemperatur ansehen, eine Pumpe freigeben oder einen Sollwert einstellen: Mit der CL-App kannst du dein Compact-Logic-Gerät vom Smartphone aus bedienen. Welche Anzeigen, Bedienelemente und Hinweise dabei erscheinen, legst du direkt im CL-Designer fest. Die App übernimmt die vorhandenen Elemente und ihre Verbindungen aus deinem Projekt.

Du brauchst für eine einfache App-Oberfläche keinen eigenen App-Code. Stattdessen verwendest du die Anzeigen und Bedienelemente, die bereits zu deinem Steuerungsprojekt gehören. Ein Wertlabel liest einen Messwert, ein Schalter verändert einen verbundenen Eingang und ein Hinweistext erklärt den zugehörigen Anlagenbereich.

Die Oberfläche wird im Designer vorbereitet. Auf dem Smartphone verbindest du dich mit dem Gerät, wählst ein Blatt und bedienst die angezeigten Elemente.

Die App lässt sich auch unter Windows installieren und nutzen. So kann die im Designer erstellte Bedienoberfläche direkt am PC getestet und optimiert werden. Darüber hinaus eignet sich die Windows-App als eigenständige Bedienoberfläche für eine Anlage: Anwender können damit die vorgesehenen Einstellungen vornehmen sowie Werte, Zustände und Meldungen ablesen.

Vier Schritte zur eigenen App-Seite

Ablauf: Elemente im Designer anlegen, Daten verbinden, App-Anzeige und Reihenfolge festlegen, Gerät in der App öffnen
  1. Elemente anlegen: Anzeigen, Bedienelemente und Texte auf dem gewünschten Designer-Blatt platzieren.
  2. Werte verbinden: Die Elemente den passenden Ein- beziehungsweise Ausgängen der Steuerung zuordnen.
  3. App-Seite festlegen: In der DesignerItemList die gewünschten Elemente freigeben und ihre Reihenfolge einstellen.
  4. Am Smartphone prüfen: Gerät öffnen, Blatt auswählen und die Bedienung ausprobieren.

Das Projekt liefert die Anzeigen und Bedienelemente

Die App verwendet die Datenbindungen der Designer-Elemente. Du musst dieselbe Temperaturquelle deshalb nicht noch einmal in einer eigenen App-Konfiguration auswählen.

Im DesignerIn der AppBeispiel
Wertanzeige mit verbundenem AusgangAktuellen Wert ansehenRaumtemperatur
Schalter oder Taster mit verbundenem EingangDirekt bedienenHeizung freigeben
Schieberegler oder ZahleneingabeVorgabewert verändernSolltemperatur
SignalanzeigeZustand erkennenPumpe läuft
Balken oder weitere unterstützte AnzeigeWert grafisch darstellenFüllstand
DokumentationselementErklärung oder zustandsabhängigen Text lesenBetriebsart und Wartungshinweis

Die Regelung bleibt im CL-Programm. Die App zeigt ihre Werte und übergibt Bedienvorgaben an die zugeordneten Eingänge. Sie ersetzt keine Funktionsblöcke und enthält keine zweite Kopie deiner Steuerungslogik.

Für diese App-Seiten ist kein Designer-Page- oder Uni-Displayblock erforderlich. Die App liest die Designer-Elemente unmittelbar aus dem Geräteprojekt.

Auswahl und Reihenfolge in der DesignerItemList

Im CL-Designer öffnest du System → DesignerItemList. Dort stehen die vorhandenen Designer-Elemente in einer Liste. Du erkennst das zugeordnete Blatt, kannst die Reihenfolge ändern und entscheidest über die Spalte In App anzeigen, welche Elemente auf dem Smartphone erscheinen sollen.

EinstellungWirkung auf die App
In App anzeigen eingeschaltetDas unterstützte Element erscheint auf der Bedienseite
In App anzeigen ausgeschaltetDas Element bleibt in der App ausgeblendet
▲ / ▼Ein Element in der gespeicherten Reihenfolge nach oben oder unten verschieben
⇈ / ⇊Ein Element an den Anfang oder das Ende verschieben
BlattzuordnungBestimmen, zu welcher App-Seite das Element gehört

Die freien Positionen im Designer-Diagramm werden nicht als Pixelpositionen auf das Smartphone übertragen. Für die App zählen die Auswahl, das Blatt und die gespeicherte Elementreihenfolge. Das Diagramm kannst du deshalb passend zur Programmlogik anordnen, während die App eine kompakte Bedienseite daraus bildet.

Änderungen der DesignerItemList werden mit Anwenden oder beim Schließen des Fensters an das Gerät übertragen. Speichere die fertige Konfiguration anschließend dauerhaft. Öffne das Gerät in der App erneut, damit sie die geänderte Seitendefinition und die festen Texte neu einliest.

Bei neu hineingezogenen Textlisten und reinen Zahlen-Wertlabels ist In App anzeigen zunächst ausgeschaltet. Die übrigen neu angelegten Elemente sind standardmäßig eingeschaltet. Prüfe diese Option besonders dann, wenn eine erwartete Messwertanzeige in der App fehlt.

Blätter werden zu übersichtlichen Bedienseiten

Du kannst dein Projekt beispielsweise auf die Blätter Heizung, Lüftung und Beleuchtung aufteilen. Die App übernimmt die im Gerät hinterlegten Blattnamen für die Auswahl am oberen Rand. Neben den Blättern 0 bis 4 gibt es Alle Anzeigen als gemeinsame Übersicht.

Das Blatt wählst du über die Auswahl oben oder durch Wischen nach links beziehungsweise rechts. Weitere Elemente erreichst du durch vertikales Scrollen. Eine Bewegung, die auf einem Schieberegler beginnt, bedient den Regler und löst keinen Blattwechsel aus.

Die App ordnet die Elemente automatisch in Karten an. Im Hochformat passen zwei kleine Controls nebeneinander; größere Elemente wie Schieberegler und Dokumentation verwenden die volle Rasterbreite. Im Querformat stehen bis zu vier kleine oder zwei große Elemente nebeneinander. Die Breite hängt vom Elementtyp ab.

Kurze, verständliche Beschriftungen und eine klare Reihenfolge helfen dabei mehr als eine aufwendige Gestaltung. Beginne mit den wichtigsten Werten und Bedienelementen und ergänze danach die Hinweise, die beim täglichen Betrieb gebraucht werden.

Texte machen die Bedienseite verständlich

Auch die fünf neuen Dokumentationselemente werden in der App berücksichtigt:

ElementPraktische Verwendung
TitelEinen Bereich benennen oder einen aktuellen Wert in eine Überschrift einsetzen
MessageEinen festen Hinweis abhängig vom verbundenen Signal einblenden
TextEine Erklärung dauerhaft anzeigen
NotizEinen Hinweis auf- und zuklappen
TextlisteZum Zahlenwert den passenden Zustandstext anzeigen, etwa „Aus“, „Automatik“ oder „Störung“

Die Texte und Listeneinträge bearbeitest du im Designer. Feste Inhalte werden beim Laden des Geräteprojekts übernommen. Im laufenden Betrieb aktualisiert die App die zugehörigen Werte: Ein Wert im Titel kann sich ändern, eine Message kann erscheinen und die Textliste kann einen anderen Zustand anzeigen.

Das Auf- und Zuklappen einer Notiz ist eine lokale Bedienaktion in der App. Es verändert den gespeicherten Dokumentationstext nicht. Meldungen und Notizen behalten ihren vorgesehenen Platz, damit die übrigen Karten bei normalen Zustandswechseln nicht ständig verrutschen.

Beispiel: die Heizung vom Smartphone bedienen

Für eine kleine Heizungsseite reichen wenige Elemente:

ReihenfolgeElementAufgabe
1Titel „Heizkreis Wohnzimmer“Den Anlagenbereich benennen
2ZahlenanzeigeDie aktuelle Raumtemperatur anzeigen
3SchalterDie Heizung freigeben
4SchiebereglerDen gewünschten Sollwert einstellen
5SignallampeDas Betriebssignal anzeigen
6MessageBei einem Störungssignal einen Hinweis zeigen
7NotizEinen kurzen Wartungshinweis bereitstellen

Lege die Elemente auf dem gewünschten Blatt an und verbinde sie mit der vorhandenen Regelung. Stelle den Sollwertbereich passend zur Anwendung ein, zum Beispiel 10 bis 30 °C. In der DesignerItemList schaltest du In App anzeigen für die gewünschten Elemente ein und ordnest sie in dieser Reihenfolge an.

Nach dem Übertragen und Speichern öffnest du das Gerät in der App und wählst das Heizungsblatt. Nun kannst du die Temperatur ansehen, die Freigabe schalten und den Sollwert verändern. Die Signallampe zeigt das verbundene Betriebssignal; der Störungshinweis folgt seinem zugeordneten Signal.

Gerät finden und Verbindung speichern

Verbinde Smartphone und CL-Gerät zunächst mit demselben Netzwerk. Die App startet mit Gespeicherte Verbindungen. Über das Menü oder Gerät hinzufügen gelangst du zur Gerätesuche.

Gefundene Geräte erscheinen während der Suche. Tippe auf den Namen oder die Adresse, um ein Gerät zu öffnen. Mit Hinzufügen speicherst du die Verbindung für spätere Aufrufe. Eine bekannte IP-Adresse kannst du über Adresse eingeben auch manuell anlegen, prüfen und speichern.

Gespeicherte Verbindungen lassen sich über ihr Drei-Punkte-Menü öffnen, umbenennen oder entfernen. Ein dort geänderter Name gilt für die Verbindungsliste dieser App.

Wird kein Gerät gefunden, prüfe die Netzwerkverbindung und die Erreichbarkeit der Geräte untereinander. Ein Gastnetz kann direkte Kommunikation verhindern. Bei einem Verbindungsproblem blendet die Geräteseite einen Hinweis ein.

Dieselben Elemente auch auf dem Gerätedisplay verwenden

Die Option In App anzeigen wird ebenfalls vom neuen Designer Page – design berücksichtigt. So kannst du dieselben unterstützten Designer-Elemente für Smartphone und Gerätedisplay verwenden. Die jeweils unterstützten Darstellungen und Kartengrößen können sich unterscheiden.

Wie daraus eine automatisch angeordnete Seite auf dem Gerät entsteht, beschreibt der Beitrag Designer Page – vom Designer-Blatt zur eigenen Bedienseite.

Stand: 11. Oktober 2026. Der Beitrag beschreibt den aktuellen Projektstand. Verfügbare Funktionen hängen von der verwendeten App-, Designer- und Firmwareversion ab.