[Workshop] Titan Basic Home nach eigenen Bedürfnissen anpassen

Discussion in 'Skin Modifikationen' started by bta489, September 3, 2013.

?

Hilfreich?

  1. Ja

    100.0%
  2. Nein

    0 vote(s)
    0.0%
Loading...
  1. bta489

    bta489 Portal Pro

    Joined:
    March 17, 2013
    Messages:
    112
    Likes Received:
    24
    Gender:
    Male
    Ratings:
    +49 / 0
    Home Country:
    Germany Germany
    Show System Specs
    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:

    Code (XML):
    1. <?xml version="1.0" encoding="UTF-8" standalone="true"?>
    2.    <controls>
    3. <theme>
    4. <version>1.4.0.0</version>
    5. <author>bta489</author>
    6. </theme>
    7. </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:

    Code (XML):
    1. <control>
    2. <description>BasicHome Radio NoFocus</description>
    3. <type>image</type>
    4. <id>0</id>
    5. <posX>42</posX>
    6. <posY>607</posY>
    7. <width>623</width>
    8. <height>271</height>
    9. <texture>basichome_button_radio.png</texture>
    10. <animation effect="zoom" start="100,100" end="102,102" time="200" condition="control.hasfocus(3)">conditional</animation>
    11. <animation effect="fade" time="250" reversible="false">visiblechange</animation>
    12. <visible>![Control.IsVisible(3000)|control.HasFocus(200) | control.HasFocus(300) | control.HasFocus(400) | control.HasFocus(500) | control.HasFocus(600) | control.HasFocus(700)]</visible>
    13. </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:

    Code (XML):
    1. <control>
    2.    <description>BasicHome Radio</description>
    3.    <type>button</type>
    4.    <id>3</id>
    5.    <posX>52</posX>
    6.    <posY>613</posY>
    7.    <width>594</width>
    8.    <height>241</height>
    9.    <textureFocus>basichome_menu_item_label_overlay.png</textureFocus>
    10.    <textureNoFocus>basichome_menu_item_label_overlay.png</textureNoFocus>
    11.    <hyperlink>30</hyperlink>
    12.    <label>665</label>
    13.    <font>TitanLight20</font>
    14.    <textcolor>FFFFFF</textcolor>
    15.    <textalign>center</textalign>
    16.    <textcolorNoFocus>FFFFFFFF</textcolorNoFocus>
    17.    <textYOff>88</textYOff>
    18.    <onright>5</onright>
    19.    <onleft>7</onleft>
    20.    <onup>2</onup>
    21.    <ondown>12</ondown>
    22. <animation effect="fade" time="250" reversible="false">visiblechange</animation>
    23. <animation effect="zoom" start="100,100" end="102,102" time="200">focus</animation>
    24. <animation effect="zoom" start="102,102" end="100,100" time="150">unfocus</animation>
    25. <animation effect="fade" time="250">WindowOpen</animation>
    26. <animation effect="fade" time="250">WindowClose</animation>
    27. <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>
    28. </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:


    Code (XML):
    1. <control>
    2.  
    3.   <description>TVGuide</description>
    4.  
    5.   <type>button</type>
    6.  
    7.  
    8.   <id>1002</id>
    9.  
    10.  
    11.   <width>500</width>
    12.  
    13.  
    14.   <height>40</height>
    15.  
    16.   <textureFocus>-</textureFocus>
    17.  
    18.   <textureNoFocus>-</textureNoFocus>
    19.  
    20.   <hyperlink>600</hyperlink>
    21.  
    22.   <label>600</label>
    23.  
    24.   <font>font12</font>
    25.  
    26.   <textcolor>FFFFFFFF</textcolor>
    27.  
    28.   <textalign>left</textalign>
    29.  
    30.   <textcolorNoFocus>FF000000</textcolorNoFocus>
    31.  
    32.   <textYOff>0</textYOff>
    33.  
    34.   <onright>6</onright>
    35.  
    36.   <onleft>4</onleft>
    37.  
    38.   <onup>1001</onup>
    39.  
    40.   <ondown>1003</ondown>
    41.  
    42.   <visible allowhiddenfocus="true">control.HasFocus(1000) | control.HasFocus(1001) | control.HasFocus(1002) | control.HasFocus(1003) | control.HasFocus(1004)</visible>
    43.  
    44. </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: September 4, 2013
    • Thank You! Thank You! x 3
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. bta489

    bta489 Portal Pro

    Joined:
    March 17, 2013
    Messages:
    112
    Likes Received:
    24
    Gender:
    Male
    Ratings:
    +49 / 0
    Home Country:
    Germany Germany
    Show System Specs
    III. Eigene Untermenüs erstellen

    Gehen wir noch einen Schritt weiter: Wie wär es denn mit einem Untermenü für den Musikbutton um beispielsweise auch Musikvideos in mvCentral zu starten. Dieses Unterfangen ist etwas umfangreicher, aber nicht wirklich schwieriger. Fangen wir mit dem Menü an sich an. Wir wollen vom Musikmenü ein Untermenü nach rechts öffnen. Das selbe macht das TV-Menü auch, nur an anderer Stelle. Also haben wir schonmal eine Vorlage: In der BasicHome.submenus.xml kopieren wir den gesamten TV-Abschnitt (also vor <!-- :: TV :: --> bis vor <!-- :: Moving Pictures :: -->) und fügen ihn vor den letzten Zwei Zeilen (</controls> und </window>) ein. Den Kommentar ändern wir für die neue Bestimmung in <!-- :: Music :: -->.

    Jetzt beginnt die eigentliche Arbeit. Im ersten Control-Block wird der Hintergrund definiert. Es ist zwar mit dem TV-Menü weitgehend identisch muss aber 'eine Kachel nach links' verschoben werden. Für den Computer ist das eine Verschiebung in X-Richtung (Koordinatensystem in der Schule), wir müssen als die X-Position mit <posX>592</posX> neu definieren. Das selbe noch für die Menüpunkte an sich im nächsten Block: <posX>685</posX>.

    Im Moment verhält es sich allerdings noch wie das TV-Menu, erscheint also nur wenn TV angewählt wird. Dem kann mit ändern des <visible>-Befehls entgegengewirkt werden. Die Zahlen in den Klammern ändern wir von 1000er Nummerierung (1000-1004) In 1200er Nummerierung (also 1200 - 1204).
    Der nächste Block definiert jetzt die einzelnen Untermenüpunkte. Hier können wir jetzt erstmal die IDs wie eben ändern: Aus <id>100x</id> werden jeweils <id>120x</id>. Jetzt sind die einzelnen Menüpunkte für das System eindeutig deklariert (Der <visible>-Befehl von zuvor sagt dass der Hintergrund sichtbar ist, wenn einer der Untermenüpunkte angewählt ist). Anschließend müssen in jedem Control-Block die <ondown>, <onup>, <onleft> und <onright>-Felder angepasst werden. Hier wird bestimmt welches Element angewählt wird wenn ich runter/hoch/rechts/links auf der Fernbedienung drücke. Da die Befehle von TV kopiert wurden stimmt das nicht mehr ganz. <onleft> und <onright> sind bei allen Menüpunkten identisch: nach links zurück auf den Musikbutton (also ID 2), nach rechts auf den TV-Button (ID 4). Wer will kann hier natürlich auch was anderes festlegen. <onup> und <ondown> müssen nun einzeln angepasst werden. ondown das nächste, onup das vorherige. (Das erste Element (ID: 1200) verweist bei <onup> auf das letzte (ID: 1204) und entsprechend <ondown> des letzten Elemnts (ID: 1204) auf das erste (ID: 1200)).
    Auch hier müssen noch die IDs in den <visible>-Feldern auf die neuen 1200x-IDs angeglichen werden, dass die Menüpunkte sichtbar bleiben wenn das Untermenü aktiv ist. Anschließend können die einzelnen <Control>-Blöcke (also Menü-Unterpunkte) wie gehabt neu zugewiesen werden (<description>, <hyperlink> und <label> anpassen). Da das jetzt vielleicht etwas durcheinander war hier mal der entsprechende Abschnitt wie er bei mir aussieht (mit <!-- Kommentaren -->):

    Code (XML):
    1. <!--  :: Music ::  -->
    2.  
    3.   <control>                                                 <!-- Ab hier gehts um den blauen Hintergrund -->
    4.      <description>Background</description>
    5.      <id>0</id>
    6.      <type>image</type>
    7.      <posX>592</posX>                              <!--verschieben des Hintergrunds -->
    8.      <posY>309</posY>
    9.      <width>709</width>
    10.      <height>329</height>
    11.      <texture>basichome_submenu_bg_r.png</texture>
    12.      <visible>control.HasFocus(1200) | control.HasFocus(1201) | control.HasFocus(1202) | control.HasFocus(1203) | control.HasFocus(1204)</visible>                <!--Hier jeweils aus 100x 120x machen -->
    13.       <animation effect="fade" time="250">WindowOpen</animation>
    14.       <animation effect="fade" time="200">WindowClose</animation>
    15.       <animation effect="fade" time="350" delay="0">visible</animation>
    16.       <animation effect="slide" start="-300" end="0" time="350">visible</animation>
    17.       <animation effect="fade" time="0">hidden</animation>
    18.   </control>
    19.  
    20.  
    21.   <control>                                                      <!-- Ab hier gehts um die einzelnen Menüpunkte -->
    22.       <description>group element</description>
    23.       <type>group</type>
    24.       <layout>StackLayout(Vertical,true)</layout>
    25.       <animation effect="fade" time="250">WindowOpen</animation>
    26.       <animation effect="fade" time="200">WindowClose</animation>
    27.       <animation effect="fade" time="350" delay="250">visible</animation>
    28.       <animation effect="fade" time="0">hidden</animation>
    29.       <dimColor>0xffffffff</dimColor>
    30.       <posX>685</posX>                               <!-- Verschieben der Menüpunkte -->
    31.       <posY>378</posY>
    32.  
    33.       <control>                                              <!-- erster Menüpunkt -->
    34.          <description>Musik</description>        <!-- Bsp.: Öffnet Musik wie vorher der Button -->
    35.          <type>button</type>
    36.          <id>1200</id>                                   <!--  neue ID um den Menüpunkt zu identifizieren -->
    37.          <width>500</width>
    38.          <height>40</height>
    39.          <textureFocus>-</textureFocus>
    40.          <textureNoFocus>-</textureNoFocus>
    41.          <hyperlink>501</hyperlink>                 <!-- Hyperlink auf Musik -->
    42.          <label>Musik</label>                           <!-- Beschriftung, so wei er später sichtbar sein wird -->
    43.          <font>font12</font>
    44.          <textcolor>FFFFFFFF</textcolor>
    45.          <textalign>left</textalign>
    46.          <textcolorNoFocus>FF000000</textcolorNoFocus>
    47.          <textYOff>0</textYOff>
    48.          <onright>4</onright>                           <!-- nach rechts auf TV -->
    49.          <onleft>2</onleft>                               <!-- nach links zurück auf Musik -->
    50.          <ondown>1201</ondown>                    <!-- nach unten auf den nächsten Menüpunkt -->
    51.          <onup>1204</onup>                            <!-- nach oben auf den letzten Menüpunkt -->
    52.          <visible allowhiddenfocus="true">control.HasFocus(1200) | control.HasFocus(1201) | control.HasFocus(1202) | control.HasFocus(1203) | control.HasFocus(1204)</visible>  <!-- Sichtbar, wenn einer der Menüpunkte angewählt ist. IDs auf 1200er ändern! -->
    53.     </control>
    54.  
    55. <!-- ... -->
    56. <!-- genauso für die weiteren Menüpunkte mit IDs 1201-1204-->
    57. </control>
    Nach diesem Schema kann man nun die 5 Menüpunkte gestalten. Braucht man nicht alle 5 kann man bei dem ungenutzten einfach die <visible allowhiddenfocus....-Zeile bis hinter </visible> auskommentieren und eine neue Zeile <visible>false</visible> einfügen. So wird der Menüpunkt ausgeblendet, das Menü funktioniert auch so.

    Das war die Arbeit für das Untermenü. Als nächstes passen wir den Button in der BasicHome.xml an:

    Den <!-- :: ITEM IMAGES :: -->-Abschnitt von Musik können wir diesmal unverändert lassen, das Bild bleibt ja das gleiche. Allerdings müssen wir dafür sorgen dass wenn das Untermenü eingeblendet wird der darunterliegende Button verschwindet. Für ein Musik-Untermenü muss also der TV-Button ausgeblendet werden. Dazu suchen wir uns zunächst den mit <description>BasicHome TV Focus</description> bezeichneten Control-Block und erweitern die Werte im <visible>-Feld um unsere neuen Musik-IDs indem wir vor der schließenden eckigen Klammer folgendes einfügen:
    Code (Text):
    1. |control.hasfocus(1200)|control.hasfocus(1201)|control.hasfocus(1202)|control.hasfocus(1203)|control.hasfocus(1204)
    Damit wird schonmal das Bild ausgeblendet. Scrollen wir weiter zum Musik-Button (<description>BasicHome Music</description>). Der soll uns jetzt nicht mehr direkt zu unserer Musik führen sondern das neue Untermenü öffnen. Deshalb kommentieren wir die gesamte <hyperlink>1200</hyperlink>-Zeile mit <!-- --> aus (oder löschen sie ganz. Ich würde sie aber nur auskommentieren). Stattdessen fügen wir eine neue Zeile nach der <ondown>-Zeile ein (Ob die Reihenfolge der Zeilen wichtig ist, weiss ich nicht. Ich habs halt so gemacht wie es in den anderen Blöcken auch war):
    Code (XML):
    1. <onclick>#(skin.setfocus(35,1200))</onclick>
    Dieser Befeh öffnet jetzt kein PlugIn sondern verlagert nur den Fokus (also das was gerade angewählt ist) in das Fenster 35 (wer in der BasicHome.xml ganz hochscrollt sieht dort ganz oben <id>35</id>) auf das Element 1200, was -wir erinnern uns- unser erster Unterpunkt war.
    Jetzt haben wir schonmal das Untermenü aufgerufen und das TV-Bild ausgeblendet. Fehlt noch der TV-Button, der sich zwei Blöcke weiter unten (<description>BasicHome TV</description>) befindet. Hier erweitern wir wie beim Bild die <visible>-Zeile um die selben Elemente:
    Code (Text):
    1. |control.hasfocus(1200)|control.hasfocus(1201)|control.hasfocus(1202)|control.hasfocus(1203)|control.hasfocus(1204)
    Es fehlt noch die Untermenü-Anzeige in der rechten unteren Ecke der Kacheln. Erstens muss die des TV-Buttons für unser Untermenü ausgeblendet werden, Zweitens soll unser Musik-Button auch einen bekommen.
    Punkt Eins ist schnell erledigt: Im <description>submenu indicator</description> wird wieder die visible-Zeile um die selben Elemente wie zuvor erweitert (die Code Zeile spar ich mir hier jetz mal, steht ja ein paar Zeilen oberhalb).
    Um auch dem Musik-Button einen zu spendieren erstellen wir nach dem eben erwähnten Control Block einen neuen:

    Code (XML):
    1.     <control>
    2.       <description>submenu indicator music</description>
    3.       <id>0</id>
    4.       <type>image</type>
    5.       <posX>600</posX>                        <!-- neue Position über der Musik-Kachel -->
    6.       <posY>557</posY>
    7.       <width>22</width>
    8.       <height>20</height>
    9.       <texture>basichome_submenu_indicator.png</texture>
    10.       <visible>![Control.IsVisible(100)|Control.IsVisible(2000)|Control.IsVisible(3000)|control.HasFocus(200) | control.HasFocus(300) | control.HasFocus(400) | control.HasFocus(500) | control.HasFocus(600) | control.HasFocus(700)]</visible>
    11.       <animation effect="zoom" start="100,100" end="102,102" time="200" condition="control.hasfocus(4)">conditional</animation>
    12.         <animation effect="fade" time="250">WindowOpen</animation>
    13.         <animation effect="fade" time="150">WindowClose</animation>
    14.     </control>    
    Auf diese Weise können wir jetzt für jede Kachel ein neues Untermenü erstellen. Für die Unteren Kacheln käme dann noch eine Y-Verschiebung dazu, was aber auch kein Hexenwerk ist.


    IV. Backdrop/Fanart

    Was ich vorher nicht berücksichtigt habe ist das Thema Backdrops/Fanart. Nach den Änderungen die ich hier vorgestellt habe kann es da zu Unstimmigkeiten kommen (z.B. durch Kacheltausch Radio-Backdrop bei neuer Wetter-Kachel), die ich im folgenden korrigieren will. Die ganze Backdrop-Geschichte wird in der BasicHome.FanartSelected.xml geregelt, die wir uns erstmal in unseren angepasst-Ordner aus I. kopieren und sie in unserem Texteditor aufrufen.
    Fangen wir bei den getauschten Kacheln an: Wir suchen uns den Abschnitt, den wir getauscht haben zum Beispiel den Radio-Abschnitt und ändern unter <texture> die Bilddatei und passen <description> auch entsprechend an. Haben wir zum Beispiel die Bilder-Kachel getauscht tauchen da plötzlich 2 Control-Einheiten auf. Ich vermute das kommt durch die Durchschaltung verschiedener Backdrops, dass die schön ineinander übergeblendet werden können. Ich habe die Bilder-Kachel gegen OnlineVideos getauscht. Da brauch ich nur ein statisches Backdrop, also habe ich ein Control-Block komplett auskommentiert und in der anderen wie oben <texture> (<texture>hover_OnlineVideos.png</texture>)und <description> angepasst. Zudem bei <visible> das + control.isvisible(91919298) auskommentiert. Da bin ich mir jetzt nicht ganz sicher was diese ID jetzt genau beschreibt, aber es funktioniert :).

    Für ein neues Untermenü -wie das oben erstellte Musik-Untermenü- suchen wir uns wieder den passenden Control-Block (bzw. Blöcke) und passen die <visible>-Zeile an: Hier stand vorher nur die Kachel an sich drin. Es fehlen die Menüpunkte. Wie bei den getauschten Kacheln findet sich auch hier eine logisch 'Und'-Verknüpfte Anweisung (+ control.isvisible(91919297)) , die wir behalten. Die neue Zeile sollte also (in beiden Blöcken) so aussehen:
    Code (XML):
    1. <visible>[control.hasfocus(2) | control.hasfocus(1200) | control.hasfocus(1201) | control.hasfocus(1202) | control.hasfocus(1203) | control.hasfocus(1204)]  + control.isvisible(91919297)</visible>
    Jetzt werden auch bei den Unterpunkten die passenden Backdrops angezeigt.


    V. Resultat

    So sieht es beispielsweise bei mir jetzt aus:
    Home.JPG Home_Filme.JPG Home_Musik.JPG
    So ist -für mich- der Titan-Skin um einiges praktikabler geworden.
    Damit sollten die Grundlagen schonmal abgegrast sein um sich ein personalisierten HTPC zu zaubern. Ich hoffe damit auch unerfahrenen Benutzern die Möglichkeit zu geben sich ihr persönliches System zu gestalten.
    Vielen Dank fürs lesen und ich freue mich natürlich über jegliche Art von Rückmeldung.
     
    Last edited by a moderator: September 4, 2013
    • Thank You! Thank You! x 4
    • Like Like x 2
  4. cbleek

    cbleek Portal Pro

    Joined:
    May 8, 2007
    Messages:
    66
    Likes Received:
    0
    Ratings:
    +0 / 0
    Home Country:
    Germany Germany
    Toll! Nachvollziehbar und idiotensicher beschrieben!
    Vielen Dank für die Mühe...
     
  5. Commerzpunk
    • Premium Supporter

    Commerzpunk Retired Team Member

    Joined:
    August 29, 2007
    Messages:
    248
    Likes Received:
    30
    Gender:
    Male
    Location:
    Andernach
    Ratings:
    +32 / 0
    Home Country:
    Germany Germany
    Show System Specs
    Sehr gut beschrieben! Wirklich klasse!
    Ich selbst werde nichts anpassen, ich warte lieber noch ein Jahr auf den offiziellen Editor und verwende bis dahin das andere Home, dafür gibt's schon nen Editor.
     
  6. Nindustries

    Nindustries Portal Member

    Joined:
    May 31, 2013
    Messages:
    26
    Likes Received:
    6
    Gender:
    Male
    Ratings:
    +7 / 0
    Home Country:
    Belgium Belgium
    Show System Specs
    Viele Danke! Ich spreche einen bisschen Deutsch, aber das tutorial ist sehr güt geschreben.

    Danke!
     
  7. D3ltoroxp
    • Premium Supporter

    D3ltoroxp MP Donator

    Joined:
    June 1, 2008
    Messages:
    3,308
    Likes Received:
    133
    Gender:
    Male
    Ratings:
    +207 / 9
    Home Country:
    Germany Germany
    Show System Specs
    Hi BTA super Anleitung die du da geschrieben hast... Leider hab ich ein kleines Problem und hoffe das du mir dabei vllt helfen kannst. Ich nutze den Titanius Skin das ist ein Skin der auf dem Titan basiert aber stark abgeändert wurde. Leider ist der Aufbau vom BasicHome daher auch anders als hier beschrieben. Wenn du lust hättest mir zu helfen, dann kann ich dir gern mal die Skin Files schicken, vllt siehst du gleich durch wie das ganze aufgebaut ist. Ich nämlich leider nicht.
     
  8. bta489

    bta489 Portal Pro

    Joined:
    March 17, 2013
    Messages:
    112
    Likes Received:
    24
    Gender:
    Male
    Ratings:
    +49 / 0
    Home Country:
    Germany Germany
    Show System Specs
    Ich kanns ja mal versuchen. Mittlerweile fühle ich mich ganz heimisch in den XML-Dateien, da sollte was machbar sein.
    Nur her damit.:)
     
    • Thank You! Thank You! x 1
  9. D3ltoroxp
    • Premium Supporter

    D3ltoroxp MP Donator

    Joined:
    June 1, 2008
    Messages:
    3,308
    Likes Received:
    133
    Gender:
    Male
    Ratings:
    +207 / 9
    Home Country:
    Germany Germany
    Show System Specs
    Last edited: November 2, 2014
  10. bta489

    bta489 Portal Pro

    Joined:
    March 17, 2013
    Messages:
    112
    Likes Received:
    24
    Gender:
    Male
    Ratings:
    +49 / 0
    Home Country:
    Germany Germany
    Show System Specs
    Ich denke schon dass das hier rein passt. Man kann ja mal ein bisschen über den Tellerrand schauen:cool:.

    Ich hab mir den Skin jedenfalls mal runtergeladen und meine Nase in ein paar .XMLs gesteckt. So wie ich das sehe ist der Skin mit jeweils eigener XML für die Kacheln aufgebaut. Die einzelnen Buttons sollten in der jeweiligen include.BasicHomeButton.***.xml zu finden sein. Bei manchen entweder mit oder ohne Untermenüs (zu erkennen an dem an den Dateinamen angehängten .submenu.enabled oder .submenu.disabled).
    In diesen XMLs siehts dann ähnlich aus wie bei dem Titan-Skin. Je nachdem ob mit oder ohne Untermenü finden sich drei oder vier <Control>-Blöcke: Der erste definiert das Bild der Kachel, der zweite das Overlay (der etwas dunklere schwarze Balken an der Unterseite einer jeder Kachel) und der dritte ist der eigentliche Button, wo sämtliche Kontrollfunktionen definiert sind. In der Variante mit Untermenüs findet sich noch ein weiterer der die Anzeige des Indikators dass ein Untermenü vorhanden ist (Die drei grauen Striche rechts neben der Kachel-Beschriftung) übernimmt.

    Auch hier würde ich wieder ein Theme erstellen (selbes Vorgehen wie beim Titan-Skin), so dass ich erstens immer noch die Originaldateien als Backup habe, und zweitens im Falle eines Updates meine mühevoll modifizerten Dateien nicht einfach überschrieben werden.

    Zum Tauschen von 2 Kacheln würde ich die zwei betreffenden XMLs öffnen (notepad++ kann das übrigens recht komfortabel nebeinander) und alle nötigen Werte gerade vertauschen. Das wären vor allem die <posX> und <posY> in allen Blöcken. Im dritten Block (der mit <type>button</type>) zusätzlich noch die <onleft>,<onright>,<onup>,<ondown>-Felder für die richtigen Verweise auf die benachbarten Kacheln.
    Vorsicht ist beim Tausch von der ersten auf die zweite Seite (und umgekehrt) geboten: So wie ich das sehe benutzt der Skin intern keine wirkliche zweite 'Seite'. Stattdessen werden die Kacheln ein- oder ausgeblendet je nachdem welcher Button gerade gewählt ist. Kurz gesagt (ich tu mich gerade etwas schwer das in verständliche Worte zu fassen) sind alle Buttons der ersten Seite sichtbar wenn einer der Buttons auf der ersten Seite angewählt ist. Navigiere ich jetzt von einer rechts gelegenen Kachel auf der ersten Seite nach rechts ist in dessen <onright>-Feld ein Button der zweiten Seite eingestellt, die nun den Fokus erhält. Nun schalten alle Kacheln der ersten Seite auf unsichtbar und alle Kacheln der zweiten Seite auf sichtbar. In den XMLs erkennt man das an den <id>'s der Buttons: Auf der ersten 'Seite' sind es einstellige, auf der zweiten 'Seite' hunderter-Nummern.
    Für den Tausch über zwei Seiten würde ich also noch die <id>-Felder mittauschen, dass das weiterhin so bleibt (und dass die Verweise von anderen Kacheln noch stimmen). Außerdem müssen die <visible>-Felder angepasst werden. Das müsste man dann im Einzelfall anschauen was getauscht werden muss. Grob gesprochen müssten dann control.hasFocus() mit Hunderter-Nummern gegen die entsprechenden mit Einer-Nummern getauscht werden. Eventuell auch noch andere, ich hab jetzt nicht jede ID überprüft.

    Die passenden Backdrops sollten dann in der BasicHome.FanartSelected.xml zu finden sein und mit der neuen ID angepasst werden.

    Der Skin sollte da eigentlich keinen großen Widerstand leisten.
    So, das wars erstmal von mir :). Ist ja doch mehr Text geworden als ich dachte. Ich hoffe ich konnte etwas Licht ins Dunkel werfen.
     
    • Thank You! Thank You! x 1
  11. D3ltoroxp
    • Premium Supporter

    D3ltoroxp MP Donator

    Joined:
    June 1, 2008
    Messages:
    3,308
    Likes Received:
    133
    Gender:
    Male
    Ratings:
    +207 / 9
    Home Country:
    Germany Germany
    Show System Specs
    Erst mals vielen Dank fürs reinschauen. Das es was mit diesen included zu tun hat dachte ich mir schon. War mir aber nicht sicher. Ein wenig kenne ich mich aus. Kann schon mal wad hinzufügen oder verschieben. Mit notepad++ bin ich auch zu Gange also auch kein Neuland. Dann schau ich mir das mal an und teste Stück für Stück. Schwierig wird es bei einem völlig neuen Button. Da werd ich mir wohl einen kopieren den ich damit ersetzen will und versuch mich daran. Da ich mir schon den streamed angepasst habe bei dem es wesentlich einfacher mit dem basichome war bin ich mit der Theme Geschichte vertraut. Anfangs war das immer schlimm alles veränderte nach dem update weg. Aber so ist das ne feine Sache. Beim notepad wusste ich jetzt noch nicht das man zwei Dateien miteinander vergleichen kann, dafür hab ich bisher winmerge genommen. Wie genau geht das den mit dem notepad++ ?

    Auf geht's falls ich nicht weiter komme darf ich mich hier doch sicher wieder melden ? ;-)
     
    Last edited: November 3, 2014
Loading...
Loading...

Users Viewing Thread (Users: 0, Guests: 0)

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice
  • About The Project

    The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

    In reaching this goal we are working every day to make sure our software is one of the best.

             

  • Support MediaPortal!

    The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

    Care to support our work with a few bucks? We'd really appreciate it!