UCI Editor: Anpassung
Video Transkript
00:08
Nachdem Sie gelernt haben, wie eine Sie eine UCI erstellen und bearbeiten,
00:11
müssen Sie die Oberfläche natürlich noch mit Inhalten füllen.
00:13
Wie gesagt, Sie können Bedienelemente entweder per Drag-and-Drop oder per
00:18
Kopieren und Einfügen aus dem Schema in die UCI einfügen.
00:22
Komponenten lassen sich jedoch nicht einfach so in die UCI einfügen:
00:26
Stattdessen müssen Sie die Steuerungselemente der
00:29
Komponenten hinzufügen – so viele oder so wenige, wie Sie wollen.
00:32
In der UCI sind alle bekannten Grafiktools verfügbar.
00:35
Sie können alles Mögliche erstellen: Textfelder... Header... Gruppenfelder... und Polygone...
00:42
Wenn Sie diese Tools noch nicht kennen, empfehle ich unsere Videos zur Einführung in die Software.
00:47
Der UCI Editor bietet zudem viele professionelle Schriftarten, alle jeweils in mehreren Stilen.
00:53
Wenn Sie ein Objekt einfärben wollen, können Sie im Farbrad einen Farbton auswählen
00:59
und anschließend die Helligkeit und Sättigung einstellen – oder Sie geben
01:05
einfach direkt RGB- oder Hexadezimalwerte ein.
01:09
Die zuletzt genutzten Farben finden Sie unter „Design Colors“.
01:14
Sie haben bereits die meisten Optionen für das Anpassen der Größe,
01:17
Farbe, Beschriftung und Icons eines Buttons kennengelernt.
01:21
Aber eine Eigenschaft haben wir uns noch nicht angeschaut: Den „Button Style“.
01:26
Standardmäßig haben die meisten Buttons den Stil „Gloss“.
01:29
Hierbei ist das obere Drittel der Buttons etwas heller. Sie können „Flat“ auswählen,
01:35
um den Button einfarbig zu gestalten, oder... Sie wählen „Image“ aus.
01:40
Dann können Sie eine eigene Grafik hochladen und
01:44
den Button auf diese Weise durch ein Bild ersetzen.
01:46
Ein Button kann unterschiedliche Status haben: Er kann an oder aus sein,
01:52
bzw. im Status „pressed on“ oder„pressed off“,
01:55
wenn Sie ihn gerade drücken und halten, um ihn an- oder auszuschalten.
02:00
Sie können zur Verschönerung auch eigene Bilder in Ihre UCI integrieren.
02:03
Sie können PNGs, JPEGs, SVGs und andere Formate nutzen.
02:09
Dafür müssen Sie die Bilder nicht mal importieren.
02:11
Sie können einfach ein Bild vom Rechner in den UCI Editor ziehen.
02:16
Transparente Bereiche, zum Beispiel in einem PNG, werden auch in der UCI transparent dargestellt.
02:21
Mit einem Rechtsklick auf ein Objekt können Sie dessen Position in der
02:25
Z-Ebene über „Bring to Front“ und „Send to Back“ anpassen.
02:28
Wenn Sie ein Bild über einem Button positionieren, behält der Button seine Funktion,
02:34
weil das Bild nicht interaktiv ist. Dies eröffnet interessante Möglichkeiten,
02:39
wenn Sie Grafiken mit transparenten Bereichen in die UCI integrieren.
02:42
Wenn Sie beispielsweise Zugang zum Grundriss oder einem 3D-Modell einer Location haben,
02:47
können Sie transparente Bereiche in die
02:49
entsprechende Bilddatei einfügen und die Datei in der UCI nutzen.
02:53
Sie können zum Beispiel eine interaktive Karte für die Steuerung bestimmter Bereiche erstellen...
02:57
eine Zonenauswahl für PA-Durchsagen wäre auch denkbar...
03:02
oder ein personalisiertes Room-Combiner-Interface...
03:05
In all diesen Fällen können Sie einfach ein Bild über die Standard-Buttons und -Polygone legen.
03:09
Wenn Sie Bilder zu einem Design hinzufügen, werden diese als Teil der Q-SYS Datei gesichert.
03:15
Also keine Sorge: die Verlinkungen gehen nicht verloren, wenn Sie die Dateien verschieben.
03:19
An dieser Stelle sollten wir auch kurz über Bildgrößen sprechen.
03:24
Unterschiedliche Touchscreens haben
03:26
unterschiedliche Pixelabmessungen – hier sind ein paar Beispiele.
03:29
Es ist nie sinnvoll, ein Bild hinzuzufügen,
03:32
das größer ist als die Pixelabmessungen des Bildschirms, auf dem es dargestellt wird.
03:36
Touchscreens können sogar in der Leistung abfallen,
03:39
wenn Sie eine zu große Grafik in die UCI integrieren,
03:42
weil das System das Bild dann häufiger pro Sekunde neu laden muss.
03:45
Selbst wenn es sich um eine komprimierte Grafikdatei handelt,
03:49
muss Q-SYS sie dekomprimieren, um sie auf einem Touchscreen darzustellen.
03:53
Überfrachten Sie also Ihr Design nicht mit zu vielen hochauflösenden Bildern.
03:58
Wenn die UCI irgendwann sehr viele Elemente beinhaltet – so wie hier – müssen
04:02
Sie das ganze natürlich möglichst übersichtlich ordnen.
04:05
Neben der im letzten Video demonstrierten Option,
04:08
mehrere Seiten zu nutzen, gibt es noch einige andere Möglichkeiten.
04:11
Vielleicht ist Ihnen schon aufgefallen,
04:13
dass es kein Raster gibt, um Objekte punktgenau zu platzieren.
04:17
Sie können aber via Doppelklick auf den linken oder oberen Rand eigene Hilfslinien festlegen.
04:22
Dann können Sie Objekte entlang dieser Linien positionieren.
04:25
Um eine Linie zu entfernen, können Sie diese in die obere linke Ecke ziehen oder via
04:30
Rechtsklick den Punkt „Clear Guides“ auswählen.
04:32
Im Rechtsklick-Menü stehen Ihnen einige weitere Tools zur schnellen Organisation zur Verfügung.
04:37
Wenn Sie mehrere Objekte auswählen und rechts klicken, können Sie diese via
04:41
„Align“ allesamt horizontal oder vertikal an einer Linie ausrichten.
04:44
Mit der Option „Distribute“ können Sie die Objekte
04:47
gleichmäßig verteilen oder mit „Pack“ alle direkt nebeneinander ausrichten.
04:51
Sie können auch Pop-Up-Buttons einsetzen,
04:53
um den verfügbaren Platz auf dem Bildschirm effektiver zu nutzen.
04:56
Diese Buttons finden Sie im Abschnitt „Layout“ der Schema-Library.
05:00
Wenn ein Anwender einen solchen Button aktiviert, erscheint ein zuvor unsichtbares Fenster.
05:05
Sie können die Größe dieses Fensters anpassen... entscheiden, wo das Pop-Up andocken soll...
05:11
die Fensterfarbe ändern... Und Sie können
05:15
beliebig viele Bedienelemente in den Pop-Up-Bereich einfügen,
05:18
die automatisch verschwinden, wenn der Button erneut gedrückt wird.
05:21
So erhalten die Anwender Zugriff auf weitere Bedienelemente,
05:26
ohne dass die Seite überfrachtet wird oder eine neue Seite aufgerufen werden muss.
05:30
Je mehr Tools Sie kennenlernen, desto häufiger werden Sie diese miteinander kombinieren wollen.
05:35
Wir können den Anwendern zum Beispiel auf einer einzigen
05:39
Seite die Steuerung verschiedener Funktionen (Gain, Endstufenstatus etc.)
05:44
für mehrere Zonen ermöglichen, indem wir einen Pop-Up-Button
05:48
mit unserem transparenten Grundriss kombinieren.
05:52
Als nächstes beschäftigen wir uns mit der Verwendung von Ebenen.
05:55
Wenn wir im UCI Editor den Punkt „Page“ ausklappen, sehen wir,
05:58
dass wir bislang nur auf Ebene 1gearbeitet haben.
06:00
Sie können über das Plus-Icon und „Add Layer“ neue Ebenen hinzufügen.
06:06
Jede Ebene ist wie eine Glasplatte –
06:09
sie können Ebenen übereinander stapeln und bis
06:13
auf die unterste Ebene durch alle Ebenen hindurchsehen.
06:16
Wenn Sie den Punkt „Layer“ ausklappen,
06:18
erscheint eine Liste mit allen Objekten auf der jeweiligen Ebene.
06:21
Hier sehen Sie die Bilder, Buttons und Grafikelemente, die ich hinzugefügt habe.
06:26
Ich wähle jetzt meine neue Ebene aus und füge ein paar Objekte aus dem Schema hinzu.
06:33
Es sieht erstmal so aus, als ob ich sie zur selben Ebene hinzugefügt hätte –
06:37
aber wir müssen nur ein wenig genauer hinsehen, um den Unterschied zu erkennen.
06:40
Mit dieser Box können wir Ebenen und Objekte fixieren,
06:44
sodass sie nicht mehr bewegt werden können. Mit dem Button
06:47
„Show/Hide“ werden Objekte aus- oder eingeblendet.
06:51
Es kann hilfreich sein, mehrere ähnliche Bedienelemente auf einer Ebene anzuordnen
06:56
wie Sie eine UCI auf einem Touchscreen bereitstellen. Bis zum nächsten Mal!
06:57
und dann die gesamte Ebene auszublenden, um sich auf andere UCI-Bereiche zu konzentrieren.
07:01
Oder Sie fügen auf der untersten Ebene ein Hintergrundbild ein und fixieren diese Ebene,
07:06
sodass das Bild nicht versehentlich ausgewählt wird, wenn Sie andere Objekte bewegen.
07:10
Sie können die Anordnung dieser Objekte zusätzlich anpassen,
07:13
indem Sie sie mit diesen Buttons auf der Z-Achse
07:16
verschieben oder sie im UCI Editor neu positionieren.
07:20
Denken Sie daran, dass sich alle Objekte auf einer höheren Ebene
07:24
über allen Objekten niedrigerer Ebenen befinden.
07:28
Mit den Befehlen „Send to Back“ und „Bring to Front“
07:31
wird immer nur das jeweils ausgewählte Objekt innerhalb der aktuellen Ebene positioniert.
07:36
Dies verhindert zum Beispiel, dass Objekte versehentlich hinter dem Hintergrundbild landen.
07:42
Einer der größten Vorteile von Ebenen ist,
07:45
dass sie sich per Programmierung ein- und ausblenden lassen.
07:47
Die entsprechenden Befehle können Sie mithilfe des Lua Text Controllers
07:51
oder mit der Block Controller Steuerungskomponente programmieren.
07:55
Weitere Informationen dazu bekommen Sie in späteren Schulungen für Fortgeschrittene.
07:59
Sobald Sie diese Befehle kennen, können Sie Ebenen auch als Sub-Ansichten konfigurieren,
08:04
die ein- und ausgeblendet werden... oder zusätzliche
08:07
Bedienelemente anzeigen und wieder ausblenden... vieles ist möglich!
08:12
Sie haben in diesem Video Tools kennengelernt, mit denen
08:16
Sie Optik und Funktion einer UCI anpassen können. Im nächsten Video zeigen wir Ihnen,
08:21
wie Sie eine UCI auf einem Touchscreen bereitstellen. Bis zum nächsten Mal!