Radio infobar im Skin erstellen

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

Einleitung

Der Screen name="RadioInfoBar" ist die Grafische Darstellung der Infobar die man angezeigt bekommt wenn wir uns Im Radiomodus befinden und die OK Taste drücken.

Diese Infobar wird man nur zu Gesicht bekommen, wenn in den System-Optionen der Alternative Radiomodus auf aus gestellt ist!

RadioInfobar im Skin des OE 2.0

Wie beim jedem Fenster selbst beginnt der Screen 'name="RadioInfoBar" mittels :

	<!-- Radio infobar -->
	<screen name="RadioInfoBar" flags="wfNoBorder" position="80,500" size="1130,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 Radio InfoBar

• Mit flags="wfNoBorder" wird festgelegt das man keinen Rahmen (Border) haben will. Alternative diesen Eintrag weglassen und es gibt einen Rahmen

• position="80,500" gibt an wo der Screen dargestellt werden soll in Bildpunkten, 80 = vom Rand Links in die Mitte, 500 = vom Rand oben nach unten

• size="1130,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:

	<!-- Radio infobar -->
	<screen name="RadioInfoBar" flags="wfNoBorder" position="80,500" size="1130,190" title="InfoBar" backgroundColor="transparent" >
 
		<!-- Background -->
		<ePixmap position="0,0" zPosition="-1" size="1130,190" pixmap="BlackDreamHD/infobar.png" />
 
	</screen>

Background der RadioInfoBar 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

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:

Radio Text

Die Definition des Radio Text bedeutet eigentlich nur die Textausgabe die Der jeweilige Sender wie beim RDS als Radiotext ausstrahlt.

Innerhalb dieses "widget" geben wir nun an wo denn innerhalb der Infobar der Radio Text erscheinen soll.

		<!-- Radio Text -->
		<widget source="RdsDecoder" render="Label" position="20,0" size="1040,40" font="LCD;35" halign="center" backgroundColor="background" foregroundColor="foreyellow" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="RdsInfo">RadioText</convert>
		</widget>

Radiotext (RDS) der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Radiotext(RDS) der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml des Radio Text

• Wie bekannt die Postion, den gewünschten Font incl. der Größe und der Farbe der Schrift

• Mittels dem Renderer source="RdsDecoder"und dem Type <convert type="RdsInfo">RadioText</convert> wird nun die Tatsächliche RDS Information des Radiotext geladen

Zurück zum Inhaltsverzeichnis:

Ras Interactive Available

Strahlt ein Sender auch RASS aus wird hiermit einfach ein kleines RASS-Logo angezeigt.

		<!-- Ras Interactive Available -->
		<widget source="RdsDecoder" render="Pixmap" pixmap="skin_default/icons/rass_logo.png" position="1060,15" size="50,21" alphatest="on">
			<convert type="RdsInfo">RasInteractiveAvailable</convert>
			<convert type="ConditionalShowHide" />
		</widget>

Um RASS auf dem TV auszugeben, muss in den System-Optionen der Alternative Radiomodus auf an gestellt sein und diese Radio-Infobar ist dann nicht mehr Sichtbar!

Rass-Logo in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Zurück zum Inhaltsverzeichnis:

Channellogo (Picon)

Wie auch in der Main-Infobar kann man auch in der Radio-Infobar sich die Channellogo (Picon) anzeigen lassen.

Wer sich also Picons (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>

Channellogo (Picon) in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

leider ist da immer noch ein Bug im Enigma2, daher sollte man hier lieber dies auskommentieren und Anstelle des Picons eine einfache Grafik anzeigen lassen

Mehr zu diesem Bug findet man im DMM eigenen Forum: Radiomodus schmiert die box ab und an ab

Ihr könntet ja im DMM Forum dort posten falls Ihr auch wünscht das dieser Bug mal behoben wird...

Um nun diesem Bug zu umgehen hier meine Persönliche Alternative:

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

Picon wurde auskommentiert und durch ein einfache PNG-Grafik ersetzt, bis der Bug mal behoben wurde ...

Multimedia-Grafik in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Zurück zum Inhaltsverzeichnis:

Event Now StartTime

Hier soll nun dargestellt werden wann die aktuelle Sendung gestartet ist die gerade Läuft.

		<!-- Event Now StartTime -->
		<ePixmap pixmap="skin_default/icons/icon_event.png" position="170,66" zPosition="1" size="15,10" transparent="1" alphatest="on" />
		<widget source="session.Event_Now" render="Label" position="190,59" size="70,24" font="Regular;24" halign="right" backgroundColor="background" transparent="1">
			<convert type="EventTime">StartTime</convert>
			<convert type="ClockToText">Default</convert>
		</widget>
 
		<eLabel text="-" position="265,55" size="15,24" font="Regular;24" halign="center" backgroundColor="background" foregroundColor="grey" transparent="1"/>

Event Now StartTime in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml des Event Now StartTime

• Mit dem ersten ePixmap setzen wir unsere Doppelpfeilgrafik

• Mit dem Widget ermitteln wir die Startzeit der Sendung und setzten diese wie bereits bekannt sein dürfte auf unsere Infobar

• Mit dem Letzten eLabel setzten wir uns hinter der Startzeit noch ein Bindestrich, da dort im Anschluss noch die Endzeit eingetragen werden soll

Zurück zum Inhaltsverzeichnis:

Event Now EndTime

Hier soll nun dargestellt werden wann die aktuelle Sendung endet ist die gerade Läuft.

		<!-- Event Now EndTime -->
		<widget source="session.Event_Now" render="Label" position="287,59" size="70,24" font="Regular;24" halign="left" backgroundColor="background" transparent="1">
			<convert type="EventTime">EndTime</convert>
			<convert type="ClockToText">Default</convert>
		</widget>

Event Now EndTime in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml des Event Now StartTime

• Mit dem Widget ermitteln wir die Endzeit der Sendung und setzten diese wie bereits bekannt sein dürfte auf unsere Infobar

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="375,59" size="450,26" font="Regular;24" noWrap="1" backgroundColor="background" transparent="1">
			<convert type="ServiceName">Name</convert>
		</widget>

Programmname in der RadioInfoBar 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

• Ist soweit gleich wie in der Main-Infobar auch zu finden ist

Zurück zum Inhaltsverzeichnis:

Event Now Name

Hiermit wird nun dargestellt wie der Name der Radio-Sendung ist, die aktuelle Ausgestrahlt wird.

		<!-- Event Now Name -->
		<widget source="session.Event_Now"  render="Label" position="205,92" size="710,30" font="Regular;28" backgroundColor="background" transparent="1">
			<convert type="EventName">Name</convert>
		</widget>

Name der laufenden Sendung in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml des Event Now Name

• Wie bekannt die Postion, den gewünschten Font incl. der Größe und der Farbe der Schrift

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="600,66" zPosition="0" size="200,12" transparent="1" alphatest="on" />
		<widget source="session.Event_Now" render="Progress" position="600,65" size="200,12" pixmap="BlackDreamHD/icons/progress_fr.png" zPosition="1" transparent="1">
			<convert type="EventTime">Progress</convert>
		</widget>

Progressbar in der RadioInfoBar 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:

EventTime Now

Hiermit soll nun noch laufende Zeit der Sendung in Minuten angezeigt werden

		<!-- EventTime Now  -->
		<widget source="session.Event_Now"  render="Label" position="820,59" size="110,25" font="Regular;24" halign="right" transparent="1">
			<convert type="EventTime">Remaining</convert>
			<convert type="RemainingToText">InMinutes</convert>
		</widget>

EventTime Now in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml zur EventTime Now

• Der Unterschied zur den anderen Event Now liegt in diese Zeile des Widget <convert type="RemainingToText">InMinutes</convert>

Zurück zum Inhaltsverzeichnis:

Event Next StartTime

Hiermit können wir nun die Startzeit der nächsten Sendung anzeigen

		<!-- Event Next StartTime -->
		<ePixmap pixmap="BlackDreamHD/icons/icon_event-next.png" position="170,137" zPosition="1" size="15,10" transparent="1" alphatest="on" />
		<widget source="session.Event_Next" render="Label" position="200,130" size="60,20"  font="Regular;20" halign="right" backgroundColor="background" foregroundColor="grey" transparent="1">
			<convert type="EventTime">StartTime</convert>
			<convert type="ClockToText">Default</convert>
		</widget>
 
		<eLabel text="-" position="260,130" size="15,20"  font="Regular;20" halign="center" backgroundColor="background" foregroundColor="grey" transparent="1"/>

Event Next Starttime in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml zur Event Next StartTime

• mit der ersten Zeile des ePixmap wird wieder eine graue Pfeilgrafik anzeigen gelassen

• Mittels dem Widget ermitteln wir die Startzeit der nächsten Sendung und lassen uns diese mit dem Defaultwert uns anzeigen

• Mittel der letzten Zeile dem eLabel wird hier einfach wieder ein Bindestrich gesetzt, da dort im Anschluss dann noch die Endzeit gesetzt werden soll

Zurück zum Inhaltsverzeichnis:

Event Next EndTime

nun soll noch die Endzeit der nächsten Sendung dargestellt werden

		<!-- Event Next EndTime -->
		<widget source="session.Event_Next" render="Label" position="275,130" size="60,20"  font="Regular;20" halign="left" backgroundColor="background" foregroundColor="grey" transparent="1">
			<convert type="EventTime">EndTime</convert>
			<convert type="ClockToText">Default</convert>
		</widget>

Event Next EndTime in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml zur Event Next EndTime

• Mittels dem Widget ermitteln wir die Endzeit der nächsten Sendung und lassen uns diese mit dem Defaultwert uns anzeigen

Zurück zum Inhaltsverzeichnis:

Event Next Duration Time

Hier soll nun die Länge in Minuten der nächsten Sendung dargestellt bzw. Angezeigt werden

		<!-- Event Next Duration Time -->
		<eLabel text="(" position="335,130" size="10,20"  font="Regular;20" halign="center" backgroundColor="background" foregroundColor="grey" transparent="1"/>
 
		<widget source="session.Event_Next" render="Label" position="350,130" size="88,20"  font="Regular;20" halign="center" backgroundColor="background" foregroundColor="grey" transparent="1">
			<convert type="EventTime">Duration</convert>
			<convert type="ClockToText">InMinutes</convert>
		</widget>
 
		<eLabel text=")" position="438,130" size="10,20"  font="Regular;20" halign="center" backgroundColor="background" foregroundColor="grey" transparent="1"/>

Event Next Duration Time in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml zur Event Next Duration Time

• mit dem eLabel der ersten Zeile setzten wir eine einfache Klammer

• Mittels dem Widget ermitteln wir die Laufzeit der nächsten Sendung und lassen uns diese mit dem Wert InMinutes uns anzeigen

• mit dem eLabel der letzten Zeile schließen wir nun die Klammer

Zurück zum Inhaltsverzeichnis:

Event Next Name

Nun fehlt uns noch der Name der nächsten Sendung, die im Anschluss an die ganzen Event Next Varianten angefügt werden soll

		<!-- Event Next Name -->
		<widget source="session.Event_Next" render="Label" position="455,130" size="465,25" font="Regular;22" halign="left" backgroundColor="background" foregroundColor="grey" transparent="1">
			<convert type="EventName">Name</convert>
		</widget>

Event Next Name in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml zur Event Next Name

• Mittels dem Widget ermitteln wir den Namen der nächsten Sendung und lassen uns diesen anzeigen.

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="30,160" size="120,24" font="Regular;24" backgroundColor="background" shadowColor="black" shadowOffset="-2,-2" transparent="1" >
			<convert type="ClockToText">Format:%d.%m.%Y</convert>
		</widget>

Datum in der RadioInfoBar im Skin BlackdreamHD des OE 2.0

Erklärung skin.xml zum Datum

• <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:

Time

Die Definition der "Zeit" wird auch wieder in einem eigenen "widget" dargestellt.

		<!-- Time -->
		<widget source="global.CurrentTime" render="Label" position="1000,160" size=" 70,24" font="Regular;24" backgroundColor="background" shadowColor="black" shadowOffset="-2,-2" transparent="1">
			<convert type="ClockToText">Default</convert>
		</widget>

Uhrzeit in der RadioInfoBar 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

• Wer die Uhrzeit gerne einfach hätte aber mit den Sekunden, kann auch <convert type="ClockToText">WithSeconds</convert> benutzen!!