Workshop - Screen von Plugins auslesen und erstellen bzw. anpassen

  • Hallo,


    so hier will ich mal aufzeigen wie ich als Laie mir die Screens aus externen Plugins heraus
    suche um diese zu skinnen.


    Dieser Thread wird geschlossen bleiben damit ich die Beispiele in einer Reihenfolge habe.


    Wer Anregungen, Kritik oder Fragen hat kann dies hier stellen:


    Diskussionen zum - Screen von Plugins auslesen und erstellen bzw. anpassen



    Ich benutze beim Skinnen der Screens drei Arten um diese zu finden.
    Es gibt bestimmt noch mehr Varianten und evtl. auch bessere , also scheut euch nicht
    euer Wissen zu Teilen, die anderen und auch ich werden es euch Danken :winking_face:


    Erstens:
    Die Sprache auf Englisch umstellen, denn oft erkennt man auch an den Englischen Titeln der
    Screens wie der Screenname lauten könnte. (Dies benutze ich Anfangs beim Skinnen fürs CVS)


    Zweitens:
    Wie im Wiki beschrieben die Fenster anzeigen und per Telnet schauen welchen Namen ausgegeben wird, doch diese Art funktioniert leider auch nicht immer..


    Dies erkläre ich hier nochmals am Beispiel einen neuen dmm-experimental Images:


    Also wir öffnen uns die Datei "skin.py", diese ist zu finden in "/usr/lib/enigma2/python".
    am besten per Telnet mit dem folgendem Befehl:

    Code
    mcedit /usr/lib/enigma2/python/skin.py


    Hiermit öffnen wir die Datei auf der Konsole mittels dem MidnightCommander der sich auch mit der
    Mouse navigieren läßt und wir mit diesem leichter arbeiten können als mit Vi.


    Anbei auch ein paar Screenshots vom Umgang mit dem MidnightCommander...


    Hier klicken wir nun entweder mit der Mouse unten auf die Leiste den Button "Sreach",
    oder wir Drücken alternativ die "F7" Taste.


    Es öffnet sich das Fenster zum eingeben des Suchstrings (MidnightCommander02.jpg)
    Hier geben wir nun den Suchstring ein (ohne Abostroph und beachtet die Groß-Kleinschrift) "readSkin"


    Mittels den Pfeiltasten auf der Tastatur scrollen wir nun weiter nach unten ca. 12 mal,
    bis zum Eintrag "name = n" wir schreiben nun direkt darunter in einer neuen Zeile
    dann folgendes hinein: "print names" (MidnightCommander03.jpg)


    So nun speichern wir die Datei mittels der "F2" Taste oder eben der Mouse
    und beenden den MidnigntCommander.
    (bitte beachtet das diese Datei bei einem Online-Update meist wieder überschrieben wird)


    Nun geben wir im Telnet-Fenster folgenden Befehl ein:

    Code
    init 4 && sleep 5 && enigma2


    Wenn nun das Enigma neu gestartet wurde und wir mit der Fernbedingung dann einen Screen aufrufen wird uns eigentlich der Name des Screen angezeigt.
    Ich angle mich nun mal durch vom Hauptmenü zum Plugin Genuine Dreambox, also mit


    Menü - Erweiterungen - Genuie Dreambox


    Die Anzeige sieht dann so aus:



    Drittens:
    Wenn wir wissen zu welchem Plugin der gesuchte Screen gehört können wir diesen auch in dem entsprechendem Plugin suchen, meist zu finden in /usr/lib/enigma2/python/Plugins unter Extensions oder SystemPlugins, dort suchen wir in dessen plugin.py nach dem Screen.


    Einige Plugins haben dort auch mehrere Screens definiert, ggf, müssen wir eben wenn wir wie in meinem Falle kein Phyton beherrscht etwas rumspielen und ein wenig experimentieren.
    Beim GP3 und dessen Screens kann man ja auch das Wiki selbst zur Hilfe nehmen...



    Also fangen wir mal an mit dem einem "leichten" Screen im nächsten Posting :winking_face:


    PS: wenn wir uns ein wenig mit dem MidnightCommander vertraut machen haben wir uns zumindest
    in einem mächtigen Linuxtool eingearbeitet, und können diesen z.B. auch leicht auf einem Linux-PC
    oder einem NAS verwenden und müssen nicht immer neue Tools erlernen....


    PPS: Hier kommt nun noch eine Liste von den Plugins die erklärt wurden:


    * genuineDreambox


    * EasyMedia

  • So der erste "leichtere" Screen ist der des genuineDreambox.


    Wir öffnen nun die plugin.py des Plugins genuineDreambox.
    Diese ist zu finden in: /usr/lib/enigma2/python/Plugins/Extensions/GenuineDreambox


    in dieser finden wir nun folgenden Code:



    Hier habe ich nun zwei Indikatoren das dies der Gewünscht Screen ist :winking_face:


    Erstens: Die Zeile sagt dies eigentlich aus:

    Code
    class genuineDreambox(Screen):


    Zweitens: ein definierten Screen der wie folgt beginnt:

    Code
    <screen position="center,center" size="620,420" title="%s" >


    und endent wie es sich für einen Screen gehört mit:

    Code
    </screen>


    Um nun den Originalen Screen in unsere skin.xml einbauen zu können, müssen wir nun nur noch
    in dem Screencode den Screennamen einbringen.
    Den Screennamen haben wir uns im ersten Posting ja auch über Telnet schon ermittelt,
    Ohr erinnert euch an diese Ausgabe im Telnet:

    Code
    ['genuineDreambox_summary', 'SimpleSummary']


    oder und wir sehen in ja in der ersten Zeile im oberen Codefeld:

    Code
    class genuineDreambox(Screen):


    Also der Screenname lautet hier "wer es bisher noch selbst nicht erahnt hat" einfach genuineDreambox :winking_face:


    Nachtrag:
    Und den Tittel hatte ich vergessen, also der sollte da auch angepasst werden :winking_face:
    Ich lasse aber den Screenshot ohne angepassten Titel auch mal mit drinn...
    Dies muss nicht bei jedem Screen extra angepasst werden....


    Diesen Screennamen mpüssen wir dem obigen Screencode hinzufügen, also aus der ersten Zeile

    Code
    <screen position="center,center" size="620,420" title="%s" >


    wird nun ein

    Code
    <screen name="genuineDreambox" position="center,center" size="620,420" title="Genuine Dreambox" >


    Wir fügen also dies ein: name="genuineDreambox"


    der Komplette Code der dann in die skin.xml rein müsste würde also so lauten:

    Code
    <!-- genuineDreambox -->
    		<screen name="genuineDreambox" position="center,center" size="620,420" title="Genuine Dreambox" >
    		<widget name="infotext" position="10,20" zPosition="1" size="600,150" font="Regular;20" halign="center" valign="center" />
    		<widget name="resulttext" position="10,160" zPosition="1" size="600,110" font="Regular;20" halign="center" valign="center" />
    		<widget name="infotext2" position="10,280" zPosition="1" size="600,80" font="Regular;20" halign="center" valign="center" />
    		<widget name="kRed" position="185,365" zPosition="5" size="140,40" valign="center" halign="center" font="Regular;21" transparent="1" foregroundColor="white" shadowColor="black" shadowOffset="-1,-1" />	   
    		<ePixmap name="red" position="185,365" zPosition="4" size="140,40" pixmap="skin_default/buttons/red.png" transparent="1" alphatest="on" />
    		<widget name="kGreen" position="330,365" zPosition="5" size="140,40" valign="center" halign="center" font="Regular;21" transparent="1" foregroundColor="white" shadowColor="black" shadowOffset="-1,-1" />
    		<ePixmap name="green" position="330,365" zPosition="4" size="140,40" pixmap="skin_default/buttons/green.png" transparent="1" alphatest="on" />
    		</screen>


    Das <!-- genuineDreambox --> fügen wir uns rein damit wir einen Besseren Überblick behalten,
    wenn wir mal was nachscheuen wollen oder suchen.
    Viele Erfahrene Programmierer und Skinner reduzieren meist die Kommentare auf ein Minimum Ihrer Bedürfnisse, doch wie sind ja Laie und können uns am Anfang ja nicht alles gleich merken :winking_face:


    Wer nun will kann sich diesen Screen nun natürlich Anpassen nach seinen individuellen wünschen.


    Ich begnüge mich damit den Screen etwas zu vergrößern und unten noch das Dreamboxlogo einzufügen.


  • Hallo,


    Im Thread des Modern_Stone2_XD Skin wurde mir gesagt bzw. behauptet das Menü
    vom EasyMedia wäre in diesem Skin (Modern_XD Skin) kaputt :face_with_rolling_eyes:


    Also beschreibe ich nun hier mal wie ich aus diesem Plugin die Screens suchte und nun definiere.


    Das Plugin lautet also "EsayMedia" also suchen wir in "/usr/lib/enigma2/python/Plugins/Extensions"
    nach dem gewünschten Plugin und öffnen uns mal deren "plugin.py" um diese Anzuschauen....


    So wenn wir diese durchschauen finden wir folgende definierten Screens:


    Code
    class ConfigEasyMedia(ConfigListScreen, Screen):
    	skin = """
    		<screen name="ConfigEasyMedia" position="center,center" size="600,410" title="EasyMedia settings...">
    			<widget name="config" position="5,5" scrollbarMode="showOnDemand" size="590,380"/>
    			<eLabel font="Regular;20" foregroundColor="#00ff4A3C" halign="center" position="20,388" size="140,26" text="Cancel"/>
    			<eLabel font="Regular;20" foregroundColor="#0056C856" halign="center" position="165,388" size="140,26" text="Save"/>
    			<eLabel font="Regular;20" foregroundColor="#00f3ca09" halign="center" position="310,388" size="140,26" text="Plugins"/>
    		</screen>"""


    Schöner Namen und laut zu erkennen das dies für das Fenster der Konfiguration wäre :winking_face:


    Wer den Code in seine skin.xml haben will um den dann anzupassen müsste also nach der Erklärungen
    im ersten Posting folgendes Einsetzen.

    Code
    <!-- ConfigEasyMedia -->
    		<screen name="ConfigEasyMedia" position="center,center" size="600,410" title="EasyMedia settings...">
    			<widget name="config" position="5,5" scrollbarMode="showOnDemand" size="590,380"/>
    			<eLabel font="Regular;20" foregroundColor="#00ff4A3C" halign="center" position="20,388" size="140,26" text="Cancel"/>
    			<eLabel font="Regular;20" foregroundColor="#0056C856" halign="center" position="165,388" size="140,26" text="Save"/>
    			<eLabel font="Regular;20" foregroundColor="#00f3ca09" halign="center" position="310,388" size="140,26" text="Plugins"/>
    		</screen>


    Dieser Part des Codes: <!-- ConfigEasyMedia --> wäre wegen der Übersicht damit man ja später noch weiß bzw. besser erkennt für was das ist :winking_face:


    Ich benötige bzw. will hier keine Änderungen vornehmen...


    Der Nächste Screen den wir finden wäre:

    Code
    class AddPlug(Screen):
    	skin = """
    		<screen name="AddPlug" position="center,center" size="440,375" title="EasyMedia...">
    			<widget name="list" position="0,10" size="440,355" scrollbarMode="showOnDemand" />
    		</screen>"""


    Wer das Plugin kennt, wird sich denken können das es das Fenster von "Plugins hinzufügen/entfernen" ist.
    Wer dieses Fenster anpassen möchte sollte dies als Ausgangscode in seiner skin.xml verwenden:

    Code
    <!-- EasyMedia AddPlug -->
    		<screen name="AddPlug" position="center,center" size="440,375" title="EasyMedia...">
    			<widget name="list" position="0,10" size="440,355" scrollbarMode="showOnDemand" />
    		</screen>


    Diese Zeile wäre wieder der besseren Übersicht: <!-- EasyMedia AddPlug -->



    Danach finden wir diesen Screen als nächstes:


    So da mir selbst die Worte (if "800se" ) sofort ins Auge gesprungen sind und mir beim
    Studieren der "skin_default.xml" aufgefallen ist das die Ausgabe (id="2") dies Bedeutet:


    * <!-- Main screen colors (id=1 LCD) -->


    * <!-- Main screen colors (id=2 Color OLED (dm800se)) -->


    Also für die Display-Anzeigen sind schreibe ich hierzu mal nichts.
    Denn hier im Thread geht es ja um Screens und nicht um das Display :winking_face:


    So der Letzte Screen den wir finden beinhaltet den folgenden Code:


    So vom Titel her (class EasyMedia(Screen):) gehe ich mal davon ausdas dies der Hauptscreen
    ist den wir sehen wenn wir das Plugin starten...


    Von diesen Zeilen if sz_w > 1100: und elif sz_w > 1000: interpretiere ich mal das dies
    die Screen sein sollen je nachdem ob wir einen XD oder einen HD Skin verwenden.


    Da wie am Anfang beim Modern_Stone2_XD behauptet wurde der Screen wäre da Kaputt :face_with_rolling_eyes:
    Folgere ich eben daraus das es also gewollt ist das bei einem XD bzw. HD-Skin eiben kein Rahmen angezeigt werden und die Anzeigen ziemlich Links zu finden sind:


    * <screen flags="wfNoBorder" position="0,0" size="450,720" title="Easy Media">


    * <screen flags="wfNoBorder" Position="-20,0" size="450,576" title="Easy Media">


    Also bleibt ja nur der Dritte Zentrierte Screen der wohl bei den SD-Skins angezeigt wird und wohl von dem User auch verwendet wurde der eben behauptete der Screen wäre kaputt :winking_face:


    Also nehmen wir nun die SD-Variante und definieren diesen in unsere skin.xml und hier passe ich den Screen zum Modern_Stone2_XD Skin als Beispiel auch gleich mal etwas an.
    Vergrößere den Screen etwas, füge das Dreamboxlogo mit rein und unser Bild das beim selektieren
    der einzelen Punkte den Text untermalt.


    Code
    <!-- EasyMedia -->
    		<screen name="EasyMedia" position="center,70" size="320,470" title="Easy Media">
    			<widget name="list" position="10,10" size="300,420" scrollbarMode="showOnDemand" selectionPixmap="Modern_Stone2_XD/menu/listselection560x70.png" />
    			<ePixmap pixmap="skin_default/icons/dmm_logo.png" position="60,450" size="200,10" alphatest="on" />
    		</screen>


    Im Anhang dazu auch den Screenshot wie das dann beim Modern_Stone2_XD aussehen würde.
    Dieser Code ist im Modern_Stone2_XD nicht enthalten,wer dies haben wll kan sich diesen Code
    kopieren und selbst in die skin.xml einfügen :winking_face:



    PS: da ich kein Phyton kann, möge man mir ggf. meine schlechte Interpretation des Codes verzeihen :winking_face:

  • Hallo,


    buer mal noch ein weiters Beispiel wie man aus einem Plugin (dem AC3LipSyncSetup) einen eigenen
    Screen erstellt bzw. diesen an die eigene Optik anpasst.


    Da wir ja wissen das dies ein extra-Plugin ist von DMM bzw. deren Feed suchen wir nun
    in "/usr/lib/enigma2/phyton/Plugins" nach diesem Plugin.


    Wir werden dann auch fündig in "/usr/lib/enigma2/phyton/Plugins/Extensions" gleich oben
    mit dem Verzeichnisnamen "AudioSync".


    Dort suchen wir wieder in den ganzen .py Dateien nach einem Screen der als default definiert ist.


    In der "AC3setup.py" werden wir auch fündig:


    Nun müssen wir aus der ersten Zeile "class" wieder den Screennamen "AC3LipSyncSetup"
    mit dem unteren defaultskin kombinieren bzw. hinzufügen:


    und aus der ersten Zeile des defaultskin müsste dann dies werden:

    Code
    <screen name="AC3LipSyncSetup" position="center,center"......


    Und schon können wir dies dann als Grundlage für unseren zukünfigen Screen verwenden.


    Ich entscheide mich hier mal für diese Variante: