vdr-plugin-skindesigner/skins/metrixhd/xmlfiles/plug-setup-skinpreview.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE menuplugin SYSTEM "../../../dtd/displaymenuplugin.dtd">

<menuplugin x="0" y="0" width="100%" height="100%" fadetime="0">
    <background>
        <area x="0" y="0" width="100%" height="100%" layer="1">
            <fill color="{menuback}" />
        </area>
    </background>

    <header>
        <area x="0" y="0" width="1" height="1" layer="1">
            <fill color="{clrTransparent}" />
        </area>
    </header>

    <datetime>
        <area x="0" y="0" width="1" height="1" layer="1">
            <fill color="{clrTransparent}" />
        </area>
    </datetime>

    <colorbuttons>
       <area x="0" y="92%" width="25%" height="8%" layer="2">
            <drawtext condition="{red1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red1}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green1}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow1}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue1}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="25%" y="92%" width="25%" height="8%" layer="2">
            <drawtext condition="{red2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red2}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green2}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow2}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue2}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="50%" y="92%" width="25%" height="8%" layer="2">
            <drawtext condition="{red3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red3}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green3}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow3}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue3}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="75%" y="92%" width="25%" height="8%" layer="2">
            <drawtext condition="{red4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red4}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green4}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow4}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue4}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
    </colorbuttons>

    <scrollbar>
        <area x="98%" y="20%" width="2%" height="71%" layer="3">
            <fill color="{scrollbar}" />
            <drawrectangle x="2" y="2" width="{areawidth} - 4" height="{areaheight} - 4" color="{clrTransparent}" />
            <drawrectangle x="4" y="4 + {areaheight} * {offset} / 1000" width="{areawidth} - 8" height="{areaheight} * {height} / 1000 - 8" color="{scrollbar}" />
        </area>
    </scrollbar>
    
    <detailheader>
        <area x="0" y="0" width="100%" height="20%" layer="2">
            <fill color="{menuheader}" />
        </area>
        <area x="0" y="0" width="100%" height="20%" layer="3">
            <drawtext x="20" valign="center" font="{light}" fontsize="40%" color="{fontdefault}" text="{menuheader}" />
        </area>
        <area x="50%" y="0" width="50%" height="8%" layer="3">
            <drawtext align="right" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="Author: {author} " />
        </area>
    </detailheader>

    <tab name="preview" x="2%" y="20%" width="94%" height="71%" layer="2" scrollheight="{areaheight}/4">
        <drawtext name="headerplugs" x="0" y="0" font="{semibold}" fontsize="10%" color="{fontdefault}" text="Supported Plugins:" />
        <loop name="plugins" x="0" y="10%" orientation="vertical" columnwidth="{areawidth}/2" rowheight="{areaheight}*0.08">
            <drawtext x="0" valign="center" font="{light}" fontsize="8%" color="{fontdefault}" text="{plugins[name]}" />
        </loop>

        <drawtext name="headerfonts" x="0" y="{posy(plugins)} + {height(plugins)} + 10" font="{semibold}" fontsize="10%" color="{fontdefault}" text="Used Fonts:" />
        <loop name="fonts" x="0" y="{posy(headerfonts)} + {height(headerfonts)}" orientation="vertical" columnwidth="{areawidth}/2" rowheight="{areaheight}*0.08">
            <drawtext condition="{fonts[installed]}" x="0" valign="center" font="{light}" fontsize="8%" color="{fontdefault}" text="{fonts[name]} (installed)" />
            <drawtext condition="not{fonts[installed]}" x="0" valign="center" font="{light}" fontsize="8%" color="{fontdefault}" text="{fonts[name]} (NOT installed)" />
        </loop>

        <loop name="screenshots" x="0" y="{posy(fonts)} + {height(fonts)}" orientation="vertical" columnwidth="{areawidth}" rowheight="{areawidth}*10/16">
            <drawtext name="desc" align="center" y="0" font="{light}" fontsize="10%" color="{fontdefault}" text="{screenshots[desc]}" />
            <drawimage imagetype="image" path="{screenshots[path]}" align="center" y="{height(desc)}+10" width="{areawidth}*0.95" height="{areawidth} * 0.95 * 9 / 16"/>
        </loop>
    </tab>
</menuplugin>