Workshop - CVS-Skin erstellen "Step by Step" für Dummys

    So da das Hauptmenü fertig ist will ich nun der Reihe nach (wie die Auswahl im Hauptmenü ist)
    die einzelnen Screens nun noch bearbeiten.


    Wenn ich nun so wie der SKin ist, den "Media Player" aufrufe kann es einem schlecht werden, da ja
    die defaultdefintion für einen SD-Skin angepasst wurde und wir aber einen XD-Skin haben,
    erscheint der Mediaplayer nun ganz am Linken Rand des Fernsehers :face_with_rolling_eyes:



    Also nehme ich mir nun aus der "usr/share/enigma2/skin.default.xml" den Mediaplayer heraus,
    füge das an meine eigene skin.xml an und verändere nun die Position und vergrößere auch gleich
    mal die Schrift wenn ich schon dabei bin.


    Weil ich die Schrift vergrößert habe wurde mir im Feld Kategorie: ab dem "o" der Rest abgeschnitten.
    Also erweitere ich deswegen auch noch den "size" Wert im Widget genretext vom defaultwert
    size="74,17" auf size="82,17" damit es wieder passt.


    Achja und natürlich kommt als CoverArt unser Bildchen vom Mediaplayer rein,
    falls das Musikfile dann kein eigenes Cover mitbrinngt :winking_face:


    Dies ist dann natürlich wieder ein neuer <Screen> und wird unter dem Letzen </screen>
    des <!-- Main menu --> eingefügt:


    Der nächste Punkt im Menü wäre ja der DVD Player-


    Da der Default-DVD_player ja nicht zu diesem SKin passt wird der komplett neu gestaltet.


    Hier werde ich aber nur mal den Komplette Code posten mit einem Screenshot wie der Fertig aussieht.
    Der Code wurde ja vom alten gemini_stone2_modern übernommen und ich bräuchte da jetzt wirklich
    eine Ewigkeit jeden einzelnen Schritt zu dokumentieren und mir jedesmal ein DVD-Image auswählen
    und für jedes einzelne Bild einen eigenen Screenshot zu erstellen.
    (Naja ich habe auch ein frisches CVS-Image drauf und meine Netzwerksachen sind noch nicht perfekt eingerichtet, so das mir bei den Netzwerkstreams auch noch als die Box hängen bleibt) :face_with_rolling_eyes:


    Wenn es aber unbedingt gewünscht wird, kann dies am Ende des Workshops wenn der Skin
    fertig ist gerne mal nachgereicht werden.


    Der Code sieht hier so aus:


    * In der ersten Zeile definieren wir die Position und die Größe der Inobar des DVD-players.


    * Mit dem ersten ePixmap setzen wir die Grafik der Infobar des Players


    * Mit dem zweiten ePixmap setzen wir Unser Bild der Playtasten (farbige Tasten)


    * dann folgen die Kapitel-informationen


    * <!-- Audio track info --> setzte das dolby.png vom defaultskin was wir aus der Infobar schon kennen


    * <!-- Subtitle track info --> setzt das teletext.png falls wir Untertitel zur Auswahl haben


    * <!-- Elapsed time --> für die Zeit die der Film schon gelaufen ist


    * <!-- Progressbar (movie position)--> zeigt den grafischen Balken wie weit der Film schon gelaufen ist


    * <!-- Remaining time --> wie viel Zeit noch bleibt bis der Film zu ende ist



    Genauers wird also Nachgeliefert, sobald meine Box richtig eingerichtet ist und auch das Netzwerkstream problemlos funktioniert.

    Der nächste Punkt als Menü-Eintrag wäre ja der Timer.


    Also packen wir die Timersachen an :winking_face:


    Wenn wir im Menü auf den Timer klicken, ist das default wohl nun etwas Klein,
    als XD-Skin können wir das Fenster und deren Inhalt ja ruih etwas vergößern damit es
    übersichtlicher wird und bei eingetargen Timer auch längere Sendernamen besser Anzeigt.


    Also verwenden wir als Grundlage hier den Part <!-- Timer edit list --> aus dem skin.default.xml
    und passen dieses an unsere Wünsche an.



    Hier habe ich einfach den Screen vergößert und die Farbigen Button weiter auseinander gezogen.
    Danach dann die Schrifttexte der Buttons "Key_red" usw. dann wieder sauber auf die Buttons positioniert.

    So das nächste wäre dann das Fenster des Timer-Eintrag.


    Hier habe ich nun das ganze auch etwas vergrößert:


    Code
    <!-- Timer entry -->
	<screen name="TimerEntry" position="center,center" size="650,480" title="Timer entry">
		<widget name="cancel" pixmap="skin_default/buttons/red.png" position="10,0" size="140,40" alphatest="on" />
		<widget name="ok" pixmap="skin_default/buttons/green.png" position="170,0" size="140,40" alphatest="on" />
		<ePixmap pixmap="skin_default/buttons/yellow.png" position="330,0" size="140,40" alphatest="on" />
		<ePixmap pixmap="skin_default/buttons/blue.png" position="490,0" size="140,40" alphatest="on" />
		<widget name="canceltext" position="10,0" zPosition="2" size="140,40" halign="center" valign="center" font="Regular;21" backgroundColor="#9f1313" transparent="1" />
		<widget name="oktext" position="170,0" zPosition="2" size="140,40" halign="center" valign="center" font="Regular;21" backgroundColor="#1f771f" transparent="1" />
		<widget name="config" position="10,45" size="625,435" scrollbarMode="showOnDemand" selectionPixmap="Modern_Stone2_XD/menu/listselection625x25.png" transparent="1" />
	</screen>


    Hmm, muss jetzt aber erstmal schauen wo und wie ich es hinbekomme das mir die Schrift darin etwas größer angezeigt wird, und vor allem Wie ich die Buchstaben des Tastenfeldes in den unteren Bereich
    sichtbar bekomme wenn man auf dem Namen oder der Beschreibung geht :face_with_rolling_eyes:


    Nachtrag: So habe den Übeltäter gefunden.
    Da ich bisher ja nur mit einer Schrift arbeitet, musste ich die entsprechende Standard-Schrift noch
    einfügen am Anfang in der skin.xml, es fehlte diese Schrift von defaultskin:


    * <font filename="tuxtxt.ttf" name="Console" scale="100" />


    Der Code oben bei den Fonts muss also nun so lauten:

    Code
    <!-- Fonts -->
	<fonts>
		<font filename="nmsbd.ttf" name="Regular" scale="90" />
		<font filename="tuxtxt.ttf" name="Console" scale="100" />
	</fonts>


    Dann klappt es auch mit den Symbolen wie man im Anhang nebenan sieht :winking_face:

    Wenn man das <!-- Timer edit list --> Fenster geöffnet hat, und dort mindestens ein Timer
    eingetragen hat kann man in diesem Fenster mittels der Info-Taste in das "Timer Log" Fenster wechseln.


    Dies wird eigentlich von den meisten selten genutzt, sollte aber nicht vergessen werden :winking_face:


    Dies Erweitern wir nun auch noch_



    Das Ergebnis sieht dann so aus...

    Bei diesem XD-Skin wäre eigentlich das editieren dieses Fenster überflüssig.


    Es Handelt sich hierbei um das Fenster welches angezeigt wird bei einem Timerkonflikt.
    Ich habe dies mal aus der skin.default.xml des Deauftskin herausgezogen und halt gleich
    ein wenig das Fenster vergrößert.


    Ist halt als Beispiel aufgenommen, für diejenigen die dies evtl. gebrauchen können für einen eigenen Skin.


    Dies bräuchte man zwar hier im Skin auch nicht extra definieren,
    aber da wir nun dabei sind ist das ja auch der Letze Teil den ich in der skin.default.xml gefunden habe.


    Dieses Fenster Öffnet sich bei volgende Gegebenheit (Danke an Swiss-MAD für die Info):

    Quote

    Original von Swiss-MAD
    Ich vermute mal stark das dies dann auftaucht, wenn du 2 Sofortaufnahmen machst, und danach nochmal die rote Taste drückst, dann auf "Sofortaufnahme beende" gehst.
    Dann kommt ein Fenster in dem du auswählen kannst welche Sofortaufnahme du beenden willst.



    Habe da dann auch mal die Größe verändert um es zu testen, und es ist so :winking_face:


    Code
    <!-- Timer Selection -->
	<screen name="TimerSelection" position="center,center" size="600,400" title="Timer selection">
		<widget name="timerlist" position="0,45" size="600,400" scrollbarMode="showOnDemand" />
	</screen>

    So der nächste Punkt im Menü vore ja die "Informationen", also wollen wir dieses Fenster
    auch neu gestalten, nach dem gleichen Prinzip wie das Hauptmenü :winking_face:


    Also verzichte ich hier im Posting auf die Erklärung wie man die einzelnen Bilder und die
    entsprechende Umrandung gestaltet, steht ja schon im Posting <!-- Main menu -->.


    So im Untermenü der Informationen finden wir noch das Fenster <!-- Service info -->
    zu deutsch die Kanal-Infos, welches wir auch noch etwas anpassen wollen.


    Als weiteres Untermenü in den Informationen haben wir ja das Fenster "Über".
    Normalerweise bräuchte man dies nicht unbedingt bei diesem Skin abändern.


    Aber damits ein wenig Vollständig ist werden wir das auch ein klein wenig vergößern.
    Das Original ist auch in der skin_default.xml zu finden:


    Das sieht nun bei uns im neuen Skin so dann aus:



    Habe auch mal aus Spass versucht den Title (title="About") in (title="About Dreambox") umzubenennen,
    doch leider wird dann das About dann nicht mehr automatisch übersetzt, schade eigentlich :face_with_rolling_eyes:
    Also damit es mit dann anderen Sprachen dann auch weiterhin klappt bitte nicht umbenennen!!!

    So nun widmen wir uns dem nächsten Menüpunkt, den Erweiterungen.


    Also dem Fenster <!-- Plugin browser -->


    Code
    <!-- Plugin browser -->
	<screen name="PluginBrowser" position="center,center" size="600,405" title="Plugin browser">
		<ePixmap pixmap="skin_default/buttons/red-big.png" position="70,0" size="200,40" alphatest="on" />
		<ePixmap pixmap="skin_default/buttons/green-big.png" position="345,0" size="200,40" alphatest="on" />
		<widget name="red" position="70,0" zPosition="1" size="200,40" font="Regular;19" halign="center" valign="center" backgroundColor="#9f1313" transparent="1" />
		<widget name="green" position="345,0" zPosition="1" size="200,40" font="Regular;19" halign="center" valign="center" backgroundColor="#1f771f" transparent="1" />
		<widget name="list" position="0,45" size="600,355" scrollbarMode="showOnDemand" selectionPixmap="Modern_Stone2_XD/menu/listselection600x50.png" transparent="1" />
	</screen>

    Hallo,


    so ein Problem hat man wenn man einen XD oder HD Skin erstellt.
    Und zwar das mit dem PluginManager, hier gab es dann aber Hilfe :winking_face:


    http://www.dream-multimedia-tv…age=Thread&threadID=14292


    So viel mal dazu das Ihr seht das Ich selbst ein Dummy bin :face_with_rolling_eyes:



    Das bedeutet wer einen SD Skin erstellt, braucht diesen Teil wohl nicht zu erstellen, ausser wegen der Grafik selbst, ansonsten kreieren wir uns nun einfach diesen neuen Screen:



    Zu dem definieren der "Template" (denke das dies Phyton ist) kann ich also leider nichts dazu schreiben,
    da ich selbst nicht weiß was da denn genau der Code bedeutet???


    Nachtrag: wie im Link oben nun Beschreiben wurde, habe ich den Screen angepasst.
    Da in dem Code ja die Eintragshöhe ja mit "ItemHeight von 75" aussagt wie groß das einzelne Feld ist.
    Und habe nun mal die Hohe der Listbox angepasst 5 x 75 = 375 denke also das dies passen sollte?


    Weiterhin habe diesen Eintrag angepasst:

    Code
    <widget source="status" render="Label" foregroundColor="foreyellow" position="0,400" size="330,50" halign="center" font="Regular;18" transparent="1"/>


    Da beim alten EIntrag das Wiget ausserhalb des Screens war, das sollte nun auch passen, wie man
    nun am neuen Screenshot sehen kann (Ist der gelbe UpdateEintrag am schluss)


    Evtl. findet sich ja mal jemand der das hier genauer erklärt, dann kann ich das hier mit ins Posting
    aufnehmen der Vollständigkeit wegen oder auf die Erklärung verweisen :winking_face:


    Ansonsten habe ich nur die Screengröße und wie üblich die Bilder und deren Positionen gesetzt...

    So nach dem Plugin Manager wäre der nächste logische Schritt den nächstfolgenden Screen
    an zu passen der dann käme wenn wir ein Plugin installieren oder deinstallieren.


    Durch die Hilfe von Vali beim "Plugin Manager" bin ich auf den nun auch selbst draufgekommen :winking_face:



    Hier bäuchte man eigentlich nur die zwei farbiden Buttons "Rot" und Grün", ich habe die anderen
    beiden einfach nur dazu geskinnt, damit es zum vorherigen Screen dem Plugin Manger optisch
    meiner Meinung nach besser dazu passt.


    Wer also will könnte die zwei Zeilen auch weg lassen:

    Code
    <ePixmap alphatest="on" pixmap="skin_default/buttons/yellow.png" position="435,5" size="140,40" transparent="1"/>
		<ePixmap alphatest="on" pixmap="skin_default/buttons/blue.png" position="635,5" size="140,40" transparent="1"/>

    Wenn man nun ein Plugin installiert bzw. deinstalliert erscheint ja auch ein Fenster,
    dieses müsste ich in diesem Skin eigentlich nicht editieren, da es ja zu dem Skin passt.


    Da dies aber ein "Step by Steb für Dummys" sein soll und dieser Thread auch als gute
    Informationsquelle dienen soll, füge ich mal auch das entsprechende Fenster mit ein.


    Und füge da noch das Dreambox-Logo des About-Fenster mit ein für euch :winking_face:


    Dieser Screen lautet schlicht <!-- IPKG -->.


    Code
    <!-- IPKG -->
	<screen name="Ipkg" position="center,center" size="550,200" title="Installing Software...">
		<widget name="activityslider" position="0,0" size="550,5" pixmap="skin_default/progress_small.png" />
		<widget name="package" position="10,30" size="550,20" font="Regular;18" />
		<widget name="status" position="10,60" size="550,45" font="Regular;18" />
		<widget name="slider" position="10,100" size="530,15" pixmap="skin_default/progress_big.png" borderWidth="2" borderColor="#cccccc" />
		<ePixmap pixmap="skin_default/icons/dmm_logo.png" position="165,160" size="200,10" alphatest="on" />
	</screen>


    Wer normale SD-Skins erstellt braucht dieses Fenster also nicht unbedingt berücksichtigen, da dies
    ja in der skin_default.xml ohne Grafik schon definiert ist..

    So nachdem wir nun die Erweiterungen mit dem Pluginzeug abgeschlossen haben
    folgt bub der nächste Schritt im Hauptmenü...


    Der Menüpunkt "Einstellungen" <!-- Main setup --> :winking_face:


    Wie schon die andere Menüpunkte wollen wir auch dieses Menü mit den kleinen Grafiken verzieren:



    Der Aufbau ist wieder mit den vorherigen Menüpunkte Identisch, bis auf die anderen Bilder.


    Jedoch ist mir bei diesem Menü auch wieder was aufgefallen :confused_face:


    Die DM8000 wie auch die DM7025 haben ja CI-Schächte und als ich den Skin auf meiner DM8000
    ausprobierte kam ein Screenshot heraus in dem die Schrift der CI-Zuweisung abgeschnitten war.


    Also habe ich sämltiche Menü-Screens alle nun nochmals nachträglich vergößert, so das es auf der
    DM8000 dann gepasst hatte.


    Im Anhang also mal zwei Bilder, eines was von meinem Test auf der DM8000 war und das aktuelle
    angepasste von meiner DM800se.



    Merke: am einfachsten Skint es sich auf der DM8000 oder DM7025 da man dort nicht gleich so Sachen wie das Common Interface evtl. vergisst.
    Anderst sollte man seinen Skin erst mal von einigen Testen Lassen bevor man Ihn veröffentlich und Hinterher evtl. wieder nur Beschimpft wird oder Undank erntet :winking_face:

    Da ich nun aber gerade schon bei dem Menü noch bin,
    und ich das nächste ja auch schon fertig habe (geht ja nach dem gleichen Schema)
    gibt es das auch gleich nun im Anschluss, ist ja Silvester heute und muss bald los :winking_face:




    Wie ich ja in diesem Posting von giro77 sehe:
    Fragen zum CVS-Skin erstellen "Step by Step" für Dummys


    Sollten wir uns am Schluss darüber evtl. Gedanken machen wie man dann das ganze auf eine
    einheitliche Reihenfolge bekommt, damit es für die Anfänger evtl. leichter und Überschaubarer wird :face_with_rolling_eyes:

    Die <!-- Mute --> habe ich auch schon fertig...


    Das ist das Stummschalten des Tons, über die Mutetaste.
    Hier wird nur ein Bild links oben dann angezeigt...


    Also Raus damit :winking_face:


    Code
    <!-- Mute -->
	<screen name="Mute" position="70,70" zPosition="10" size="75,75" backgroundColor="transparent" title="Mute" flags="wfNoBorder">
		<ePixmap position="0,0" size="75,75" pixmap="Modern_Stone2_XD/mute.png" alphatest="on" />
	</screen>

    Files

    mute.jpg 47.62 kB – 1,643 Downloads

    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

    Die <!-- Volumebar --> ist auch schon fertig.
    Also die Anzeige der Lautstärkeregelung...


    Code
    <!-- Volumebar -->
	<screen name="Volume" position="center,60" zPosition="1" size="354,38" title="Volume" backgroundColor="transparent" flags="wfNoBorder">
		<ePixmap pixmap="Modern_Stone2_XD/volume.png" position="1,1" size="352,36" />
		<widget name="Volume" pixmap="skin_default/progress_medium.png" position="58,15" zPosition="1" size="274,8" transparent="1" />
	</screen>



    Und das war es zumindest für dieses Jahr erstmal :winking_face:
    Im Anhang habe ich dann auch den aktuellen Skin als Zipfile mit dran,
    für diejenigen die diese Schritte evtl. nachvollziehen wollen....

    So der nächste Screen ist die Anzeige der Kanalauswahl , incl. den EPG--Inhalten.



    Habe das Fenster vergrößert und die Inhalte soweit angepasst das es mir soweit gefällt.
    Klar die untere Anzeige im (EPG-Fenster) könnte man natürlich auch etwas anders gestallten,
    aber für meine Ansprüche reicht mir die Aufteilung und die Anzeige so.

    So nun das Fenster des "Kanallisten-Menü" <!-- Channel context menu -->


    Code
    <!-- Channel context menu -->
	<screen name="ChannelContextMenu" position="center,center" size="470,255" title="Channellist menu">
		<widget name="menu" position="0,10" size="470,230" scrollbarMode="showOnDemand" selectionPixmap="Modern_Stone2_XD/menu/listselection560x25.png" />
	</screen>


    Dies habe ich zur originalen skin_default.xml einfach nur ein wenig vergößert und dann noch zusätzlich
    Das Bild eingegeben das bei der Auswahl beim Selektieren angezeigt werden soll bzw. welches die Schrift
    dann untermalt.