home
products
contribute
download
documentation
forum
Home
Forums
New posts
Search forums
What's new
New posts
All posts
Latest activity
Members
Registered members
Current visitors
Donate
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Search titles only
By:
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Language specific support
Deutsches MediaPortal Forum
Plugins & Skins für das MediaPortal
Skins
Skin Modifikationen
Wie modifiziert man einen Skin...
Contact us
RSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Lehmden" data-source="post: 819967" data-attributes="member: 109222"><p><strong>AW: Wie modifiziert man einen Skin...</strong></p><p></p><p>Hallo.</p><p>Um zu zeigen, wie man mit Grafiken umgeht, basteln wir noch eine Statusbar- Anzeige für den belegten Festplattenplatz in unseren Skin. Im DFS Forum gibt es hierzu auch ein (wie schon oben erklärt, nicht funktionierendes) Beispiel:[CODE]<control></p><p> <description>Progress Bar</description></p><p> <type>progress</type></p><p> <id>20</id></p><p> <posX>560</posX></p><p> <posY>885</posY></p><p> <width>500</width></p><p> <height>30</height></p><p> <label>#Drives.AvailableSpace.Percentage</label></p><p> <texturebg>progress_background_tvhome.png</texturebg></p><p> <lefttexture>progress_blank30.png</lefttexture></p><p> <midtexture>progress_mid_white30.png</midtexture></p><p> <righttexture>progress_blank30.png</righttexture></p><p> <visible>yes</visible></p><p></control>[/CODE]</p><p>Das funktionierende Label lautet für Laufwerk C:[CODE]#DriveFreeSpace.C.AvailableSpace.UsedPercentage[/CODE]</p><p>Lässt man das "Used" weg, zeigt die Statusbar den freien Platz an, nicht den Belegten. Mir gefällt es aber besser, hier den belegen Platz angezeigt zu bekommen. Deswegen "Used".</p><p></p><p>Nun brauchen wir passende Grafiken. Nach Möglichkeit nutze ich bereits beim Skin vorhandene png Dateien, um die Sache nicht unnötig aufzublähen. Die zum Skin gehörenden png liegen in einem Unterordner des Skin namens Media vor. Diesen Ordner durchsuchen wir nach passenden Grafiken. Erst wenn man hier nichts finden, kann man selbst erstellte oder irgendwo anders her organisierte Grafiken verwenden. Diese müssen aber vor der Benutzung in den Media Ordner kopiert werden. Die für den Status- Balken passenden Grafiken heißen bei Backdrop statusbar_back.png statusbar_left.png, statusbar_mid.png und statusbar_right.png. Diese tragen wir nun in die entsprechenden Texture- Tags ein:[CODE]<texturebg>statusbar_back.png</texturebg></p><p><lefttexture>statusbar_left.png</lefttexture></p><p><midtexture>statusbar_mid.png</midtexture></p><p><righttexture>statusbar_right.png</righttexture>[/CODE]</p><p></p><p>Zusätzlich müssen wir natürlich wieder die Position anpassen. Dazu dienen wieder die posX und posY Tags. Den X Wert lassen wir so wie bei der Text Ausgabe auf 200. Für Y müssen wir aber jetzt einen anderen Wert nehmen, damit der Balken nicht über den Text zu liegen kommt. Durch Ausprobieren habe ich den Wert 70 ermittelt. Da bei Grafiken die Abmessungen einstellbar sind/sein müssen finden dafür die width und height Tags Verwendung. Auch diese Werte ermittelt man durch ausprobieren. Der Code sieht nun so aus und wird uns ein erstes Ergebnis (siehe erster Screenshot) liefern:[CODE] <control></p><p> <description>Progress Bar</description></p><p> <type>progress</type></p><p> <id>20</id></p><p> <posX>200</posX></p><p> <posY>70</posY></p><p> <width>165</width></p><p> <height>20</height></p><p> <label>#DriveFreeSpace.C.AvailableSpace.UsedPercentage</label></p><p> <texturebg>statusbar_back.png</texturebg></p><p> <lefttexture>statusbar_left.png</lefttexture></p><p> <midtexture>statusbar_mid.png</midtexture></p><p> <righttexture>statusbar_right.png</righttexture></p><p> <visible>yes</visible></p><p></control>[/CODE]</p><p>So wirklich überzeugt mich das Ergebnis aber noch nicht. Zum einen sollte der Indikator direkt am Anfang des (Hintergrund-)Balkens starten und zum anderen sollte der Balken meiner Ansicht nach etwas breiter als der Indikator sein. Um jetzt genauere Kontrolle über Größe und Position zu bekommen, trennen wir das Control in zwei Teile. Mit dem Ersten wird nur der Balken selbst angezeigt und mit dem Zweiten dann der Indikator. So können wir beides unabhängig einstellen. Hier ist jetzt reichlich ausprobieren mit den x, y wifth und height Werten angesagt, bis das Ergebnis passt.[CODE]<control></p><p> <description>Progress Back</description></p><p> <type>image</type></p><p> <id>20</id></p><p> <posX>200</posX></p><p> <posY>68</posY></p><p> <width>165</width></p><p> <height>31</height></p><p> <texture>statusbar_back.png</texture></p><p> <visible>yes</visible></p><p></control> </p><p><control></p><p> <description>Progress Bar</description></p><p> <type>progress</type></p><p> <id>20</id></p><p> <posX>190</posX></p><p> <posY>81</posY></p><p> <width>165</width></p><p> <height>1</height></p><p> <label>#DriveFreeSpace.C.AvailableSpace.UsedPercentage</label></p><p> <lefttexture>statusbar_left.png</lefttexture></p><p> <midtexture>statusbar_mid.png</midtexture></p><p> <righttexture>statusbar_right.png</righttexture></p><p> <visible>yes</visible></p><p></control>[/CODE]</p><p>Zur Erklärung. Im ersten Control haben wir den Typ von Progress nach Image geändert. Mit Image wird einfach eine Grafik ohne weitere Funktion angezeigt. Außerdem haben wir das Label und die Texturen für den Progress- Indikator entfernt, die ja im zweiten Control angezeigt werden.</p><p></p><p>Im zweiten Control haben wir die Textur für den Hintergrund entfernt, die ja nun durch das erste Control dargestellt wird. height = 1 habe ich eingestellt, da sonst immer ein dünner Rahmen rund um die Progress Grafiken angezeigt wird. Die Grafiken vom Progress Indikator selbst können in der Höhe leider nicht beeinflusst werden. Will man hier etwas ändern, muss man die Grafiken selbst ändern. Das Ergebnis unsere Anpassung kann man im zweiten Screenshot bewundern. Um jetzt für unsere drei Laufwerke je einen Progrees- Indikator zu bekommen, kopieren wir wieder die Controls und fügen sie je zweimal ein. Dann passen wir wieder den Laufwerksbuchstaben und die X Werte an (X je + 200) und voilà, wir sind fertig.[CODE] <control></p><p> <description>Progress Back</description></p><p> <type>image</type></p><p> <id>20</id></p><p> <posX>200</posX></p><p> <posY>68</posY></p><p> <width>165</width></p><p> <height>31</height></p><p> <texture>statusbar_back.png</texture></p><p> <visible>yes</visible></p><p></control> </p><p><control></p><p> <description>Progress Bar</description></p><p> <type>progress</type></p><p> <id>20</id></p><p> <posX>190</posX></p><p> <posY>81</posY></p><p> <width>165</width></p><p> <height>1</height></p><p> <label>#DriveFreeSpace.C.AvailableSpace.UsedPercentage</label></p><p> <lefttexture>statusbar_left.png</lefttexture></p><p> <midtexture>statusbar_mid.png</midtexture></p><p> <righttexture>statusbar_right.png</righttexture></p><p> <visible>yes</visible></p><p></control> </p><p><control></p><p> <description>Progress Back</description></p><p> <type>image</type></p><p> <id>20</id></p><p> <posX>400</posX></p><p> <posY>68</posY></p><p> <width>165</width></p><p> <height>31</height></p><p> <texture>statusbar_back.png</texture></p><p> <visible>yes</visible></p><p></control> </p><p><control></p><p> <description>Progress Bar</description></p><p> <type>progress</type></p><p> <id>20</id></p><p> <posX>390</posX></p><p> <posY>81</posY></p><p> <width>165</width></p><p> <height>1</height></p><p> <label>#DriveFreeSpace.D.AvailableSpace.UsedPercentage</label></p><p> <lefttexture>statusbar_left.png</lefttexture></p><p> <midtexture>statusbar_mid.png</midtexture></p><p> <righttexture>statusbar_right.png</righttexture></p><p> <visible>yes</visible></p><p></control> </p><p><control></p><p> <description>Progress Back</description></p><p> <type>image</type></p><p> <id>20</id></p><p> <posX>600</posX></p><p> <posY>68</posY></p><p> <width>165</width></p><p> <height>31</height></p><p> <texture>statusbar_back.png</texture></p><p> <visible>yes</visible></p><p></control> </p><p><control></p><p> <description>Progress Bar</description></p><p> <type>progress</type></p><p> <id>20</id></p><p> <posX>590</posX></p><p> <posY>81</posY></p><p> <width>165</width></p><p> <height>1</height></p><p> <label>#DriveFreeSpace.R.AvailableSpace.UsedPercentage</label></p><p> <lefttexture>statusbar_left.png</lefttexture></p><p> <midtexture>statusbar_mid.png</midtexture></p><p> <righttexture>statusbar_right.png</righttexture></p><p> <visible>yes</visible></p><p></control> </p><p>[/CODE]</p><p></p><p>Das Ergebnis ist auf dem dritten Screenshot zu bewundern. </p><p></p><p>Mit den hier vermittelten Kenntnissen kommt man schon ein ganzes Stück weit auf dem Weg zum perfekt angepassten Skin. Ein wenig Übung und keine Scheu vor der Geschichte, dann klappt es bestimmt. Viel Erfolg und Spaß beim Nachmachen.</p></blockquote><p></p>
[QUOTE="Lehmden, post: 819967, member: 109222"] [b]AW: Wie modifiziert man einen Skin...[/b] Hallo. Um zu zeigen, wie man mit Grafiken umgeht, basteln wir noch eine Statusbar- Anzeige für den belegten Festplattenplatz in unseren Skin. Im DFS Forum gibt es hierzu auch ein (wie schon oben erklärt, nicht funktionierendes) Beispiel:[CODE]<control> <description>Progress Bar</description> <type>progress</type> <id>20</id> <posX>560</posX> <posY>885</posY> <width>500</width> <height>30</height> <label>#Drives.AvailableSpace.Percentage</label> <texturebg>progress_background_tvhome.png</texturebg> <lefttexture>progress_blank30.png</lefttexture> <midtexture>progress_mid_white30.png</midtexture> <righttexture>progress_blank30.png</righttexture> <visible>yes</visible> </control>[/CODE] Das funktionierende Label lautet für Laufwerk C:[CODE]#DriveFreeSpace.C.AvailableSpace.UsedPercentage[/CODE] Lässt man das "Used" weg, zeigt die Statusbar den freien Platz an, nicht den Belegten. Mir gefällt es aber besser, hier den belegen Platz angezeigt zu bekommen. Deswegen "Used". Nun brauchen wir passende Grafiken. Nach Möglichkeit nutze ich bereits beim Skin vorhandene png Dateien, um die Sache nicht unnötig aufzublähen. Die zum Skin gehörenden png liegen in einem Unterordner des Skin namens Media vor. Diesen Ordner durchsuchen wir nach passenden Grafiken. Erst wenn man hier nichts finden, kann man selbst erstellte oder irgendwo anders her organisierte Grafiken verwenden. Diese müssen aber vor der Benutzung in den Media Ordner kopiert werden. Die für den Status- Balken passenden Grafiken heißen bei Backdrop statusbar_back.png statusbar_left.png, statusbar_mid.png und statusbar_right.png. Diese tragen wir nun in die entsprechenden Texture- Tags ein:[CODE]<texturebg>statusbar_back.png</texturebg> <lefttexture>statusbar_left.png</lefttexture> <midtexture>statusbar_mid.png</midtexture> <righttexture>statusbar_right.png</righttexture>[/CODE] Zusätzlich müssen wir natürlich wieder die Position anpassen. Dazu dienen wieder die posX und posY Tags. Den X Wert lassen wir so wie bei der Text Ausgabe auf 200. Für Y müssen wir aber jetzt einen anderen Wert nehmen, damit der Balken nicht über den Text zu liegen kommt. Durch Ausprobieren habe ich den Wert 70 ermittelt. Da bei Grafiken die Abmessungen einstellbar sind/sein müssen finden dafür die width und height Tags Verwendung. Auch diese Werte ermittelt man durch ausprobieren. Der Code sieht nun so aus und wird uns ein erstes Ergebnis (siehe erster Screenshot) liefern:[CODE] <control> <description>Progress Bar</description> <type>progress</type> <id>20</id> <posX>200</posX> <posY>70</posY> <width>165</width> <height>20</height> <label>#DriveFreeSpace.C.AvailableSpace.UsedPercentage</label> <texturebg>statusbar_back.png</texturebg> <lefttexture>statusbar_left.png</lefttexture> <midtexture>statusbar_mid.png</midtexture> <righttexture>statusbar_right.png</righttexture> <visible>yes</visible> </control>[/CODE] So wirklich überzeugt mich das Ergebnis aber noch nicht. Zum einen sollte der Indikator direkt am Anfang des (Hintergrund-)Balkens starten und zum anderen sollte der Balken meiner Ansicht nach etwas breiter als der Indikator sein. Um jetzt genauere Kontrolle über Größe und Position zu bekommen, trennen wir das Control in zwei Teile. Mit dem Ersten wird nur der Balken selbst angezeigt und mit dem Zweiten dann der Indikator. So können wir beides unabhängig einstellen. Hier ist jetzt reichlich ausprobieren mit den x, y wifth und height Werten angesagt, bis das Ergebnis passt.[CODE]<control> <description>Progress Back</description> <type>image</type> <id>20</id> <posX>200</posX> <posY>68</posY> <width>165</width> <height>31</height> <texture>statusbar_back.png</texture> <visible>yes</visible> </control> <control> <description>Progress Bar</description> <type>progress</type> <id>20</id> <posX>190</posX> <posY>81</posY> <width>165</width> <height>1</height> <label>#DriveFreeSpace.C.AvailableSpace.UsedPercentage</label> <lefttexture>statusbar_left.png</lefttexture> <midtexture>statusbar_mid.png</midtexture> <righttexture>statusbar_right.png</righttexture> <visible>yes</visible> </control>[/CODE] Zur Erklärung. Im ersten Control haben wir den Typ von Progress nach Image geändert. Mit Image wird einfach eine Grafik ohne weitere Funktion angezeigt. Außerdem haben wir das Label und die Texturen für den Progress- Indikator entfernt, die ja im zweiten Control angezeigt werden. Im zweiten Control haben wir die Textur für den Hintergrund entfernt, die ja nun durch das erste Control dargestellt wird. height = 1 habe ich eingestellt, da sonst immer ein dünner Rahmen rund um die Progress Grafiken angezeigt wird. Die Grafiken vom Progress Indikator selbst können in der Höhe leider nicht beeinflusst werden. Will man hier etwas ändern, muss man die Grafiken selbst ändern. Das Ergebnis unsere Anpassung kann man im zweiten Screenshot bewundern. Um jetzt für unsere drei Laufwerke je einen Progrees- Indikator zu bekommen, kopieren wir wieder die Controls und fügen sie je zweimal ein. Dann passen wir wieder den Laufwerksbuchstaben und die X Werte an (X je + 200) und voilà, wir sind fertig.[CODE] <control> <description>Progress Back</description> <type>image</type> <id>20</id> <posX>200</posX> <posY>68</posY> <width>165</width> <height>31</height> <texture>statusbar_back.png</texture> <visible>yes</visible> </control> <control> <description>Progress Bar</description> <type>progress</type> <id>20</id> <posX>190</posX> <posY>81</posY> <width>165</width> <height>1</height> <label>#DriveFreeSpace.C.AvailableSpace.UsedPercentage</label> <lefttexture>statusbar_left.png</lefttexture> <midtexture>statusbar_mid.png</midtexture> <righttexture>statusbar_right.png</righttexture> <visible>yes</visible> </control> <control> <description>Progress Back</description> <type>image</type> <id>20</id> <posX>400</posX> <posY>68</posY> <width>165</width> <height>31</height> <texture>statusbar_back.png</texture> <visible>yes</visible> </control> <control> <description>Progress Bar</description> <type>progress</type> <id>20</id> <posX>390</posX> <posY>81</posY> <width>165</width> <height>1</height> <label>#DriveFreeSpace.D.AvailableSpace.UsedPercentage</label> <lefttexture>statusbar_left.png</lefttexture> <midtexture>statusbar_mid.png</midtexture> <righttexture>statusbar_right.png</righttexture> <visible>yes</visible> </control> <control> <description>Progress Back</description> <type>image</type> <id>20</id> <posX>600</posX> <posY>68</posY> <width>165</width> <height>31</height> <texture>statusbar_back.png</texture> <visible>yes</visible> </control> <control> <description>Progress Bar</description> <type>progress</type> <id>20</id> <posX>590</posX> <posY>81</posY> <width>165</width> <height>1</height> <label>#DriveFreeSpace.R.AvailableSpace.UsedPercentage</label> <lefttexture>statusbar_left.png</lefttexture> <midtexture>statusbar_mid.png</midtexture> <righttexture>statusbar_right.png</righttexture> <visible>yes</visible> </control> [/CODE] Das Ergebnis ist auf dem dritten Screenshot zu bewundern. Mit den hier vermittelten Kenntnissen kommt man schon ein ganzes Stück weit auf dem Weg zum perfekt angepassten Skin. Ein wenig Übung und keine Scheu vor der Geschichte, dann klappt es bestimmt. Viel Erfolg und Spaß beim Nachmachen. [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Language specific support
Deutsches MediaPortal Forum
Plugins & Skins für das MediaPortal
Skins
Skin Modifikationen
Wie modifiziert man einen Skin...
Contact us
RSS
Top
Bottom