Wie modifiziert man einen Skin... (1 Viewer)

[Lehmden]

Hallo.
Da in letzter Zeit einiges an neuen Plugins erschienen sind und nicht alle sofort für jeden Skin angepasst werden können, dachte ich mir, ich schreibe mal ein kleines Tut, wie man sich diese fehlenden Skin Files selbst erstellt. Viel Werkzeug ist nicht nötig. Im Prinzip kann man alles mit Windows Boardmittel bewerkstelligen. Aber wie so oft im Leben ist es viel leichter, wenn man besseres Werkzeug zur Verfügung hat. Es werden im einzelnen ein Text Editor (wie Notepad) und ggfs ein Bildbearbeitungsprogramm (wie Paint) benötigt. Beide Windows Programme sind allerdings sehr mager ausgestattet. Zum Glück bekommt man für beides kostenlosen und sehr viel leistungsfähigeren Ersatz. Ans Editor nehmen wir Notepad++ und zur Bildbearbeitung Paint.NET. Beide Programme stehen kostenlos zur Verfügung und sind leicht zu bedienen.

Skin Files sind zuerst mal XML Dateien. XML Dateien sind, ganz ähnlich wie HTML Dateien (Webseiten) einfache Text Dateien, die mit jedem Text Editor erstellt, bearbeitet und verändert werden können. Eine XML Datei besteht aus Tags (Befehle), die in <> eingerahmt sind. Jeder Tag wird mit <Tag> geöffnet und muss mit </Tag> abgeschlossen werden. Dazwischen kann beliebig viel Text, aber auch beliebig viele andere Tags enthalten sein. Jedes XML Dokument fängt mit dem Header an, in dem definiert wird, welche XML Version und welche Zeichen- Codierung verwendet wird. Diese Header Zeile sieht so oder so ähnlich aus:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

Das muss einfach am Anfang so einer Datei stehen und ist noch nichts MP spezifisches. Ein weiteres wichtiges Element, welches nicht MP spezifisch ist, sind Kommentare. Kommentare bestehen aus Text, der nicht abgearbeitet wird sondern normalerweise nur zur Verbesserung der Übersichtlichkeit dient. Also der Kommentar: Hier fängt das Fenster XYZ an. Damit das nun als Kommentar erkannt wird, muss es mit <!-- am Anfang und --> am Ende eingeschlossen werden. Unser Kommentar sieht im XML Dokument also so aus:

<!-- Hier fängt das Fenster XYZ an-->

Eine weitere gern genutzte Eigenschaft solcher Kommentare ist es, bestimmte Abschnitte des Codes lahmzulegen, also die Ausführung zu verhindern, ohne ihn aus dem Dokument tatsächlich zu löschen. Denn zwischen <!-- und --> kann beliebig viel stehen, auch XML Befehle.

Die nächste Zeile so einer XML ist dann schon eher MP spezifisch. Jede MP Skin Datei besteht aus einem oder mehreren Fenstern. Deswegen kommt jetzt ein:

<window>

Normalerweise hat man nur ein Fenster, deswegen kommt:

</window>

erst ganz am Ende des Dokuments.

Ein weiteres globales Element wollen wir noch vorab allgemein betrachten, bevor wir ein uns echtes Beispiel vorknöpfen, Das Control Element. Jede Aktion, jeder Knopf, jedes Menu, jede Grafik, jeder Text, der in MP angezeigt wird, wird über ein Control gesteuert. Hierin wird das Aussehen, die Größe und Position, das Verhalten, usw festgelegt. Als Beispiel mal das Control für die Anzeige von Datum und Zeit aus dem von mir bevorzugten Backdrop Skin:

<control>
  <description>Date and Time</description>
  <type>label</type>
  <id>0</id>
  <posX>1912</posX>
  <posY>6</posY>
  <width>900</width>
  <shadowAngle>45</shadowAngle>
  <shadowDistance>2</shadowDistance>
  <textcolor>ffffffff</textcolor> 
  <shadowColor>ff191919</shadowColor>
  <font>font13</font>
  <label>#date  #time</label>
  <align>right</align>
  <visible>!control.isvisible(93761232)</visible>
  <animation effect="fade" start="0" end="100" time="350">WindowOpen</animation>
  <animation effect="fade" start="100" end="0" time="350">WindowClose</animation>  
</control>

Spätestens jetzt merkt man die Vorzüge eines guten Text Editors. Denn jeder gute Text Editor erkennt die Syntax von XML und stellt dann die Befehle, Variablen, Werte usw in unterschiedlichen Farben dar (Syntax- Hervorhebung) das macht so ein Dokument sehr, sehr viel übersichtlicher und leichter lesbar. So siet dieses Control in Notepad++ aus:

Eine Liste aller möglichen Befehle für so ein Control kann man im Wiki finden. Das würde hier den Rahmen bei weitem sprengen. Man kann an diesem Beispiel schön erkennen, wie einzelne Befehle untereinander in einem Control zusammengefasst sind. Wir werden uns vorrangig mit den Tags die die Position, Größe, Farbe und Schriftart steuern, beschäftigen. Denn wir werden kein komplett neues Skin File erzeugen, sondern ein vorhandenes (oft vom Default Skin) so verändern, das die Anzeige in unserem Skin gut aussieht bzw das anzeigt, was wir haben wollen.
Die verschiedenen Controls werden von einem Tag umrahmt, der sinnigerweise Controls heißt. Die dritte Zeile in unserem XML lautet also meist:

<controls>

und die vorletzte halt:

</controls>

Es gibt ander Tags, die außerhalb von Controls stehen können/müssen, Die sind für uns erst mal nicht von Bedeutung. Nur nicht wundern, wenn die dritte Zeile etwas anderes enthält. Irgendwann ziemlich am Anfang steht mit Sicherheit <controls>

Als letztes globales Element soll noch kurz der Import Tag erklärt werden. Mit

<import>mein.xml</import>

wird die Datei "mein.xml"in das aktuelle Dokument eingefügt, genau so als ob die Befehle direkt dort stehen würden. Das hat den unschätzbaren Vorteil, das man Sachen, die an vielen Stellen angezeigt werden sollen, nur ein mal schreiben muss. Außerdem kann man so leichter Änderungen vornehmen, da man kürzeren Quelltext hat, mit dem man hantieren muss. Auf jeder Seite, auf der man z.B. Datum und Urzeit angezeigt haben möchte braucht man nichts weiter zu machen als:

<import>common.time.xml</import>

zu schreiben.

So, jetzt machen wir Ernst. Wir wollen als Fingerübung das nette kleine Pluign DriveFreeSpace dazu nutzen uns über die freien Festplattenkapazitäten in unserem HTPC informieren zu lassen. DriveFreeSpace ist in der Regel nur nutzbar, wenn man selbst den Skin manipuliert. Denn was man wo angezeigt haben will, ist ganz individuell. So was kann man im Prinzip nicht Vorfertigen. Zuerst suchen wir uns mal aus, wo wir die Festplattenkapazität überall angezeigt bekommen wollen. Ich habe mich ausschließlich für den Basic Home Screen entschieden. Andere mögliche und sinnvolle Plätze wären z.B. im TV Menu, bei den Aufzeichnungen, usw. Allein daran sieht man schon, das es wenig Sinn machen würde, hier fertige Skin Files mitzuliefern.

Der Basic Home Screen ist ein ganz besonderer Fall. Bei den meisten Skins (natürlich auch bei Backdrop) kann man mit einem Editor das Aussehen und die Menus des Basic Home den eigenen Bedürfnissen anpassen. Sobald man also eine Änderung direkt an der BasicHome.xml vornimmt, ist sie nur von kurzer Dauer. Beim nächsten Verändern des Menus ist unsere eigene Änderung weg. Also was tun? Nun, es gibt ja die Import Funktion. Im Basic Home werden immer einige xml Dateien importiert. Welche und wie viele ist vom Skin abhängig. Fast immer wird die common.time.xml importiert. Hier habe ich z.B. die Informationen vom WorldWeather Plugin eingebaut. Allerdings wird die Zeit (und somit auch das Wetter) an vielen Stellen im Skin angezeigt. Deswegen ist die common.time.xml kein guter Platz, um unser DriveFreeSpace zu integrieren. Wir öffnen einfach mal die BasicHome.xml in unserem Editor. Nun suchen wir nach "<import>" Bei Backdrop sind es 4 Dateien, die im Basic Home importiert werden:

<import>common.overlays.xml</import>
<import>common.time.xml</import>
<import>basichome.overlay.WolPowerManager.xml</import>
<import>Backdrop.version.xml</import>

Die common.time haben wir schon ausgeschlossen. Die common.overlays.xml kommt auch nicht wirklich in Frage, da diese das kleine Vorschau Fenster darstellt, wenn wir bei laufendem Video (TV) auf einen anderen Screen (z.B. BasicHome) in MP wechseln. Dort würde die Plattenkapazität nicht viel Sinn machen. Aber wir haben ja noch zwei andere importierte Dateien. Ob jeder Skin eine xxx.version.xml hat, weiß ich gar nicht. Im Zweifel halt mal nachsehen. Das könnte ein passender Platz sein.

Bei Backdrop wird direkt "ab Werk" das Plugin WOLPowerManager unterstützt, welches einen (oder mehrere) im Netz vorhandenen Server überwacht, den Zustand im Skin anzeigt (was hier mit dem Import bewirkt wird) und bei Bedarf, wenn an ein konfiguriertes Plugin aufruft, automatisch den Server aufweckt. Hier haben wir nun unseren Platz gefunden, der weder an falscher Stelle angezeigt noch bei einer Änderung am Menu vernichtet wird. Man sieht, auch der passende Platz zum Einbinden ist eine ganz individuelle Angelegenheit. Am Ende der Datei, also bevor das <controls> Tag mit </controls> geschlossen wird wollen wir nun unsere Anzeige einbauen. In Forum von DriveFreeSpace finden wir ein Beispiel, wie das Plugin eingebunden werden kann:

<control>
  <description>Drive space</description>
  <type>textboxscrollup</type>
  <id>37483</id>
  <posX>1600</posX>
  <posY>100</posY>
  <width>300</width>
  <height>300</height>
  <font>font11</font>
  <label>#Drives.AvailableSpace.Data.Drives</label>
  <visible>yes</visible>
</control>

Dieses Beispiel hat allerdings einen "kleinen" Haken. Es funktioniert nicht. Seitdem dieses Beispiel veröffentlicht wurde, hat sich einiges am Plugin getan. Das Label (also das, was die Anzeige auf dem Schirm erzeugt, funktioniert nicht mit der Plugin Version für MP 1.2.x. Um also einen allerersten Erfolg zu sehen, müssen wir gleich Änderungen vornehmen. Vorab, ich habe DFS so konfiguriert (in der MP Config) das es drei Laufwerke überwacht. C: als Systemlaufwerk, D: als Laufwerk für Aufzeichnungen und die RAM Disk R: für Timeshift und den Windows Temp Ordner. Ich möchte die Kapazität der Laufwerke getrennt angezeigt bekommen, deswegen brauche ich dieses Control dreimal. Einmal pro Laufwerk. Das funktioniwerende Label für Laufwerk C. sieht so aus:

<label>#DriveFreeSpace.C.AvailableSpace.Data</label>

Für Laufwerk D dann entsprechend

<label>#DriveFreeSpace.D.AvailableSpace.Data</label>

, usw. Außerdem ist der Typ Textboxscrollup" ungünstig bis ungeeignet für unseren Zweck. Der Typ "Label" passt viel besser, finde ich. Scrollender Text bei so einer eher kurzen Anzeige, nein, muss ich nicht haben. Bei Label braucht man die Angabe von Breite (width) und Höhe (height) nicht, also werden diese Tags entfernt:

<control>
  <description>Drive space</description>
  <type>Label</type>
  <id>37483</id>
  <posX>1600</posX>
  <posY>100</posY>
  <font>font11</font>
  <label>#DriveFreeSpace.C.AvailableSpace.Data</label>
  <visible>yes</visible>
</control>

Diese Änderung speichern wir ab und laden den Basic Home neu. Das kann man machen, in dem man auf eine andere Seite geht und dann wieder zurück. Auf dem Screenshot 1 sieht man nun, wie das Ergebnis aussieht. Wirklich toll ist das noch nicht. Aber immerhin haben wir ein Ergebnis. Das ist doch schon mal was. Nun kommt die Feinjustage. Zunächst ändern wir die Schrift, um sie an den Skin anzupassen. Bei Backdrop wird mit Schatten bei der Schrift gearbeitet, um sie besser lesbar zum machen, wenn der Fanart- Hintergrund nicht optimal für die Darstellung ist. Dieser Schatten wird über folgendes gesteuert:

<shadowAngle>45</shadowAngle>
<shadowDistance>2</shadowDistance>
<shadowColor>ff191919</shadowColor>

Mit shadowAngle wird der Winkel (45°) mit shadowDistance wird er Abstand des Schattens zur Schrift eingestellt (2 Pixel) und mit shadowColor die Farbe des Schattens. Die Farbe wird als 32 Bit Hex Wert eingtragen. die ersten beiden (ff) sind für den Alpha Kanal, also für die Transparenz zuständig. ff ist 255 im Dezimal System, also voll sichtbar. Bei 00 wäre der Schatten komplett unsichtbar. Dann kommt der Wert für Rot (19), dann Grün (19) und Blau (19) also ein relativ dunkles Grau. Diese Werte hab ich einfach von einer anderen Stelle aus dem Skin kopiert und nicht selbst ausgetüftelt. Jetzt ändern wir noch die Schriftgröße (font)von 11 auf 10 und setzen die Schriftfarbe (textcolor) auf weiß (ffffffff). Der gesamte Bereich für die Schrift sieht jetzt so aus:

<shadowAngle>45</shadowAngle>
<shadowDistance>2</shadowDistance>
<shadowColor>ff191919</shadowColor>
<textcolor>ffffffff</textcolor>
<font>font10</font>

Jetzt verändern wir noch die Position auf dem Schirm. Das wird mit posX und posY gemacht. Die passenden Werte kann man durch Ausprobieren heraus bekommen. Mir passt hier X=200 und Y=1 am besten. Das fertige Control für Laufwerk C sieht nun so aus:

<control>
  <description>Drive space</description>
  <type>label</type>
  <id>37483</id>
  <posX>200</posX>
  <posY>1</posY>
  <shadowAngle>45</shadowAngle>
  <shadowDistance>2</shadowDistance>
  <textcolor>ffffffff</textcolor> 
  <shadowColor>ff191919</shadowColor>
  <font>font10</font>
  <label>#DriveFreeSpace.C.AvailableSpace.Data</label>
  <visible>yes</visible>
</control>

Um jetzt auch die Kapazität von D: und R: anzeigen zu können kopieren wir das komplette Control und fügen es noch zweimal ein. Den Wert im <id> Tag erhöhen wir je um 1, um unsere Controls weiterhin individuell zu halten. Die Y Position bleibt, da wir die Werte nebeneinander und nicht untereinander haben wollen. Bei posX erhöhen wir den Wert je um 200. Und ganz wichtig, im Label Tag den Laufwerksbuchstaben anpassen.

Fertig sieht unser Code nun so aus:

<control>
  <description>Drive space</description>
  <type>label</type>
  <id>37483</id>
  <posX>200</posX>
  <posY>1</posY>
  <shadowAngle>45</shadowAngle>
  <shadowDistance>2</shadowDistance>
  <textcolor>ffffffff</textcolor> 
  <shadowColor>ff191919</shadowColor>
  <font>font10</font>
  <label>#DriveFreeSpace.C.AvailableSpace.Data</label>
  <visible>yes</visible>
</control>
 
<control>
  <description>Drive space</description>
  <type>label</type>
  <id>37484</id>
  <posX>400</posX>
  <posY>1</posY>
  <shadowAngle>45</shadowAngle>
  <shadowDistance>2</shadowDistance>
  <textcolor>ffffffff</textcolor> 
  <shadowColor>ff191919</shadowColor>
  <font>font10</font>
  <label>#DriveFreeSpace.D.AvailableSpace.Data</label>
  <visible>yes</visible>
</control>
 
<control>
  <description>Drive space</description>
  <type>label</type>
  <id>37485</id>
  <posX>600</posX>
  <posY>1</posY>
  <shadowAngle>45</shadowAngle>
  <shadowDistance>2</shadowDistance>
  <textcolor>ffffffff</textcolor> 
  <shadowColor>ff191919</shadowColor>
  <font>font10</font>
  <label>#DriveFreeSpace.R.AvailableSpace.Data</label>
  <visible>yes</visible>
</control>

Das fertige Ergebnis kann man auf dem dritten Screenshot sehen.

Wenn ihr jetzt auch DriveFreeSpace einbinden wollt, müsst ihr natürlich andere Werte für die Farben, Schriftgrößen und die Position, halt so wie es bei eurem Skin benötigt wird, verwenden.

Mit diesem Beispiel kann man natürlich noch keinen kompletten Skin kreieren. Aber es zeigt, wie man kleine Modifikationen vornimmt, um MP ganz individuell anzupassen. Wichtig ist nur, mit einer Kopie der Original- Datei zu arbeiten, um im Zweifel alles wieder zurück auf Anfang setzen zu können. Die MP Installation selbst kann man damit nicht verderben. Einfach das vermurkste xml wieder mit dem Original ersetzen und schon ist alles beim Alten.

Die Modifikation selbst hat natürlich in Wirklichkeit wesentlich weniger Zeit konsumiert als dieser Artikel beim lesen verschlingt. Vom schreiben ganz zu schweigen.

Also los, ans Werk und nicht mehr über fehlende Skin Files jammern. Selbst machen ist angesagt. Teil 2 folgt bald.

 

[Lehmden]

AW: Wie modifiziert man einen Skin...

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:

<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>

Das funktionierende Label lautet für Laufwerk C:

#DriveFreeSpace.C.AvailableSpace.UsedPercentage

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:

<texturebg>statusbar_back.png</texturebg>
<lefttexture>statusbar_left.png</lefttexture>
<midtexture>statusbar_mid.png</midtexture>
<righttexture>statusbar_right.png</righttexture>

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:

		<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>

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.

<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>

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.

	<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>

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.

 

[diskeeper]

AW: Wie modifiziert man einen Skin...

da ist ja mal wieder einer sehr fleißig!

ich hätte dazu noch eine kleine anmerkung bzw. hilfe.
ich möchte jedem der an den skins herum basteln möchte das myrefresh-plugin ans herz legen,
https://forum.team-mediaportal.com/mediaportal-plugins-47/mp1-2-update-my-refresh-95945/#post754929

das bringt doch eine erhebliche zeitersparnis, da man nicht nach jeder änderung mp neu starten muss.
einfach mp im fenster mitlaufen lassen und nach dem abspeichern der xml, in mp f5 drücken.
es wird dann das gui mit der änderung aktualisiert, das macht so erheblich mehr spaß.

ps: babylon 5 war ne geile serie.

 

[Lehmden]

AW: Wie modifiziert man einen Skin...

Hi.
Danke für den Tipp. Werde ich bei Gelegenheit mal ausprobieren.

 

[D3ltoroxp]

So ich möchte mir nun ein Overlay für die Anzeige von Aufnahmen und Geplante basteln. Dazu habe ich die vorhandene Datei kopiert umbenannt. So nun möchte ich sie Stück für Stück anpassen,

kann ich hier Eintragen was ich möchte oder haben die Rot Markierten Sachen eine Bedeutung einen Zusammenhang zu irgendwas ?

<description>GROUP: RecentlyAdded Movie 1</description>
<type>group</type>
<dimColor>0xffffffff</dimColor>
<visible>[control.isvisible(1004)]+string.equals(#StreamedMP.recentlyAdded.movie1.show,true)</visible>

Kann ich das dann einfach in dieses Abändern ??

<description>GROUP: Current Recording 1</description>
<type>group</type>
<dimColor>0xffffffff</dimColor>
<visible>[control.isvisible(1004)]+string.equals(#StreamedMP.Current.Recording.1.show,true)</visible>

Der nächste Punkt wäre der hier...

<control>
<description>Header label</description>
<type>label</type>
<id>0</id>
<posX>995</posX>
<posY>70</posY>
<width>258</width>
<label>#StreamedMP.LatestMovies</label>
<font>mediastream10tc</font>
<textcolor>White</textcolor>
</control>

Dort soll bei mir Laufende Aufnahmen stehen, das kann ich aber bestimmt nicht mit diesem Control bekommen, gibt es da einfach ne Textbox, in der ich selber was rein schreibe ?

EDIT::

Also das mit dem Header klappt. Mit dem visible nicht so richtig... Aber das brauche ich doch um es wenn ich über TV gehe, mir es angezeigt wird...

EDIT 2 ::

<?xml version="1.0" encoding="utf-8"?>
<window>
  <controls>
	<control>
	  <description>GROUP: Current Recording 1</description>
	  <type>group</type>
	  <dimColor>0xffffffff</dimColor>
	  <visible>!control.isvisible(1004)</visible>
	  <animation effect="fade" start="100" end="0" time="250" reversible="false">Hidden</animation>
	  <animation effect="fade" start="0" end="100" delay="700" time="500" reversible="false">Visible</animation>
	  <animation effect="fade" start="0" end="100" time="4000" reversible="false">WindowOpen</animation>
	  <animation effect="slide" end="300,0" time="1500" acceleration="-0.1" reversible="false">Hidden</animation>
	  <animation effect="slide" start="300,0" end="0,0" time="1000" acceleration="-0.1" reversible="false">Visible</animation>
	  <animation effect="slide" start="400,0" end="0,0" tween="quadratic" easing="in" time=" 400" delay="200">WindowOpen</animation>
	  <animation effect="slide" end="400,0" tween="quadratic" easing="in" time=" 400" delay="200">WindowClose</animation>
	  <control>
		<description>recording 1 BG</description>
		<posX>976</posX>
		<posY>50</posY>
		<type>image</type>
		<id>0</id>
		<width>306</width>
		<height>320</height>
		<texture>recentsummoverlaybg.png</texture>
		<colordiffuse>EEFFFFFF</colordiffuse>
	  </control>
	  <control>
		<description>Header label</description>
		<type>label</type>
		<id>0</id>
		<posX>995</posX>
		<posY>70</posY>
		<width>258</width>
		<label>Laufende Aufnahmen</label>
		<font>mediastream10tc</font>
		<textcolor>White</textcolor>
	  </control>
	  <control>
		<description>Recording Title 1</description>
		<type>label</type>
		<id>0</id>
		<posX>995</posX>
		<posY>245</posY>
		<width>258</width>
		<label>#latestMediaHandler.tvrecordings.active1.title</label>
		<textcolor>White</textcolor>
		<font>mediastream10tc</font>
		<scrollStartDelaySec>20</scrollStartDelaySec>
	  </control>
	  <control>
		<description>Recording 1 Start Time</description>
		<type>label</type>
		<id>0</id>
		<posX>996</posX>
		<posY>262</posY>
		<width>257</width>
		<label>#latestMediaHandler.tvrecordings.active1.startTime</label>
		<font>mediastream10c</font>
		<textcolor>White</textcolor>
	  </control>
	  <control>
		<description>Recording 1 End Time</description>
		<type>fadelabel</type>
		<id>0</id>
		<posX>1180</posX>
		<posY>262</posY>
		<width>100</width>
		<label>#latestMediaHandler.tvrecordings.active1.endTime</label>
		<font>mediastream10c</font>
		<textcolor>White</textcolor>
		<align>right</align>
		<scrollStartDelaySec>30</scrollStartDelaySec>
		<wrapString> |  </wrapString>
	  </control>
	  <control>
		<description>Recording 1 Channel Logo</description>
		<type>image</type>
		<id>0</id>
		<posX>995</posX>
		<posY>92</posY>
		<width>268</width>
		<height>151</height>
		<keepaspectratio>true</keepaspectratio>
		<texture>#latestMediaHandler.tvrecordings.active1.channelLogo</texture>
		<shouldCache>true</shouldCache>
	  </control>
	</control>

Ist der Code für das erste "laufende Aufnahmen" richtig so ? Ich weiß unten fehlt noch der Abschluss, aber da kommt ja noch 2 und 3...

Das blöde ist, ich kann es hier am PC nicht testen, da ich hier keine TV Karten habe. Kann ich dieses MePo nicht einfach ganz schnell mit dem HTPC verbinden, so das ich dem seine TV Karten und DB's nutzen kann ? Dann wäre das Skinnen einfacher...

Hm das mit dem <visible>!control.isvisible(1004)</visible> passt wohl nicht so, nun zeigt er mir es überall an nur nicht bei TV

Noch was kann ich eigentlich Elemente gemeinsam verschieben mit Notepad++, also ich habe jetzt den Background, den Text das Logo ausgerichtet, nun möchte ich das ganze verschieben, kann ich das irgendwie alles zusammen, wenn ich nur den Platz vom background ändern, oder muss ich alle anderen auch abändern.

 

[mrbonsen]

Dazu habe ich die vorhandene Datei kopiert umbenannt

welche ? war das ?

Hm das mit dem <visible>!control.isvisible(1004)</visible> passt wohl nicht so, nun zeigt er mir es überall an nur nicht bei TV

in der home.xml richtige id von deinem TV suchen.

 

[Lehmden]

Hi.

Kann ich dieses MePo nicht einfach ganz schnell mit dem HTPC verbinden, so das ich dem seine TV Karten und DB's nutzen kann ?

Musst nur den Tv Client installieren (der eigentliche MP Klient ist ja wohl installiert, denke ich)...

Hm das mit dem <visible>!control.isvisible(1004)</visible> passt wohl nicht so, nun zeigt er mir es überall an nur nicht bei TV

Das Besagt, dass es immer sichtbar ist, außer wenn control 1004 sichtbar ist. Ich vermute control 1004 ist für Tv zuständig (ist von Skin zu Skin unterschiedlich) Wenn dem so ist, musst du nur das logische "NOT" wegmachen, welches durch ein "!" dargestellt wird.

oder muss ich alle anderen auch abändern.

Blöderweise nicht, du musst alle posx und posy Werte um den gleichen Betrag verändern.... Also z.B.überall bei posx 120 hinzufügen...

 

[Lehmden]

Noch was:

#latestMediaHandler.tvrecordings.active1.channelLogo

Laut LMH Skinners Guide gibt es dieses Property nicht... Also nicht wundern, wenn kein Logo angezeigt wird...
Ich hab mir so geholfen:

<texture>c:\ProgramData\Team MediaPortal\MediaPortal\Thumbs\tv\logos\#latestMediaHandler.tvrecordings.active1.channel.png</texture>

Das tut es, so lange man kein WinXP nutzt....

 

[Holzi]

Noch was:

#latestMediaHandler.tvrecordings.active1.channelLogo

Laut LMH Skinners Guide gibt es dieses Property nicht... Also nicht wundern, wenn kein Logo angezeigt wird...
Ich hab mir so geholfen:

<texture>c:\ProgramData\Team MediaPortal\MediaPortal\Thumbs\tv\logos\#latestMediaHandler.tvrecordings.active1.channel.png</texture>

Das tut es, so lange man kein WinXP nutzt....

Doch gibt es. Wurde in einer der letzten Versionen neu hinzugefügt: http://code.google.com/p/latestmediahandler/wiki/SkinnersGuide#TV_Recordings_-_Active_Recording

 

[Lehmden]

OK, Danke, hat mich wohl der Browser Cache genarrt. Kann ich dann gleich bei mir auch umändern...

Edit:
Umgeändert und funktioniert...