WARNUNG: Sie haben die Ausführung von Javascript in ihrem Browser deaktiviert. A3non.org benötigt zur korrekten Funktion jedoch Javascript - Bitte aktivieren Sie es um den vollen Funktionsumfang der Website nutzen zu können. Was ist Javascript.

Die UserInterface (UI) Konfiguration ist mitunter der komplexeste aber auch mächtigste Teil des Zanmantou Players. 

Das gesammte UserInterface des Playes basiert auf einzelnen Bildern, welche im jewieligen Theme enthalten sind und durch die Konfiguration zu einem Design zusammengefügt werden.

Component Layout Engine (A3non Parametricx)

Zanmantou3 verfügt zur Positionierung sowie Ausrichtung sämtlicher UI Elemente über eine speziell entwickelte, parametrisch Layout-Engine "A3non Parametricx". Durch diese Engine sind die Angaben für Höhe, Breite, Positiom, etc. nicht mehr an statische Werte gebunden, sondern können durch Gleichungen(Therme) beschrieben werden. Dadurch ist es möglich Elemente einfach zum Beispiel mittig oder linksbündig zu platzieren oder größenunabhängige Layouts zu erstellen, indem Pixelgenaue Angaben mit Prozentualen-Definitionen simultan für eine Größe unterstützt werden können.

Jede UI Komponente kann durch die neue Engine über jeweils eigene XML-Attribute in 8 Freiheitsgraden manipuliert werden (Größe, Breite, Position[x,y,z], Rotation[x,y,z). Und ja, es ist möglich die Komponenten im 3 dimensionalen Raum zu Bewegen oder zu drehen (wobei es sich hierbei mehr um eine Spielerei für sehr abstrakte Designs handelt).

Component Layout Eigenschaften

Achtung: prozentuale Größenangaben beziehen sich immer auf das Elternelement - im Falle des Players auf seine absolute Größe.

Config-Attributes

width (Breite - parametrisch)

height (Höhe - parametrisch)

x (Position X - parametrisch)

y (Position Y - parametrisch)

z (Position Z - parametrisch)

rx (Rotation X in Grad)

ry (Rotation Y in Grad)

rz (Rotation Z in Grad)

zindex (Ordnungsreihenfolge)

opacity: DOUBLE[0.0 ... 1.0]

XML-Beispiel der Positionierung an einem Image:

<images>
	<image zindex="9" x="0" y="bottom-20" z="0" width="70%+10" height="80%-20">bottom.png</image>
</images>

Display Modes

Hierbei kann sowohl für den Normalen-Modus(auf einer Website eingebunden) alsauch für den Fullscreen-Modus jeweils ein individuelles Erscheinungsbild definiert werden. Die Konfiguration gliedert sich in zwei getrrennte Abschnitte: normal, fullscreen. Jedem dieser Teile steht der volle Funktionsumfang zur Verfügung. Sollten bestimmte Komponenten nicht benötigt werden, so sind wie im nachfolgenden Strukturbeispiel, leere XML-Tags als Platzhalter einzufügen!

XML-Übersicht über die Struktur der config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Zanmantou 3 Config !-->
<zanmantou version="3.0">
	<!-- normal UI config !-->
	<normal>
		<engine />
		<buttons />
		<images />
		<info />
		<slider />
	</normal>
	<!-- // normal UI config !-->

	<!-- fullscreen UI config !-->
	<fullscreen>
		<engine />
		<buttons />
		<images />
		<info />
		<slider />
	</fullscreen>
	<!-- // fullscreen UI config !-->

	<!-- contextmenu !-->
	<contextmenu />
	<!-- // contextmenu !-->
</zanmantou>

Neben dem Design des Players kann ebenfalls das Context-Menu (Rechtsklick) definiert werden,

Engine

Über das Engine-Objekt wird der aktive Videobereich konfiguriert. Neben der Positionierung (x,y,z) sowie der Drehung(rx, ry, rz) wird hier auch das Skalierungsverhalten festgelegt.
Sollte der Player als reiner AudioPlayer genutzt werden und keine Video/Cover Anzeige gewünscht sein, so kann diese dekativiert werden indem die Werte für width, height auf 0 gesetzt werden.

XML-Engine Beispiel

<!-- video settings !-->
<engine zindex="2" width="100%" height="100%" x="center" y="center" z="0" rx="0" ry="0" rz="0">
	<!-- size management [native, fixed] !-->
	<sizing>native</sizing>
</engine>

Config-Keys

sizing: ENUM[native, fixed]

Buttons

Die Buttons stellen die Bedienelemente des Players da. In Zanmantou3 ist es nun auch möglich mehrere Buttons des gleichen Types zu verwenden. Dadurch ist es möglich zum Beispiel einen transparenten, zusätzlichen, Startbutton über das Video zu legen. Pro Button sind die Zustände release, pressed, out, over konfigurierbar, wobei over der default Zustand ist und immer definiert werden muss! Jeder Zustand wird ein Bild zugeordnet, wobei die Größe des Buttons durch das out-Bild definiert wird und die Attribute width, height ohne Funktion sind! Der Inhalt der Textknoten out, over, pressed, release gibt die jeweilige URL zum Bild an (relativ zum imagepath aus den Settings).

XML-Beispiel Button Zustände

<!-- main control bottom !-->
<start zindex="10" x="0" y="bottom">
	<over>start_hover.png</over>
	<out>start.png</out>
	<release>start.png</release>
	<press>start_press.png</press>
</start>

Verfügbare Buttons

start

stop

pause

mute

unmute

next

prev

repeaton
repeatoff

repeatallon

repeatalloff

shuffleon

shuffleoff

extern

XML-Beispiel Extern-Button

<extern type="MyExternalEvent1" x="180" y="150" z="0" rx="0" ry="0" rz="0">
	<out>table.png</out>
</extern>

fullscreenon

fullscreenoff

XML-Beispiel Buttons

<buttons>
	<!-- in this section you can define the UI buttons !-->
	<!-- big center button !-->
	<start zindex="100" x="center" y="center">
		<over>start_big_hover.png</over>
		<out>start_big.png</out>
	</start>

	<!-- main control bottom !-->
	<start zindex="10" x="0" y="bottom">
		<over>start_hover.png</over>
		<out>start.png</out>
		<release>start.png</release>
		<press>start_press.png</press>
	</start>

	<pause zindex="10" x="0" y="bottom">
		<over>pause_hover.png</over>
		<out>pause.png</out>
		<release>pause.png</release>
		<press>pause_press.png</press>
	</pause>
</buttons>

Slider

Mit Hilfe der Slider ist es möglich Lautstärke-/Balanceregler zu realisieren sowie Fortschritts- und Ladeanzeigen. Durch die neue Layout Engine ist es durch einfache Rotation der Komponenten ebenfalls möglich vertikale Slider zu realiseren, indem der Slider einfach gedreht wird.
Bei einem Slider wird in Abhängigkeit des gesetzten Wertes das Hintergrundbild sowie die Position des Handles (Zeiger auf die aktuelle Position) verändert. Die Angabe eines Hintergrundes ist zwingend erforderlich, sollte jedoch nur ein Handle ohne Hintergrund gewählt werden kann ein transparentes PNG Image als Hintergrund dienen.

Verfügbare Slider

progress

volume

balance

loading

Config Attributes

source

Config Keys

mode: ENUM[scale, crop]
handle: Button

XML-Beispiel Slider

<slider>
	<!-- loading slider "behind" progress slider !-->
	<loading zindex="10" width="100%-205-76" height="25" x="205" y="bottom" source="progress.png">
		<mode>scale</mode>
	</loading>

	<!-- progress slider !-->
	<progress zindex="20" width="100%-205-76" height="25" x="205" y="bottom" source="progress2.png">
		<mode>scale</mode>
		<handle>
			<over>handle_hover.png</over>
			<out>handle.png</out>
			<release>handle.png</release>
			<press>handle_press.png</press>
		</handle>
	</progress>
</slider>

Images

Mit Hilfe des Image-Tags ist es möglich beliebige Bilder innerhalb des Players zu positionieren. Dies kann zum Beispiel ein halbtransparenter Overlayer als Wasserzeichen sein oder ein Hintergrundbild. Um ein Hintergrundbild darzustellen, welches hinter allen Komponenten (auch der Engine) angezeigt wird, ist das Attribut zindex so zu wählen, dass es den kleinsten Wert von allen anderen Elementen besitzt. Der Inhalt des Textknotens image gibt die jeweilige URL zum Bild an (relativ zum imagepath aus den Settings).

Achtung: Sobald width/height angegeben werden, so wird das Bild auf die angegebene Größe skaliert. Sollten die Attribute nicht angegeben werden, so behält das Bild seine native Größe.

XML-Beispiel Images

<!-- it's possible to add some images (e.g. background or watermark) to the player !-->
<images>
	<!-- background !-->
	<image zindex="0" x="0" y="0">bg.png</image>

	<!-- bottom controls bg !-->
	<image zindex="9" x="0" y="bottom" width="100%" height="25">bottom.png</image>
</images>

Infoareas

Die Infoarea stellt ein variables Textfeld da, indem Informationen über den aktuellen Track angezeigt werden können. Neben live Werten wie der verstrichenen Zeit können auch statische Werte aus der Playlist dargestellt werden. Die Konfiguration erfolgt hierbei über verschiedene Platzhalter. Außerdem ist es möglich zur Darstellung HTML(soweit es von Actionscript3 unterstützt wird) zu verwenden, um die Ausgabe zu formatieren. Einzelne Inforeas werden durch den Tag area eingeleitet.

Verfügbare Platzhalter

{%p=NAME}

{%fps}

{%L}

{%T}

{%l}

{%t}

{%ls}

{%ts}

Platzhalter Beispiele

Config-Keys

value: STRING

refresh: INTEGER in ms

overflow

overflow.enable: BOOLEAN[true, false]

overflow.step: INTEGER in px

overflow.interval: INTEGER in ms

overflow.delay: INTEGER in ms

color: COLOR-HEX

align: ENUM[left, center, right]

size: INTEGER in px

font: STRING

bold: BOOLEAN[true, false]

italic: BOOLEAN[true, false]

letterspacing: INTEGER in px

html: BOOLEAN[true, false]

XML- Beispiel Infoarea

<!-- info areas !-->
<info>
	<!-- text area position !-->
	<area zindex="20" width="100" height="20" x="105" y="bottom-1">
		<value><![CDATA[{%t}:{%ts}/{%l}:{%ls}]]></value>

		<!-- text refresh interval in ms !-->
		<refresh>500</refresh>

		<!-- overflow actions !-->
		<overflow>
			<!-- enable flag [true, false] !-->
			<enable>true</enable>
					
			<!-- scroll step in px !-->
			<step>1</step>
			
			<!-- scroll step interval in ms !-->
			<interval>25</interval>
					
			<!-- delay time start/end [intervals] !-->
			<delay>20</delay>
		</overflow>

		<!-- font color !-->
		<color>0x292929</color>

		<!-- font align !-->
		<align>center</align>

		<!-- font size in px !-->
		<size>11</size>

		<!-- font family !-->
		<font>Arial</font>

		<!-- font weight bold [true, false] !-->
		<bold>true</bold>

		<!-- font style italic [true, false] !-->
		<italic>false</italic>

		<!-- letter spacing in px !-->
		<letterspacing>3</letterspacing>

		<!-- html enabled [true, false] !-->
		<html>false</html>
	</area>
</info>

Context-Menu

Im neuen Zanmantou3 Player kann das Context-Menu mittels der Konfiguration angepasst werden. Hierfür stehen alle Buttontypen zur Verfügung. Sollte ein GUI Button ausgeblendet werden, so wird ebenfalls das entsprechende Item im Context-Menu automatisch ausgeblendet. D.h. das Menu ist GUI-synchron. Die im XML angegebene Reihenfolge wird übernommen.
Es werden die selben Button Tags verwendet, jedoch ohne jegliche Eigenschaften. Der Textknoten entspricht dem angezeigten Namen des Menu-Eintrags.
Achtung: Das Context-Menu wird global definiert, d.h. es kann nicht seperat für den normalen/fullscreen Modus definiert werden!

XML-Beispiel Context-Menu

<!-- additional context menu items - same as buttons !-->
<contextmenu>
	<start>Start Playing</start>
	<pause>Pause Playing</pause>
	<fullscreenon>Fullscreen On</fullscreenon>
	<fullscreenoff>Fullscreen Off</fullscreenoff>
</contextmenu>
<!-- // additional context menu items !-->

Sollten Sie ein eigenes Theme entwerfen wollen, so empfiehlt es sich einen Blick auf ein bereits fertiges  zu wagen.