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

  • Hallo,


    Da einige User nach dem alten Gemini-Stone2-Modern gefragt haben und ich mich selbst ein wenig in
    die Materie der Skinnerei etwas einarbeiten will, habe ich mich entschlossen auf Vorlage des alten
    Gemini-Skin einen neuen Zeitaktuellen Modern_Stone2_XD zu erstellen.


    Dieser wird hier Schritt für Schritt aufgebaut und sollte damit für Anfänger die evtl. mal neue Skins
    erstellen wollen oder vorhande Skin selbst erweitern bzw. abändern wollen als Hilfe dienen.


    Ich selbst nenne diesen Skin Modern_Stone2_XD,
    der Stone2-Skin ist ja der DMM-Defaultskin der in jedem Image enthalten ist.
    Modern eben weil es eine Moderne Variante dieses Skins ist, und das XD
    weil es ein Skin ist mit der Auflösung xres="1024" yres="576",
    und somit bei allen Enigma2-Boxen funktioniert egal ob HD oder SD ausgewählt wurde.



    Da ich selbst auch kein Phyton beherrsche, habe ich mir Hauptsächlich die meisten Infos aus den
    verschiedenen Skin.xml heraus gelesen und eben dann experimentiert um auf mein gewünschtes Ergebnis zu kommen.


    Wie man die ganzen Grafiken (.png Bilder) erstellt wird hier nicht drauf eingegangen auch werden
    etliche Code-Zeilen nicht genauer erklärt, da ich selbst nicht genau weiß wie man dazu sagt, bzw. wie
    die genauen Parameter sein können, das muss man eben einfach ausprobieren oder in separaten
    Threads dann entsprechend nachfragen und auf Erklärung hoffen ;)


    Auch wenn es ein klein wenig Dirty Quick ist, die einzelnen Funktionen können dann evtl.
    auch noch nachträglich besser erläutert werden.


    Dieser Thread selbst wird geschlossen bleiben, damit keine User hier einfach reinschreiben
    und der Ablauf des Skinaufbaus nicht unterbrochen wird.


    Wer Fragen hat bzw. zu den nicht erklärten was beitragen möchte kann dies gerne in diesem Thread tun:


    Fragen zum CVS-Skin erstellen "Step by Step" für Dummys

    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

  • Bevor wir anfangen zu Skinnen brauchen wir ggf. noch ein paar Werkzeuge
    und die entsprechende Verbindung zu der Dreambox auf die wir einen Skinn erstellen wollen.


    Um die Grafiken zu erstellen bzw. editieren usw. benutze ich das Gimp:


    * http://www.gimp.org/ Dies gibt es auch für Windows: http://www.gimp.org/windows


    Zum erstellen der Verzeichnisse und der SKin.xml benötigt man einen Dateimanager,
    ich selbst verwende hierzu den Krusader, Windowsuser sollten darauf achten das Ihre Files Linux-Konform
    gespeichert werden (sonst braucht man sich nicht zu wundern wenn es nicht geht)


    Änderungen an der skin.xml erprobe ich mittels der Telnet-Befehle Init 4 zum stoppen
    des Enigma2 und init 3 zum starten des Enigma2:

    Code
    root@dm800se:~# init 4
    root@dm800se:~# init 3


    Habe wir nun die Werzeuge die wir benötigen und uns eine Verbindung zur Box
    hergestellt können wir mit der Skinnerei anfangen :tongue:


    PS: als Dateieditor solltet Ihr einen Editor Wählen der auch mit .xml umgehen kann.
    Denn so bekommt Ihr den Code dann auch farbig angezeigt und das ganze ist dann nicht nur
    besser Lesbar, sondern bei gravierende Fehler seht ihr das auch gleich am Code selbst wenn Ihr euch vertippt habt...



    PPS: Sollte mal beim Skinnen die Box crashen, auch kein Problem.
    Einfach den letzten Schritt rückgängig machen in der skin.xml und mittels init 4 und init 3 die Box neu starten und dann von vorne Anfangen mit eurerm Bearbeiten der Skin.xml ;)



    Quote

    Original von Swiss-MAD
    Ich finde eine einfachere Lösung wäre so wie ich es immer mache.
    Im Browser ein Bookmark setzten mit dem Link


    http://IP_DER_DREAMBOX/web/powerstate?newstate=3


    Da muss ich nur draufklicken und schon wird ein Enigma2 restart ausgeführt.

    Files

    • screenshot.jpg

      (209.46 kB, downloaded 7,294 times, last: )

    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

  • Wir gehen nun mit dem Dateimanager auf unsere Box und wechseln in folgendes Verzeichnis:


    * usr/share/enigma2


    Dort befinden sich alle installierten Skins und hier kreiren wir unseren eigenen auch.


    In diesem Verzeichnis erstelle ich nun das Verzeichnis wie der zukünftige Skin lauten soll:
    Der Name des neuen Skin lautet: Modern_Stone2_XD
    erstellt dies mit dem Dateimanager oder per Telnet je nach belieben...


    Danach wechseln wir ins Verzeichnis: usr/share/enigma2/Modern_Stone2_XD


    in diesem Verzeichnis erstelle ich erstmal ein weiteres Verzeichnis mit dem Namen: infobar
    in dem Verzeichnis "infobar" lege ich später die benötigend Grafiken für die Infobar ab.


    Nun erstellen wir unser skin.xml, damit diese überhaupt bootbar ist und nicht beim Aufruft crasht,
    muss folgendes mindestens gegeben sein:


    * die defintition des Skins <skin> </skin>


    * die defintion der Auflösung <output id="0"> </output>


    * die defintion der Farben <colors> </colors>


    * die defintiion der Farben des Hauptmenü bzw. des Hauptfenster <windowstyle> </windowstyle>



    Hierbei haben wir nun zwar keine Infobar und müssten Blind zappen, und auch bei Aufruf des Menü
    haben wir hier nur ein spartanes Fenster aber dies wäre wie gesagt die Minimalausgabe damit der Skin
    keinen Crash verursacht.


    Die Farbdefinition und die des Hauptfenster wurden hierbei vom defaultskin übernommen.


    Anhang: Mainmenu01.jpg


    Damit wir aber was im Menüfenster lesen können sollte die erste Schrift (Fonts) schon definiert werden:


    Dann sieht dies aus wie im Anhang: Mainmenu02.jpg


    So dies ist nun auch die Ausgangsbasis des neuen Modern_Stone2_XD Skin!

    Files

    • Mainmenu02.jpg

      (20.42 kB, downloaded 7,397 times, last: )
    • Mainmenu01.jpg

      (11.26 kB, downloaded 7,047 times, last: )

    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

  • Damit der obere Teil der skin.xml erstmal abgeschlossen ist,
    fügen wird nun im <windowstyle> </windowstyle> erstmal den groben Menürahmen ein.


    Der entsprechende <windowstyle> </windowstyle> Code
    mit dem Rahmen des defaultskin sieht dann so aus:



    Nachdem der <borderset> </borderset> gesetzt wurde sieht das ganze etwas besser aus.



    PS: sämtliche Menüfenster wie die Einstellungen, Timer und auch der Mediaplayer werden
    da nichts gesetzt wurde hier von dem Defaultskin ausgegeben. Wie man diese Skins dann
    extra anpasst folgt später, denn erstmal wollen wir ja die Infobar haben ;)

    Files

    • Mainmenu03.jpg

      (26.6 kB, downloaded 7,059 times, last: )

    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

  • Machen wir uns an die Infobar :tongue:


    Die Infobar ist wiederum ein eigens Fenster (Screen also von <screen name="InfoBar"...> bis </screen>
    und wird daher minimal definiert in diesem Code:

    Code
    <!-- Main infobar -->
    <screen name="InfoBar" flags="wfNoBorder" position="135,360" size="770,190" title="InfoBar" backgroundColor="transparent" >
    <!-- Background -->
    <ePixmap position="0,0" zPosition="-1" size="770,190" pixmap="Modern_Stone2_XD/infobar/infobar.png" transparent="1" alphatest="on" />
    </screen>


    Hierzu habe ich selbst nun die Infobar des "gemini_stone2_modern" genommen und habe mir dieses
    Bild auf 770x190 Bildpunkte hochskaliert, weiterhin habe ich auch die Fensternischen an meine wünsche
    angepasste bzw. bearbeitet.


    Wie man nun leicht erkennen kann wird also mit dem Wert size="770,190" die Bildgröße bezeichnet.
    Es ist leider nicht möglich bei den Grafiken kleiner zu verwenden und diese dann einfach mittels der
    size-angabe vergößert darzustellen.


    Genauso ist es auch so das wenn man eine größere Grafik verwendet und die size-angaben verkleinert, wird das entsprechende Bild nicht skaliert, sondern einfach nur abgeschnitten dagestellt.


    Merke: also die Grafiken sollten immer die gewünschte Größen haben da diese nicht skaliert werden!



    Mit dem ersten Wert position="135,360" im Fenster der Infobar bestimmt man wo das Fenster der Infobar
    vom gesamten Skin (hier XD) positioniert wird.


    Mit dem zweiten Wert position="0,0 (innerhalb der Zuweisung ePixmap fügen wir das Bild in den
    Screen der Infobar ein) geben wir die Postion des Bildes innerhalb des Infobarfenster an.


    Beim Experimentieren mit den Werten empfehle ich dies immer in 5er oder 10er Schritten auszuprobieren und dann einen Enigma2 Neustart zu machen um sich erstmal anzusehen was sich wie verändert hat. Das ganze ist an dieser Stelle noch etwas ungewohnt, doch das gibt sich mit der Zeit, da man ja bis zum schluss noch sehr viele Positionen bestimmen muss ;)


    Im gesamten sieht das die Skin.xml bisher dann so aus:


    und das Ergebnis bildlich wie im Anhang zu sehen:

    Files

    • infobar001.jpg

      (23.73 kB, downloaded 7,005 times, last: )

    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 Definition des <!-- Service name --> bedeutet einfach nur der Sendernamen.
    Innerhalb dieses "widget" geben wir nun an wo denn innerhalb der Infobar der Sendernamen
    erscheinen soll.


    Code
    <!-- Service name -->
    <widget source="session.CurrentService" render="Label" position="20,12" size="700,30" font="Regular;25" valign="center" noWrap="1" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-3,-3" transparent="1">
    <convert type="ServiceName">Name</convert>
    </widget>


    Wie bekannt die Postion, den gewünschten Font incl. der Größe der Schrift.
    Und die entsprechenden Farben, wer eigene Farben haben will sollte bzw. muss hier am Anfang experimentieren.


    Gibt auch im Internet per Google schöne HTML-Farbtabellen und Generatoren zu finden.


    Und da dies natürlich zur Infobar gehört muss dies dann auch wieder innerhalb des Infobarfenster
    (Screen) eingetargen werden, das sieht dann bei mir damit es schön leserlich ist so aus:

    Files

    • infobar002.jpg

      (30.95 kB, downloaded 6,848 times, last: )

    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

  • Mit dem "Widget" <!-- Time --> setzen wir in der Infobar die Uhrzeit,.

    Code
    <!-- Time -->
    <widget source="global.CurrentTime" render="Label" position="655,12" size="92,22" font="Regular;25" foregroundColor="foreyellow" backgroundColor="background" shadowColor="black" shadowOffset="-2,-2" >
    <convert type="ClockToText">WithSeconds</convert>
    </widget>


    Wie schon zuvor wieder mit der Postion, der Schriftfarben und der Schriftgröße.


    Bei den Schriftfeldern sollte beachtet werden das die Size-Angaben nicht kleiner sind als die Felder
    des Schriftzuges, dies ist abhängig von der Textlänge und der verwendetetn Schrift bzw. deren Größe.


    Also Anfangs lieber die Size-Angaben gößer wählen und dann nach unten langsam anpassen.
    Wird was von der Schrift abgeschnitten hat man die Size-Angabe eben zu klein gewählt ;)


    Und da dies immer noch zur Infobar gehört, muss das wieder im Screen der Infobar plaziert werden.



    Wer die Uhrzeit gerne ohne Sekunden haben möchte könnte dies auch ändern.


    <convert type="ClockToText">WithSeconds</convert>


    ändert man z.B. ab in dies:


    <convert type="ClockToText">Default</convert>

    Files

    • infobar003.jpg

      (29.56 kB, downloaded 6,685 times, last: )

    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

  • Als nächstes Widget setze ich das Datum:


    Code
    <!-- Date -->
    <widget source="global.CurrentTime" render="Label" position="400,15" size="240,18" font="Regular;18" foregroundColor="foreyellow" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" halign="right" noWrap="1" transparent="1" >
    <convert type="ClockToText">Date</convert>
    </widget>


    Im gesamten würde nun die "skin.xml" so aussehen:


    Ich werde aber nun zukünftig bis die Infobar ferig ist, als Gesamtansicht nur noch maximal
    den Entsprechenden Screen (infobar) posten, da ja mit der Zeit der Code immer Länger wird
    und somit doch recht viel Platz verbraucht.


    Wie nun ein ordentlich Lesbarer Code aussehen sollte (kann) wisst Ihr ja jetzt, und könnt selbst
    entscheiden wie Lesbar euere Code dann sein soll ;)




    Wer das Datum gerne in einer deutschen Reihenfolge haben möchte kann dies auch tun,
    einfach folgendes austauschen untereinander:



    <convert type="ClockToText">Date</convert>


    ändert man z.B. ab in dies:


    <convert type="ClockToText">Format:%d.%m.%Y</convert>

    Files

    • infobar004.jpg

      (25.01 kB, downloaded 6,712 times, last: )

    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

  • Das Widget der Progressbar, also dem Balken der den aktuellen Fortschritt der laufenden Sendung
    als Grafik anzeigt, setzt sich hier aus zwei Grafiken zusammen.


    Der Transparenten die immer ganz zu sehen ist, und der hier im Beispiel des gelben Balken der
    eben so weit angezeigt wird wie die Laufzeit der Sendung im Moment ist.

    Code
    <!-- Progressbar (current event duration) -->
    <ePixmap pixmap="Modern_Stone2_XD/infobar/progress_bg.png" position="20,50" zPosition="0" size="100,8" transparent="1" alphatest="on" />
    <widget source="session.Event_Now" render="Progress" pixmap="Modern_Stone2_XD/infobar/progress_fr.png" position="22,46" zPosition="1" size="97,8" transparent="1" >
    <convert type="EventTime">Progress</convert>
    </widget>


    Also haben wir hier zwei weitere Grafiken die ich ins Verzeichnis "usr/share/enigma2/Modern_Stone2:XD/infobar" hinterlege.


    Wie bereits erwähnt sehe ich es hier als Vorteil an (Macht Vali bei seinen Skins auch wie ich gesehen
    habe) wenn man für jeden Screen ein eigenes Unterverzeichnis anlegt in dem die Grafiken des
    entsprechenden Screens gespeichert werden.

    Files

    • infobar005.jpg

      (26.77 kB, downloaded 6,649 times, last: )

    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

  • Der <!-- Service provider --> ist der Provider der die aktuelle Sendung ausstrahlt.


    Dies setze ich nun mit diesem Code ein:


    Code
    <!-- Service provider -->
    <widget source="session.CurrentService" render="Label" position="140,45" size="180,18" font="Regular;20" valign="center" noWrap="1" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-1,-1" transparent="1" >
    <convert type="ServiceName">Provider</convert>
    </widget>



    Die Infobar sieht also nun schon mittlerweile so aus:

    Files

    • infobar006.jpg

      (20.91 kB, downloaded 6,681 times, last: )

    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

  • Nun kommen die Tuner dran ;)
    Meine Testbox hat ja nur einen Tuner, aber es gibt ja auch boxen mit mehren (DM8000 hat ja 4)
    also um die Positionen der Tuneranzeigen sauber auszurichten greife ich hierbei zu einem kleinen Trick.


    Der fertige Code für den Schrifttext Tuner: sieht so aus:

    Code
    <!-- tuners in use? -->
    <widget source="session.FrontendInfo" render="FixedLabel" text="Tuner:" position="595,45" size="60,18" font="Regular;18" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-1,-1" valign="center" transparent="1" >
    <convert type="FrontendInfo">NUMBER</convert>
    <convert type="ValueRange">0,1</convert>
    <convert type="ConditionalShowHide" />
    </widget>


    Und für den Tuner A selbst sieht die Anzeige so aus:


    Lasse mir das ganze nun im Skin anzeigen und setzte dann diesen Code einfach 4 Mal hintereinander
    um mir die Postionen der anderen drei Tuner einzustellen Hierbei wewende ich dann auch gleich die entsprechenden Buchstaben der möglichen Tuner.


    Die Tuner werden normalerweise mit:


    * <convert type="ValueRange">0,0</convert>


    * <convert type="ValueBitTest">1</convert>


    Festgelegt, wie das bei den anderen Tuner dann aussieht sieht man im fertigen Code weiter unten.


    Klar das mir das ganze nun angezeigt wird als wären alle Tuner aktiv, aber ist ja nur der Tuner A den meine Box besitzt ;)


    Das ist im Anhang infobar007a.jpg zu sehen.


    Sind Die Positionierung der Tuner abgeschlossen setzen wir nun die entsprechenden Tunerzuweisungen und damit sollte der Skin auch für Mehr-Tuner Boxen tauglich sein.


    Files

    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

  • <!-- Channellogo (Picon) --> klingt ja nach den beliebten Picons :tongue:


    Das ist es auch, und dieser Skin, da er nun als XD und nicht mehr als SD daherkommt hat also
    auch mehr Platz für Picons ;)


    Das Einfügen erledigt man mit diesem Code:

    Code
    <!-- Channellogo (Picon) -->
    <widget source="session.CurrentService" render="Picon" position=" 25,76" size="100,60" zPosition="1">
    <convert type="ServiceName">Reference</convert>
    </widget>


    Klar hier die Position der Picons, und welche Größe (size) die Picons haben,
    und die Angabe das eben nur Reference-Picons benutzt werden.



    Und mal wieder der Code der Infobar für Anfänger komplett:

    Files

    • infobar008.jpg

      (20.04 kB, downloaded 6,567 times, last: )

    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

  • <!-- Event (now) --> Hiermit ist gemeint welche Sendung denn zur Zeit läuft.



    Zuerst setzte ich mittels dem "ePixmap" das Bild mit den Pfeilen voran, das wird aus dem defaultskin genommen.


    Danach setzte ich in einem Widget die Anfangszeit der Sendung.


    Mit Hilfe des "eLabel" setze ich einfach einen Bindestrich um nach dem Bindestrich
    mit einem weiteren Widget die Endzeit der aktuellen Sendung zu setzten.


    Mit dem nächsten Widget setze ich nun den Namen der aktuellen Sendung


    Und als Letztes noch die verbleibende Restspielzeit in Minuten...

    Files

    • infobar009.jpg

      (23.82 kB, downloaded 6,556 times, last: )

    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

  • Der Logische Schritt ist nun die Ausgabe der nächstfolgende Sendung.



    Hier setze ich erst ein eigens Bild (Bild beim defaultskin ist ja nur Gelb) und dies ist wieder im Verzeichnis "infobar" zu finden.


    Und dann wie bei <!-- Event (now) --> der gleiche Ablauf nur mit den folgenden Sendezeit
    und Namen, weiterhin wurde hier die Schrift nun in einer anderen Farbe gesetzt.


    Unterschied ist hier das die Startzeit ja auch die Endzeit vom "Event_now" ist.
    Und bei den Minuten am Ende wird hier nun die Gesamtzeit der Sendung in Minuten angegeben.

    Files

    • infobar010.jpg

      (28.26 kB, downloaded 6,514 times, last: )

    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

  • * SNR= Signal to Noise (Signal/Rauschabstand) - http://de.wikipedia.org/wiki/SNR


    Nun setzten wir noch die Signal Qualität in den Skin mittels:


    Code
    <!-- Signal Quality -->
    <eLabel text="SNR" position="660,72" size="35,14" font="Regular;16" zPosition="2" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" transparent="1" />
    <widget source="session.FrontendStatus" render="Label" position="700,72" size="35,15" font="Regular;17" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" transparent="1" >
    <convert type="FrontendInfo">SNR</convert>
    </widget>


    Mittels dem eLabel setzte ich erst den Text ein der eben SNR ausgibt.


    Und mit dem Widget eben dann die SNR ausgabe in Prozent.


    Wer die Ausgabe lieber in DB angezeigt bekommen haben will, der ändert einfach die folgende Zeile um:


    Code
    <convert type="FrontendInfo">SNRdB</convert>


    Setzt also hinter dem SNR direkt noch ein dB ;)

    Files

    • infobar011.jpg

      (32.24 kB, downloaded 6,488 times, last: )

    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

  • * AGC = Automatic Gain Controll - http://de.wikipedia.org/wiki/Automatic_Gain_Control


    Dies setzen wir mit folgendem Code:

    Code
    <!-- Signal Strength -->
    <eLabel text="AGC" position="660,90" size="35,14" font="Regular;16" zPosition="2" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" transparent="1" />
    <widget source="session.FrontendStatus" render="Label" position="700,90" size="35,15" font="Regular;17" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" transparent="1" >
    <convert type="FrontendInfo">AGC</convert>
    </widget>


    Der Aufbau des Code entspricht dem der Signal-Qualität, nur das hier eben AGC und nicht SNR verwendet wird.

    Files

    • infobar012.jpg

      (31.5 kB, downloaded 6,346 times, last: )

    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

  • * BER = Bit Errr Rate (Soll immer 0 sein, ab einem gewissen Wert reist das Bild ab) - Bitfehlerhäufigkeit


    Dies Verwende ich im SKin zwar nicht, da es aber gerade Theatisch dazu passt auch hier folgende Zeilen.


    Der Code wäre Identisch wie bei SNR oder AGC nur das eben dies als Code gesetzt werden müsste:

    Code
    <convert type="FrontendInfo">BER</convert>


    Das bedeutet wenn jemand in diesem Skinbeispiel anstatt AGC lieber den BER hätte müsste der Code so aussehen:

    Code
    <!-- Bit error rate -->
    <eLabel text="BER" position="660,90" size="35,14" font="Regular;16" zPosition="2" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" transparent="1" />
    <widget source="session.FrontendStatus" render="Label" position="700,90" size="35,15" font="Regular;17" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" transparent="1" >
    <convert type="FrontendInfo">BER</convert>
    </widget>


    Sollte also kein Hexenwerk sein ;)

    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

  • Wie im alten Gemini-Stone2-Modern SKin soll nun auch hier eine grafische Anzeige rein
    die mir die SNR und AGC Werte mittels einem Balken anzeigt.


    Der Code dazu sieht so aus:

    Code
    <!-- Signal Progressbar -->
    <ePixmap position="660,112" zPosition="2" size="75,20" pixmap="Modern_Stone2_XD/infobar/snr_frame.png" transparent="1" alphatest="on" />
    <widget source="session.FrontendStatus" render="Progress" position="661,113" zPosition="1" size="73,7" pixmap="Modern_Stone2_XD/infobar/progress_snr_small-fs8.png" transparent="1" >
    <convert type="FrontendInfo">SNR</convert>
    </widget>
    <widget source="session.FrontendStatus" render="Progress" position="661,123" zPosition="1" size="73,7" pixmap="Modern_Stone2_XD/infobar/progress_snr_small-fs8.png" transparent="1" >
    <convert type="FrontendInfo">AGC</convert>
    </widget>


    Diese Grafiken wurden wieder ins Skin-Verzeichnis unter "infobar" abgelegt.


    Die erste Grafik ist für den Rahmen, die zwei weiteren den die entsprechende Grafik der Pegel

    Files

    • infobar013.jpg

      (33.77 kB, downloaded 6,378 times, last: )

    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

  • (Posting wurde nachgebessert, Screenshot aber nicht aktualisiert)



    So, das Hauptfenster der Infobar ist somit gefüllt.
    Das restliche was da beim alten Gemini-Skin noch drunter war (Verschlüsselungen und Softcam)
    sind aber dann eher Gemini3-Erweiterungen und haben in einem Standart-CVS Skin nix zu suchen ;)


    Also Fangen wir an und füllen die Leeren Nischen in der Infobar.


    Das erste was nun gesetzt wird ist die Anzeige ob wir einen Mehrkanalton Sender eingeschaltet haben.


    Code
    <!-- Audio icon (is there multichannel audio?) -->
    <ePixmap pixmap="Modern_Stone2_XD/infobar/icon_off.png" position="715,166" size="26,16" zPosition="1" alphatest="blend"/>
    <widget source="session.CurrentService" render="Pixmap" pixmap="skin_default/icons/icon_dolby.png" position="715,166" size="26,16" zPosition="2" alphatest="blend">
    <convert type="ServiceInfo">IsMultichannel</convert>
    <convert type="ConditionalShowHide"/>
    </widget>


    Hier bediene ich mal aus dem Wissen der anderen Skinner ;)
    Da im defaultskin nur ein ab und anschalten der Grafik vorgesehen ist.


    Ich habe hier aber ein verblasstest eigenes Bild mittels "ePixmap" gesetzt das immer da ist,
    und nur wenn der Sender Mehrkanalton besitzt wird das Icon des Defaultskins "darüber geblendet".


    Naja, bitte um Nachsicht bin kein toller Grafiker :rolleyes:

    Files

    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

  • (Postings wurde nachgebessert, Screenshot aber nicht aktualisiert)



    Nun noch das gleiche Spiel für die Teletextanzeige:


    Code
    <!-- Teletext icon (is teletext available?) -->
    <ePixmap pixmap="Modern_Stone2_XD/infobar/icon_off.png" position="685,166" size="26,16" zPosition="1" alphatest="blend"/>
    <widget source="session.CurrentService" render="Pixmap" pixmap="skin_default/icons/icon_txt.png" position="685,166" zPosition="2" size="26,16" transparent="1" alphatest="blend" >
    <convert type="ServiceInfo">HasTelext</convert>
    <convert type="ConditionalShowHide" />
    </widget>


    Und hier mal zwischen durch wie die XML der Infobar bisher gewachsen ist:


    Files

    • infobar015.jpg

      (33.32 kB, downloaded 6,398 times, last: )

    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