Übung 9 --> EPG, ServiceSelector Box

  • So jetzt wirds FETT


    Jetzt fügen wir für die EPG Anzeige und den ServiceSelector die Grafiken ein.


    Folgende PNG´s hab ich hier für gezeichnet.


    <img name="eWindow.bottom" src="unten.png" />
    <img name="eWindow.right" src="rechts.png" />
    <img name="eWindow.left" src="links.png" />
    <img name="eWindow.top" src="oben.png" />
    <img name="eWindow.topLeft" src="obenlinks.png" />
    <img name="eWindow.topRight" src="obenrechts.png" />
    <img name="eWindow.bottomLeft" src="untenlinks.png" />
    <img name="eWindow.bottomRight" src="untenrechts.png" />


    Die namen hier für sind Fix vorgegebe ich hab die PNG´s so genannt das gleich die
    Position mit Übersetzt ist.


    Nun sieht das ganze noch recht sch... aus.


    Wir müssen noch die Fonts anpassen. Das geschieht in den Fontalias.


    <fontalias>


    <map name="eStatusBar" font="Blue.Regular" size="24" />
    <map name="eChannelInfo" font="Blue.Regular" size="28" />
    <map name="eWindow.TitleBar" font="Blue.Bold" size="23" />
    <map name="eWindow.Childs" font="Blue.Regular" size="30" />


    <map name="eListBox.EntryText.normal" font="Blue.Regular" size="30" />
    <map name="eServiceSelector.Entry.Description" font="Blue.Regular" size="20" />
    <map name="eServiceSelector.singleColumn.Entry.Name" font="Blue.Regular" size="24" />
    <map name="eServiceSelector.singleColumn.Entry.Number" font="Blue.Regular" size="20" />
    <map name="eServiceSelector.multiColumn.Entry.Number" font="Blue.Regular" size="18" />
    <map name="eServiceSelector.multiColumn.Entry.Name" font="Blue.Regular" size="18" />
    <map name="eServiceSelector.combiColumn.Entry.Number" font="Blue.Regular" size="18" />
    <map name="eServiceSelector.combiColumn.Entry.Name" font="Blue.Regular" size="18" />


    <map name="eBouquetSelector.Entry.Name" font="Blue.Regular" size="32" />


    <map name="eEPGSelector.Entry.Description" font="Blue.Regular" size="25" />
    <map name="eEPGSelector.Entry.DateTime" font="Blue.Bold" size="23" />


    <map name="eventview.description" font="Blue.Regular" size="28" />
    <map name="eventview.date" font="Blue.Regular" size="20" />
    <map name="eventview.time" font="Blue.Regular" size="20" />
    <map name="eventview.channel" font="Blue.Regular" size="20" />


    <map name="lcd.menu.title" font="lcd" size="24" />
    <map name="lcd.menu.element" font="lcd" size="26" />
    <map name="lcd.main.service_name" font="lcd" size="30" />
    <map name="lcd.main.clock" font="lcd" size="28" />
    </fontalias>


    eWindow.Childs = Statusmeldungen die eingeblendet werden.
    Die einzelnen Änderungen erkläre ich dann noch mit einigen Screenshot.




    Dann müssen noch die Farben geändert werden. Dazu passen wir folgende Zeilen in
    den Colorscheme an:


    <map name="eStatusBar.background" color="bground" />
    <map name="eStatusBar.foreground" color="dark" />


    <map name="global.normal.background" color="bground" />
    <map name="global.normal.foreground" color="dark" />


    <map name="button.normal.background" color="bground" />


    <map name="global.selected.background" color="content" />
    <map name="global.selected.foreground" color="white" />


    <map name="global.disabled.background" color="bground" />
    <map name="global.disabled.foreground" color="dark" />


    <map name="eWindow.titleBar" color="dark" />
    <map name="eWindow.titleBarFont" color="dark" />



    eStatusBar.background = Hintergrund untere Statusanzeige im ServiceSelector
    eStatusBar.foreground = Schriftfarbe untere Statusanzeige im ServiceSelector


    global.normal.background = Hintergrund Serviceanzeige im ServiceSelector
    global.normal.foreground = Schriftfarbe Serviceanzeige im ServiceSelector


    button.normal.background = Hintergrund der Buttons ( Speichern OK ...)


    global.selected.background = Hintergrund Auswahlfelder im Menü
    global.selected.foreground = Schriftfarbe Auswahlfelder im Menü


    global.disabled.background = ??
    global.disabled.foreground = ??


    eWindow.titleBar = Titel von eigeblendeten Feldern ( EPG ...) Hintergrund
    eWindow.titleBarFont = Titel von eigeblendeten Feldern ( EPG ...) Schrift


    in die Vaules tragen wir folgendes ein.


    <value name="eWindow.titleFontSize" value="10" />
    <value name="eWindow.titleOffsetLeft" value="18" />
    <value name="eWindow.titleOffsetTop" value="8" />
    <value name="eWindow.titleHeight" value="0" />
    <value name="fontsize" value="23" />


    eWindow.titleFontSize = Erklärung kommt noch
    eWindow.titleOffsetLeft = Erklärung kommt noch
    eWindow.titleOffsetTop = Erklärung kommt noch
    eWindow.titleHeight = Erklärung kommt noch
    fontsize = Erklärung kommt noch


    So nun noch folgende Zeilen nach dem MainZapMenü. Das definiert und die einzelnen eBoxes. ( EPG, ServiceSelector . . )


    <object name="eServiceSelector_singleColumn">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eListbox name="services" position="0:0" size="e:e-80" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />
    </eServiceSelector>
    </object>


    <object name="eServiceSelector_multiColumn">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eListbox name="services" columns="3" position="0:0" size="e:e-80" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />
    </eServiceSelector>
    </object>


    <object name="eServiceSelector_combiColumn">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eListbox name="bouquets" position="5:0" size="150:e-85" loadDeco="" />
    <eListbox name="services" columns="2" position="155:0" size="e-5:e-85" loadDeco="" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />
    </eServiceSelector>
    </object>

    <object name="eServiceSelector_singleColumn_buttons">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eButton name="key_red" position="0:0" size="100:30" backgroundColor="std_dred" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_green" position="100:0" size="100:30" backgroundColor="std_dgreen" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_yellow" position="200:0" size="100:30" backgroundColor="std_dyellow" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_blue" position="300:0" size="100:30" backgroundColor="std_dblue" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eListbox name="services" position="0:50" size="e:e-80" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />
    </eServiceSelector>
    </object>


    <object name="eServiceSelector_multiColumn_buttons">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eButton name="key_red" position="0:0" size="100:30" backgroundColor="std_dred" loadDeco="" font="epg.title" align="center" vcenter="on" />
    <eButton name="key_green" position="100:0" size="100:30" backgroundColor="std_dgreen" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_yellow" position="200:0" size="100:30" backgroundColor="std_dyellow" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_blue" position="300:0" size="100:30" backgroundColor="std_dblue" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eListbox name="services" columns="3" position="0:40" size="e:e-30" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />
    </eServiceSelector>
    </object>


    <object name="eServiceSelector_combiColumn_buttons">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eButton name="key_red" position="0:0" size="100:30" backgroundColor="std_dred" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_green" position="100:0" size="100:30" backgroundColor="std_dgreen" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_yellow" position="200:0" size="100:30" backgroundColor="std_dyellow" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_blue" position="300:0" size="100:30" backgroundColor="std_dblue" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eListbox name="bouquets" position="5:45" size="150:e-85" loadDeco="" />
    <eListbox name="services" columns="2" position="155:45" size="e-5:e-85" loadDeco="" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />
    </eServiceSelector>
    </object>
    <object name="eEPGSelector">
    <eBouquetSelector position="70:100" size="500:400" text="EPG">
    <eListbox name="events" position="0:0" size="e:e" />
    </eBouquetSelector>
    </object>


    to be continued . . .

  • so hier mal den kpl. Skin


    Es fehlen noch ein paar Erklärungen oben die kommen
    noch.





    Screenshots

  • und noch ein Screenshot vom EPG

  • Hier die versprochenen Erklärungen.

  • Eventview

  • Hauptmenü

  • serviceselectorcombi

  • serviceselectormulti

  • serviceselectorsingle

  • Dieser Eintrag steht für das ServiceSelektor Menü also das Menü welches
    angezeigt wird wen mann an der FB die Taste auf oder ab drückt.


    <object name="eServiceSelector_singleColumn">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eListbox name="services" position="0:0" size="e:e-80" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />


    Zeile 1 Funktionname
    Zeile 2 Position und Größe des Fensters
    Zeile 3 Listbox dort werden die Services aufgelistet mit Position und Größe :e-80 ist so groß wie nötig
    -80 Pixel die 80 Pixel werden für die ChannelInfo reserviert
    Zeile 4 ChannelInfo größe und Position wobei die Position ab den frei gehaltenem beginnt (0:e-80).


    Der einzige unterschied zu dem oberen Eintrag ist das die vier Buttons



    Rot,Grün,Gelb und Blau dabei sind.
    Die Buttons können in den Experteneinstellungen angewählt oder abgewählt werden )


    <object name="eServiceSelector_singleColumn_buttons">
    <eServiceSelector position="90:100" size="500:400" text="Services">
    <eButton name="key_red" position="0:0" size="100:30" backgroundColor="std_dred" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_green" position="100:0" size="100:30" backgroundColor="std_dgreen" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_yellow" position="200:0" size="100:30" backgroundColor="std_dyellow" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eButton name="key_blue" position="300:0" size="100:30" backgroundColor="std_dblue" loadDeco="" font="epg.title" align="center" vcenter="on"/>
    <eListbox name="services" position="0:50" size="e:e-80" />
    <eChannelInfo name="channelinfo" position="0:e-80" size="e:80" loadDeco="" />
    </eServiceSelector>
    </object>



    Die Farben Rot,Grün, Gelb und Blau werden aus der default.esml genommen.


    Befindet man sich im ServiceSelektor Menü un drückt die "VIDEO" Taste
    werden 3 verschiedene Ansichten dardestellt.


    1. eServiceSelector_singleColumn
    2. eServiceSelector_multiColumn
    3. eServiceSelector_combiColumn


    Jede Ansicht muss mit und ohne Buttons eingegeben werden.


    Die Unterschiede der einzelnen Anzeigen beschränkt sich auf die beiden Zeilen.


    <eListbox name="services" columns="3" position="0:0" size="e:e-80" />


    Der Eintrag columns bezeichnet die Spalten anzahl in der Listbox


    <eListbox name="bouquets" position="5:0" size="150:e-85" loadDeco="" />


    Dieser Eintrag Definiert in der Combi Ansicht die Stelle für die Bouquets.

  • Wie Ihr bemerkt habt stimmt die Schriftgröße in den eServiceSelector´s
    nicht.



    Deshalb ändern wir folgende Zeile nochmals ab.


    <map name="eChannelInfo" font="Blue.Regular" size="22" />