Tutorials

Peakboard Designer - Die Basics

Dieses Tutorial benötigt keinerlei Vorkenntnisse. Es zeigt die allerersten Schritte mit Peakboard und erklärt einige theoretische Basics, die man verstanden haben muss, um dann später komplexere Visualisierungen zu bauen. Die grundsätzliche Vorgehensweise ist aber immer dieselbe: Die Visualisierung wird mit Hilfe des Peakboard-Designers gestaltet. Ein Design – oder auch Board genannt – wird dann auf eine oder mehrere Peakboard-Boxen übertragen, auf dem es autark läuft. Alle Artefakte wie Bilder, Videos usw. werden zur Übertragung in ein Package gepackt. Diesen Vorgang nennt man Deployment. Den kompletten Ablauf zeigt dieses Tutorial. Für den Fall, dass Sie noch keine Peakboard-Box besitzen, reicht auch erstmal die Designer-Software, die Sie auf unserer Homepage runterladen können. Das Übertragen des Designs auf die Box fällt dann natürlich weg – macht aber nichts, weil man es auch einfach als Preview auf dem eigenen Rechner betrachten kann.

Das Installationsprogramm funktioniert wie jedes andere Installationsprogramm auch und legt das Designer-Programm im Installationsordner ab. Um den Designer zu starten, können Sie auf das Programm-Icon klicken oder auf die Windows-Taste und dann „peak“ eintippen. Windows 10 findet den Verweis dann. Achtung! Starten Sie bitte nicht Peakboard.Runtime-App. Dazu kommen wir später.

image_1

Im gestarteten Designer sehen Sie nun auf der linken Seite den Package-Explorer, also alle Elemente, die später auf die Peakboard-Box übertragen werden. In der Mitte ist das leere Panel, das wir nun mit Leben füllen wollen. Der rechte obere Bereich sind Controls oder visuelle Elemente, die aus der Toolbox per Drag and Drop auf das Panel gezogen werden können. Rechts unten können Sie Eigenschaften des Panel-Elements verändern, das gerade markiert ist.

image_1

Wir wollen mit einem einfachen Textblock starten. Ziehen Sie mit der Maus ein Text-Control aus der Toolbox auf das Panel.

image_1

Unten rechts können Sie im Eigenschaftsfeld nun den Textblock anpassen, z.B. den Font auswählen (wie man einen neuen Font hinzufügt erfahren Sie später) und noch viel wichtiger: Den Inhalt mit einer sinnvollen Nachricht füllen.

image_1

Um das Panel um ein Bild zu ergänzen, müssen wir das Bild als Ressource hinzufügen. Im Package Explorer auf der linken Seite mit der rechten Maustaste auf Resources klicken und dann auf Add Resource. Sie können nun ein Bild von ihrem lokalen PC aussuchen, z.B. ein schönes Urlaubsfoto, ein Firmenlogo oder ein Hundewelpe. Das Bild erscheint dann als Eintrag unter dem Ressourcen-Zweig.

image_1

image_1

Um das Bild nun auf das Panel zu bekommen, ziehen Sie per Drag and Drop ein Image-Control von der Toolbox auf das Panel, so wie wir das mit dem Textfeld gemacht haben. Markieren Sie das neue erstellte Image-Control und klicken Sie auf die drei Punkte in den Eigenschaften unten rechts. Dann öffnet sich der Dialog zum Aussuchen einer Ressource so wie im Screenshot gezeigt. Sie haben nun das Image-Control mit der Ressource verknüpft.

image_1

Alternativ dazu können sie auch direkt die Ressource auf das Panel ziehen.

Sie können nun die beiden Elemente – das Textfeld und das Bild – noch etwas hübscher anordnen. Die Hilfslinien, die automatisch eingeblendet werden, helfen Ihnen dabei die Elemente so zu platzieren, dass es gut aussieht.

image_1

Um nun zu erfahren, wie ihr fertiges Design später auf dem Monitor aussieht, klicken Sie in der Toolbar auf Preview. Es öffnet sich das Preview-Fenster. In unserem Fall ist das noch nicht ganz so spannend, weil wir ja nur unveränderliche Inhalte benutzt haben. Aber in späteren Beispielen werden wir Boards bauen, die Interaktion oder dynamische Daten enthalten. Um die Dynamik zu sehen und auszuprobieren, braucht man entweder die Preview-Ansicht oder muss das Board auf eine Box übertragen.

image_1

Unter dem folgenden Link erfahren Sie mehr darüber, wie das neu erstellte Design auf die Peakboard-Box übertragen und aktiviert wird:

Erste Schritte mit der Peakboard-Box