Erste schritte

Peakboard Designer - Die Basics

Es freut uns sehr, dass Sie sich für Peakboard interessieren. Wir wollen Ihnen hier die Peakboard Basics erklären und zeigen, wie Sie Ihre erste Visualisierung erstellen.

Fall Sie den Peakboard Designer noch nicht heruntergeladen haben, finden Sie hier den passenden Link zum kostenlosen Download. Der Peakboard Designer ist eine Desktopanwendung für Windows Computer, ggf. benötigen Sie Installationsberechtigungen von Ihrem System-Administrator.

Wenn Sie die ersten Schritte lieber als Bewegtbild ansehen möchten, finden Sie in unseren Videotutorials das passende Video. Dort finden Sie auch weitere hilfreiche Erläuterungen rund um Peakboard.

Willkommen im Designer

Nach dem ersten Öffnen von Peakboard befinden Sie sich im Start-Dialog. Hier finden Sie nützliche Links zu den Peakboard Hilfeseiten (1) oder den Videotutorials und Sie finden eine Reihe von Templates (2), die den Einstieg so einfach wie möglich machen sollen. Die Templates dienen als Beispiel und können als Basis für Ihre persönliche Visualisierung verwendet werden.

Peakboard Get Started Dialog

Es gibt Templates für unterschiedliche Anwendungsfälle. Über die Button ‘Mehr anzeigen…’ (3) erhalten Sie Zugriff auf weitere Templates und Beispieldateien, welche das Arbeiten mit Skripten erklären. Für den Einstieg möchten wir allerdings ohne ein Template beginnen. Wählen Sie hierzu ‘Start from scratch’ (4), um mit einer leeren Visualisierung zu beginnen.

Struktur des Peakboard Designers

Nun sind Sie richtig im Peakboard Designer angekommen. Der Peakboard Designer ist in 5 Hauptbereiche aufgeteilt. Es gibt das Menüband oben mit Grundfunktionen (1), den Peakboard Explorer auf der linken Seite (2), den Arbeitsbereich – auch Canvas genannt – in der Mitte (3), die Elementübersicht auf der rechten Seite (4) und darunter die Attributleiste (5).

Peakboard Designer Overview

Menüband oben (Ribbon Bar)

Im oberen Menü sind Grundfunktionen des Designers hinterlegt. Hier können Sie eine Vorschau Ihrer Visualisierung öffnen (1) und die erstellte Visualisierung auf eine Peakboard Box laden (2). Über den weiteren Tab “Einstellungen” (3) können Sie grundlegende Einstellungen zu Ihrer Visualisierung vornehmen (Titel, Beschreibung, Zeitserver) oder ein Update der Software durchführen.

Peakboard Designer Ribbon Bar

Peakboard Explorer

Auf der linken Seite sind alle Elemente der Visualisierung aufgelistet. Dies ist die generelle Übersicht, welche Elemente in Ihrer Visualisierung vorhanden sind. Der Explorer funktioniert wie eine Ordnerstruktur. Es gibt Ordner für unterschiedliche Bereiche. Hier werden alle Datenquellen, Dataflows, Variablen, Skripte und Ressourcen in den jeweiligen Ordnern angezeigt. Unter dem letzten Punkt ‘Bildschirme’ finden Sie eine Auflistung aller vorhandenen optischen Elemente auf Ihrem Arbeitsbereich. Da wir noch keine Elemente hinzugefügt haben sind die Ordner im Moment noch leer.

Peakboard Designer Explorer

Ähnlich wie im Windows File Explorer können Sie mit einem Rechtsklick verschiedene Aktionen auf die Ordner durchführen – alternativ funktioniert dies mit klick auf den ‘…‘-Button. Öffnen Sie zum Beispiel den Menüpunkt ‘Bildschirmgröße bearbeiten’ mit einem Rechtsklick auf den ‘Bildschirme’ Ordner. Hier können Sie die Größe der Visualisierung definieren. Für dieses Beispiel können Sie diese auf den Werten 1920x1080 (Full HD) belassen. Die Visualisierung wird automatisch auf die Auflösung des angeschlossenen Bildschirms skaliert, das Seitenverhältnis sollte allerdings passen.

Oberflächenelemente

Auf der rechten Seite finden Sie eine Übersicht über vorhandene Oberflächenelemente – auch Controls genannt. Mit diesen Elementen können Sie Ihre Daten visualisieren. Es gibt für unterschiedliche Anwendungsfälle vorgefertigte Elemente die Sie verwenden und anpassen können. Dies beginnt mit einfachen Textfeldern, Tabellen, über einfache Diagramme (Kreis, Linien, Balken, etc.) bis hin zu anspruchsvollen, kombinierbaren Diagrammen (Erweitertes Diagramm) und wiederholbaren Oberflächenpatterns wie die Listen- oder Tileansicht. Alle Elemente können entweder per Drag and Drop auf den Arbeitsbereich gezogen oder mit einem Doppelklick hinzugefügt werden.

Peakboard Designer – Controls

Attribute

Unterhalb der Oberflächenelemente finden Sie die Attributübersicht. Hier werden für das aktuell aktive Element die jeweiligen einstellbaren Parameter und Attribute aufgelistet. Diese Parameter sind für jedes Element unterschiedlich. Probieren Sie zum Beispiel mal aus, mit einem Rechtsklick auf Bildschirme (im Paketexplorer links) einen weiteren Bildschirm hinzuzufügen. Anschließend klicken Sie auf einen der Bildschirme. Nun können Sie für die Bildschirme in den Attributen die Bildschirmdauer festlegen. Diese Bildschirmdauer definiert, wie lange der jeweilige Bildschirm sichtbar bleibt, bevor der darauffolgende Bildschirm angezeigt wird.

Peakboard Designer – Attribute

Visualisierung erstellen

Nun haben Sie eine Übersicht über die wichtigsten Bereiche des Designers. Nun ist es an der Zeit, Ihre erste Visualisierung zu erstellen. Fügen Sie dazu per Drag and Drop ein Textfeld aus den Oberflächenelementen rechts hinzu.

Nun können Sie in den Attributen verschiedene Einstellungen für das Element definieren. Passen Sie das Element Ihren optischen Vorstellungen an. Definieren Sie die gewünschte Schriftart, die Ausrichtung oder den Hintergrund. Definieren Sie einen ‘Text’, welcher angezeigt werden soll. Dieser wird später durch einen Datensatz ersetzt.

Peakboard Designer – Controls

Fügen Sie als zweites Element ein ‘Gauge-Diagramm’ in der Gruppe ‘Diagramm’ hinzu, Linear oder Rund spielt keine Rolle. Auch hier können Sie verschiedene Eigenschaften wie Größen, Farben, etc. einstellen.

Ressourcen und Bilder verwenden

Sie können für Ihre Visualisierung unterschiedliche Dateitypen verwenden. Es können zum Beispiel Bilddateien (JPG oder PNG), PDFs oder eine Datenquelle als Excel-Datei eingebunden werden. Um eine Bilddatei als Logo in Ihrer Visualisierung zu verwenden, ziehen Sie einfach eine Bilddatei auf den Peakboard Explorer oder rufen Sie das Ordnermenü des Ressourcen Ordners auf und fügen Sie eine lokale Ressource hinzu. Nun ist die Datei dem Paket hinzugefügt. Anschließend können Sie die Datei per Drag and Drop aus dem Peakboard Explorer auf den Arbeitsbereich ziehen – achten Sie darauf, auf eine freie Fläche zu ziehen. Nun können Sie Größe und Position bestimmen. Für andere Datenformate funktioniert der Vorgang sehr ähnlich.

Peakboard Designer – Drag&Drop

Datenquelle verbinden

Mit Peakboard können Sie ganz unterschiedliche Datenquellen verwenden. Von Datenformaten wie CSV, JSON und XML, Datenbanken und SAP über Social Media bis hin zu Maschinen-, Förderanlagen- und Sensoreninformationen wie Siemens S7 und OPC UA. Weitere Informationen zu den Datenanbindungen finden Sie hier.

In diesem Beispiel verwenden wir eine der einfacheren Datenquellen und zwar eine Microsoft Excel Datei. In diesem Beispiel wird die Excel Datei (Download) direkt in das Paket geladen. Die Excel Datei enthält vier Produkte mit fünf Eigenschaften: Titel, Produktnummer, Lagermenge, Mindestbestand und Lagerkapazität. Laden Sie die Datei herunter und fügen Sie sie, genau wie das Bild vorher, Ihrer Visualisierung per Drag and Drop hinzu. Nun liegt die Datei als Ressource im Paket.

Wenn Sie später Excel Dateien von anderen Speicherorten einbinden wollen, können Sie hier erfahren wie das geht.

Peakboard Designer – Excel Added

Anschließend müssen sie noch die Ressource als Datenquelle hinzufügen. Klicken Sie hierzu auf der linken Seite den Ordner ‘Daten’ mit Rechtsklick oder klicken Sie auf den ‘…’ Button und wählen Sie im Menü ‘Datenquelle hinzufügen’ und ‘Excel’ aus. Vergeben Sie nun einen Namen für die Datenquelle ‘Excel_File’ und wählen Sie unter Dokument die hochgeladene Excel Datei aus.

Peakboard Designer – Add Data Source

Nun können Sie definieren, welches Arbeitsblatt verwendet werden soll und ob Überschriften in der ersten Zeile vorhanden sind, wie in diesem Fall. Mit OK können Sie die Datenquelle speichern.

Voilà, Sie haben Ihre erste Datenquelle verbunden.

Daten und Element verbinden

Nun fehlt noch der letzte Schritt, Sie müssen die Datenquelle mit einem Element verbinden. Wählen Sie das Element im Arbeitsbereich aus, in diesem Fall das Textelement. Auf der rechten Seite unter den Attributen finden Sie das Attribut ‘Text’. Klicken Sie in dieser Zeile auf den ‘…‘-Button (1).

Peakboard Designer – Add Data Source

Im geöffneten Fenster können Sie nun die Datenquelle auswählen und die gewünschte Spalte (Title) und Zeile (1) auswählen, welche Sie verwenden möchten. Verwenden Sie für dieses Beispiel die Zeile 0 und die Spalte ‘Title’ für die Überschrift. Beachten Sie, dass in der Informationstechnik bei 0 angefangen wird zu zählen, daher ist Zeile 0 die erste Zeile. Die Zeile mit den Überschriften wird nicht beachtet. Bestätigen sie mit OK.

Peakboard Designer – Add Data Source

Nun wird Ihnen der Inhalt der einen Zelle Ihrer Datenquelle innerhalb der Textbox angezeigt.

Nun können Sie noch die Datenquelle mit dem Gauge-Diagramm verbinden. Klicken Sie in der jeweiligen Spalte in den Attributen auf den ‘…‘-Button und wählen Sie jeweils die Excel Datenquelle aus. Definieren Sie für das Feld ‘Daten / Wert’ (1) die Spalte ‘Stock_Quantity’, für das Feld ‘Minimum’ (2) die Spalte ‘Min_Quantity’ und für ‘Maximum’ (3) die Spalte ‘Storage_Capacity’.

Peakboard Designer – Filled Gauge

Preview

Sie haben es geschafft, Ihre erste Peakboard Visualisierung ist fertig und Sie können das Ergebnis mit dem ‘Vorschau’-Button (1) ansehen. Diesen finden Sie im oberen Menüband unter dem Punkt ‘Startseite’.

Peakboard Designer – Preview Button

Es öffnet sich ein neuer Dialog, welcher das Ergebnis zeigt. Diese Visualisierung können Sie nun auf eine Box übertragen.

Nächster Schritt

Wenn Sie bereits eine Peakboard-Box besitzen können Sie auf der folgenden Seite eine Erklärung finden, wie Sie die Box anschließen, verbinden und eine Visualisierung auf die Box laden können. Lesen Sie dazu den Artikel: Anschließen und die erste Visualisierung übertragen.

Wir wünschen Ihnen viel Spaß und Erfolg mit Peakboard. Sollten Sie Probleme mit dem Peakboard Designer haben, zögern Sie nicht mit uns in Kontakt zu treten. Alle wichtigen Information dazu finden Sie auf folgender Seite.