Main Infobar im OE 2.0 DMM-Skin
Version vom 1. Dezember 2012, 15:40 Uhr von EgLe (Diskussion | Beiträge)
|
An diesem Artikel wird derzeit gearbeitet. Achtung: Der Artikel kann unvollständig und fehlerhaft sein! |
Inhaltsverzeichnis
Einleitung
Der Screen name="InfoBar" ist die Grafische Darstellung der Infobar und stellt ein großes Element eines Skins dar.
Das Element der Infobar unterteilt sich in vielen Unterelemente (widget, pixmap, eLabel usw.)
Main infoBar
Wie beim Skin selbst beginnt der Screen 'name="InfoBar" mittels :
<!-- Main infobar --> <screen name="InfoBar" flags="wfNoBorder" position="135,360" size="770,190" title="InfoBar" backgroundColor="transparent" > <!-- Hier können etliche Unterelemente (widget, pixmap, eLabel usw.) eingebettet sein! --> </screen> <!-- und endet erst mit diesem Abschluss -->
In diesem Beispiel wurde die Grafik des Skins "BlackdreamHD" als Vorlage erstellt und verwendet.
Funktionen die Hier nicht vorgesehen sind werden ggf, auf Grundlage des Default-HD skins nachgestellt.
Erklärung skin.xml Main InfoBar
- Mit flags="wfNoBorder" wird festgelegt das man keinen Rahmen (Border) haben will. Alternative diesen Eintrag weglassen und es gibt einen Rahmen
- position="135,360" gibt an wo der Screen dargestellt werden soll in Bildpunkten, 135 = vom Rand Links in die Mitte, 360 = vom Rand oben nach unten
- size="770,190" gibt an wie Groß in Bildpunkten (Breite mal Höhe) der Screen sein soll
- title="InfoBar" wie erwartet der Name des des Titelfenster
- backgroundColor="transparent" hier wird die Farbe "transparent" als Hintergrundfarbe benutzt (Farbe muss im Element "color" definiert sein, sonst Crasht es). Alternativ können die Farben sonst auch im HTML-Code dargestellt werden
Background
Nun setzt man als Background seine InfoBar-Grafik ein. Hierzu nun die Infobar des BlackdreamHD-Skins. Der Screen-Code würde in diesem Beispiel so komplett aussehen:
<!-- Main infobar --> <screen name="InfoBar" flags="wfNoBorder" position="80,500" size="1130,190" title="InfoBar" > <!-- Background --> <ePixmap position="0,0" zPosition="-1" size="1130,190" pixmap="BlackDreamHD/infobar.png" /> </screen>
Erklärung skin.xml des Background
- Wert ePixmap ist zum einfügen von Grafiken.
- position="0,0" damit die Grafik den kompletten Screen auch ausfüllt, da die Größe (size) der Grafik und des Screens identisch sind
- Mittels pixmap= wird nun die Tatsächliche Grafik geladen
|
Es ist leider nicht möglich bei den Grafiken kleinere zu verwenden und diese dann einfach mittels der size-angabe vergröß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! Merke: also die Grafiken sollten immer die gewünschte Größen haben da diese nicht skaliert werden! |
Service name
Die Definition des "Service name" bedeutet einfach nur der Programmnamen.
Innerhalb dieses "widget" geben wir nun an wo denn innerhalb der Infobar der Programmnamen erscheinen soll.
<!-- Service name --> <widget source="session.CurrentService" render="Label" position="150,6" size="440,36" font="Regular;25" valign="top" noWrap="1" backgroundColor="black" transparent="1"> <convert type="ServiceName">Name</convert> </widget>
Erklärung skin.xml des Service name
- Wie bekannt die Postion, den gewünschten Font incl. der Größe und der Farbe der Schrift
- neu ist valign="top" damit können wir die Schrift innerhalb dem Feld (size="440,36") also in der Höhe von 36 nach oben ausgerichtet darstellen lassen
- auch neu ist noWrap="1", (weiß ich im Moment nicht was das genau bedeutet...)
Ansicht der bisherigen kompletten skin.xml
<skin> <!-- Skin: BlackDreamHD for OE2.0 by EgLe (c)2012 --> <!-- This skin skin and all it's graphics are free. Everyone can modify and use it in other images. --> <!-- Spezial Thanks to Kerni and Vali for his great Skins, Renderer,Converter and Wonderfull Idea --> <!-- BUT DO NOT REMOVE OR CHANGE THE SECOND LINE !!! --> <!-- Head for Image resolution --> <output id="0"> <resolution xres="1280" yres="720" bpp="32" /> </output> <!-- Colors (#AARRGGBB) --> <colors> <color name="white" value="#ffffff" /> <color name="black" value="#000000" /> <color name="dark" value="#25062748" /> <color name="red" value="#f23d21" /> <color name="green" value="#5bac3f" /> <color name="blue" value="#21b0cf" /> <color name="grey" value="#90a0a0" /> <color name="yellow" value="#00e5b243" /> <color name="lightgrey" value="#8c8c93" /> <color name="darkgrey" value="#777777" /> <color name="transparent" value="#ffffffff" /> <color name="transpBlack" value="#80000000" /> <color name="transpWhite" value="#80ffffff" /> <color name="transpyellow" value="#33bab329" /> <color name="background" value="#25272d33" /> <color name="foreground" value="#ffffff" /> <color name="foreyellow" value="#cc9329" /> </colors> <!-- Fonts --> <fonts> <font filename="nmsbd.ttf" name="Regular" scale="95" /> <font filename="lcd.ttf" name="LCD" scale="100" /> <font filename="ae_AlMateen.ttf" name="Replacement" scale="95" replacement="1" /> <font filename="tuxtxt.ttf" name="Console" scale="100" /> </fonts> <!-- Main screen colors (id=0 Framebuffer) --> <windowstyle type="skinned" id="0"> <title offset="33,14" font="Regular;27" /> <color name="Background" color="#272d33" /> <color name="LabelForeground" color="#ffffff" /> <color name="ListboxBackground" color="#272d33" /> <color name="ListboxForeground" color="#ffffff" /> <color name="ListboxSelectedBackground" color="#8c8c93" /> <color name="ListboxSelectedForeground" color="#ffffff" /> <color name="ListboxMarkedBackground" color="#2a2d2f" /> <color name="ListboxMarkedForeground" color="#389416" /> <color name="ListboxMarkedAndSelectedBackground" color="#2a2d2f" /> <color name="ListboxMarkedAndSelectedForeground" color="#f23d21" /> <color name="WindowTitleForeground" color="#ffffff" /> <color name="WindowTitleBackground" color="#232a33" /> <!-- Main screen border png's --> <borderset name="bsWindow"> <pixmap pos="bpTopLeft" filename="BlackDreamHD/b_tl.png" /> <pixmap pos="bpTop" filename="BlackDreamHD/b_t.png" /> <pixmap pos="bpTopRight" filename="BlackDreamHD/b_tr.png" /> <pixmap pos="bpLeft" filename="BlackDreamHD/b_l.png" /> <pixmap pos="bpRight" filename="BlackDreamHD/b_r.png" /> <pixmap pos="bpBottomLeft" filename="BlackDreamHD/b_bl.png" /> <pixmap pos="bpBottom" filename="BlackDreamHD/b_b.png" /> <pixmap pos="bpBottomRight" filename="BlackDreamHD/b_br.png" /> </borderset> </windowstyle> <!-- Subtitle area --> <screen name="SubtitleDisplay" position="0,0" size="1280,720" zPosition="-1" flags="wfNoBorder" backgroundColor="transparent"/> <!-- Subtitle effects --> <subtitles> <sub name="Subtitle_TTX" font="Regular;35" shadowColor="#40101010" shadowOffset="3,3" /> <sub name="Subtitle_Regular" font="Regular;35" foregroundColor="#DCDCDC" shadowColor="#40101010" shadowOffset="3,3" /> <sub name="Subtitle_Bold" font="Replacement;35" foregroundColor="#DCDCDC" shadowColor="#40101010" shadowOffset="3,3" /> <sub name="Subtitle_Italic" font="Regular;35" foregroundColor="#DCAAAA" shadowColor="#40101010" shadowOffset="3,3" /> <!-- omitting foregroundColor attribute will enable auto-assignment of color --> </subtitles> <!-- Volumebar --> <screen name="Volume" position="center,60" size="280,70" title="Volume" zPosition="11" backgroundColor="transparent" flags="wfNoBorder"> <ePixmap pixmap="BlackDreamHD/icons/volume_bg.png" position="0,0" size="280,70" zPosition="12" alphatest="blend" transparent="1"/> <ePixmap pixmap="BlackDreamHD/icons/volumebar.png" position="55,55" size="160,6" zPosition="12" alphatest="blend" transparent="1"/> <widget name="Volume" pixmap="BlackDreamHD/icons/volume.png" position="55,10" size="160,45" zPosition="12" transparent="1" /> </screen> <!-- Mute --> <screen name="Mute" position="90,100" zPosition="10" size="128,128" backgroundColor="transparent" title="Mute" flags="wfNoBorder"> <ePixmap position="0,0" size="128,128" pixmap="BlackDreamHD/icons/mute.png" alphatest="on" /> </screen> <!-- unhandled key pressed --> <screen name="UnhandledKey" flags="wfNoBorder" position="center,50" size="128,128" title="UnhandledKey" zPosition="100" backgroundColor="background"> <widget name="UnhandledKeyPixmap" pixmap="BlackDreamHD/icons/unhandled-key.png" position="0,0" size="128,128" alphatest="on" backgroundColor="transparent" transparent="1" /> </screen> <!-- Main infobar --> <screen name="InfoBar" flags="wfNoBorder" position="80,500" size="1130,190" title="InfoBar" > <!-- Background --> <ePixmap position="0,0" zPosition="-1" size="1130,190" pixmap="BlackDreamHD/infobar.png" /> <!-- Service name --> <widget source="session.CurrentService" render="Label" position="150,6" size="440,36" font="Regular;25" valign="top" noWrap="1" backgroundColor="black" transparent="1"> <convert type="ServiceName">Name</convert> </widget> </screen> </skin>
|
|
Als weitere Beispiele wie das ganze im gesamten aussieht bzw. aussehen kann sollten man gerade als Anfänger sich die skin.xml des Default-HD skin und auch die der normalen skin_default.xml und der skin.xml Anschauen. |
Service provider
Die Definition des "Service provider" bedeutet einfach nur der Providernamen des Sendeveranstalters.
Innerhalb dieses "widget" geben wir nun an wo denn innerhalb der Infobar der Name des Sendeveranstalters erscheinen soll.
<!-- Service provider --> <widget source="session.CurrentService" render="Label" position="150,29" size="230,25" font="Regular;20" valign="left" noWrap="1" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1" > <convert type="ServiceName">Provider</convert> </widget>
Erklärung skin.xml des Service provider
- Wie bekannt die Postion, den gewünschten Font incl. der Größe und der Farbe der Schrift
- neu ist backgroundColor="background" damit können wir die Hintergrundfarbe der Schrift beeinflussen
- auch neu ist foregroundColor="foreyellow" damit können wir die Vordergrundgrundfarbe der Schrift beeinflussen
- Mit shadowColor="black" können wir der Schrift einen Schatten geben und diesen auch eine bestimmte Farbe zuweisen
- Mit shadowOffset="-2,-2" wird festgelegt wie stark der Schatten ausfallen soll. Hier sollte und kann man experimentieren was einem selbst liegt und oder ob man das haben will..
Time
Die Definition der "Zeit" wird auch wieder in einem eigenen "widget" dargestellt.
Im Skin Default-HD wird dies einfach dargestellt, dort ist ja nur die Stunden und die Minuten dann sichtbar mittels dem "Default" in der Zeile <convert type="ClockToText">Default</convert>
<!-- Time --> <widget source="global.CurrentTime" render="Label" position="50,54" size="70,24" font="Regular;22" foregroundColor="grey" backgroundColor="background" transparent="1"> <convert type="ClockToText">Default</convert> </widget>
Im Skin BlackdreamHD soll aber noch die Sekunden angezeigt werden, und diese aber etwas kleiner und hochgestellt sein.
Also müssen wir uns einem kleinen Trick einfallen lassen und der Code wurde dann so aussehen:
<!-- Time --> <widget source="global.CurrentTime" render="Label" position="980,7" size="75,30" font="Regular;24" halign="right" backgroundColor="background" shadowColor="black" shadowOffset="-2,-2" transparent="1"> <convert type="ClockToText">Default</convert> </widget> <eLabel text=":" position="1060,7" size="5,30" font="Regular;24" halign="right" backgroundColor="background" shadowColor="black" shadowOffset="-2,-2" transparent="1"/> <widget source="global.CurrentTime" render="Label" position="1070,7" size="35,30" font="Regular;19" valign="top" halign="left" backgroundColor="background" shadowColor="black" shadowOffset="-2,-2" transparent="1"> <convert type="ClockToText">Format:%S</convert> </widget>
Erklärung skin.xml zum Widget "Time"
- <convert type="ClockToText">Default</convert> stellt die Uhrzeit in Stunden und Minuten dar
- mittels eLabel text=":" setzten wir nach der Uhrzeit manuell einen Doppelpunkt an die gewünschte Position
- <convert type="ClockToText">Format:%S</convert> stellt von der Uhrzeit nur die Sekunden dar
- Mittels valign="top" setzten wir die Sekunden nach oben im Textfeld der Größe size="35,30"
- Mittels halign="left" setzten wir die Sekunden nach links (zur Richtung des Doppelpunktes) im Textfeld der Größe size="35,30"
- Wer die Uhrzeit gerne einfach hätte aber mit den Sekunden, kann auch <convert type="ClockToText">WithSeconds</convert> benutzen!!
Date
Die Definition des "Datums" wird auch wieder wie alles in einem eigenen "widget" dargestellt.
Im Skin wird dies einfach dargestellt mittels der Zeile <convert type="ClockToText">Format:%d.%m.%Y</convert>
<!-- Date --> <widget source="global.CurrentTime" render="Label" position="925,29" size="170,25" font="Regular;20" backgroundColor="background" foregroundColor="foreyellow" halign="right" noWrap="1" transparent="1" > <convert type="ClockToText">Format:%d.%m.%Y</convert> </widget>
Wie einem Nun evtl. Auffällt ist die Anzeige des Datums ja fast Identisch wie die der Uhrzeit.
Auch diese Zeile <convert type="ClockToText">Format:%d.%m.%Y</convert> sieht bis auf die Formatausgabe ja fast gleich aus, das liegt daran das hier ein "Converter" verwendet wird.
Innerhalb des Converters haben wir die Möglichkeit mittels der Format-Ausgabe das gewünschte darstellen zu lassen solange es der Converter zulässt.
Erklärung skin.xml zum Widget "Date"
- <convert type="ClockToText">Format:%d.%m.%Y</convert> die Ausgabe bedeutet %d = Tag, %m = Monat, %Y = Jahr
- Der Convertor "ClockToText" selbst wäre zu finden in: /usr/lib/enigma2/python/Componetns/Converter
Progressbar (current event duration)
Die Progressbar ist die Grafische Anzeige wie lange eine Sendung schon läuft bzw. wie Lange diese noch bis zum Ende benötigt.
<!-- Progressbar (current event duration) --> <ePixmap pixmap="BlackDreamHD/icons/progress_bg.png" position="150,64" zPosition="0" size="780,8" transparent="1" alphatest="on" /> <widget source="session.Event_Now" render="Progress" position="150,64" size="780,8" pixmap="BlackDreamHD/icons/progress_fr.png" zPosition="1" transparent="1"> <convert type="EventTime">Progress</convert> </widget>
Erklärung skin.xml zur Progressbar
- Mittels der Ersten Zeile wird die Hintergrundgrafik geladen, incl. der zPosition="0"
- Mit der zweiten Zeile bzw. dem Widget wird nun die zweite Grafik auf die erste gelegt zPosition="1" der Fortschritt wird mittels eines Render ermittelt
- Der Render "Progress" ist zu finden in: /usr/lib/enigma2/python/Componetns/Renderer
Audio icon (is there multichannel audio?)
Mittles diesem Icon wollen wir in der Infobar uns Anzeigen lassen ob ein Sender seinen Ton in DolbyDigital bzw. AC3 (IsMultichannel) ausstrahlt.
Wird der Ton ausgestrahlt erscheint das entsprechede Icon, wird keiner ausgestrahlt ist es nur Schwach bzw. gar nicht zu sehen.
<!-- Audio icon (is there multichannel audio?) --> <ePixmap pixmap="BlackDreamHD/icons/icon_dolby_off.png" position="647,7" size="57,20" zPosition="1" alphatest="blend"/> <widget source="session.CurrentService" render="Pixmap" pixmap="BlackDreamHD/icons/icon_dolby_on.png" position="647,7" size="57,20" zPosition="2" alphatest="blend"> <convert type="ServiceInfo">IsMultichannel</convert> <convert type="ConditionalShowHide"/> </widget>
Erklärung skin.xml zur multichannel audio
- Mittels der zPosition="1" wird ein fast nicht Sichbares Icon (icon_dolby_off.png) dargestellt.
- alphatest="blend" bedeutet das sich das entsprechende Bild auch überblenden läßt
- Ist ein Audio-Multichannel vorhanden wird mittels zPosition="2" das gut sichtbare Icon (icon_dolby_on.png) über das erste eingeblendet
