Skins de
Aus Ultimate Media Collector (UMC) - Wiki
Hier wollen wir euch die neue Skin RenderingEngine präsentieren die mit Version 1.8 veröffentlicht wird (besonderer Dank geht hier an heho).
Durch diese generische Schnittstelle wird es möglich sein gezielt Grafiken nach eigenem Wunsch für eigene Skins erstellen zu lassen.
Zukünftig wird es im UMC Applikationsordner im Unterordner "resources" einen neuen Ordner "Skins" geben. Jedes Skin wird in diesem Ordner wiederrum durch einen eigenen Ordner repräsentiert. In diesem Skin Ordner befinden sich alle benötigten Dateien (HTML,PHP,CSS,Bilder, usw.) sowie eine zentrale Datei skin.xml in welcher beschrieben werden kann wie die einzelnen Cover, Backdrops usw. aussehen sollen.
Stellt euch einfach vor ihr arbeitet mit einem Bildbearbeitungsporgramm und legt diverse Layer auf ein Bild um einen bestimmten Effekt zu erreichen. Genau so funktioniert dies auch im UMC.
Lasst uns ein kleines Beispiel zu den Covern anschauen damit es deutlicher wird:
1. UMC hat ein Cover aus dem Netz gezogen. Wir gehen mal davon aus das dieses Cover in der Größe 600x950 vorliegt.
2. die Zielgröße des Cover wird nun auf 180x240 Pixel festgelegt.
<covers width="180" height="240" alt="">
Der sichtbare Bereich des Cover wird allerdings verkleinert um noch Platz für weitere Effekte zu lassen. Gehen wir mal hier von 100x160 Pixel aus.
3. auf dieses skalierte Bild wird eine Maske (8bit Graustufen) angewendet (schwarze Bereiche werden transparent!). In diesem Fall wird der schwarze Kreis aus dem drunterliegenden Bild(2) ausgeschnitten.
<layer type="cover" width="100" height="160" x="24" y="22" src="" mask="movieindex/mask1.png"/>
4. wir erhalten nun das Ergebnis mit dem transparenten Kreis.
5. auf das Bild 4 wird nun ein Rahmen gezeichnet. Dieser Rahmen kann natürlich beliebig über Koordinaten positioniert werden.
<layer type="layer" x="0" y="0" src="movieindex/rahmen_hd_resize1.png" mask=""/>
6. dieses Bild zeigt nun das Ergebnis mit dem Rahmen
7. auf das Bild von 7 wollen wir nun eine weitere Maske legen um einen weiteren Bereich transparent zu machen (das schwarze Rechteck).
Beachtet bitte das hier die Maske genau so groß wie das Zielbild sein sollte.
<layer type="mask" x="0" y="0" src="movieindex/mask2.png" mask=""/>
8. so sieht das ganze aus nachdem die Maske aus Schritt 7 verarbeitet wurde
9. nun wollen wir noch oben rechts in der Ecke ein HD-Logo eintragen. Auch dieses Grafik kann beliebig durch Koordinaten positioniert werden.
<layer type="layer" x="125" y="75" src="movieindex/hd_logo.png" mask=""/>
10. dies ist das Bild das aus nach Schritt 9 entsteht
11. als letztes wollen wir nun noch eine Spiegelung einfügen. Dazu wird definiert an welcher y-Koordinate die Spiegelung stattfinden soll (dargestellt durch die rote Linie)
<not_selected mirror="200" enabled="true">
12. hier seht ihr nun das Zielbild nach der ganzen Verarbeitung
Das jetzige UMC Layout sieht dann im Gesamtkonstrukt so aus:
<?xml version="1.0" encoding="UTF-8"?> <skin xmlns="http://www.umc-project.de/xmlbeans"> <name>UMC</name> <description>This is the default UMC skin. The skin features ....</description> <resolution>HD</resolution> <version>1.0</version> <homepage>http://www.hdd-player.de/umc/wiki/</homepage> <authors>The UMC Team</authors> <umc_frontend>true</umc_frontend> <screenshots> <img1>skin1.png</img1> <img2>skin2.png</img2> <img3>skin3.png</img3> <img4>skin4.png</img4> </screenshots> <hd> <pagelayouts> <mainindex> <backdrops enabled="true" quantity="20"> <layer type="cover" width="1280" height="720" x="0" y="0" src="" mask=""/> <layer type="layer" x="0" y="500" src="mainindex/home_menu.png" mask=""/> </backdrops> </mainindex> <movieindex> <covers width="180" height="240" alt=""> <not_selected mirror="200" enabled="true"> <case_sd> <layer type="cover" width="130" height="168" x="24" y="22" src="" mask=""/> <layer type="layer" x="0" y="0" src="movieindex/rahmen_sd_resize1.png" mask=""/> </case_sd> <case_hd> <layer type="cover" width="130" height="168" x="24" y="22" src="" mask=""/> <layer type="layer" x="0" y="0" src="movieindex/rahmen_hd_resize1.png" mask=""/> </case_hd> <case_group> <layer type="cover" width="130" height="168" x="24" y="22" src="" mask=""/> <layer type="layer" x="0" y="0" src="movieindex/rahmen_group_resize1.png" mask=""/> </case_group> </not_selected> <selected mirror="200" enabled="true"> <case_sd> <layer type="cover" width="150" height="192" x="14" y="25" src="" mask=""/> <layer type="layer" x="0" y="0" src="movieindex/rahmen_sd_resize2.png" mask=""/> </case_sd> <case_hd> <layer type="cover" width="150" height="192" x="16" y="25" src="" mask=""/> <layer type="layer" x="0" y="0" src="movieindex/rahmen_hd_resize2.png" mask=""/> </case_hd> <case_group> <layer type="cover" width="150" height="192" x="16" y="25" src="" mask=""/> <layer type="layer" x="0" y="0" src="movieindex/rahmen_group_resize2.png" mask=""/> </case_group> </selected> </covers> <backdrops enabled="true"> <layer type="cover" width="175" height="200" x="0" y="0" src="" mask=""/> </backdrops> </movieindex> <moviedetails> <cover enabled="true" width="220" height="300" mirror="0" alt=""> <layer type="cover" width="220" height="300" x="0" y="0" src="" mask="moviedetails/covermask.png"/> </cover> <backdrop enabled="true"> <layer type="cover" width="175" height="200" x="0" y="0" src="images/hd/rahmen_hd_resize1.png" mask=""/> <!-- <layer type="mask" x="0" y="0" src="mages/hd/mask1.png"/> --> </backdrop> </moviedetails> <seriesindex> <banners width="476" height="120" enabled="true" mirror="0" alt=""> <not_selected mirror="55" enabled="true"> <layer type="cover" width="460" height="85" x="6" y="6" src="" mask=""/> <layer type="layer" x="0" y="0" src="seriesindex/rahmen.png" mask=""/> </not_selected> <selected mirror="0" enabled="true"> <layer type="cover" width="460" height="85" x="6" y="6" src="" mask=""/> <layer type="layer" x="0" y="0" src="seriesindex/rahmen.png" mask=""/> </selected> </banners> <backdrops enabled="false"> <layer type="cover" width="1280" height="720" x="0" y="0" src="images/hd/rahmen_hd_resize1.png" mask=""/> <!--<layer type="mask" x="0" y="0" src="images/hd/mask1.png"/>--> </backdrops> </seriesindex> <seriesdetails> <banner width="460" height="85" enabled="true" mirror="0" alt=""> <layer type="cover" width="460" height="85" x="0" y="0" src="" mask=""/> </banner> <backdrop enabled="true"> <layer type="cover" width="1280" height="720" x="0" y="0" src="" mask=""/> </backdrop> </seriesdetails> </pagelayouts> </hd> </skin>
Wie ihr seht, kann man auf diese Art und Weise beliebige Grafiken erzeugen lassen. Es können 1-n Layer verarbeitet werden. Es gibt also keinerlei Einschränkungen. Bedenkt aber das je mehr Layer benutzt werden, die Verarbeitungszeit auch nach oben steigt.
Ihr habt nun zwei Möglichkeiten wie ihr das Layout des Frontends beeinflussen könnt.
- ihr benutzt das UMC Basis Frontend und definiert in der skin.xml euren eigenen Style für die Cover usw. . Dadurch könnt ihr aber nur das Look&Feel des UMC Basis Frontends ändern.
- wollt ihr hingegen den grundlegenden Aufbau des Frontends verändern, so ist es nötig auch alle benötigten PHP Dateien usw. mitzuliefern.
Die Leute die z.B. das Revamp Skin für UMC bauen gehen nach Möglichkeit 2 vor. D.h. sie schauen sich die jetzigen PHP Dateien an und leiten davon ihre eigene Version ab. Dadurch hat man natürlich alle Möglichkeiten ein wikrlich neues Skin auf die Beine zu stellen.
