Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 -...

of 28 /28
Gueven Oektem CES 4 - Dokumente Individuelle Styles erstellen www.CarPC-Portal.de GoPerfect.de – Automotive-Informatics

Transcript of Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 -...

Page 1: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

Gueven Oektem

CES 4 - Dokumente Individuelle Styles erstellen

www.CarPC-Portal.de GoPerfect.de – Automotive-Informatics

Page 2: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 2

Inhalt

1. Allgemeines ...................................................................................................................................................................... 3

1.1 Surface-Editor aufrufen ............................................................................................................................................... 4

2. Grundgerüst einer Style .................................................................................................................................................... 4

3. Eine neue Surface erzeugen ............................................................................................................................................. 7

3.1 Includes nutzen und Schreib-Arbeit sparen ................................................................................................................. 9

3.2 Grundgrafiken einer Surface ...................................................................................................................................... 10

4. Surface-Objekte .............................................................................................................................................................. 11

4.1 Region / Auswahl-Bereich .......................................................................................................................................... 11

4.2 Button / Knopf ........................................................................................................................................................... 11

4.3 Label / Beschriftung ................................................................................................................................................... 13

4.3.1 Label-State-Tag / Zustandsabhängige Beschriftung .............................................................................................. 14

4.3.2 Dynamische Werte abgreifen ............................................................................................................................... 16

4.4 Marquee / Lauftext .................................................................................................................................................... 17

4.4.1 Marquee-State-Tags / Zustandsabhängiger Lauftext ............................................................................................ 17

4.5 GIF / GIF-Animation ................................................................................................................................................... 18

4.6 Flash / Flash-Animation ............................................................................................................................................. 18

4.7 Slidebar / Schieberegler ............................................................................................................................................. 19

4.8 Progressbar / Füllbalken ............................................................................................................................................ 20

4.9 Chart / Liniendiagramm ............................................................................................................................................. 22

4.10 Gauge / Tacho ........................................................................................................................................................... 22

4.11 Graphical Gauge / Grafischer Tacho .......................................................................................................................... 23

4.12 Plate / Schild .............................................................................................................................................................. 23

4.13 ExtProg / externes Programm .................................................................................................................................... 24

4.14 Webbrowser / Internet-Fenster................................................................................................................................. 24

4.15 Timer / Zeitnehmer .................................................................................................................................................... 24

5. Unity-Objekte ................................................................................................................................................................. 25

5.1 Mediaplayer ............................................................................................................................................................... 25

5.2 Picture-Preview .......................................................................................................................................................... 25

5.3 Media-Artist ............................................................................................................................................................... 25

5.4 Caller-Portrait ............................................................................................................................................................ 25

5.5 Virtual-Playlist-Image ................................................................................................................................................. 26

5.6 List-Touch-Mover ....................................................................................................................................................... 26

5.7 List-Touchbar ............................................................................................................................................................. 26

5.8 List-Alpha-Mover ....................................................................................................................................................... 26

5.9 Ein Listen-Objekt erzeugen ........................................................................................................................................ 26

6. Funktionscodes ............................................................................................................................................................... 27

6.1 Eine Surface wechseln ............................................................................................................................................... 27

6.2 Funktionsaufrufe........................................................................................................................................................ 28

Page 3: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 3

1. Allgemeines

Mithilfe von Styles wird eine Oberflächen-Dynamik ermöglicht, womit sich der Benutzer sein Programm individuell zusammenstellen kann. Mit einem eigenen Style hat der Designer Einfluss auf:

• die allgemeine Größe und Position des Programmfensters,

• die Menge an wählbaren Oberflächen (Menüs sogen. „Surfaces“),

• die Bestückung der Oberflächen mit beliebig vielen Objekten

• und die Definition der Objekte in Position, Farbe, Größe und Art.

Sämtliche Daten und Informationen einer Style befinden sich jeweils in einem eigenen Ordner, welche im Programmverzeichnis unter \styles\ abgelegt wird – hier kann es von der Frontend erfasst und zur Auswahl gestellt werden.

Eine Style ist der Überbegriff für eine komplette Oberflächengestaltung. Es besteht aus einer Sammlung von ineinander verzweigten Surfaces, die jeweils ein einzelnes Menü darstellen. Jede Surface besitzt eine eigene Strukturdatei. Diese basiert auf dem XML-Standard, wodurch es sehr einfach, schnell und flexibel möglich ist, ein einzelnes Menü zu gestalten oder zu erweitern. Es bleibt dem Style-Designer selber überlassen, in wie viele Surface-Dateien sämtliche Objekte verteilt oder dupliziert werden, welche Objekte ein-/ausgeblendet werden und wie das Erscheinungsbild dieser Objekte sein soll.

Um die Geschwindigkeits- und Strukturvorteile des XML-Standards ausnutzen zu können, empfehlen wir die Nutzung von „Portable Network Graphics“- oder JPEG- Grafikdateien. Der Vorteil liegt an der hohen Kompressionsrate, bei bestmöglicher Qualität.

Ein weiterer Grund für die Nutzung optimierter Dateiformate liegt darin, dass CES4 eine Intelligenz besitzt, die es ermöglicht jedes Menü mit nur drei Grafikdateien aufzubauen. Um den Geschwindigkeitsvorteil ausnutzen zu können, wurde die Optimierung auf diese Grafiktypen verfeinert. Bei den fertiggestellten Grafiken handelt es sich um die drei Grundgrafiken jeder einzelnen Style-Datei (bzw. Menüs). Tipps für die Erstellung dieser Grundgrafiken haben wir im separaten Dokument „Tipps für individuelle Styles“ zusammengefasst.

Page 4: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 4

Aufgrund dieser Vorteile musste auf die Fähigkeit der Transparenz bei GIF- und PNG-Grafikdateien verzichtet werden. Selbstverständlich können Sie weiterhin auch Bitmaps und GIFs nutzen.

1.1 Surface-Editor aufrufen

Der Surface-Editor ist fester Bestandteil der Frontend. Lediglich das Aufrufen der Frontend mit dem Kommandozeilen-Aufruf „\Chameleon.exe surfaceeditor“ ist nötig, um in den Editier-Modus zu gelangen. Mit dem Surface-Editor ist es möglich, fertiggestellte Grafiken mit Objekten wie Textfeldern und Listen zu belegen, Buttons zu erzeugen und Regionen mit hinterlegten Funktionen festzulegen.

2. Grundgerüst einer Style

Eine Style ist nach einer festen Struktur konstruiert. Damit das Frontend die Style und die darin enthaltenen Surfaces korrekt interpretieren kann, muss die Struktur dringend und fehlerfrei eingehalten werden. Nachfolgend gehen wir auf die Gesamtstruktur der Style-Dateien und den möglichen Attributen (Eigenschaften) der jeweiligen Surface-Objekte ein.

Jede Style besitzt eine Definitionsdatei general.style. Diese Datei enthält allgemeine Informationen der Style. Die Definitionsdatei ist recht lang und enthält grundlegende Voreinstellungen. Bei der Erzeugung einer eigene Style kann diese Definitionsdatei kopiert und die wesentlichen Details im Abschnitt [General] bearbeitet werden. Die Struktur der Definitionsdatei im Gesamten ist wie folgt:

Syntax Definitionsdatei:

[General]

name=Default Surface

copyright=GoPerfect.de

year=2013

version=4.4.0

startup=surface_main.xml

absencelog=surface_absencelog.xml

main=surface_main.xml

main2=surface_main2.xml

mediaplayer=surface_media.xml

pictures=surface_pictures.xml

notepad=surface_notepad.xml

extprogbar=surface_extprogbar.xml

extproglist=surface_extproglist.xml

messaging=surface_messaging.xml

navigation=surface_navigation.xml

telephone=surface_telephone.xml

webbrowser=surface_internet.xml

osk=osk_1.xml

[Configuration]

font=Calibri

size=25

color=#CFDFEC

color_shadow=#000000

pic_home=config_home.jpg

pic_home_selected=config_home_selected.jpg

Page 5: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 5

pic_up=config_up.jpg

pic_up_selected=config_up_selected.jpg

pic_down=config_down.jpg

pic_down_selected=config_down_selected.jpg

pic_bar=config_bar.jpg

pic_bar_selected=config_bar_selected.jpg

pic_prev=config_prev.jpg

pic_prev_selected=config_prev_selected.jpg

pic_loading=config_loading.jpg

pic_page=config_page.jpg

pic_page_pressed=config_page_pressed.jpg

pic_page_selected=config_page_selected.jpg

pic_button=config_button.jpg

pic_button_pressed=config_button_pressed.jpg

[Font]

face=Verdana

size=13

shadow=1

bold=1

alignment=2

color=#CFCFEC

color_selected=#FFCC00

color_pressed=#FD6600

color_shadow=#000000

[Minimized]

Pic1=appmina.jpg

Pic2=appminb.jpg

[Loading]

FormX=330

FormY=200

FormWidth=140

FormHeight=140

FormTransparency=230

FormBackground=appsplashback3.jpg

Animation=loading.gif

AnimationX=10

AnimationY=10

RoundCorners=32

[Confirmation]

FormX=0

FormY=200

FormWidth=800

FormHeight=200

FormTransparency=200

FormBackground=appsplashback.png

LabelFont=Arial

LabelColor=#FF0000

LabelSize=22

LabelX=0

LabelY=50

LabelWidth=800

LabelHeight=100

Button1A=appconfirm_1a.png

Button1B=appconfirm_1b.png

Button1C=appconfirm_1c.png

Button1X=0

Button1Y=120

Button2A=appconfirm_2a.png

Button2B=appconfirm_2b.png

Button2C=appconfirm_2c.png

Button2X=556

Button2Y=120

RoundCorners=0

Page 6: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 6

[Notification]

FormX=0

FormY=200

FormWidth=800

FormHeight=200

FormTransparency=200

FormBackground=appsplashback.png

LabelFont=Verdana

LabelColor=#FF0000

LabelSize=22

LabelX=0

LabelY=80

LabelWidth=800

LabelHeight=100

RoundCorners=0

[Volume]

FormX=50

FormY=200

FormWidth=700

FormHeight=140

FormTransparency=230

FormBackground=appsplashback2.jpg

VolumeImageA=volumepopupA.jpg

VolumeImageB=volumepopupB.jpg

VolumeX=60

VolumeY=50

RoundCorners=32

[Input]

FormX=0

FormY=0

FormWidth=800

FormHeight=200

FormTransparency=250

FormBackground=appsplashback.png

LabelFont=Verdana

LabelColor=#FF0000

LabelSize=22

LabelX=0

LabelY=30

LabelWidth=800

LabelHeight=40

Button1A=appconfirm_1a.png

Button1B=appconfirm_1b.png

Button1C=appconfirm_1c.png

Button1X=0

Button1Y=120

Button2A=appconfirm_2a.png

Button2B=appconfirm_2b.png

Button2C=appconfirm_2c.png

Button2X=556

Button2Y=120

RoundCorners=0

Füllen Sie die Attribute der Definitionsdatei mit der Bezeichnung der Style, dem Designernamen, des Design-Zeitraumes und der Style-Version. Um der Frontend vorzugeben, welche Surface als Hauptmenü gilt, muss der Name der gewünschten Surface-Datei im Attribut Startup eingetragen werden. Das On-Screen-Keyboard ist fester Bestandteil der Frontend. Auch hier ist anzugeben, welche Surface als Startoberfläche für die OSK zu laden ist. Tragen Sie diese im Attribut osk ein. Die Definitionsdatei bietet im Abschnitt [Font] die Möglichkeit, globale Formatierungs-Eigenschaften für Textfelder (Labels, etc.) festzulegen. Hierdurch ist es möglich, bei der Definition von Textfeldern

Page 7: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 7

in allen Surface-Dateien gleichbleibende Formatierungseigenschaften wegzulassen und Schreibarbeit zu sparen. Die Frontend wählt in diesem Falle die global definierten Formatierungseigenschaften aus der Definitionsdatei der ausgewählten Style. Lesen Sie mehr hierzu u.a. im Abschnitt „Ein Label erzeugen“. Innerhalb der Frontend werden programmweit Hinweise über aktuelle Geschehnisse eingeblendet. Diese Hinweise werden in einem Balken dargestellt, dessen Oberfläche ebenfalls in der Definitionsdatei festgelegt wird. Das eingeblendete Bestätigungs- und Text-Eingabefeld werden in der Definitionsdatei festgelegt. Diese werden Confirmation, Notification, Volume und Input genannt.

3. Eine neue Surface erzeugen Um eine neue Surface zu erzeugen, öffnen Sie einen Texteditor, erzeugen den nachfolgenden Inhalt und speichern die Datei unter einem beliebigen Dateinamen mit der Dateiendung .xml ab. In diesem Beispiel wählen wir den Surface-Dateinamen surface_main.xml.

Syntax Surface-Datei (Beispiel: surface_main.xml):

<surface_main>

<window state="" x="" y="" width="" height=""

width_snapped="" height_snapped="" color="" ontop=""

notforceforeground="" notfixed="" transparency="" roundcorners="" >

<normal-image>surface_main_normal.png</normal-image>

<selected-image>surface_main_selected.png</selected-image>

<pressed-image>surface_main_pressed.png</pressed-image>

</window>

</surface_main>

Jede Surface-Datei enthält Knoten, welche mit einem Beginn- und Ende-Tag definiert sind. Der Hauptknoten der Surface-Datei enthält den Dateinamen ohne die Endung .xml: in diesem Falle <surface_main>. Innerhalb dieses Hauptknotens muss der Knoten <window> enthalten sein. Dieser Knoten enthält die Konfiguration des Programmfensters. Hier besteht die Möglichkeit, dass Erscheinungsbild der Surface-Oberfläche in Größe und Position zu bestimmen. Des Weiteren werden hier die drei Grundgrafiken der Surface programmiert (siehe 3.2 Grundgrafiken einer Surface) Die Attribute dieses Tags lauten:

Attribut Beschreibung state Dieses Attribut gibt an, welches Erscheinungsbild das Fenster haben

soll. Mögliche Werte sind: 0 = Normal 1 = Minimiert 2 = Maximiert

x Horizontale Position des Fensters in Pixeln.

y Vertikale Position des Fensters in Pixeln.

width Breite des Fensters in Pixeln.

height Höhe des Fensters in Pixeln.

width_snapped Breite des Fensters in Pixeln wenn es eingeklappt ist. Ein Funktionscode ermöglicht es, das Fenster auf Wunsch ein oder auszuklappen. Ist dieses Attribut nicht gesetzt, bewirkt der Aufruf des Funktionscode auch nichts.

height_snapped Höhe des Fensters in Pixeln wenn es eingeklappt ist. Ein Funktionscode ermöglicht es, das Fenster auf Wunsch ein oder auszuklappen. Ist dieses Attribut nicht gesetzt, bewirkt der Aufruf des Funktionscode auch nichts.

Page 8: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 8

color Hintergrundfarbe des Fensters als HTML-Farbcode. ontop Gibt an, ob das Fenster sich ständig in den Vordergrund holen soll oder

nicht. Mögliche Werte sind: 1 = Immer im Vordergrund 0 = Nur im Vordergrund, wenn Fokus

notforceforeground Innerhalb der Konfiguration gibt es die Option, die Applikation immer in den Vordergrund zu holen, sollte sich die Fenster-Sichtbarkeit (Fokus) auf einer anderen Applikation befinden. Da diese Option z.B. in der Externen-Programme-Leiste oder in der Navigations-Leiste den Fokus des externen Programmes stehlen könnte, kann hier explizit befehligt werden, dass in diesem Menü kein „Force-Foreground“ ausgeführt wird: 1 = Force-Foreground ist für diese Surface deaktiviert 0 = Force-Foreground wird auch in dieser Surface ausgeführt, soweit es innerhalb der Konfiguration aktiviert worden ist.

notfixed Gibt an, ob das Fenster an die vorgegebene Position X/Y festgelegt ist, oder ob es sich vom Benutzer verschieben lässt. Klickt der Benutzer mit der linken Maustaste auf die Grundgrafik „normal“, bleibt auf der Maustaste drauf und verschiebt die Maus, wird die Position X/Y des Fensters dynamisch verändert. Dieser Wert wird außerdem in einer temporären Datei gespeichert, sodass das Fenster beim nächsten Aufruf wieder an der verschobenen Position erscheint. Das Fenster aus dem sichtbaren Bereich zu verschieben ist dabei nicht möglich: 1 = Fenster lässt sich verschieben 0 = Fenster erscheint stetig an der vordefinierten Position

transparency Durch diesen Wert erhält das Fenster eine Transparenz. Wird kein Wert angegeben, bleibt das Fenster undurchsichtig. Achtung: wird ein Fenster transparent dargestellt, kann sich die Aktualisierungsgeschwindigkeit der Oberfläche verringern. Das bedeutet, dass animierte Objekte ruckelnd dargestellt werden könnten und die Ladedauer der Oberfläche erhöht wird. 0 = Fenster vollständig durchsichtig 0-255 = Grad der Sichtbarkeit 255 = Fenster vollständig sichtbar Kein Wert = Fenster-Transparenz abgeschalten (Standard)

roundcorners Durch diesen Wert erhält das Fenster runde Ecken. Wird kein Wert angegeben, bleibt das Fenster eckig.

Da wir davon ausgehen, dass jede Surface mindestens einen oder mehr Textfelder und Regionen besitzt, werden auch die Knoten <labels> und <regions> benötigt. Grundsätzlich können jedoch nicht benötigte Knoten verworfen werden: werden auf dieser Surface z.B. keine GIF-Animationen dargestellt, kann der Knoten <gifobjects> verworfen werden. Beachten Sie beim Anlegen der einzelnen Knoten, wie auch beim Anlegen der einzelnen Tags innerhalb der Knoten, dass die Reihenfolge darüber entscheidet, welches Objekt letztendlich welche Ebenen-Position hat. Dabei lautet die Regel: der zuletzt angegebene Knoten/Tag, befindet sich über den vorher definierten Knoten/Tag. wird z.B. der Knoten <buttons> nach dem Knoten <labels> angelegt, würden, alle Label-Tags durch die Button-Tags überdeckt werden, sollten sie sich an derselben Position befinden. Mit dieser Kenntnis ist es möglich, einen dynamischen Label-Wert über ein Button zu legen, um dessen Aussage zu verstärken. Als Beispiel hierfür können wir die „externe Programme“-Funktion nehmen: wird ein externes Programm, welches der Frontend bekannt ist, im Hintergrund ausgeführt, erscheint innerhalb der Frontend ein Button, welches aussagt, dass ein externes Programm ausgeführt wird. Neben diesem Button erscheint aber auch ein dynamisches Label, in welchem die aktuelle Anzahl der ausgeführten externen Programme angegeben wird. Wir nennen diesen Label „dynamisch“, da sich der Label-Wert je nach Anzahl der externen Programme ändert. Damit dieses Label nun nicht durch den Button überdeckt wird, sondern stetig sichtbar ist, war es notwendig, die Labels-Tags innerhalb der Surface-Datei unterhalb der Button-Tags anzulegen (siehe Syntax Surface-Datei (Beispiel: surface_main.xml)).

Page 9: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 9

3.1 Includes nutzen und Schreib-Arbeit sparen

In vielen Programmiersprachen hat man die eine oder andere Möglichkeit, sich Schreibarbeit beim Anlegen und beim ändern zu sparen. Dabei gibt es die Objektorientierte Programmierung, bei der Methoden und Funktionen so weit wie möglich abstrahiert werden und einem allgemeinen Objekt zugeordnet werden, um dann nachträglich immer wieder auf dessen Methoden und Funktionen zugreifen zu können, oder eben das auslagern von sich wiederholenden Absätzen, um sie dann für eine nachträgliche Änderung an einem zentralen Ort vorfinden und sie dort nur einmalig ändern zu müssen. Genau den letzten Ansatz haben wir auch in Anlegen von Styles dieser Frontend umgesetzt: Nutzen Sie den Aufruf „include(include.regions.xml)“ an einer beliebigen Stelle der Surface-Datei, um genau an diese Position den Inhalt der angegebenen Datei (in diesem Falle include.regions.xml) einzufügen. So sparen Sie sich nicht nur Schreibarbeit, indem Sie Objekte, welche in mehreren Menüs an derselben Stelle auftauchen (z.B. Medien-Kontrollleiste), sondern haben auch die Möglichkeit, diese dann für alle Menüs einheitlich zu ändern, ohne dessen Surface-Dateien einzeln öffnen und ändern zu müssen. Sehen Sie sich die Surface-Dateien des Standard-Styles diese Frontend an – hier haben wir auf diese nützliche Funktion zurückgegriffen!

Page 10: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 10

3.2 Grundgrafiken einer Surface Eine Surface besteht grundsätzlich aus drei Grafiken. Diese Grafiken stellen die drei Grundzustände der Surface dar: Ausgangszustand, selektierter Zustand und gedrückter Zustand. Die Grafiken werden im Surface-Knoten <window> innerhalb der Tags <normal>, <selected> und <pressed> verknüpft (siehe Beispiel aus 3. Eine neue Surface erzeugen).

Die Frontend blendet im Ruhezustand die Ausgangsgrafik ein, welche je nach Benutzereingabe mit zwei weiteren Grundgrafiken „verschmelzt“ wird. Hierfür wird die Oberfläche ständig abgetastet und wenn eine Eingabe im Bereich eines Surface-Objektes erfolgt, wie z.B. eines Region-Objekts, …. ...greift die Frontend den gesamten, definierten Region-Bereich aus der zweiten Grafik ab ...und setzt diese auf die obige Ausgangsgrafik. Hierdurch wird der Eingabebereich hervorgehoben und eine Interaktion zwischen Frontend und Anwender geschaffen.

Page 11: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 11

4. Surface-Objekte

4.1 Region / Auswahl-Bereich

Bei einer Region handelt es sich um einen rechteckigen Bereich auf der Hintergrundgrafik, hinter welchem ein Funktions-Aufruf versteckt ist. Sobald mit der Maus darüber gefahren wird, färbt sich dieser Bereich mit dem selektierten Zustand der Hintergrundgrafik ein und lässt sich anklicken (siehe auch: die Funktionsweise der Grundgrafiken in Kapitel 3.2). Der Vorteil von Regionen ist der geringe Aufwand diese zu erzeugen (da keine zusätzlichen Grafiken notwendig sind) und die geringere System-Prozesslast beim Laden und Darstellen der Region (da keine Grafikdateien eingelesen und im System-Speicher abgelegt werden müssen). Eine Region ist innerhalb des Knotens <regions> zu erzeugen. Die Syntax des Region-Tags lautet:

Gesamtsyntax Region-Tag:

<region functioncode="" x="" y="" width="" height="" />

Die Attribute dieses Tags lauten:

Attribut Beschreibung functioncode Beim Anklicken wird diese Funktion innerhalb der Frontend aufgerufen.

Mögliche Funktionen sind im Abschnitt Funktions-Codes zu finden. x Horizontale Koordinate des Buttons auf der Surface in Pixeln.

y Vertikale Koordinate des Buttons auf der Surface in Pixeln.

width Breite des Buttons in Pixeln.

height Höhe des Buttons in Pixeln.

Die Werte der Attribute müssen von Anführungszeichen eingeschlossen sein.

4.2 Button / Knopf

Das Gegenstück zu Regionen sind Buttons. Diese haben den Vorteil, dass sie mehrere Zustände annehmen können. Hierdurch ist es z.B. möglich, je nach Zustand den Button komplett auszublenden oder eine andere Erscheinungsweise zu verleihen (z.B. als Zustandsanzeige aktiver Menüs (Mediaplayer), oder den Zustand der Lautstärke-Stummschaltung).

Durch ein erscheinendes Button ist es in diesem Beispiel möglich, aus dem Navigations-Menü direkt und einheitlich zur Medienwiedergabe zu wechseln, ohne vorher in das Hauptmenü wechseln zu müssen.

Buttons befinden sich im Knoten <buttons>. Innerhalb der Button-Tags muss mindestens ein <state> Tag angelegt werden. Dieser Tag mit dem Wert 0 gibt den grafischen Ausgangszustand des Buttons wieder. Werden weitere State-Tags hinzugefügt, entscheidet der dynamische Inhalt der Attribute categorie und value darüber, welcher grafische Zustand nun eintritt und welcher Funktionscode dahintersteht (siehe auch Dynamische Werte abgreifen).

Page 12: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 12

Technisch gesehen wird der aktuelle dynamische Wert mit dem Attribut value des jeweiligen <state>-Tags verglichen. Steht dem Wert eines der Operatoren < (kleiner als), > (größer als) oder <> (ungleich als) voran, wird entsprechend verglichen. Bitte beachten Sie bei der Wahl des value-Wertes die möglichen Rückwerte eines dynamischen Wertes.

Die Gesamtsyntax und die Mindestangaben für einen Button lautet:

Gesamtsyntax Button -Tag:

<button categorie="" value="" x="" y="">

<state value="0" normal-image="" selected-image=""

pressed-image="" functioncode="" functioncode_up=""

/>

...

</button>

Die Attribute des Tags lauten:

Attribut Beschreibung categorie Über die Attribute categorie und value lässt sich ein interner Wert

einholen wie z.B. „STATUSMEDIA“ von „app“. Dieser Wert entscheidet dann abhängig vom aktuellen Zustand von Value, welches der state-Tags herangezogen und dessen Grafiken geladen werden sollen. Mögliche Werte sind im Abschnitt Dynamisches Label erzeugen zu finden.

value Siehe categorie.

x Horizontale Koordinate des Buttons auf der Surface in Pixeln.

y Vertikale Koordinate des Buttons auf der Surface in Pixeln.

Die Attribute der State-Tags lauten:

Attribut Beschreibung value In diesem Attribut muss der zu vergleichende Wert enthalten sein. Beim

Vergleich stehen vier Operatoren zur Verfügung: = Wird lediglich der Wert oder ein Gleich-Operator vorangestellt, wird der aktuelle Label-Wert mit dem Wert des Attributs verglichen. < Wird ein Kleiner-Als-Operator vorangestellt, trifft der Vergleich nur dann zu, wenn der zu vergleichende Wert größer als der bisherige Label-Wert ist. > Wird ein Größer-Als-Operator vorangestellt, trifft der Vergleich nur dann zu, wenn der zu vergleichende Wert kleiner als der bisherige Label-Wert ist. <> Wird ein Ungleich-Operator vorangestellt, trifft der Vergleich nur dann zu, wenn der zu vergleichende Wert ungleich dem bisherigen Label-Wert ist.

normal-image Enthält die Ausgangsgrafik des Buttons, welche beim Zutreffen des Vergleichs dargestellt wird.

selected-image Enthält die Grafik des selektieren bzw. überfahren des Buttons, welche beim Zutreffen des Vergleichs dargestellt wird.

pressed-image Enthält die Grafik beim ausführen des Buttons, welche beim Zutreffen des Vergleichs dargestellt wird.

functioncode Wird der Button angeklickt, führt das Frontend diese Funktion aus. Mögliche Funktionsaufrufe sind im Abschnitt Funktions-Codes zu finden.

functioncode_up Ist dieses Attribut gesetzt, wird der Funktionsaufruf des Attributes „Functioncode“ beim niederdrücken des Buttons und der Funktionsaufruf dieses Attributes beim loslassen des Buttons ausgelöst. Hierdurch ist es möglich, einen Taster zu erzeugen, welches den Funktionscode nur beim niederdrücken auslöst. Nützlich ist dies z.B. für

Page 13: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 13

das Einschalten eines Relais an der RS-Karte. Mögliche Funktionsaufrufe sind im Abschnitt Funktions-Codes zu finden.

4.3 Label / Beschriftung Bei einem Label handelt es sich um einen Text, welches auf der Surface dargestellt wird. Der dargestellte Inhalt eines Labels kann entweder fest vorgegeben oder dynamisch durch die Frontend gefüllt werden. Hierbei ermittelt die Frontend anhand der Angaben in den Attributen „categorie“ und „value“, welcher Wert gewünscht ist und stellt dieses dar, soweit es vorhanden und bereits errechnet ist. Weitere Informationen zu dynamischen Werten finden Sie im Abschnitt Dynamische Werte abgreifen. Ein Label ist innerhalb des Bereiches <labels> zu erzeugen. Die Gesamtsyntax lautet:

Gesamtsyntax Label-Tag:

<label categorie="" value="" default-display_value=""

x="" y="" width="" height="" length="" border="" >

<font face="" size="" color="" shadow="" color_shadow=""

alignment="" bold=""

/>

<function functioncode="" color_selected="" color_pressed="" /> <state value="" display_categorie="" display_value=""

face="" size="" color="" shadow="" color_shadow=""

color_selected="" color_pressed="" functioncode="" alignment="" bold=""

/>

</label>

Die notwendigen Mindestangaben lauten wie folgt:

Grundsyntax Label-Tag:

<label value="" x="" y="" width="" height="">

<font face="" size="" color="" /> </label>

Die Attribute des Tags lauten:

Attribut Beschreibung categorie Dieser Wert ermöglicht es der Frontend zu entscheiden, um welche

Information es sich bei diesem Label handelt. Lautet der Wert z.B. time, befüllt die Frontend diesen Label mit der aktuellen Uhrzeit. Mögliche Labelnamen sind im Abschnitt Dynamische Werte abgreifen zu finden. Sollte hier kein Namen oder ein Name eingetragen werden, welcher nicht bekannt ist, bleibt das Label statisch und der Text-Wert im Attribut value wird fest dargestellt.

value Der hier gegebene Wert wird im Label dargestellt. Mithilfe des Value-Attributes lassen sich auch dynamische Labels definieren. Beachten Sie für Wertmöglichkeiten den Abschnitt Dynamische Werte abgreifen.

default-display_value Dieser Standardwert ist optional und kann bei einem dynamischen Wert helfen, eine aussagekräftigere Aussage zu machen, wenn der dynamische Wert nicht gesetzt ist (weil z.B. die App nicht verfügbar ist und keine Daten liefert). Wird statt einem dynamischen Wert ein statischer Text im Label definiert und der default-display_value ist gesetzt, dann wird die Ausgabe des Standardwerts bevorzugt.

x Horizontale Koordinate des Labels auf der Surface in Pixeln.

Page 14: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 14

y Vertikale Koordinate des Labels auf der Surface in Pixeln.

width Breite des Labels in Pixeln.

height Höhe des Labels in Pixeln. length Dieser Wert gibt die mögliche Länge des Label-Inhaltes an. Wird die

Länge überschritten, schneidet die Frontend automatisch den überschrittenen Bereich von Links ab. Wird z.B. der Wert „Dies ist ein Test“ mit eine Länge von „11“ definiert, erscheint innerhalb der Frontend der Wert „…t ein Test“. Das Längenattribut ist für dynamische Labels vorgesehen.

Um die Schriftformatierung definieren zu können, wird innerhalb des Label-Tags ein weiterer Tag <font> benötigt. Werden innerhalb dieses Tags Attribute weggelassen, werden die Standard-Attribute, welche innerhalb der general.style-Datei definiert werden, genutzt. So kann Schreibarbeit gespart werden, wenn es sich um ständig wiederholende Font-Formatierungs-Eigenschaften handelt. Die Attribute dieses Tags lauten:

Attribut Beschreibung face Enthält die gewünschte Schriftart. size Die Größe der Schriftart in Pixeln. color Die Farbe als HTML-Farbcode. shadow Die Tiefe des Schrift-Schattens. Eine „0“ schaltet den Schatten aus. color_shadow Die Farbe des Schattens als HTML-Farbcode. alignment Die horizontale Ausrichtung des Labelinhaltes. „0“ für links

ausgerichtet, „1“ für rechts und „2“ für zentriert ausgerichtet. bold Gibt an, ob die Schriftart dick formatiert sein soll.

Soll beim Anklicken des Labels eine Aktion ausgeführt werden, kann innerhalb des Label-Tags auch ein <function>-Tag programmiert werden. Dieser Tag ist optional und kann entfallen, wenn kein Funktionscode hinterlegt werden soll. Die Attribute lauten hier:

Attribut Beschreibung Functioncode Beim Anklicken des Labels wird diese Funktion innerhalb der Frontend

aufgerufen. Mögliche Funktionen sind im Abschnitt Funktions-Codes zu finden.

color_selected Wird mit der Maus über die Label gefahren oder dieses selektiert, wird die Schriftfarbe in diesen Wert gewechselt. Der Wert ist ein HTML-Farbcode.

color_pressed Wird das Label angeklickt, wird die Schriftfarbe in diesen Wert gewechselt. Der Wert ist ein HTML-Farbcode.

4.3.1 Label-State-Tag / Zustandsabhängige Beschriftung Wenn das Label auf den Zustand des hinterlegten, dynamischen Wertes mit einer unterschiedlichen Ausgabe reagieren soll, besteht die Möglichkeit, Zustände mit eigenen Formatierungs-Attributen zu definieren. Beispiel: das Label soll die aktuelle Fahrzeug-Geschwindigkeit ausgeben (categorie="telemetry“, value="SPEED"). Sobald das Fahrzeug steht, soll das Label den Wert „Fahrzeug steht“ ausgeben und den Wert „Fahrzeug geparkt“, sobald kein Geschwindigkeitswert vorhanden ist (Wert = "N/A"). In diesem Falle müssten wir wie folgt zwei zusätzliche State-Tags anlegen (der Übersicht halber werden nachfolgend nicht relevante Attribute für das Beispiel weggelassen):

Syntax Label-Tag: Praxisbeispiel für State-Tags

<label categorie="telemetry" value="SPEED" ...>

<font ... />

<function ... />

Page 15: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 15

<state value="0" display_value="Fahrzeug steht" ... />

<state value="N/A" display_value="Fahrzeug geparkt" ... />

</label>

Trifft eines der definierten State-Tags zu, wird das Label entsprechend umformatiert – trifft keines der State-Tags zu, wird weiterhin der dynamische Wert ausgegeben. Bauen wir das Szenario aus: wir möchten bei einer Geschwindigkeit unter 10 km/h den Text „Schrittgeschwindigkeit ausgeben:

Syntax Label-Tag: Praxisbeispiel für State-Tags

<label categorie="telemetry" value="SPEED" ...>

<font ... />

<function ... />

<state value="0" display_value="Fahrzeug steht" ... />

<state value="<10" display_value="Schrittgeschwindigkeit" ... />

<state value="N/A" display_value="Fahrzeug geparkt" ... />

</label>

Beachten Sie dabei, dass bei mehreren Vergleichsoperationen die Abfragelogik vom ersten bis zum letzten State-Tag erfolgt. Sobald ein State-Tag ein positives Ergebnis liefert, wird die Prüflogik beendet und die restlichen State-Tags übersprungen. Wenn Sie also jeweils nach kleiner als 10 und kleiner als 20 km/h prüfen möchten, dann beginnen Sie mit dem kleineren Wert. Möchten Sie statt einem statischen Anzeigewert einen dynamischen Wert ausgeben, müssen Sie ein Weiteres Attribut [display_categorie] hinzufügen und die beiden Attribute mit dynamischen Werten befüllen (siehe Abschnitt dynamische Werte abgreifen]. Hierfür gilt folgende Syntax:

Syntax Label-Tag: Praxisbeispiel für State-Tags

<label categorie="telemetry" value="SPEED" ...>

<font ... />

<function ... />

<state value="0" display_value="Fahrzeug steht" ... />

<state value="<10" display_categorie="telemetry"

display_value="Schrittgschwindigkeit: SPEED" ... />

<state value="<200" display_categorie="telemetry" display_value="Volle Fahrt:

SPEED" ... />

<state value="N/A" display_value="Fahrzeug geparkt" ... />

</label>

Für die State-Tags stehen Ihnen nachfolgende Attribute zur Verfügung. Sämtliche Attribute sind optional und haben nur dann Wirkung, wenn sie explizit definiert wurden:

Attribut Beschreibung value In diesem Attribut muss der zu vergleichende Wert enthalten sein. Trifft

der Vergleich zu, werden dem Label die nachfolgenden Formatierungs-Attribute zugewiesen. Tritt der Wert nicht zu, wechselt oder verbleibt die Label-Formatierung im Ausgangszustand. Beim Vergleich stehen vier Operatoren zur Verfügung: = Wird lediglich der Wert oder ein Gleich-Operator vorangestellt, wird der aktuelle Label-Wert mit dem Wert des Attributs verglichen. < Wird ein Kleiner-Als-Operator vorangestellt, trifft der Vergleich nur dann zu, wenn der zu vergleichende Wert größer als der bisherige Label-Wert ist. > Wird ein Größer-Als-Operator vorangestellt, trifft der Vergleich nur dann zu, wenn der zu vergleichende Wert kleiner als der bisherige Label-Wert ist.

Page 16: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 16

<> Wird ein Ungleich-Operator vorangestellt, trifft der Vergleich nur dann zu, wenn der zu vergleichende Wert ungleich dem bisherigen Label-Wert ist.

display_categorie Sie haben die Option, nach positivem Vergleich einen statischen oder dynamischen Wert ausgeben zu lassen. Für einen dynamischen Wert hinterlegen Sie in diesem Attribut die Kategorie des gewünschten, dynamischen Wertes. Informationen hierzu entnehmen Sie bitte dem Abschnitt Dynamische Werte abgreifen. Sollte hier kein Wert oder ein Wert eingetragen werden, welcher nicht bekannt ist, bleibt es statisch und der Text-Wert im Attribut value wird fest dargestellt.

display_value Der hier gegebene Wert wird alternativ zum Label-Wert dargestellt, wenn der Vergleich zutrifft. Mithilfe des Value-Attributes lassen sich auch dynamische Labels definieren. Beachten Sie für Wertmöglichkeiten den Abschnitt Dynamische Werte abgreifen.

face Wird dieses Attribut definiert, wechselt die Schriftart des Labels, wenn der Vergleich positiv zutrifft.

size Wird dieses Attribut definiert, wechselt die Schriftgröße des Labels, wenn der Vergleich positiv zutrifft

color Wird dieses Attribut definiert, wechselt die Schriftfarbe des Labels, wenn der Vergleich positiv zutrifft

shadow Wird dieses Attribut definiert, wechselt die Tiefe des Labels-Schattens, wenn der Vergleich positiv zutrifft Der Wert „0“ schaltet den Schatten aus.

color_shadow Wird dieses Attribut definiert, wechselt die Schattenfarbe des Labels, wenn der Vergleich positiv zutrifft

color_selected Wird mit der Maus über die Label gefahren oder dieses selektiert, wird die Schriftfarbe in diesen Wert gewechselt. Der Wert ist ein HTML-Farbcode.

color_pressed Wird das Label angeklickt, wird die Schriftfarbe in diesen Wert gewechselt. Der Wert ist ein HTML-Farbcode.

functioncode Wird dieses Attribut definiert, wechselt der hinterlegte Funktionscode des Labels, wenn der Vergleich positiv zutrifft.

alignment Wird dieses Attribut definiert, wechselt die horizontale Ausrichtung des Labelinhaltes. „0“ für links ausgerichtet, „1“ für rechts und „2“ für zentriert ausgerichtet.

Bold Wird dieses Attribut definiert, wechselt die Dick-Formatierung des Labels, wenn der Vergleich positiv zutrifft

4.3.2 Dynamische Werte abgreifen Der Inhalt eines dynamischen Wertes wird von der Frontend generiert und zur Laufzeit stetig aktualisiert. Ein Objekt, welches einen dieser Werte ausgibt oder damit arbeiten soll (z.B. ProgressBar, Label oder Button), muss in den Attributen „categorie“ und „value“ eines der dynamischen Werte enthalten. Bitte beachten Sie das Dokument „Liste dynamischer Werte“ für eine Übersicht sämtlicher Wert-Möglichkeiten.

Page 17: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 17

4.4 Marquee / Lauftext Eine Marquee ist ein Lauftext. Es handelt sich dabei um ein bewegtes Label in einem separaten Objekt. Diese werden innerhalb des Knotens <marquees> erzeugt. Die Syntax lautet:

Gesamtsyntax Label-Tag:

<marquee categorie="" value="" x="" y="" width="" height="" image=""

interval="" border="" >

<font face="" size="" color="" shadow="" color_shadow="" bold="" />

<function functioncode="" color_selected="" color_pressed="" />

<state value="" display_categorie="" display_value="" image="" interval=""

functioncode="" />

</marquee>

Die notwendigen Mindestangaben lauten wie folgt:

Grundsyntax Label-Tag:

<marquee categorie="" value="" x="" y="" width="" height="" image="">

<font face="" size="" color="" /> </marquee>

Die Attribute des Tags lauten:

Attribut Beschreibung categorie Dieser Wert ermöglicht es der Frontend zu entscheiden, um welche

Information es sich bei diesem Label handelt. Lautet der Wert z.B. time, befüllt die Frontend diesen Label mit der aktuellen Uhrzeit. Mögliche Labelnamen sind im Abschnitt Dynamische Werte abgreifen zu finden.

value Der hier gegebene Wert wird im Label dargestellt. Mithilfe des Value-Attributes lassen sich auch dynamische Labels definieren. Beachten Sie für Wertmöglichkeiten den Abschnitt Dynamische Werte abgreifen.

x Horizontale Koordinate des Labels auf der Surface in Pixeln.

y Vertikale Koordinate des Labels auf der Surface in Pixeln.

width Breite des Labels in Pixeln.

height Höhe des Labels in Pixeln. format image Da es sich bei einem Lauftext um ein eigenes Objekt handelt, ist der

Hintergrund schwarz eingefärbt. Um das Objekt dem Hintergrund anpassen zu können, kann hier eine Hintergrundgrafik hinterlegt werden.

Um die Schriftformatierung definieren zu können, wird innerhalb des Marquee-Tags ein weiterer Tag benötigt. Dieser Tag lautet <font> und ist im Abschnitt 4.2 Ein Label erzeugen beschrieben. Des Weiteren kann ein Lauftext Label mit einer Funktion hinterlegt werden. Hierfür wird ebenfalls ein neuer Tag benötigt, welches <function> lautet. Auch dieser Tag ist im Bereich 4.2 Ein Label erzeugen beschrieben.

4.4.1 Marquee-State-Tags / Zustandsabhängiger Lauftext Auch Lauftexte lassen sich je nach aktuellem Zustand des hinterlegten, dynamischen Wertes mit entsprechenden State-Tags unterschiedlich darstellen. Für eine nähere Erläuterung der Funktionsweise der State-Tags, lesen Sie bitte den Abschnitt 4.3.1. Beachten Sie allerdings die

Page 18: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 18

Abweichung der möglichen Attribute im State-Tag für Lauftexte. Diese entnehmen Sie bitte der obigen Gesamtsyntax.

4.5 GIF / GIF-Animation Im Graphics Interchange Format (GIF) können mehrere einzelne Grafiken abgespeichert werden, die als Animation interpretiert werden. Hierdurch lassen sich mit einfachen Mitteln interaktive Styles realisieren. Eine GIF-Animation können Sie mit vielen gängigen Grafikprogrammen erzeugen und auf der Style-Oberfläche einblenden.

Erzeugen Sie ein GIF-Objekt im Knoten <gibobjects> und nutzen folgenden Tag dazu:

Gesamtsyntax GIF-Tag:

<gif functioncode="" image="" x="" y="" />

Die Attribute des Tags lauten:

Attribut Beschreibung image Geben Sie hier den Dateinamen der GIF-Animation an. Dabei muss sich

die Datei im „images“-Ordner Ihrer Style befinden. functioncode Beim Anklicken der GIF-Animation wird diese Funktion innerhalb der

Frontend aufgerufen. Mögliche Funktionen sind im Abschnitt Funktions-Codes zu finden.

4.6 Flash / Flash-Animation

Mithilfe einer Flash-Animation können ganz besondere Effekte erzielt werden. Wie bei allen anderen Objekten kann auch hier der Flash-Animationen eine Information durch die Attribute categorie und value bereitgestellt werden (siehe Abschnitt Dynamische Werte

abgreifen). Die Animation kann diesen Wert dann visualisieren, verarbeiten und ein Funktionscode zurückgeben (siehe Abschnitt Funktionscodes).

Erzeugen Sie ein Flash-Objekt im Knoten <flashobjects> mit folgendem Tag:

Gesamtsyntax Flash-Tag:

<flash categorie="" value="" functioncode="" filename="" x="" y=""

width="" height="" />

Hierfür muss die Flash-Animation den entsprechenden Funktionscode mit Action-Scripting ausgeben. Das einlesen des dynamischen Wertes erfolgt über das Attribut „value“.

Für weitere Details beachten Sie die separate Dokumentation „Flash in meinen Styles nutzen“.

Page 19: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 19

4.7 Slidebar / Schieberegler Durch einen Schieberegler können dynamische und statische Werte visualisiert und verändert werden. Dabei stellt der Schieberegler eine prozentuale Darstellung zwischen dem niedrigsten und höchsten anzuzeigenden Wert dar. Der Schieberegler benötigt dabei lediglich die Angabe eines Interaktionsbereiches, in welchem es (je nach Ausrichtung (Orientation)) vertikal oder horizontal eine Grafik (image) positioniert.

Syntax Slidebar-Tag:

<slidebar categorie="" value="" x="" y="" width=""

height="" value_min="" value_max="" orientation="" noclick="" image="" />

Vermerk: bei categorie = „mediainfo“ und „volume“ hat das Attribut „value_max“ keine Auswirkung. Im nachfolgenden Schaubild wird das Slidebar-Objekt als vertikale Lautstärkeregelung genutzt. Hierbei ist zu sehen, dass der Interaktionsbereich von 40x120 Pixeln auf der Hintergrundgrafik des Styles positioniert wurde und eine Grafik, welches einen Regler abbildet aktuell auf ca. 50% steht. Durch verschieben des Reglers wird dabei der dynamische Wert „volume/MASTER“ verändert.

Besondere Hinweise: Die Slidebar behandelt folgende, dynamischen Werte speziell, d.h. die maximale Wertangabe hat hier keine Auswirkung.: volume/CHANNEL mediainfo/MEDIAPOSITION Die Attribute des Tags lauten:

Attribut Beschreibung categorie Um einen dynamischen Wert visualisieren zu können, wird die

Kategorie-Angabe in diesem Attribut benötigt. Zusätzlich hierzu ist das Attribut „value“ zu belegen. Details über mögliche, dynamische Werte entnehmen Sie bitte der entsprechenden Dokumentation Liste dynamischer Werte.

value In diesem Attribut kann entweder ein statischer Wert angegeben werden, welcher im Slidebar visualisiert wird, oder ein dynamischer Wert. Bei Letzterem muss eine Kategorieangabe im „categorie“-Attribut erfolgen. Details über mögliche, dynamische Werte entnehmen Sie bitte der entsprechenden Dokumentation Liste dynamischer Werte.

x Horizontale Koordinate des Slidebars auf der Surface in Pixeln.

y Vertikale Koordinate des Slidebars auf der Surface in Pixeln.

width Breite des Interaktionsbereiches der Slidebar in Pixeln.

height Höhe des Interaktionsbereiches der Slidebar in Pixeln. orientation Horizontale- (0) oder Vertikale-Ausrichtung (1) der Slidebar. Durch

Angabe der entsprechenden Ziffer (0 oder 1) wird die Grafik aus dem Attribut „image“ je nach aktuellem Wertzustand im Interaktionsbereich

Page 20: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 20

positioniert. 0 = horizontale Ausrichtung für eine Visualisierung von links (Wert = 0%) nach rechts (Wert = 100%). 1= vertikale Ausrichtung für eine Visualisierung von unten (Wert = 0%) nach oben (Wert = 100%)

image Dieses Attribut enthält den Dateinamen der Grafik, welche als „Knopf“ der Sliderbar genutzt wird.

noclick Durch setzen dieses Attributs auf den Wert „1“ wird eine Benutzer-Interaktion mit der Slidebar unterbunden. Die Slidebar dient daraufhin ausschließlich als Visualisierungs-Objekt und kann vom Anwender nicht verschoben werden.

value_min Gibt den niedrigsten, zu visualisierenden Wert an. Wenn dieser Wert nicht gesetzt wird, lautet der niedrigste Wert „0“.

value_max Gibt den höchsten, zu visualisierenden Wert an. Wenn dieser Wert nicht gesetzt wird, lautet der höchste Wert „100“. Dieses Attribut hat keine Auswirkung, wenn die obigen dynamischer Werte aus „Besondere Hinweise“ genutzt werden.

4.8 Progressbar / Füllbalken Mit der Progressbar können dynamische und statische Werte mit einem Fülleffekt visualisiert und verändert werden. Hierbei stellt die Progressbar eine prozentuale Darstellung zwischen dem niedrigsten und höchsten anzuzeigenden Wert dar. Durch Angaben der Ausrichtung (orientation) lässt sich die Füllung wahlweise von links nach rechts, von oben nach unten oder jeweils in umgekehrter Richtung auffüllen. Benötigt werden hierbei eine Grafik, welche den Füllbalken in aufgefüllter Form abbildet und die Angabe von Position und Größe des Progressbar-Objekts.

Gesamtsyntax ProgressBar-Tag:

<progressbar categorie="" value="" x="" y="" width=""

height="" value_min="" value_max="" orientation="" noclick="" functioncode=""

image="">

<state value="" display_categorie="" display_value="" value_min="" value_max=""

orientation="" noclick="" image="" functioncode="" />

</progressbar>

Vermerk: bei categorie = „mediainfo“ und „volume“ haben die Attribute „value_max“ und „functioncode“ keine Auswirkung.

Die Mindestangaben einer Progressbar lauten:

Gesamtsyntax ProgressBar-Tag:

<progressbar categorie="" value="" x="" y="" width=""

height="" value_min="" value_max="" orientation="" image="" />

Page 21: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 21

Besondere Hinweise: Die Progressbar behandelt folgende, dynamischen Werte speziell, d.h. die maximale Wertangabe und der Funktionscode haben hier keine Auswirkung.: volume/CHANNEL mediainfo/MEDIAPOSITION Die Attribute des Tags lauten:

Attribut Beschreibung categorie Um einen dynamischen Wert visualisieren zu können, wird die

Kategorie-Angabe in diesem Attribut benötigt. Zusätzlich hierzu ist das Attribut „value“ zu belegen. Details über mögliche, dynamische Werte entnehmen Sie bitte der entsprechenden Dokumentation Liste dynamischer Werte.

value In diesem Attribut kann entweder ein statischer Wert angegeben werden, welcher in der Progressbar visualisiert wird, oder ein dynamischer Wert. Bei Letzterem muss eine Kategorieangabe im „categorie“-Attribut erfolgen. Details über mögliche, dynamische Werte entnehmen Sie bitte der entsprechenden Dokumentation Liste dynamischer Werte.

x Horizontale Koordinate der Progressbar auf der Surface in Pixeln.

y Vertikale Koordinate der Progressbar auf der Surface in Pixeln.

width Breite des Interaktionsbereiches der Progressbar in Pixeln.

height Höhe des Interaktionsbereiches der Progressbar in Pixeln. functioncode Beim Anklicken wird diese Funktion innerhalb der Frontend aufgerufen.

Mögliche Funktionen sind im Abschnitt Funktions-Codes zu finden. Dieses Attribut hat keine Auswirkung wenn eines der dynamischen Werte aus den obigen „Besonderen Hinweisen“ genutzt wird

orientation Auswahl der Auffüll-Richtung: 0 = von links nach rechts auffüllen 1 = von rechts nach links auffüllen 2 = von oben nach unten auffüllen 3 = von unten nach oben auffüllen

image Dieses Attribut enthält den Dateinamen der Grafik, welche als Fülleffekt genutzt wird.

noclick Durch setzen dieses Attributs auf den Wert „1“ wird eine Benutzer-Interaktion mit der Progressbar unterbunden. Die Progressbar dient daraufhin ausschließlich als Visualisierungs-Objekt und kann vom Anwender nicht angeklickt werden.

value_min Gibt den niedrigsten, zu visualisierenden Wert an. Wenn dieser Wert nicht gesetzt wird, lautet der niedrigste Wert „0“.

value_max Gibt den höchsten, zu visualisierenden Wert an. Wenn dieser Wert nicht gesetzt wird, lautet der höchste Wert „100“. Dieses Attribut hat keine Auswirkung, wenn die obigen dynamischer Werte aus „Besondere Hinweise“ genutzt werden.

Page 22: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 22

4.9 Chart / Liniendiagramm Ein Liniendiagram hilft bei der Verlaufs-Darstellung eines dynamischen Wertes. Hierbei kann definiert werden, wie lange die historisierten Werte angezeigt werden sollen und in welcher Form. Die Mindestangaben einer Chart lauten:

Syntax Chart-Tag:

<chart categorie="" value="" color_line="" x="" y="" width="" height=""

value_max="" elapsed_time="" image="" showlabels="" />

Die Attribute sind wie folgt:

Attribut Beschreibung Categorie Um einen dynamischen Wert visualisieren zu können, wird die

Kategorie-Angabe in diesem Attribut benötigt. Zusätzlich hierzu ist das Attribut „value“ zu belegen. Details über mögliche, dynamische Werte entnehmen Sie bitte der entsprechenden Dokumentation Liste dynamischer Werte.

value In diesem Attribut kann entweder ein statischer Wert angegeben werden, welcher in der Chart visualisiert wird, oder ein dynamischer Wert. Bei Letzterem muss eine Kategorie-Angabe im „categorie“-Attribut erfolgen. Details über mögliche, dynamische Werte entnehmen Sie bitte der entsprechenden Dokumentation Liste dynamischer Werte.

x Horizontale Koordinate der Chart auf der Surface in Pixeln.

y Vertikale Koordinate der Chart auf der Surface in Pixeln.

width Breite des Interaktionsbereiches der Chart in Pixeln.

height Höhe des Interaktionsbereiches der Chart in Pixeln. color_line Die Farbe der Linie im Diagramm. Der Wert ist ein HTML-Farbcode. image Der Dateiname zum Hintergrundbild der Chart. Die Grafikdatei muss

sich im Image-Ordner der Style befinden. elapsed_time Die Anzahl anzuzeigendert Werte. Da die Datenbank im Sekundentakt

befüllt wird, entspricht dies somi auch der verstrichenen Telemetrie-Logging-Zeit.

showlabels Gibt an ob die höchsten und niedrigsten Werte mit Textfeldern hinterlegt werden sollen (1) oder nicht (0).

4.10 Gauge / Tacho Mit einem Tacho-Objekt können numerische Werte besonders schön dargestellt werden. Dabei erscheint ein Zeiger, welcher sich je nach Attributs-Einstellungen in die entsprechende Richtung dreht.

Die Tags werden im Knoten <gauges> angelegt.

Die Gesamtsyntax lautet:

Gesamtsyntax Gauge-Tag:

<gauge categorie="" value="" x="" y="" width="" height="" value_min=""

value_max="" needle_x="" needle_y="" needle_minangle=""

Page 23: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 23

needle_maxangle="" needle_shadow="" needle_center=""

color_needle=" " color_needle_line="" color_needle_shadow=""

color_needle_shadow_line="" color_center=""

color_center_line="" image=""

/>

Vermerk: beim Tachoobjekt wird eine digitale Nadel auf einer Grafik („image“) erzeugt und in einem definierten Radius abhängig von dem eingehenden Wert dargestellt.

4.11 Graphical Gauge / Grafischer Tacho Die grafisch aufwändigere Variante des Tacho-Objekts. Hierbei werden zwei Grafiken angelegt, die abhängig von den gegebenen Attributen ineinander geschnitten werden und somit einen besonders schönen Effekt erzielen.

Die Tags werden im Knoten <graphgauges> angelegt.

Die Gesamtsyntax lautet:

Gesamtsyntax Graphgauge-Tag:

<graphgauge categorie="" value="" x="" y="" value_max=""

start_radius="" end_radius="" danger_radius="" image=""

image_filled="" image_danger="" animated=""

/>

Vermerk: Der Unterschied zwischen einem Tachoobjekt (Gauge) und einem grafischen Tachoobjekt ist, dass die grafische Version auf zwei Grafiken aufbaut, wovon die „image_filled“-Grafik in einem definierten Radius über der „image“-Grafik erscheint. Somit ist eine grafisch aufwändigere Darstellung möglich.

4.12 Plate / Schild Einige Objekte auf der Surface haben mehr Rechte als andere und werden somit immer im Vordergrund angezeigt. Um ein Textfeld besonders priorisiert im Vordergrund darstellen zu können, kann das Plate-Objekt genutzt werden.

Der Tag wird im Knoten <plates> angelegt.

Die Gesamtsyntax lautet:

Gesamtsyntax Plate-Tag:

<plate categorie="" value="" image="" x="" y="" width="" height=""

fontface="" font_x="" font_y="" font_width="" font_height="" size=""

color="" shadow=""

/>

Vermerk: Eine Plate wird benötigt, um ein Textfeld über einem anderen Objekt darzustellen (z.B. über einem Gauge-Objekt). Hierbei muss eine Grafik genutzt werden, um die abzudeckende Fläche grafisch überdecken zu können.

Page 24: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 24

4.13 ExtProg / externes Programm Ein externes Programm zeitgleich mit der Surface starten.

Gesamsyntax ExtProg-Tag:

<extprog path="" parameter="" x="" y="" width="" height="" />

Vermerk: von diesem Objekt kann eine unbegrenzte Anzahl erzeugt werden. Im Attribut Path kann auch ein Alias-Name wie z.B. „NAVIGATION“ eingegeben werden.

4.14 Webbrowser / Internet-Fenster

Syntax WebBrowser-Tag:

<webbrowser x="" y="" width="" height="" url="" addressbar=""

scrolling="" catchandmove=""

/>

Vermerk: von diesem Objekt kann eine unbegrenzte Anzahl erzeugt werden. Die Attribute des Tags lauten:

Attribut Beschreibung url Geben Sie hier eine Internet-Adresse ein, die beim Laden des

Webbrowser-Objekts als Startseite aufgerufen werden soll. scrolling Wenn Sie wünschen, dass die Scrollbalken rechts und unten

ausgeblendet werden, setzen Sie dieses Attribut auf den Wert „1“. catchandmove Als Alternative Eingabemethode zu den Scrollbalken, können Sie mit

einer „1“ in diesem Attribut die Catch-And-Move-Funktion aktiviert. Dabei wird mit einem einfachen Mausklick auf den Inhalt der Website und ein darauffolgendes bewegen der Maus, der Inhalt intuitiv verschoben. Mit Loslassen der linken Maustaste wird die Catch-And-Move-Funktion beendet. Ein einfacher linker Mausklick (ohne eine darauffolgende Bewegung), wird hingegen als regulärer Mausklick erkannt.

addressbar Mit einer „1“ wird die Adress-Zeile eingeblendet.

4.15 Timer / Zeitnehmer

Ein Timer ermöglicht das automatisierte und verzögerte Ausführen eines Funktionscodes. Das Timer-Objekt wird beim Aufrufen einer Surface geladen und gestartet. Nach einem festen Zeit-Intervall führt es nun entweder eine bestimmte Anzahl an Wiederholungen (Attribut repeat=“2“) oder eine endlose Wiederholung (Attribut repeat=“0“ oder weglassen) eines festgelegten Funktionscodes aus. Des Weiteren kann das Timer-Objekt bei jeder Oberflächeneingabe zurückgesetzt werden. Hierdurch ist es möglich zu prüfen, ob der Benutzer eine gewisse Zeit keine Eingabe tätigt. Tipp: Das Timer-Objekt sollte vom Verständnis her nicht mit dem Event-Manager in Verbindung gebracht werden. Der Event-Manager kann zwar dieselben Aktionen ausführen, was mit einem Timer-Objekt realisierbar ist, bleibt aber programmübergreifend und ist nicht auf eine bestimmte Style festgelegt. Während das Timer-Objekt auf der Oberfläche angesiedelt ist, befindet sich der Event-Manager in einer viel tieferen, komplexeren Ebene der Frontend.

Page 25: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 25

Syntax Timer-Tag:

<timer inputreset="1" interval="5" repeat="1" functioncode=""/>

Vermerk: von diesem Objekt kann eine unbegrenzte Anzahl erzeugt werden. Die Attribute des Tags lauten:

Attribut Beschreibung inputreset Mit diesem Attribut kann festgelegt werden, ob der Timer zurückgesetzt

werden soll, sobald eine Oberflächeneingabe erfolgt. So kann geprüft werden, ob eine definierte Zeit lang keine Eingabe erfolgt ist. Um die Prüfung zu aktivieren, muss dieses Attribut auf „1“ gesetzt werden. Um es zu deaktivieren auf „0“ setzen.

interval Gibt die Sekunden zwischen den Wiederholungen an. repeat Gibt an, wie häufig der Funktionscode im festgelegten Intervall

ausgeführt werden soll. Für eine Endlosschleife den Wert auf „0“ setzen. functioncode Gibt an, welcher Funktionscode ausgeführt werden soll

5. Unity-Objekte Die nachfolgenden Objekte können nur einmalig erzeugt werden und sind innerhalb des Bereiches <unities> zu positionieren.

5.1 Mediaplayer Syntax Mediaplayer-Tag:

<unity type="player" x="" y="" width="" height="" />

Vermerk: von diesem Objekt kann nur eine Instanz erzeugt werden.

5.2 Picture-Preview Syntax Pictures-Preview-Tag:

<unity type="picturespreview" x="" y="" width="" height="" />

Vermerk: von diesem Objekt kann nur eine Instanz erzeugt werden.

5.3 Media-Artist Syntax Artist-Image-Tag:

<unity type="mediaartist" x="" y="" width="" height="" />

5.4 Caller-Portrait Syntax Phone-Caller-Portrait- Tag:

<unity type="callerportrait" height="" width="" y="" x="" />

Page 26: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 26

5.5 Virtual-Playlist-Image Syntax Virtual-Playlist-Image-Tag:

<unity type="mediavplsimage" functioncode="mediaopenvpls" x="" y="" width=""

height="" />

5.6 List-Touch-Mover Syntax List-Touch-Mover-Tag:

<object type="listtouchmove" x="" y="" image="" />

Vermerk: von diesem Objekt kann nur eine Instanz erzeugt werden.

5.7 List-Touchbar Syntax List-Touchbar-Tag:

<unity type="listtouchbar" x="" y="" image="" image_knob="" />

Vermerk: von diesem Objekt kann nur eine Instanz erzeugt werden.

5.8 List-Alpha-Mover Syntax List-Alpha-Mover-Tag:

<object type="listalphamove" x="" y="" image="" />

Vermerk: von diesem Objekt kann nur eine Instanz erzeugt werden.

5.9 Ein Listen-Objekt erzeugen

Ein Listenobjekt listet je nach Namensvergabe den Inhalt einer Konfigurationsdatei oder eines Festplatten-Ordners auf. Hierfür stehen folgende Bezeichnungen für das Attribut „name“ zur Verfügung: Medialist listet den Inhalt des konfigurierten Medienverzeichnisses auf Extproglist listet die konfigurierten, externen Programme auf … Das zuletzt besuchte Verzeichnis des Listen-Objekts wird in der Datei „/data/temp/temp.ini“ gespeichert. Sobald das Listen-Objekt durch z.B. Menüwechsel neugeladen wird, präferiert es dieses Verzeichnis. Des Weiteren wird, z.B. bei der „medialist“ das aktuell spielende Medium angesprungen, soweit die Medien-Wiedergabe im Hintergrund aktiv ist. Das im Attribut „path“ angegebene Verzeichnis wird übergreifend präfierert. Befindet sich die Liste innerhalb des im Attribut „path“ angegebenen Pfades, wird weiterhin das zuletzt besuchte Verzeichnis (bzw. das zur Zeit in der Medien-Wiedergabe spielendes Verzeichnis) angesprungen. Falls dies jedoch nicht der Fall ist, wird das im Attribut „path“ hinterlegte Verzeichnis angezeigt, soweit dieses existiert.

Page 27: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 27

Syntax List-Tag:

<object type="list" name="" mainentry="" oneclickexecution="" path=""

color_entry="" color_other="" color_directory="" color_music=""

color_video="" color_pls="" color_pic="" color_hdd="" color_cd=""

color_up="" color_play=""

image_entry="" image _other="" image _directory="" image _music=""

image _video="" image _pls="" image _up="" image _play=""

>

<listentry x="" y="" width="" height="" border="">

<font face="" size="" color="" shadow="" color_shadow="" alignment=""

bold="" />

<image x="" y="" width="" height="" />

</listentry>

...

</object>

Vermerk: von diesem Objekt kann nur eine Instanz erzeugt werden.

6. Funktionscodes

6.1 Eine Surface wechseln Um zwischen einzelnen Surface zu wechseln – somit ein Menüwechsel vornehmen zu können – ist lediglich der Aufruf des jeweiligen Surface-Dateinamens als Funktionscode notwendig. Um z.B. das Hauptmenü mit einem Klick auf einen Button aufzurufen, muss dem Button der Funktionscode „surface_main.xml“ vergeben werden. Dabei richtet sich der Funktionscode nach dem exakten Dateinamen der aufzurufenden Surface. Diese Surface muss im Style-Ordner vorhanden sein.

Alternativ hierzu kann auch ein Alias-Name vergeben werden. Dabei handelt es sich um eine fixe Surface-Bezeichnung aus der Datei general.style. In der Rubrik [General] sind dabei frei wählbare Alias-Namen mit festen Surface-Dateinamen vergeben. Achten Sie bitte darauf, das die Frontend für interne Abläufe bestimmte Alias-Namen wie „mediaplayer“, „main“, etc. erwartet um selber zu wissen, welche Styledateien des individuellen Benutzerstyles für die jeweilige Funktion vorgesehen ist.

Sollten Sie während dem Menüwechsel eine explizite Animation benötigen (z.B. ein Vorhang nach links), können Sie auch dieses fix im Funktionscode hinterlegen. Hierfür ergänzen Sie den Surfacenamen mit einem Schrägstrich und einer Nummer zwischen 2 und 6: z.B. surface_main.xml/4. Dabei stehen die Nummern für folgende Animationen:

2 = Verblassen

3 = Nach links heraus

4 = Nach Rechts heraus

5 = Nach unten heraus

6 = Nach oben heraus

7 = Vorhang links

8 = Vorhang rechts

Page 28: Individuelle Styles erstellen - carpc-portal.de 4 Chameleon - 02 - Individuelle... · CES 4.0 - Dokumente Individuelle Styles erstellen Gueven Oektem Letzte Änderung: 11 April 2013

CES 4.0 - Dokumente

Individuelle Styles erstellen

Gueven Oektem Letzte Änderung: 11 April 2013 28

9 = Vorhang unten

10 = Vorhang oben

6.2 Funktionsaufrufe Bitte beachten Sie das Dokument „Liste möglicher Funktionsaufrufe“.