Main Infobar im OE 2.0 DMM-Skin: Unterschied zwischen den Versionen

Aus Gemini-Wiki
Zur Navigation springen Zur Suche springen
Zeile 315: Zeile 315:
  
  
 +
* Wer die Uhrzeit gerne einfach hätte aber mit den Sekunden, kann auch '''<convert type="ClockToText">WithSeconds</convert>''' benutzen!!
  
 
== Date ==
 
== Date ==

Version vom 1. Dezember 2012, 14:20 Uhr

Baustelle.png An diesem Artikel wird derzeit gearbeitet. Achtung: Der Artikel kann unvollständig und fehlerhaft sein!

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>


Background der InfoBar im Skin BlackdreamHD des OE 2.0


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
Ambox notice.png 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>


Programmnamen der InfoBar im Skin BlackdreamHD des OE 2.0


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>


Ambox notice.png 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>


Povidernamen der InfoBar im Skin BlackdreamHD des OE 2.0


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>
Uhrzeitdarstellung im Skin BlackdreamHD des OE 2.0


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.

Datumsanzeige im Skin BlackdreamHD des OE 2.0


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
Abgerufen von „http://wiki.blue-panel.com/index.php?title=Main_Infobar_im_OE_2.0_DMM-Skin&oldid=13265“