Skinning
Aus Ultimate Media Collector (UMC) - Wiki
Here we are presenting the new skin rendering engine released with UMC version 1.8.
With this generic interface it is possible to create specific graphics at your own option which can used for own skins. This will be done for you.
In the future there will be a subfolder called "skins" in the UMC application-directory under subfolder "resources". Any skin will get also a separat subfolder. This folder contains all necessary files (HTML,PHP,CSS,pictures,...) as well as the essential file skin.xml in what is defined how in detail the cover, backdrops... should look like.
Imagine you are working with a picture editing program and several layers on a picture to achieve a special effect. This is how UMC work.
Now we make a small cover tutorial to show how it works:
1. UMC downloaded a cover from the internet. We assume that this cover has a dimension of 600x950 pixels.
2. The target dimension of that cover is configured to 180x240 pixels.
<covers width="180" height="240" alt="">
The visible area of the cover is smaller because to achieve place for further effects. Let's make it to 100x160 pixels.
3. on this scaled image we apply a mask (8bit greyscales) (black areas go transparent!). In our example the black circle will be cut-out of the subjacent image(2).
<layer type="cover" width="100" height="160" x="24" y="22" src="" mask="movieindex/mask1.png"/>
4. now we get the result with the transparent circle
5. We draw a border on picture 4. This border could be certainly positioned anywhere.
<layer type="layer" x="0" y="0" src="movieindex/rahmen_hd_resize1.png" mask=""/>
6. this picture shows the result including the border
7. We want to apply another mask to image 7 to make another area transparent (black rectangle).
Take care that the mask have to be the same size as the target image.
<layer type="mask" x="0" y="0" src="movieindex/mask2.png" mask=""/>
8. after manipulation with the mask from step 7
9. In this step we want to position/draw a HD-logo in the upper right corner. The graphic could als positioned with coordinates.
<layer type="layer" x="125" y="75" src="movieindex/hd_logo.png" mask=""/>
10. This is the picture how it looks like after step 9.
11. At the end we want to add a reflection. With the y-coordinate we define the statring point of the reflection (here represented with a red line).
<not_selected mirror="200" enabled="true">
12. Now you see the finished target picture/cover after whole manipulation.
The default UMC layout/skin is defined with these parameters:
<?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>
Now you can imagine that with this process you could create any graphics. You can define 1-n layers to process. There is no limitation.
But keep in mind more processed layers will increase the creation-time.
Now you have two possibilities to affect the frontend layout:
- you can use the UMC basis frontend and define your own style for cover etc. in the skin.xml. With this you can only manipulate the look&feel of the UMC basis frontend.
- If you want to change the fundamental assembly of the frontend, so you have to deliver all required PHP files.
The people who are developing the Revamp skin for example use method 2. They are examinig the used default PHP files and make their own version.
Therefore they have all ways open to make a really new skin.
