b.a.b-technologie gmbh ThemeEditor Dokumentation

Transkript

1 b.a.b-technologie gmbh ThemeEditor Dokumentation Anleitungsversion IV Stand 03/2013 Datum: 18. April 2013 DE

2 Inhaltsverzeichnis b.a.b technologie gmbh im INHOUSE Dortmund Rosemeyerstr Dortmund Tel.: +49 (0) Fax.: +49 (0) b.a.b-technologie gmbh

3 Inhaltsverzeichnis INHALTSVERZEICHNIS 1 Einführung Allgemein Theme Download vom eibport Aufbau und Ordnerstruktur der Themes Grafiken bearbeiten Sets Set hinzufügen Set entfernen Farben für das Theme festlegen Speicher und Laden von Themes Themes verschlüsseln Import des Themes in den eibport Importierte Theme löschen Ergebnisse b.a.b-technologie gmbh 3

4 Inhaltsverzeichnis Abbildungsverzeichnis Abbildung 1: ThemeEditor...5 Abbildung 2: Theme Download...6 Abbildung 3: eibport Auswahl...6 Abbildung 4: Auswahl des Theme Typs...6 Abbildung 5: Theme Details...7 Abbildung 6: Aufbau der Theme Typen...7 Abbildung 7: Ordnerstruktur HIC (Control S)...8 Abbildung 8: Editor Funktionen...9 Abbildung 9: Taster mit neuen Grafiken...9 Abbildung 10: Neuer Taster Abbildung 11: Neues Set hinzufügen Abbildung 12 neues Set ohne Grafiken Abbildung 13 Taster mit zwei verschiedenen Sets Abbildung 14 Set löschen Abbildung 15 Theme Farben für HomeInformationCenter festlegen Abbildung 16 Theme Farben für Visualisierung und Editor festlegen Abbildung 18 Verschlüsseltes Theme. Passwortdialog# Abbildung 18 Importieren eines Themes Abbildung 19 Import Dialog eines Themes Abbildung 20 Theme wird importiert Abbildung 21 Theme löschen Abbildung 22 Grafiken für das neue Set b.a.b-technologie gmbh

5 Einführung 1 EINFÜHRUNG Mit dem ThemeEditor ist es möglich alle Icons und Grafiken die im eibport verwendet werden, gegen eigene zu tauschen. Damit kann der Kunde eine eigene Bibliothek entwerfen um sich so die Visualisierung an den eigenen Geschmack anzupassen. 2 ALLGEMEIN Mit dem ThemeEditor können zwei Typen (von Themes) konfiguriert werden. Editor und Visualisierung und Control S (HomeInformationCenter). Das Editor und Visualisierung Theme umfasst (fast) alle Visualisierungselemente und Icons im Visualisierungs- und Job-Editor des eibports. Das Control S (HomeInformationCenter) Theme beinhaltet alle Visualisierungselemente für die Control S (HomeInformationCenter) Visualisierung. Abbildung 1: ThemeEditor Abbildung 1 zeigt den ThemeEditor nach dem Programmstart. b.a.b-technologie gmbh 5

6 Theme Download vom eibport 3 THEME DOWNLOAD VOM EIBPORT Als ersten Schritt können Sie das Original eibport Theme in den ThemeEditor laden, damit Sie lernen ein eigenes Theme zu entwerfen. Unter dem Menüpunkt Datei wird das Theme mit dem Befehl Download Theme vom eibport heruntergeladen (Abbildung 2). Natürlich können Sie auch ein vorgefertigtes Theme öffnen. Menüpunkt Datei mit dem Befehl Theme öffnen öffnet das vorgefertigte Theme. Die Theme Dateien haben die Dateiendung.thm. Abbildung 2: Theme Download Der Download des Themes benötigt die IP-Adresse und den aktuellen http-port des eibports, von dem das Theme geladen werden soll. Abbildung 3: eibport Auswahl Als nächstes können Sie zwischen den zwei erwähnten Theme Typen auswählen. Sollten Sie aber schon eigene Themes in den eibport geladen haben (egal welchem Typs), werden diese auch in dieser Auswahl aufgelistet. Abbildung 4: Auswahl des Theme Typs 6 b.a.b-technologie gmbh

7 Theme Download vom eibport Als letzter Schritt des Downloads müssen Sie das Theme personalisieren. Sie können das Theme benennen und einen Autor eintragen (Abbildung 5). Abbildung 5: Theme Details 3.1 AUFBAU UND ORDNERSTRUKTUR DER THEMES Wie bereits erwähnt gibt es zwei Theme Typen. Der erste Typ beinhaltet die Grafiken für Visualisierung und Editor, der zweite die Grafiken für die Control S (HomeInformationCenter) Visualisierung. Je nach Theme Typ ist die Ordnerstruktur anders aufgebaut. Abbildung 6 zeigt einen Bildschirmausschnitt auf dem die Ordnerstruktur der beiden Themes zu sehen ist. In der rechten Hälfte sehen Sie die Grafiken z.b. Taster aus dem Visualisierungseditor und auf der linken Hälfte die Kategorie oder Elementeübersicht. Visualisierung und Editor Control S (HomeInformationCenter) Abbildung 6: Aufbau der Theme Typen b.a.b-technologie gmbh 7

8 Theme Download vom eibport Der ThemeEditor Typ Visualisierung und Editor (Abbildung 6): Der Name der Ordner gibt einen Hinweis, um welche Kategorie von Grafiken es sich handelt. Wird z.b. der Ordner Editor auf der linken Seite ausgewählt springt die rechte Seite auf die entsprechende Grafik in der Liste. Alle Grafiken werden in drei Bereiche aufgeteilt: Editor Belegungsplanuhr und Visualisierung Der ThemeEditor Typ Control S (HomeInformationCenter) (Abbildung 6): Die Aufteilung der Grafiken ist hier anders (alle Grafiken kommen in drei verschieden Größen vor): Allgemein 50x50 Pixel 100x100 Pixel 150x150 Pixel Abbildung 7: Ordnerstruktur HIC (Control S) 8 b.a.b-technologie gmbh

9 4 Grafiken bearbeiten GRAFIKEN BEARBEITEN Jede Grafik besitzt die Funktion Export (lokal abspeichern der Grafik zur weiteren Bearbeitung mit externen Grafikprogrammen) und Replace (Abbildung 8 orangener Pfeil) (diese Grafik mit einer anderen Grafik ersetzen). Achten Sie auf die eindeutige Beschreibung der Elemente damit Sie die neuen Grafiken richtig zuordnen. Der ThemeEditor kann neue zu große Grafiken auf die richtige Größe skalieren. Wenn Sie aber die Möglichkeit haben mit einer professionellen Grafiksoftware die Grafiken im Vorfeld schon auf die richtige Größe zu skalieren, erreichen Sie ein qualitativ besseres Ergebnis, als wenn der ThemeEditor die Grafiken skaliert. Die Größe der Grafiken wird für jede Grafik angegeben (Abbildung 8) Abbildung 8: Editor Funktionen Als Beispiel tauschen wir die Grafiken für Button On, Button Off (Abbildung 8). Um die Grafiken auszutauschen, verwenden wir die Funktion Replace (Abbildung 8 orangene Pfeile). Achten Sie bitte auf die Beschreibung (Abbildung 8 blaue Pfeile) der Grafiken. Sie erklären die Funktionen für die diese Grafik steht. Mit klick auf Replace (Abbildung 9 orangener Pfeil) öffnet sich die Dateiauswahl hier kann eine Grafik für das Objekt ausgewählt werden, in diesem Fall dem inaktiven Taster. Abbildung 9: Taster mit neuen Grafiken Nachdem die neuen Grafiken ausgetauscht wurden, können Sie die neue Grafik für das Visualisierungselement Taster prüfen. b.a.b-technologie gmbh 9

10 Grafiken bearbeiten Abbildung 10: Neuer Taster 10 b.a.b-technologie gmbh

11 Sets 5 SETS Einige Visualisierungselemente bieten die Möglichkeit zusätzliche Sets hinzuzufügen. Als Set bezeichnet man einen zusätzlichen Grafiksatz für ein Visualisierungselement. Das bedeutet, Sie können in Ihrem Theme für den Taster mehrere Grafiken (z.b. Steckdose Schalten) hinzufügen, wobei die selbe Funktion ausgeführt wird. Jedes Visualisierungselement das die Schaltfläche Add New Set (Abbildung 11 orangener Pfeil) besitzt, unterstützt mehr als ein Set. 5.1 SET HINZUFÜGEN Dem Standardtaster wird zu den neuen Standard Grafiken nun auch ein zusätzliches neues Set hinzugefügt. Mit der Schaltfläche Add New Set (Abbildung 11 orangener Pfeil) öffnet sich ein Fenster in dem das neue Set als erstes benannt werden muss. Abbildung 11: Neues Set hinzufügen Ist ein Set neu hinzugefügt besitzt es keine Grafiken (Abbildung 12). Um dem neuen Set Grafiken hinzuzufügen, gehen Sie wie unter Kapitel 4 beschrieben, mit der Replace Funktion, vor. b.a.b-technologie gmbh 11

12 Sets Abbildung 12 neues Set ohne Grafiken Abbildung 13 zeigt uns den Button On/Off mit dem gerade erstellten zweiten unterschiedlichen Set. Abbildung 13 Taster mit zwei verschiedenen Sets 12 b.a.b-technologie gmbh

13 Sets 5.2 SET ENTFERNEN Möchten Sie ein Set wieder entfernen, weil es Ihnen nicht gefällt oder nicht mehr benötigt wird, klicken Sie auf Remove This Set des entsprechenden Grafiksatz (Abbildung 14 Orangener Pfeil). Abbildung 14 Set löschen b.a.b-technologie gmbh 13

14 Farben für das Theme festlegen 6 FARBEN FÜR DAS THEME FESTLEGEN Den beiden Theme Typen können auch Farben vorgegeben werden, die für das Visualisierungsprojekt verwendet werden sollen. Die beiden nachfolgenden Abbildungen (Abbildung 16 und Abbildung 17) zeigen die Auswahlfenster für die Visualisierungsprojekt Farben. Folgende Farben können für die Themes festgelegt werden: Seitenhintergrund (Einfarbig, Farbverlauf) Elementhintergund Elementvordergrund Textfarbe Abbildung 15 Theme Farben für HomeInformationCenter festlegen Abbildung 16 Theme Farben für Visualisierung und Editor festlegen 14 b.a.b-technologie gmbh

15 Speicher und Laden von Themes 7 SPEICHER UND LADEN VON THEMES Ist das Theme komplett, wird es abgespeichert um über den Visualisierungseditor in den eibport hoch geladen zu werden. Der Speichern Dialog wird unter Datei/ Theme speichern aufgerufen. Das Datei Menü ist auf der Abbildung 2 zu sehen. Über Datei/ Theme öffnen wird ein schon vorhandenes Theme geöffnet. Siehe Abbildung THEMES VERSCHLÜSSELN Es ist auch möglich Themes mit einen Passwort vor Veränderung und Benutzung zu schützen. Verschlüsselte Themes unterscheiden sich durch die Dateiendung. Normal abgespeicherte Themes haben die Dateiendung.thm. Verschlüsselte Themes die Dateiendung.thx! Dazu wird das Theme mit der Funktion File/Save Encrypted Theme abgespeichert (Abbildung 2). Nachdem Sie einen Namen (unter dem das Theme gespeichert werden soll) eingetragen haben, (siehe nachfolgende Abbildung) können Sie im nächsten Fenster die Passwörter vergeben. Abbildung 17 Verschlüsseltes Theme. Passwortdialog# Das Master Passwort wird verwendet um die verschlüsselte Theme in dem ThemeEditor zu bearbeiten. Um die Theme in den eibport hochzuladen wird das User Passwort benötigt. Es ist auch möglich ein Theme, mit der Angabe einer eibport Serial Nummer, explizit nur für einen eibport abzuspeichern. Wird keine Seriennummer angegeben kann dieses Theme in alle eibports hochgeladen werden. Dabei wird aber immer das User Passwort benötigt. Das letzte Feld Customer Info ist optional kann für Benutzerinformationen verwendet werden. Verschlüsselte Themes werden über Datei/Verschlüsseltes Theme öffnen in den ThemeEditor geladen. b.a.b-technologie gmbh 15

16 Import des Themes in den eibport 8 IMPORT DES THEMES IN DEN EIBPORT Das neu erstellte Theme wird über den Visualisierungseditor in den eibport importiert. Mit dem Menüpunkt Extras/Theme wird der Theme Import Dialog geöffnet (Abbildung 18 orangener Pfeil).Zu diesem zeitpunkt ist noch der alte Grafiksatz aktiv (Abbildung 18 blauer Pfeil). Abbildung 18 Importieren eines Themes Mit der Funktion Theme Laden (für jeden Theme Typen) öffnet sich ein Dateiauswahldialog in dem Sie die Theme Datei auswählen und öffnen. Abbildung 19 Import Dialog eines Themes Nach dem Öffnen der Theme Datei wird der Import gestartet (Abbildung 21). 16 b.a.b-technologie gmbh

17 Import des Themes in den eibport Abbildung 20 Theme wird importiert Nach dem Import MUSS der Visualisierungseditor neu gestartet werden. b.a.b-technologie gmbh 17

18 Import des Themes in den eibport 8.1 IMPORTIERTE THEME LÖSCHEN Um die geladene Themes zu löschen öffnen Sie das Theme Dialogfenster. Das Importierte Theme wird mit der Funktion Theme Löschen (Abbildung 21 orangener Pfeil) wieder aus dem eibport entfernt. Alle Grafiken werden gegen die Standard Grafiken ausgetauscht. Wenn alle Themes vom eibport entfernen werden sollen, funktioniert das für beide Themes gleichzeitig mit der Funktion Zurücksetzten (Abbildung 21 blauer Pfeil) gemacht. Abbildung 21 Theme löschen 18 b.a.b-technologie gmbh

19 9 Ergebnisse ERGEBNISSE In dem neu gestarteten Visualisierungseditor ist nun die Grafik für den Taster geändert worden. Das zusätzlich angelegte Set für den Taster (Power Jack) kann über das Pull Down Menü Grafiksatz (Abbildung 22 blauer Pfeil) ausgewählt werden. Somit erhält das Visualisierungselemente ein anderes Aussehen z.b. Taster für Steckdose, Türöffner, Klingel,. Abbildung 22 Grafiken für das neue Set b.a.b-technologie gmbh 19