Controls
Button
Das Button-Control ist ein interaktives Element. Während andere Controls oft nur Daten darstellen, ermöglicht der Button dem Anwender, aktiv in das Geschehen einzugreifen. Sei es durch das Bestätigen von Prozessen, das Navigieren durch Menüs oder das Auslösen von Skripten. Du findest das Button-Control in der Controls-Menüleiste des Peakboard Designer in der Gruppe Input (1).
Konfiguration und Eigenschaften
1 Allgemein und Datenanbindung
Ein Button benötigt eine Beschriftung und ein definiertes Verhalten bei Interaktion. Ziehe das Control per Drag-and-drop oder platziere es mit einem Doppelklick auf deine Arbeitsfläche.
- Daten/Text (Daten): Hier erhält das Control eine Beschriftung. Dieser Text kann statisch sein oder dynamisch über eine Datenquelle bzw. Variable gesetzt werden (1).
- Icon (Icon): Optional kannst du dem Button ein Icon hinzufügen, um die Funktion visuell zu verdeutlichen (z. B. ein Speicher-Symbol oder ein Pfeil für die Navigation) (2).
Ein Icon aus der Galerie wählen
Die Eigenschaft Icon bietet zwei Quellen. Der erste Button öffnet die Icon-Galerie, die der Peakboard Designer mitbringt, der zweite holt ein Bild aus den Projekt-Ressourcen, und der Papierkorb daneben entfernt das Icon wieder.
- Kategorien links grenzen die Galerie ein: Pfeile, Business, Diagramme, Geräte und Hardware, Essen und Natur, Haushalt, Industrie, Medien und Kommunikation, Medizin und Gesundheit, Geld, Personen und Benutzer, Software und Design, Symbole und Zeichen, Zeit, Werkzeuge und Transport und Logistik, dazu SCADA und die Länderflaggen.
- Die Suche durchsucht die Tags und Schlagwörter eines Icons, nicht nur seinen Namen. Die Suche nach
savefindet deshalb auch die Diskette, die nirgends „save” heißt. - Die Länderflaggen bleiben aus der ungefilterten Liste Alle heraus – 270 Stück würden alles andere darin ertränken. Öffne die Kategorie Flaggen, um sie zu durchstöbern, oder suche aus Alle heraus nach dem Ländernamen.
- Farbe 1 und Farbe 2 färben das Icon sofort um; die meisten Icons sind aus zwei Farben gezeichnet. Die Flaggen bringen ihre eigenen Farben mit und zeigen deshalb keine Farbauswahl.
- Dunklen Hintergrund simulieren schaltet die Vorschaufläche auf einen dunklen Hintergrund, damit du ein helles Icon beurteilen kannst, bevor es auf einem dunklen Screen landet.
Bestätige mit OK; das Icon erscheint dann neben der Beschriftung des Buttons.
2 Aussehen und Steuerung
Sobald du den Button im Designer ausgewählt hast, kannst du in den Eigenschaften auf der rechten Seite alle spezifischen Einstellungen vornehmen. Unter anderem kannst Du hier den visuellen Look des Controls auf der Arbeitsfläche gestalten:
- Tapped (Logik): Der Button ist das vielseitigste Control im Peakboard-Designer. Hiermit lassen sich unzählige Abläufe realisieren: Du kannst mit einem Klick zwischen verschiedenen Bildschirmen (Screens) wechseln, Datenquellen manuell zur Aktualisierung zwingen, Werte in Variablen schreiben, durch die Seiten eines PDF-Controls blättern, HTTP-Requests an externe APIs senden, die Sichtbarkeit von Warnmeldungen umschalten, Timer starten oder stoppen sowie komplexe Berechnungen auf Basis von Benutzereingaben ausführen (1).
Scripting
Beispiel: Multi-Aktion per Button
In diesem Beispiel soll ein Button gleichzeitig einen Wert in den Log schreiben und einen Bildschirmwechsel auslösen. Dazu fügen wir noch ein Textfeld für die Seitenzahl in die Visualisierung ein, dessen Wert in den Log geschrieben wird. Hierbei ist es wichtig, die “In Skripten verwenden”-Eigenschaft zu aktivieren und dem Textfeld-Control eine Beschreibung zu vergeben, um klarzustellen, welcher Wert gespeichert werden soll.
- Markiere den Button und öffne im rechten unteren Bereich “Logik” das Event “Tapped”.
- Wähle unter der Kategorie “Anwendung” den Blockcode “Bildschirm wechseln” und setze ihn an den bereits vorhandenen Block im Editor. Um sicherzugehen, dass zum richtigen Screen gewechselt wird, wähle im Dropdown dieses Blockcodes die Funktion “mit Titel” und suche den Screen, zu dem beim Aktivieren des Buttons gewechselt werden soll (1).
- Um den Seitenwechsel ebenfalls im Log wiederzugeben, setze einen weiteren “Ins Log schreiben”-Blockcode unter den bestehenden Block und ändere den Inhalt des grünen Textfelds zu “Bildschirmseitenwechsel zu (Screen Name)” (2).
- Speichere das Skript unter “Speichern und Schließen” (3).
Starte die Vorschau und überprüfe im Log (1), ob die Rückgabewerte korrekt zurückgegeben werden. Klicke zum interagieren auf den Button:
In diesem Video wird nochmal verdeutlicht, wie das Skript für dieses Beispiel aufgebaut und auf erfolgreiche Funktion geprüft wird:
