- March 17, 2013
- 168
- 92
- Home Country
-
Germany
Einleitung
Hallo und herzlich Willkommen in meinem kleinen Workshop. Auslöser bei mir war das ich die Plugins die ich regelmäßig nutze über gefühlt tausende Untermenüs aufrufen musste, und PlugIns die ich nur höchst selten (oder gar nicht) verwende wertvollen Platz auf der Startseite wegnehmen. Da der offizielle Editor wohl noch ein Weilchen braucht bis er veröffentlicht wird bleibt einem im Moment nur die Möglichkeit die Skindateien manuell zu editieren. Mir persönlich gefällt das 2x3 Kachel-Design besser als die Extended-Variante (für die ja schon ein Editor existiert), deswegen werde ich hier auch nur darauf eingehen. Auf der Suche nach Tutorials wurde ich leider nicht fündig, also hab ich mir mit Hilfe der Informations-Schnipsel mal die Skindateien angesehen und etwas rumgespielt und eine (‘eine‘, nicht ‘Die‘) Lösung gefunden. Dieser Thread soll die Informationen hier also Bündeln um auch unerfahrenen Benutzern die Möglichkeit zu geben den Skin nach dem eigenen Nutzungsverhalten anzupassen.
Noch eins vorweg: Ich erhebe keinen Anspruch auf Perfektion. Angefangen habe ich in der Schulzeit mit Pascal und Delphi, mittlerweile bin ich auch etwas mit C vertraut, aber XML kannte ich so vorher nicht. Alles Nachfolgende hab ich mir selbst zusammengereimt (durch ‚Trial and Error‘), es mag also vielleicht nicht die sauberste und eleganteste Lösung sein, auf meinem System funktioniert es allerdings (bislang) ohne Probleme.
Bevor es losgeht
Was wird also benötigt? Nicht viel, ein Texteditor reicht (Grundlegende Computerkenntnisse sind sicherlich auch von Vorteil). Für Puristen tut es der eingebaute Windows-Editor (notepad.exe), etwas komfortabler geht’s zum Beispiel mit der Freeware notepad++ (Link). Die Vorteile: Das Programm bietet Tabs, man kann also komfortabel zwischen mehreren Dateien hin- und herschalten. Zudem erkennt es die Syntax und hebt sie farblich hervor, was für eine deutlich bessere Übersicht sorgt, Hilfestellungen gibt (markiert man z.B. eine öffnende Klammer wird die schließende Klammer mit hervorgehoben) und somit hilft Fehler zu vermeiden oder schneller zu finden.
Wer noch etwas mehr zum Thema .XML und Skindateien erfahren will, der sollte sich mal in Lehmden’s Thread „Wie modifizert man einen Skin?" umsehen. Da kann man noch ein paar Grundlagen erlernen.
Theme erstellen
Nachdem das geklärt ist können wir uns an die Arbeit machen. Zunächst erstellen wir ein eigenes Theme. Auf diese Weise zerschiessen wir uns nicht unser laufendes System. Außerdem erleichtert es die Arbeit bei ‘Trial and Error‘-Vorgehensweise, dazu aber später mehr.
Dazu öffnen wir den Skinordner. Standardmäßig sollte der unter C:\ProgramData\Team MediaPortal\MediaPortal\Skin\Titan zu finden sein. Im Unterordner Themes (der dürfte schon existieren, falls nicht wird er einfach angelegt) erstellen wir jetzt einen neuen Ordner und benennen ihn zum Beispiel angepasst. Dieser Name ist dann auch der mit dem ihr das Theme später anwählt. Damit Mediaportal auch weiss dass sich darin ein Theme befindet kopieren wir aus einem anderen Theme-Ordner (z.B. aus „blue background“) die Datei theme.xml und editieren sie mit einem Texteditor (nicht mit dem Internet-Explorer, der kann nur lesen) und füllen unseren Namen zwischen <author> und </author> ein. Alternativ kann man natürlich auch eine neue theme.xml erstellen die folgendes enthält:
XML:
<?xml version="1.0" encoding="UTF-8" standalone="true"?>
<controls>
<theme>
<version>1.4.0.0</version>
<author>bta489</author>
</theme>
</controls>Und auch hier wieder bei <author> euren Namen eintragen, hier im Beispiel ist es meiner.
Jetzt haben wir schonmal ein eigenes Theme, was noch fehlt sind die geänderten Skindateien. Je nachdem was wir ändern wollen kopieren wir diese aus dem Titan-Ordner. Benötigt werden nur die Dateien die vom Original abweichen, für die erste BasicHome-Seite sollten es also
BasicHome.xml und BasicHome.Submenus.xml sein,
will man auch auf der zweiten Seite was ändern kommen noch die include.BasicHomeButton. … .xml –Dateien hinzu. Wisst ihr schon welche Kachel ihr verschieben/ändern wollt reicht es nur die zugehörige .xml zu kopieren (also z.B. include.BasicHomeButton.onlinevideos.xml für die Online-Videos-Kachel)
Editieren
I. Kacheln ersetzen
Eine Kachel zu ersetzen ist, wie ich feststellen konnte, recht problemlos möglich. Wir öffnen zunächst die BasicHome.xml in unserem Texteditor. Hier gibt es jetzt mehrere Dinge zu tun. Je nachdem um welche Kachel es sich handelt müssen verschiedene Einzelteile der Kachel editiert werden. In diesem Beispiel möchte ich die Radio-Kachel durch eine Wetter-Kachel ersetzen:
Zunächst werden wir das Bild editieren (Wer noch nach passenden Bildern sucht: Hier ist der offizielle Thread dazu). Haben wir ein passendes Bild gefunden erstellen wir in unserem gerade erstellten Theme-Ordner (Bsp.: C:\ProgramData\Team MediaPortal\MediaPortal\Skin\Titan\Themes\angepasst) einen neuen Unterordner mit der Bezeichnung Media und legen das Bild dort ab. Den Dateinamen können wir schonmal in die Zwischenablage kopieren oder uns zumindest merken)
In der BasicHome.xml scrollen wir nun soweit runter bis die Zeile <!-- :: ITEM IMAGES :: --> erscheint (Für die, die mit XML so gar nix am Hut haben: <!-- und --> umschließen Kommentare. Alles was dazwischen steht ist für den Computer irrelevant und wird ignoriert. Es sind Anmerkungen für Menschen wie eben uns, die sich in der Datei zurechtfinden wollen).
Nachfolgend werden die Bilder der Kacheln geregelt. Wir suchen also nach etwas wo Radio drin auftaucht, was praktischerweise schon der dritte Textblock ist:
XML:
<control>
<description>BasicHome Radio NoFocus</description>
<type>image</type>
<id>0</id>
<posX>42</posX>
<posY>607</posY>
<width>623</width>
<height>271</height>
<texture>basichome_button_radio.png</texture>
<animation effect="zoom" start="100,100" end="102,102" time="200" condition="control.hasfocus(3)">conditional</animation>
<animation effect="fade" time="250" reversible="false">visiblechange</animation>
<visible>![Control.IsVisible(3000)|control.HasFocus(200) | control.HasFocus(300) | control.HasFocus(400) | control.HasFocus(500) | control.HasFocus(600) | control.HasFocus(700)]</visible>
</control>Wer sicher gehen will kopiert den ganzen Textblock, kommentiert das original aus (also <!-- davor schreiben, --> danach) und editiert die Kopie. So haben wir das Original zur Hand wenn wir zurückwechseln wollen. Ganz hartgesottene editieren einfach das Original.
Als erstes ändern wir den Wert des Description Feldes, das wir später auch wissen was der neue Button machen soll. Aus <description>BasicHome Radio NoFocus</description> wird also beispielsweise <description>BasicHome Weather NoFocus</description>.
Zwischen <texture> und </texture> ersetzen wir basichome_button_radio.png mit dem Dateinamen des neuen Bildes den wir zuvor in die Zwischenablage kopiert haben (etwa basichome_button_weather.png um die ‚offizielle‘ Nomenklatur zu verwenden).
An der Position und dem generellen Verhalten wollen wir nichts ändern deswegen bleibt der Rest dieser Control-Einheit unangetastet.
Wir scrollen weiter bis wir in die <!-- :: BUTTONS:: -->-Sektion gelangen. Hier werden jetzt die eigentlichen Schalter geregelt, also was beim anwählen aufgerufen wird. Auch hier suchen wir eine Control-Einheit in der Radio auftaucht und werden beim zweiten Block fündig:
XML:
<control>
<description>BasicHome Radio</description>
<type>button</type>
<id>3</id>
<posX>52</posX>
<posY>613</posY>
<width>594</width>
<height>241</height>
<textureFocus>basichome_menu_item_label_overlay.png</textureFocus>
<textureNoFocus>basichome_menu_item_label_overlay.png</textureNoFocus>
<hyperlink>30</hyperlink>
<label>665</label>
<font>TitanLight20</font>
<textcolor>FFFFFF</textcolor>
<textalign>center</textalign>
<textcolorNoFocus>FFFFFFFF</textcolorNoFocus>
<textYOff>88</textYOff>
<onright>5</onright>
<onleft>7</onleft>
<onup>2</onup>
<ondown>12</ondown>
<animation effect="fade" time="250" reversible="false">visiblechange</animation>
<animation effect="zoom" start="100,100" end="102,102" time="200">focus</animation>
<animation effect="zoom" start="102,102" end="100,100" time="150">unfocus</animation>
<animation effect="fade" time="250">WindowOpen</animation>
<animation effect="fade" time="250">WindowClose</animation>
<visible allowhiddenfocus="true">![control.hasfocus(12)|control.hasfocus(13)|control.hasfocus(14)|control.hasfocus(99999)|Control.IsVisible(3000)|control.HasFocus(200) | control.HasFocus(300) | control.HasFocus(400) | control.HasFocus(500) | control.HasFocus(600) | control.HasFocus(700)]</visible>
</control>Auch hier passen wir zunächst die Beschreibung (<description> BasicHome Weather</description>) des Blocks an. Nun ändern wir die Verknüpfung mit dem Radio-Modul und sagen Mediaportal dass der Button WorldWeatherLite aufrufen soll. Dazu benötigen wir die ID des PlugIns. Im Titan-Ordner suchen wir also die Haupt-XML des PlugIns (Hier: WorldWeatherLite.xml) und öffnen sie. Hier wollen wir nur die ID lesen, deswegen tuts auch der InternetExplorer der standardmäßig XMLs öffnet. Wir finden in der dritten Zeile ein Feld mit <id>79770</id>. Das haben wir gesucht. Wir merken uns die Zahl (oder kopieren sie), schliessen die Datei wieder und editieren nun das zugehörige Feld in der BasicHome.xml: Aus <hyperlink>30</hyperlink> wird also <hyperlink>79770</hyperlink>. Die Beschriftung wird bei <label> ... </label> eingetragen. Hier steht nun nicht „Radio“ oder ähnliches drin, sondern eine Nummer (665). Das kommt daher dass Mediaportal verschiedene Sprachen unterstützt. Die Nummer verweist auf eine Tabelle von Variablen, deren Inhalt die Übersetzung eines Begriffs ist. Wer sich die Mühe machen will kann sich den Verweis auf ‚Wetter‘ in den Sprachdateien suchen und diese Nummer eintragen, hier geht es ja mehr um den Heimgebrauch, also können wir auch einfach Wetter hineinschreiben.
Nachdem wir gespeichert haben können wir Mediaportal starten, und in Einstellungen > GUI > Skin bei Thema das neue Theme angepasst wählen.
Auf diese Weise kann man auch während Mediaportal läuft editieren und spart sich so lange Ladezeiten. Die XMLs bearbeiten und speichern und anschliessend das Thema neu auswählen. so werden die XMLs neu geladen. Andere Kacheln lassen sich natürlich auf die selbe Weise ändern.
Die Kacheln der zweiten Seite werden in den include.BasicHome. ... .xml geregelt, die ich editiert habe. Das mag nicht die eleganteste Lösung sein, ist aber recht einfach. OnlineVideos war zB auf der zweiten Seite rechts oben (ist glaub ich Standard so), mit der oben erwähnten Methode habe ich es an die Stelle des Bilder-Buttons gesetzt, da ich den recht selten brauche. Was liegt da näher als die beiden gerade zu tauschen:
Hierzu öffnen wir jetzt die include.BasicHomeButton.onlinevideos.xml, welche recht einfach aufgebaut ist. Im ersten Control-Block legen wir das neue Bild in <texture>basichome_button_pictures.png</texture> fest (<description> natürlich auch editieren) und im zweiten Block genauso <description> und <label> neu benennen und in <hyperlink> die neue ID eintragen (Bilder ist die 2). Fertig!
Wer will kann auch noch einen Schritt weiter gehen und die schönen blauen Untermenüs anpassen:
II. Untermenüs editieren
Wem die existierenden Unterpunkte der Untermenüs nicht passen der kann auch hier sein Unwesen treiben. Dazu will ich zwei Beispiele präsentieren:
1. Im TV-Untermenü brauch ich z.B. den Punkt TV-Programm nicht, ich hab nen Knopf auf der Fernbedienung der mich dorthinbringt. Stattdessen möchte ich NoFear23m’s fabelhaftes Videoschnitt-Plugin „MyVideoRedo“ aufrufen. Hierzu bearbeiten wir jetzt die BasicHome.submenus.xml.
Nach dem Öffnen sehen wir schon gleich die <!-- :: TV :: -->-Sektion. Den ersten Control-Block ignorieren wir (hier wird der blaue Hintergrund und dessen Verhalten geregelt), wir suchen nach dem Block mit TV-Programm und werden beim fünften Block fündig:
XML:
<control>
<description>TVGuide</description>
<type>button</type>
<id>1002</id>
<width>500</width>
<height>40</height>
<textureFocus>-</textureFocus>
<textureNoFocus>-</textureNoFocus>
<hyperlink>600</hyperlink>
<label>600</label>
<font>font12</font>
<textcolor>FFFFFFFF</textcolor>
<textalign>left</textalign>
<textcolorNoFocus>FF000000</textcolorNoFocus>
<textYOff>0</textYOff>
<onright>6</onright>
<onleft>4</onleft>
<onup>1001</onup>
<ondown>1003</ondown>
<visible allowhiddenfocus="true">control.HasFocus(1000) | control.HasFocus(1001) | control.HasFocus(1002) | control.HasFocus(1003) | control.HasFocus(1004)</visible>
</control>Selbes Spiel wie Zuvor:
<description> anpassen, unter <hyperlink> die neue ID eintragen (Hier findet man die passende ID in der MyVideoReDoStart.xml. z.B. 1208) und dem Menüpunkt bei <label> einen neuen Namen geben (z.B. ‘VideoRedo‘), speichern und das Theme neu laden. Das wars schon.
2. Sehr ärgerlich sind die kaputten Menüpunkte bei MovingPictures. Wenn man an den Kategorien rumgespielt hat führten die Punkte ‚Alle Filme‘ ‚neu hinzugefügt‘ und ‚ungesehen‘ lediglich zu einer Fehlermeldung. Auch das kann man beheben (oder auch andere Kategorien auswählen):
Wir öffnen die BasicHome.submenus.xml und scrollen bis zum <!-- :: Moving Pictures :: -->-Segment und suchen den zu bearbeitenden Control-Block (etwa den mit <description>All Movies</description> für den Menüpunkt Alle Filme). Bei <hyperlinkParameter>categoryname:${AllMovies}</hyperlinkParameter> wird die entsprechende Kategorie aufgerufen.
Jetzt brauchen wir den internen Namen der Kategorie. Um die zu finden benötigen wir ein Programm das SQL-Datenbanken lesen kann. Ein solches findet man zum Beispiel hier: SQLite Database Browser.
Ist es installiert öffnet man die MovingPictures Datenbank (Standardpfad sollte C:\ProgramData\Team MediaPortal\MediaPortal\Database\movingpictures.db3 sein) wählt das Browse Data-Tab und wählt bei Table node aus, um die Kategorien anzuzeigen. Ich hatte wohl in der Anfangszeit (als ich noch gar keine Ahnung hatte) die Lokalisierung überschrieben und die Kategorie fest alle Filme genannt. Also habe ich den Hyperlink-Parameter in <hyperlinkParameter>categoryname:Alle Filme</hyperlinkParameter> geändert und siehe da, es funktioniert wunderbar.
Will man eine Kategorie erstzen kann man hier natürlich auch eine andere Kategorie eintragen. Dazu dann noch die Felder <description> und <label> entsprechend mit anpassen.
Soweit also erstmal von mir. Als nächstes wird noch ein Beitrag kommen wie man ein eigenes Submenü erstellt, da das aber etwas umfangreicher ist wird das ein neuer Beitrag. Ich hoffe bisher war das halbwegs verständlich und informativ. Ich hoffe der Ein oder Andere kann seine Mediaportal-Installation nach seinen Bedürfnissen anpassen. Sollten Fragen auftauchen stellt sie, ich werde versuchen sie zu benatworten.
Viel Spaß beim editieren!
Last edited by a moderator:
.
