MoviePlayer infobar im Skin erstellen
An diesem Artikel wird derzeit gearbeitet. Achtung: Der Artikel kann unvollständig und fehlerhaft sein! |
Inhaltsverzeichnis
Einleitung
Der Screen name="MoviePlayer" ist die Grafische Darstellung der Infobar die man angezeigt bekommt wenn wir uns eine Aufnahme anschauen.
Diese Infobar wird man wohl am sehr häufig zu Gesicht bekommen.
Hier wird die Funktionen der Infobar im Bezug auf das DMM eigene OE 2.0 erklärt (keine sonstigen Anpassungen)
MoviePlayer Infobar im OE 2.0 DMM-Skin
Wie beim jedem Screen selbst beginnt der Screen 'name="MoviePlayer" mittels :
<!-- Movieplayer infobar --> <screen name="MoviePlayer" position="75,530" size="1140,150" title="InfoBar" flags="wfNoBorder"> <!-- 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 zum MoviePlayer
- Mit flags="wfNoBorder" wird festgelegt das man keinen Rahmen (Border) haben will. Alternative diesen Eintrag weglassen und es gibt einen Rahmen
- position= gibt an wo der Screen dargestellt werden soll in Bildpunkten, 135 = vom Rand Links in die Mitte, 360 = vom Rand oben nach unten
- size= 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:
<!-- Movieplayer infobar --> <screen name="MoviePlayer" position="75,530" size="1140,150" title="InfoBar" flags="wfNoBorder" backgroundColor="transparent"> <!-- Background --> <ePixmap position="0,0" zPosition="-1" size="1140,150" pixmap="BlackDreamHD/movie_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
Zurück zum Inhaltsverzeichnis:
Time
Hier setzten wir wieder die aktelle Uhrzeit ein.
Dieses mal jedoch mit der Standartausgabe incl. den Sekunden und nicht wie in der Main-Infobar mit verkleinerter Extra-Sekunden Anzeige:
<!-- Time --> <widget source="global.CurrentTime" render="Label" position="30,15" size="110,30" font="Regular;24" halign="right" backgroundColor="background" shadowColor="black" shadowOffset="-2,-2" transparent="1"> <convert type="ClockToText">WithSeconds</convert> </widget>
Erklärung skin.xml der Uhrzeit
- <convert type="ClockToText">WithSeconds</convert> stellt die Uhrzeit in Stunden, Minuten und Sekunden dar
- Mittels halign="right" setzten wir die Zeit nach Rechts im Textfeld der Größe size="110,30"
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="935,15" size="140,26" font="Regular;24" backgroundColor="background" shadowColor="black" shadowOffset="-1,-1" 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
Zurück zum Inhaltsverzeichnis:
Blinking pixmap (recording in progress?)
Hier soll nun eine Blinkende Grafik angezeigt werden, falls eine Aufnahme läuft. In diesem Falle ist es ein roter Punkt mit einem kleinen weisen "R" in der Mitte drinn
ist soweit völlig identisch wie in der Main-Infobar, daher gibt es hierfür nun auch kein eigener Screenshot nur wegen dem rotem Punkt |
<!-- Blinking pixmap (recording in progress?) --> <widget source="session.RecordState" render="Pixmap" position="600,15" size="20,20" zPosition="1" pixmap="BlackDreamHD/icons/rec.png" alphatest="blend"> <convert type="ConditionalShowHide">Blink</convert> </widget>
Erklärung skin.xml zum Blinking pixmap
- der Renderer dafür ist wieder render="Pixmap"
- Mittels <convert type="ConditionalShowHide">Blink</convert> wird veranlasst das die Grafik an und aus geblendet wird
Zurück zum Inhaltsverzeichnis: