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

Aus Gemini-Wiki
Zur Navigation springen Zur Suche springen
Zeile 7: Zeile 7:
 
Das Element der Infobar unterteilt sich in vielen Unterelemente (widget, pixmap, eLabel usw.)
 
Das Element der Infobar unterteilt sich in vielen Unterelemente (widget, pixmap, eLabel usw.)
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 38: Zeile 40:
  
 
* '''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
 
* '''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
 +
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 73: Zeile 78:
 
'''Merke:''' also die Grafiken sollten immer die gewünschte Größen haben da diese nicht skaliert werden!
 
'''Merke:''' also die Grafiken sollten immer die gewünschte Größen haben da diese nicht skaliert werden!
 
}}
 
}}
 +
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 234: Zeile 242:
 
{{Hinweis|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.}}
 
{{Hinweis|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.}}
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 267: Zeile 277:
 
* 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..
 
* 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..
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 317: Zeile 329:
 
* Wer die Uhrzeit gerne einfach hätte aber mit den Sekunden, kann auch '''<convert type="ClockToText">WithSeconds</convert>''' benutzen!!
 
* Wer die Uhrzeit gerne einfach hätte aber mit den Sekunden, kann auch '''<convert type="ClockToText">WithSeconds</convert>''' benutzen!!
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 350: Zeile 364:
 
* Der Convertor '''"ClockToText"''' selbst wäre zu finden in: '''/usr/lib/enigma2/python/Componetns/Converter'''
 
* Der Convertor '''"ClockToText"''' selbst wäre zu finden in: '''/usr/lib/enigma2/python/Componetns/Converter'''
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 378: Zeile 394:
 
* Der Render '''"Progress"''' ist zu finden in: /usr/lib/enigma2/python/Componetns/Renderer
 
* Der Render '''"Progress"''' ist zu finden in: /usr/lib/enigma2/python/Componetns/Renderer
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 411: Zeile 429:
  
 
* Der Render '''"Pixmap"''' ist zu finden in: /usr/lib/enigma2/python/Componetns/Renderer
 
* Der Render '''"Pixmap"''' ist zu finden in: /usr/lib/enigma2/python/Componetns/Renderer
 +
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 445: Zeile 466:
 
* Warum dieses Bild?  Bei einem echten 16:9 Film ist dies ja am TV selbst recht gut zu erkennen (Breitbild),  Doch leider bei den HD+ Sendern wo gerne skaliertes Material Verwendung findet kommt es doch recht oft vor das es als 16:9 ausgegeben wird und optisch doch nur ein 4.3 Bild ist. Da sieht man auch gleich wer schlechten Mist sendet :-)
 
* Warum dieses Bild?  Bei einem echten 16:9 Film ist dies ja am TV selbst recht gut zu erkennen (Breitbild),  Doch leider bei den HD+ Sendern wo gerne skaliertes Material Verwendung findet kommt es doch recht oft vor das es als 16:9 ausgegeben wird und optisch doch nur ein 4.3 Bild ist. Da sieht man auch gleich wer schlechten Mist sendet :-)
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 473: Zeile 496:
 
* Genau wie vorher gleich gestaltet, Unterschied liegt hier bei '''<convert type="ServiceInfo">HasTelext</convert>'''
 
* Genau wie vorher gleich gestaltet, Unterschied liegt hier bei '''<convert type="ServiceInfo">HasTelext</convert>'''
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 510: Zeile 535:
 
* im zweiten Widget '''<convert type="ValueRange">721,1980</convert>''' wird gebrüft ob die Auflösung zwischen 721 und 1980 ist (icon on)
 
* im zweiten Widget '''<convert type="ValueRange">721,1980</convert>''' wird gebrüft ob die Auflösung zwischen 721 und 1980 ist (icon on)
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 538: Zeile 565:
 
* Haupt Unterschied liegt hier nun bei  '''<convert type="ServiceInfo">IsCrypted</convert>'''
 
* Haupt Unterschied liegt hier nun bei  '''<convert type="ServiceInfo">IsCrypted</convert>'''
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 683: Zeile 712:
 
* sollte ein weitere Tuner noch benutzt werden wird dieser mittels Gelb dargestellt (intressant für mehr Tuner Boxen)
 
* sollte ein weitere Tuner noch benutzt werden wird dieser mittels Gelb dargestellt (intressant für mehr Tuner Boxen)
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  
Zeile 712: Zeile 743:
 
* Dieses wird Überblendet sobald Picons verwendet werden, dies ist möglich mitttles dem Renderer '''render="Picon"'''
 
* Dieses wird Überblendet sobald Picons verwendet werden, dies ist möglich mitttles dem Renderer '''render="Picon"'''
  
 +
 +
Zurück zum [[#top | Inhaltsverzeichnis:]]
  
  

Version vom 1. Dezember 2012, 18:54 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.)


Zurück zum Inhaltsverzeichnis:


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


Zurück zum Inhaltsverzeichnis:


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!


Zurück zum Inhaltsverzeichnis:


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.


Zurück zum Inhaltsverzeichnis:


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..


Zurück zum Inhaltsverzeichnis:


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!!


Zurück zum Inhaltsverzeichnis:


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


Zurück zum Inhaltsverzeichnis:


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>


Progressbar im Skin BlackdreamHD des OE 2.0


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


Zurück zum Inhaltsverzeichnis:


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 entsprechende 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>


Anzeige (Icon) ob der Ton auch in DolbyDigital (AC3) ausgestrahlt wird


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
  • Der Render "Pixmap" ist zu finden in: /usr/lib/enigma2/python/Componetns/Renderer


Zurück zum Inhaltsverzeichnis:


Videoformat icon (16:9?)

Die Grundfunktion ist eigentlich genau Identisch wie Audio-Icon, nur das wie hier nun Anzeigen wollen ob eine Sendung in 4:3 oder in 16:9 ausgestrahlt wird.

Wird in 16:9 ausgestrahlt erscheint das entsprechende Icon, wird in 4:3 ausgestrahlt ist es nur Schwach bzw. gar nicht zu sehen.


	<!-- Videoformat icon (16:9?) -->
	<ePixmap pixmap="BlackDreamHD/icons/icon_format_off.png" position="717,7" size="36,20" zPosition="1" alphatest="blend"/>
	<widget source="session.CurrentService" render="Pixmap" pixmap="BlackDreamHD/icons/icon_format_on.png"  position="717,7" size="36,20" zPosition="2" alphatest="blend">
		<convert type="ServiceInfo">IsWidescreen</convert>
		<convert type="ConditionalShowHide"/>
	</widget>


Anzeige (Icon) ob das Bild auch in 16:9 ausgestrahlt wird


Erklärung skin.xml zum Videoformat icon

  • Der Aufbau und Ablauf ist eigentlich Identisch wie beim Audio-Element
  • Ein zigster Haupt-Unterschied liegt hierbei "<convert type="ServiceInfo">IsWidescreen</convert>"


  • Warum dieses Bild? Bei einem echten 16:9 Film ist dies ja am TV selbst recht gut zu erkennen (Breitbild), Doch leider bei den HD+ Sendern wo gerne skaliertes Material Verwendung findet kommt es doch recht oft vor das es als 16:9 ausgegeben wird und optisch doch nur ein 4.3 Bild ist. Da sieht man auch gleich wer schlechten Mist sendet :-)


Zurück zum Inhaltsverzeichnis:


Teletext icon (is teletext available?)

Mit diesem Icon wollen wir Anzeigen ob der Sender für die laufende Sendung auch einen Teletext mit ausstrahlt.

Wird ein Teletext ausgestrahlt erscheint das entsprechende Icon, wird in keines ausgestrahlt ist es nur Schwach bzw. gar nicht zu sehen.


	<!-- Teletext icon (is teletext available?) -->
	<ePixmap pixmap="BlackDreamHD/icons/icon_txt_off.png" position="767,7" size="33,20" zPosition="1" alphatest="blend"/>
	<widget source="session.CurrentService" render="Pixmap" pixmap="BlackDreamHD/icons/icon_txt_on.png" position="767,7" size="33,20" zPosition="2" alphatest="blend">
		<convert type="ServiceInfo">HasTelext</convert>
		<convert type="ConditionalShowHide"/>
	</widget>


Anzeige (Icon) ob Teletext mit ausgestrahlt wird


Erklärung skin.xml zum Teletext

  • Genau wie vorher gleich gestaltet, Unterschied liegt hier bei <convert type="ServiceInfo">HasTelext</convert>


Zurück zum Inhaltsverzeichnis:


HDTV icon

Mittels diesem Icon wollen wir uns Anzeigen lassen ob die Sendung in HD, oder besser gesagt in einer höheren Auflösung als 720 ausgestrahlt wird.


		<!-- HDTV icon -->
		<widget source="session.CurrentService" render="Pixmap" pixmap="BlackDreamHD/icons/icon_hd_off.png" position="814,7" size="29,20" zPosition="1" alphatest="blend">
			<convert type="ServiceInfo">VideoWidth</convert>
			<convert type="ValueRange">0,720</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.CurrentService" render="Pixmap" pixmap="BlackDreamHD/icons/icon_hd_on.png" position="814,7" size="29,20" zPosition="2" alphatest="blend">
			<convert type="ServiceInfo">VideoWidth</convert>
			<convert type="ValueRange">721,1980</convert>
			<convert type="ConditionalShowHide" />
		</widget>


Anzeige (Icon) ob in HD ausgestrahlt wird

Erklärung skin.xml zum HD icon

  • Hier sind es zwei Widget die benötigt werden.
  • Haupt-Unterschied liegt hier bei <convert type="ServiceInfo">VideoWidth</convert>
  • Weiterhin wird im ersten Widget <convert type="ValueRange">0,720</convert> ob die Auflösung zwischen 0 - 720 ist (icon off)
  • im zweiten Widget <convert type="ValueRange">721,1980</convert> wird gebrüft ob die Auflösung zwischen 721 und 1980 ist (icon on)


Zurück zum Inhaltsverzeichnis:


Crypt icon (encrypted service?)

Mittels diesen Icons wollen wir uns Anzeigen lassen ob ein Sender Verschlüsselt ausgestrahlt wird.


		<!-- Crypt icon (encrypted service?) -->
		<ePixmap pixmap="BlackDreamHD/icons/icon_crypt_off.png" position="857,7" size="26,20" zPosition="1" alphatest="blend"/>
		<widget source="session.CurrentService" render="Pixmap" pixmap="BlackDreamHD/icons/icon_crypt_on.png"  position="857,7" size="26,20" zPosition="2" alphatest="blend">
			<convert type="ServiceInfo">IsCrypted</convert>
			<convert type="ConditionalShowHide"/>
		</widget>


Anzeige (Icon) ob der Sender Verschlüsselt ist


Erklärung skin.xml zum Crypt icon

Auch hier ist der Aufbau wieder fast gleich wie schon bekannt sein sollte...

  • Haupt Unterschied liegt hier nun bei <convert type="ServiceInfo">IsCrypted</convert>


Zurück zum Inhaltsverzeichnis:


tuners in use?

Die Dreambox verwaltet bis zu 4 Tuner die Sie mit den Buchstaben A, B, C, D deklariert

Im Defaultskin wie auch in den meisten anderen Skins sieht dieses große Element in etwa so aus:

		<!-- tuners in use? -->
		<widget source="session.TunerInfo" render="FixedLabel" text="A" position="180,138" size="10,15" zPosition="2" font="Regular;15" foregroundColor="yellow" backgroundColor="#4e5a74" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">1</convert>
			<convert type="ConditionalShowHide" />
		</widget>
		<widget source="session.TunerInfo" render="FixedLabel" text="B" position="200,138" size="10,15" zPosition="2" font="Regular;15" foregroundColor="yellow" backgroundColor="#4e5a74" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">2</convert>
			<convert type="ConditionalShowHide" />
		</widget>
		<widget source="session.TunerInfo" render="FixedLabel" text="C" position="220,138" size="10,15" zPosition="2" font="Regular;15" foregroundColor="yellow" backgroundColor="#4e5a74" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">4</convert>
			<convert type="ConditionalShowHide" />
		</widget>
		<widget source="session.TunerInfo" render="FixedLabel" text="D" position="240,138" size="10,15" zPosition="2" font="Regular;15" foregroundColor="yellow" backgroundColor="#4e5a74" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">8</convert>
			<convert type="ConditionalShowHide" />
		</widget>
		<widget source="session.FrontendInfo" render="FixedLabel" text="A" position="180,138" size="10,15" zPosition="3" font="Regular;15" foregroundColor="green" backgroundColor="#4e5a74" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">0,0</convert>
			<convert type="ConditionalShowHide" />
		</widget>
		<widget source="session.FrontendInfo" render="FixedLabel" text="B" position="200,138" size="10,15" zPosition="3" font="Regular;15" foregroundColor="green" backgroundColor="#4e5a74" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">1,1</convert>
			<convert type="ConditionalShowHide" />
		</widget>
		<widget source="session.FrontendInfo" render="FixedLabel" text="C" position="220,138" size="10,15" zPosition="3" font="Regular;15" foregroundColor="green" backgroundColor="#4e5a74" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">2,2</convert>
			<convert type="ConditionalShowHide" />
		</widget>
		<widget source="session.FrontendInfo" render="FixedLabel" text="D" position="240,138" size="10,15" zPosition="3" font="Regular;15" foregroundColor="green" backgroundColor="#4e5a74" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">3,3</convert>
			<convert type="ConditionalShowHide" />
		</widget>

Im Skin BlackdreamHD möchte ich aber das zusätzlich zu den Tunerbezeichnungen A,B,C,D auch mit angezeigt wird ob es sich hierbei um einen DVB-S, DVB-C oder DVB-T Tuner handelt.

Daher habe ich diese abgewandelte Darstellung gewählt:

		<!-- tuners in use? -->
		<widget source="session.FrontendInfo" render="FixedLabel" text="DVB-S" position="780,29" size="60,25" font="Regular;19" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="FrontendInfo">TYPE</convert>
			<convert type="ValueRange">0,0</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.FrontendInfo" render="FixedLabel" text="DVB-C" position="780,29" size="60,25" font="Regular;19" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="FrontendInfo">TYPE</convert>
			<convert type="ValueRange">1,1</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.FrontendInfo" render="FixedLabel" text="DVB-T" position="780,29" size="60,25" font="Regular;19" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="FrontendInfo">TYPE</convert>
			<convert type="ValueRange">2,2</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<eLabel text="A" position="850,29" zPosition="1" size="15,25" font="Regular;19" halign="center" foregroundColor="darkgrey" backgroundColor="transpBlack" transparent="1" />
		<eLabel text="B" position="867,29" zPosition="1" size="15,25" font="Regular;19" halign="center" foregroundColor="darkgrey" backgroundColor="transpBlack" transparent="1" />
		<eLabel text="C" position="883,29" zPosition="1" size="15,25" font="Regular;19" halign="center" foregroundColor="darkgrey" backgroundColor="transpBlack" transparent="1" />
		<eLabel text="D" position="900,29" zPosition="1" size="15,25" font="Regular;19" halign="center" foregroundColor="darkgrey" backgroundColor="transpBlack" transparent="1" />
 
		<widget source="session.TunerInfo" render="FixedLabel" text="A" position="850,29" zPosition="2" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">1</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.TunerInfo" render="FixedLabel" text="B" position="867,29" zPosition="2" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">2</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.TunerInfo" render="FixedLabel" text="C" position="883,29" zPosition="2" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">4</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.TunerInfo" render="FixedLabel" text="D" position="900,29" zPosition="2" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="TunerInfo">TunerUseMask</convert>
			<convert type="ValueBitTest">8</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.FrontendInfo" render="FixedLabel" text="A" position="850,29" zPosition="3" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="green" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">0,0</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.FrontendInfo" render="FixedLabel" text="B" position="867,29" zPosition="3" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="green" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">1,1</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.FrontendInfo" render="FixedLabel" text="C" position="883,29" zPosition="3" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="green" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">2,2</convert>
			<convert type="ConditionalShowHide" />
		</widget>
 
		<widget source="session.FrontendInfo" render="FixedLabel" text="D" position="900,29" zPosition="3" size="15,25" font="Regular;19" halign="center" backgroundColor="background" foregroundColor="green" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="FrontendInfo">NUMBER</convert>
			<convert type="ValueRange">3,3</convert>
			<convert type="ConditionalShowHide" />
		</widget>
Tuner Anzeige im BlackdreamHD Skin mit anzeige um was für einen Tuner es sich handelt


Erklärung skin.xml zur tuners in use?

  • Im Default-Skin wird nur der jeweils aktive Tuner mittels des entsprechenden Buchstaben angezeigt.
  • Im BlackdreamHD-Skin wird jeder der 4 möglichen Tuner grau angezeigt
  • Der aktive Tuner selbst wird dann mit Grün angezeigt
  • sollte ein weitere Tuner noch benutzt werden wird dieser mittels Gelb dargestellt (intressant für mehr Tuner Boxen)


Zurück zum Inhaltsverzeichnis:


Channellogo (Picon)

Wer sich Picon (Senderlogos) installiert kann sich diese auch in der Infobar anzeigen lassen

Dies geschieht mittels dem folgenden einfachen Widget:


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


Picon Anzeige in der Infobar wenn nicht vorhanden..
Picon Anzeige in der Infobar wenn vorhanden..


Erklärung skin.xml zum Channellogo (Picon)

  • wer wie hier ein eigenes "default icon" haben will (falls keine Picons installiert wurden) muss einfach ein picon_default.png Skinordner haben.
  • Dieses wird Überblendet sobald Picons verwendet werden, dies ist möglich mitttles dem Renderer render="Picon"


Zurück zum Inhaltsverzeichnis: