[HowTo] Skins für UMC erstellen
#1
Lightbulb 
Hier wollen wir euch die neue Skin RenderingEngine präsentieren die mit Verison 1.8 veröffentlicht wird (besondere 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.
    Code:
    <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.
    Code:
    <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.
    Code:
    <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.
    Code:
    <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.
    Code:
    <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)
    Code:
    <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:
Code:
<?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.

  1. 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.
  2. 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.


Bei Fragen einfach hier melden!
#2
Morgen.


Find die Funktion absolut super. So kann jetzt jeder der was davon versteht und Lust hat, am UMC mitwirken.
Finde es auch spitze wie viele Leute sich schon daran gemacht haben Skins zu bauen und die sehe auch noch verdammt gut aus.

Um die Arbeit zu würdigen und damit diese nicht untergehen, sollte man vielleicht ein eigenes Unterforum für Skins erstellen.
Dort könnte dann jeder sein Skin vorstellen und die UMC Nutzer könnten sich alle vor dem erstellen leicht ansehen.

Gruß IC
TV: LG 42LH9000
Sound: Yamaha RX-V1800 mit Elac Linie 120 und Canton Subwoofer
Sat: Dreambox DM-800
NMT mit DVD- und BD-Player: PopcornHour C-200 an WHS (BR-LW: LG GGC-H20L/Apps auf 8GB USB)
Fernbedienung: Logitech Harmony 900
#3
1. Es gibt doch ein Unterforum für Skins und Plugins
2. Wird nur kaum genutzt, da die "Skinner" im US-Forum aktiv sind und da posten
3. Mit der nächsten Version werden wir unser UMC-Support-Forum evtl. eh ins US-Forum verlagern, da mit der "Internationalisierung" von UMC dort sicher bald die meisten User angemeldet sein werden.
#4
Das mit dem Unterforum bzw. in das vorhandene "Addons"-Unterforum reinschieben wird gemacht, sobald es mehrere Skin-Autoren gibt.
#5
siehe auch:
http://www.hdd-player.de/umc/wiki/index.php/Skins_de


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
My Batch-Script zum Erstellen von Dummy-XMLs passend zum Datei-Namen (V3) SmashD 13 5.452 07.03.2009, 10:47
Letzter Beitrag: SmashD
My Batch-Script zum Erstellen eines Backups aller XML-Files SmashD 4 2.132 06.03.2009, 17:30
Letzter Beitrag: IC-Killer

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste