Workshop - GP3 - Screens erstellen "Step by Step" für Dummys

  • Hallo,


    da ich im "groben" mit dem erklären der Screens von einem CVS-Image fertig bin.
    Soll hier nun mal ähnlich , die Screens des Gemini3 also dem GP3 vorgestellt werden.


    Hier wird es auch erstmal um die Screens gehen,
    nicht um Renderer oder Python, welches ich selbst auch immer noch nicht verstehe :winking_face:


    Als Grundlage sollte man schon mal mit dem Wikibericht hier anfangen:


    * http://wiki.blue-panel.com/ind…Screen_Namen_in_GP3_Skins


    Besonderes Augenmerk sei auf dem Abschnitt: GP3 Screennamen ermitteln gerichtet...


    Meine also die GP3 eigene "skin.xml" die man in /usr/lib/enigma2/python/Plugins/Bp/geminimain findet,
    sowei der Abscnitt mit der skin.py die man modifizieren kann um per Telnet die Screennamen sich anzeigen zu lassen.



    Natürlich können bei meiner Ausführung selbst auch einiges nicht ganz korrekt sein, bin ja selbst auch
    kein eigentlicher Skinner der sich damit gut auskennt, hoffe man möge mir das aber verzeihen :winking_face:


    Ich werde diesen Thread wieder geschlossen halten um diesen sauber zusammen zu halten.


    Wer Fragen, Anregungen usw. hat kann dies in diesem Thread tun:
    Fragen zum Workshop - GP3 - Screens erstellen "Step by Step" für Dummys



    Auflistungs der Screens:


    * Die skin.xml des GP3 mit den wichtigstens Hauptscreens


    * <!-- GP3 (BluePanel) --> bzw. der Gemini Desktop


    * <!-- GP3 VariableListNoButton -->


    * <!-- GP3 VariableList3Button -->


    * <!-- GP3 VariableList4Button -->


    * <!-- GP3 VariableList2Lines -->

    * <!-- GP3 Config2Button -->


    * <!-- GP3 Config2ButtonSmall -->


    * <!-- GP3 ShowFileList -->


    * <!-- GP3 EcmExtraWindow -->


    * <!-- GP3 MultiMessageBox -->


    * <!-- GP3 HotplugScreen -->


    * <!-- GP3 SoundMessageBox -->


    * <!-- GP3 DLMenu -->


    * <!-- GP3 SimpleList -->



    * <!-- GP3 VariableListCover -->



    * <!-- GP3 VariableListNoButton_KernelInfo -->



    * <!-- GP3 VariableList3Button_DeviceManager -->


    * <!-- GP3 VariableList3Button_Automount -->


    * <!-- GP3 VariableList3Button_GeminiConfList -->


    * <!-- GP3 VariableList3Button_AboutScreen -->


    * <!-- GP3 VariableList3Button_geminiweather -->

    MfG EgLe :]

    Linux will Benutzer, die Linux wollen. Linux ist nicht Windows


    Kernel : 5.4.2-1-MANJARO LTS
    GUI : KDE 5.64.0 / Plasma 5.17.4
    Machine : Intel NUC8i7HVK
    Graphics : Radeon RX Vega M GH
    CPU : Intel Core i7-8809G @ 8x 4.2GHz
    RAM : Gskill F4-3000C16S-16GRS Speicherkarte so D4 3000 16GB C16 Rip

  • Hallo,


    Hier mal als Einblick die skin.xml des Gemini3 mit der Version 0.25-r6.


    Bitte bedenkt das bei neueren Gemini-Versionen ab 0.25-r6 diese ggf. erweitert oder sich
    verändern könnte, also kontrolliert in eurem verwendeten Gemini zuerst die skin.xml!




    Wichtig: Wer bei den Variablen Screens die Schriftgröße verändert muss später auf alle Fälle noch weitere Screen bei einzelnen Optionen anpassen, da die Anzeige dann nicht immer sauber passt.
    Ich werde erst die Screens aus der Gemini eigenen skin.xml auflisten, danach dann einige Anpassungen von verschiedenen Screen die wegen der veränderten Schriftgröße nicht mehr sauber passen...

    MfG EgLe :]

    Linux will Benutzer, die Linux wollen. Linux ist nicht Windows


    Kernel : 5.4.2-1-MANJARO LTS
    GUI : KDE 5.64.0 / Plasma 5.17.4
    Machine : Intel NUC8i7HVK
    Graphics : Radeon RX Vega M GH
    CPU : Intel Core i7-8809G @ 8x 4.2GHz
    RAM : Gskill F4-3000C16S-16GRS Speicherkarte so D4 3000 16GB C16 Rip

  • Hallo,


    der erste Screen den ich hier vorstelle ist das BluePanel auch als Gemini-Desktop bezeichnet.


    Wie man in der skin.xml erkennt gibt es hierbei drei Vorgaben:


    1. für einen HD-Skin

    Code
    <screen name="gDesktopHD" position="center,center" size="1280,720" flags="wfNoBorder" >


    2. für einen XD-Skin

    Code
    <screen title="" name="gDesktopXD" position="center,center" size="1024,576" flags="wfNoBorder" >


    3. für einen SD-Skin

    Code
    <screen title="" name="gDesktopSD" position="center,center" size="720,576" flags="wfNoBorder" >


    Je nachdem für welche Auflösung wir unseren Skin verwenden wollen nehmen wir uns die entsprechende Rubrik als Ausgansvorlage und können diesen nach unseren Wünschen anpassen.


    Ich selbst gehe von einem HD-Skin aus und nehme als Basis diesen HD-Skin: egle_black-HD für CVS - Image


    Um diesen Gemini-Destop (BluePanl) skinnen können müssen wir uns auch vorher Gedanken machen
    wieviele Icons in einer Reihe sein sollen und wie viele Icons Untereinander sein sollen bevor die Seite gewechselt wird.


    Als Standard sind in der Skin.xml 3 Icons neben einander, und 3 Reihen untereiander vorgegeben.
    Daher sehen wir in der skin.xml die Auflistung von 0 bis 8, dies entspricht eben 9 Icons (3 x 3).


    Ich wähle hier als Beispiel 4 Reihen nebeneinander und drei Reihen untereinander,
    also 4 x 3 dies Ergibt 12 Icons.


    Daher benötige ich die Auflistung von 0 bis 11 (sind 12 Iconsl, Labels und icon_sel).
    Damit mir ersten die Box nicht crasht beim definieren des 9 Icons oder Labels muss man sich eine
    gDesktop.conf erstellen die im root des eigenen Skin-Verzeichnis liegt, und in welcher
    die Anzahl der entsprechenden Icons definiert wurde.


    Der Inhalt meiner gDesktop.conf enthält also rein nur dies:

    Code
    4,12

    wurde dies angepasst können wir uns dem Destop bzw. dem Bluepanel widmen :winking_face:


    Den Code aus der Skin.xml habe ich so angepasst:


    Zur Erklärung:


    Den Titel lasse ich Leer, da dies in diesem Screen keine Bedeutung hat was man dort einträgt.


    Die widget name="icon_selx" sind für die selection also der Auswahl zuständig


    Die widget name="iconx" sind für das entsprechende Icon


    Die widget source="label0" sind für den entsprechend passenden Titel bzw. der Bezeichnung der Icons.


    Das Widget source="global.CurrentTime" setzt mir das Datum bzw. die Uhrzeit.


    Das Widget name="deskbackground" setzt mir mit der ersten fgenannten Farbe den Hintergrund des Fensters


    Das Widget name="deskinfobar" setzt mir z.B. die Hintergrundfarbe des Widgets source="info"


    Das Widget source="info" gibt mir den Text zum selektierten Icon aus


    Das Widget name="hotkey" gibt mir ggf. den Tastencode der Fernbedinung aus.
    Um bei dem Hotkey eigene Bilder als die vorgegebenen verwenden zu können
    (zählt auch für die BluePanel Icons) muss man im Skinverzeichnis ein Verzeichnis Namens Image erstellen und dort die entsprechenden Icons, Buttons usw. hinterlegen.


    Als Ansichtsbeispiel kann man da einfach einen fertigen Gemini-Skin verwenden um nach zuschauen
    wie die Anderen Skinner dies bewerkstelligt haben :winking_face:


    Anbei dann noch der Screenshot wie dies in meinem Beispiel aussehen kann...

  • So der erste Screen den ich Skinnen will ist der des Dateibrowser :winking_face:


    Wenn wir nun wie im Wiki beschrieben unseren Screennamen per Telnet suchen, und unseren
    Dateibrowser auswählen erhalten wir folgende Ausgabe im Telnetfenster:

    Python
    action ->  gActions ok
    [gDesktop] from Plugins.Bp.geminimain.FileBrowser import gBrowser,
    ['gBrowser', 'VariableList4Button_gBrowser', 'VariableList4Button']


    Dies bedeutet nun folgendes:


    1. das Fenster des Screens lautet eigentlich 'gBrowser'
    2. wird dieses Fenster nicht gefunden wird versucht das Fenster 'VariableList4Button_gBrowser' zu benutzen.
    3. Da auch dieses Fenster nicht existiert wird der default 'VariableList4Button' aus der GP3 eigenen skin.xml genommen.


    Da ich hier nun erstmal den Screen aus der GP3 eigenen skin.xml anpassen will benutzte ich
    hierfür auch den Standard-Screen 'VariableList4Button'.


    Wer gerne größere Schriften usw. verwendet wird später bemerken das man den GP3 eigenen Standard-Screens einige Probleme bekommt wegen den Tabellen usw. und für den Normaluser
    dürfte es wohl später leichter sein bei einigen Screens lieber einen eigen Screen neu zu definieren als
    immer wieder bei den Variablen Gemini-Screens herum zu exerimentieren und alle möglichen betroffenen Screnn zu Kontrollieren ob da auch noch alles passt (meine persönliche Meinung) :winking_face:


    Dieser Screen könnte also vom Coder her so aussehen:



    Eine Besonderheit ist hier auch der Widget name="PixmapIcon", denn bei diesem Aufruf wird nicht nur das entsprechende Icon (hier des Dateibrowsers) angezeigt, sondern falls man z.B. auch
    auf ein Jpeg- Bild beim Browser geht und dieses Selektiert wird auch das entsprechende Bild als
    kleines Vorschaubild anstelle des Icons angezeigt :tongue:


    Da dies ein Variabler Screen ist bleibt auch hier der Titel leer (wie eigentlich bei den meisten GP3 eigenen Screens).
    Denn so wird z.B. als Titel der Pfad angegeben den man im Browser benutzt..

  • So wenn man nun wie im Posting oben drüber beim zweiten Bild mit dem Dateibrowser
    auf ein Bild geht und dort die Information aufruft (Roter Button)


    Erhalten wir bei editierter skin.py folgende Ausgabe:

    Code
    action ->  gActions red
    ['BrowserFileInfos', 'VariableListNoButton_BrowserFileInfos', 'VariableListNoButton']

    Somit wissen wir nun das dieser Screen eigentlich als 'BrowserFileInfos' aufgrefufen wird.
    Und wenn dieser Screen nicht exostiert, wird versucht den Screen 'VariableListNoButton_BrowserFileInfos',
    zu starten. Sollte dieser auch nicht existieren wie in unserem Falle.


    Wird wieder einer der GP3-Standardscreen genommen aus der GP3 eigenen skin.xml,
    in unserem Falle der Screen 'VariableListNoButton', welchen wir nun auch skinnen möchten :winking_face:


    Code
    <screen name="VariableListNoButton" position="center,center" size="600,435" title=" " >
    	<widget source="menu" render="Listbox" position="5,5" size="590,425" scrollbarMode="showOnDemand" enableWrapAround="on">
    		<convert type="TemplatedMultiContent">
    			{ "template": [ MultiContentEntryText(pos=(2, 3), size=(558, 20), flags=RT_VALIGN_CENTER, text=0),
    					MultiContentEntryPixmapAlphaTest(pos=(0, 0), size=(0, 0), png=1) ],
    						"fonts": [gFont("Regular", 19)], "itemHeight": 25 }
    		</convert>
    	</widget>
    </screen>


    in diesem Beispiel verändere ich diesen auf diese Weise..


    Das Ergebnis sieht dann Beispielsweise so aus, wie im Anhang zu sehen ist.


    Dieser Screen wird benutzt z.B. bei:


    * Bildinformationen Dateibrowser


    * Informationen - Hardware


    * Informationen - Mountpunkte

  • So würden wir nun im Dateibrowser den Blauen Button drücken für die "Favoriten",
    könnten wir im Terminal unter Enigam2 folgendes sehen:


    Code
    action ->  gActions blue
    ['BrowserFavo0', 'VariableList2Lines_BrowserFavo', 'VariableList2Lines']

    Was dies nun bedeutet dürfte ja nun allen Klar sein, wir intressieren uns aber erstmal nur für den GP3 eigenen Standardscreen:


    Dies Ändere ich nun in folgendes Beispiel ab, mit dem im Anhang zu sehenden Ergebnis:

  • Der nächste Screen den ich Vorstelle ist der 'ShowFileList'.


    Dieser erreichen wir z.B. wenn wir im Dateibrowser ein Textfile selektieren und über die Menütaste uns
    diese Datei als Text anzeigen lassen.
    Im Telnetfenster wie im WIki beschreiben würden wir das dann sehen:

    Code
    allocating new converter!
    ['ShowFileList_summary', 'SimpleSummary']


    Der GP3 eigene Standardscreen sieht da dann so aus
    (zu finden in /usr/lib/enigma2/python/Plugins/Bp/geminimain/ShowFileList.py:frowning_face:

    Code
    self.skin = "<screen position=\"0,0\" size=\"" + str(size_w) + "," + str(size_h) + "\" flags=\"wfNoBorder\" > \
    			<widget source=\"menu\" render=\"Listbox\" zPosition=\"1\" position=\"20,20\" size=\"" + str(size_w-40) + "," + str(size_h-40) + "\" scrollbarMode=\"showOnDemand\" selectionDisabled=\"1\" > \
    			<convert type=\"TemplatedMultiContent\"> \
    				{\"template\": [  MultiContentEntryText(pos = (0, 0), size = (35, 18), flags = RT_HALIGN_LEFT, text = 0), MultiContentEntryText(pos = (40, 0), size = (" + str(size_w-40-40) + ", 18), flags = RT_HALIGN_LEFT, text = 1)], \"fonts\": [gFont(\"Console\", 15)], \"itemHeight\": 18 }</convert></widget> \
    			</screen>"


    Diesen habe ich mir nun so durch mehrfaches Probieren angepasst:

  • Hallo,


    für den <!-- GP3 VariableList3Button --> können wir eigentlich bis auf die Buttonanzahl den Screen
    vom <!-- GP3 VariableListNoButton --> übernehmen, oder den des <!-- GP3 VariableList4Button -->...


    Original sieht der Code in der Gemini eigenen skin.xml ja so aus:


    Ich entscheide mir für diese Variante der Anpassung:


    Damit passt er auch sauber bei vielen Skins in den Einstellungen und den Informationen,
    und wir müssen nur einige wenige dann noch extra Anpassen, Wie z.B. den Gerätemanager :winking_face:

  • Hallo,


    so der nächste Screen den ich konfigurieren will ist der <!-- GP3 Config2Button -->.
    Dieser wird z.B. benutzt bei der EPG-Suche.


    Hier verwende ich diese Anpassung:

    Code
    <!-- GP3 Config2Button -->
    	<screen name="Config2Button" position="center,80" size="650,365" title=" " >
    		<widget name="PixmapGreen" position="20,10" size="35,25" pixmap="egle_black-HD/images/buttons/key_green.png" alphatest="on" />
    		<widget name="ButtonGreen" position="65,10" size="200,25" font="Regular;25" halign="left" valign="center" backgroundColor="green" transparent="1" zPosition="1" />
    		<widget name="PixmapRed" position="20,60" size="35,25" pixmap="egle_black-HD/images/buttons/key_red.png" alphatest="on" />
    		<widget name="ButtonRed" position="65,60" size="200,25" font="Regular;25" halign="left" valign="center" backgroundColor="red" transparent="1" zPosition="1" />
    		<widget name="TextLabel" position="210,10" size="200,100" font="Regular;24" valign="center" halign="center"/>
    		<widget name="PixmapIcon" position="460,10" size="100,100" alphatest="on" />
    		<widget name="config" position="25,125" size="600,240" scrollbarMode="showOnDemand" itemHeight="30" selectionPixmap="egle_black-HD/menu/selection40.png" backgroundColor="background"/>
    	</screen>


    Das Ergebnis sieht dann in etwa so aus:

  • Hallo,


    das <!-- GP3 EcmExtraWindow --> muss man ja wohl nicht erklären :winking_face:


    Das wird bei mir einfach nur ein wenig vergrößert...


    Code
    <!-- GP3 EcmExtraWindow -->
    	<screen name="EcmExtraWindow" position="80,80" size="380,200" title=" " >
    		<widget name="text" position="5,5" size="300,150" font="Regular;18" />
    	</screen>
  • Hallo,


    dieser Screen muss eigentlich nicht extra geskinnt werden.
    Dies ist die Anzeige z.B. beim Stream-Traffic....


    Ich setzte hier aber das Icon etwas mittig und vergrößere ein wenig die Schrift.

    Code
    <!-- GP3 MultiMessageBox -->
    	<screen name="gMultiMessageBox" position="center,center" size="280,150" title=" " >
    		<widget name="icon" position="10,40" size="64,64" alphatest="on" />
    		<widget name="text" position="15,15" size="270,150" font="Regular;23" />
    	</screen>


    Das Ergebnis sieht dann so aus:

  • Hallo,


    der <!-- GP3 HotplugScreen --> erscheint z.B. beim einstecken eines USB Gerätes.


    Den Code habe ich etwas angepasst da ich natürlich die Schriftgröße vergrößert habe.



    Das Ergebnis sieht dann wie folgt aus:

  • Hallo,


    Der Screen <!-- GP3 Config2ButtonSmall --> wird z.B. erreicht wenn wir im Dateibrowser
    die Menütaste drücken und eine neue Datei oder einen neuen Ordner erstellen wollen.


    Code
    <!-- GP3 Config2ButtonSmall -->
    	<screen name="Config2ButtonSmall" position="center,center" size="550,100" title=" " >
    		<widget name="PixmapGreen" position="20,10" size="35,25" pixmap="egle_black-HD/images/buttons/key_green.png" alphatest="on" />
    		<widget name="ButtonGreen" position="65,10" size="200,25" font="Regular;25" halign="left" valign="center" backgroundColor="green" transparent="1" zPosition="1" />
    		<widget name="config" position="5,60" size="540,30" scrollbarMode="showOnDemand" selectionPixmap="egle_black-HD/menu/selection30.png" backgroundColor="background"/>
    	</screen>
  • Hallo,


    Dies ist erst mal ein Platzhalter, da ich bisher noch nicht herrausgefunden habe wann dieser Screen erscheint???


    Der Originalcode sieht so aus:

    Code
    <screen name="SoundMessageBox" position="center,center" size="280,150" title=" " >
    		<widget name="icon" position="10,10" size="100,100" alphatest="on" />
    		<widget name="text" position="15,15" size="270,150" font="Regular;22" />
    	</screen>

    MfG EgLe :]

    Linux will Benutzer, die Linux wollen. Linux ist nicht Windows


    Kernel : 5.4.2-1-MANJARO LTS
    GUI : KDE 5.64.0 / Plasma 5.17.4
    Machine : Intel NUC8i7HVK
    Graphics : Radeon RX Vega M GH
    CPU : Intel Core i7-8809G @ 8x 4.2GHz
    RAM : Gskill F4-3000C16S-16GRS Speicherkarte so D4 3000 16GB C16 Rip

  • Hallo,


    Der Screen "DLMenu" denke mal das soll Download-Menu bedeutet, wird z.B. kurz angezeigt,
    wenn wir beim Dreamnetcast uns die Daten herunterladen.


    Der Originalcode sieht so aus:

    Code
    <screen name="DLMenu" position="center,center" size="500,140" title="Download..." >
    		<widget name="text0" position="10,5" size="480,60" font="Regular;20" />
    		<widget name="text1" position="10,80" size="480,25" font="Regular;20" />
    		<widget name="progress" position="10,110" size="480,15" />
    	</screen>


    Da ich ein "zu schnelles Internet habe und den Screen nur für 2-3 sec. dann
    sehe kann ich leider kein Screenshot machen :tongue:

    MfG EgLe :]

    Linux will Benutzer, die Linux wollen. Linux ist nicht Windows


    Kernel : 5.4.2-1-MANJARO LTS
    GUI : KDE 5.64.0 / Plasma 5.17.4
    Machine : Intel NUC8i7HVK
    Graphics : Radeon RX Vega M GH
    CPU : Intel Core i7-8809G @ 8x 4.2GHz
    RAM : Gskill F4-3000C16S-16GRS Speicherkarte so D4 3000 16GB C16 Rip

  • Hallo,


    Dies ist erst mal ein Platzhalter, da ich bisher noch nicht herrausgefunden habe wann dieser Screen erscheint???


    Der Originalcode sieht so aus:

    Code
    <screen name="gSimpleList" position="center,center" size="600,435" title=" " >
    		<widget name="list" position="5,5" size="590,395" scrollbarMode="showOnDemand" />
    	</screen>

    MfG EgLe :]

    Linux will Benutzer, die Linux wollen. Linux ist nicht Windows


    Kernel : 5.4.2-1-MANJARO LTS
    GUI : KDE 5.64.0 / Plasma 5.17.4
    Machine : Intel NUC8i7HVK
    Graphics : Radeon RX Vega M GH
    CPU : Intel Core i7-8809G @ 8x 4.2GHz
    RAM : Gskill F4-3000C16S-16GRS Speicherkarte so D4 3000 16GB C16 Rip

  • Hallo,


    Da ich die Defaultschriftgröße verändert habe (vergößert) passen nicht mehr alle <!-- GP3 VariableList3Button --> Screens.
    Von Daher muss ich einige extra Anpassen...


    Der erste wäre der <!-- GP3 VariableList3Button_DeviceManager -->.

  • Der nächste der VariableList3Button-Screens wäre dann der für die Automointanzeige.


  • So dann die Anzeige der Gemini Konfiguration:

  • Der Gemini Infoscreen muss ich nacharbeiten weil mir leider bei einer größeren Schrift die Url abgeschnitten wird, man kann zwar hier die Fontgröße Ändern aber leider wird die Zeilenlänge von
    der entsprechenden py Datei vorgegeben.


    Daher benutze ich doert nun einfach eine etwas kleiner Schrift, so das die Url passt :face_with_rolling_eyes: