Neue Scrollbar-Methoden für Skins in Enigma2 (ab Stand 14.03.2013)

  • Es gibt für Skins neue Scrollbar-Methoden ab der enigma2-Version vom 14.03.2013, die ich hier einfach mal anhand eines Beispiels vorstellen möchte.


    Man kann nun Scrollbars komplett selber zeichnen, und diese global für seinen gesamten Skin bestimmen oder auch nur auf einzelne Screens beschränken (falls beispielsweise Plugin-Entwickler selber Scrollbars mitgeben wollen).


    Die Möglichkeiten und Einstellungsparameter will ich mal Anhand eines Beispieles zeigen:


    Wenn Ihr global die Einstellungen im Skin vornehmen wollt:


    Code
    windowstylescrollbar id="4">
    <value name="BackgroundPixmapTopHeight" value="1" />
    <value name="BackgroundPixmapBottomHeight" value="1" />
    <value name="ValuePixmapTopHeight" value="2" />
    <value name="ValuePixmapBottomHeight" value="2" />
    <value name="ScrollbarWidth" value="14" />
    <value name="ScrollbarBorderWidth" value="0" />
    <pixmap name="BackgroundPixmap" filename="Default-HD/scrollbarbackground-fs8.png" />
    <pixmap name="ValuePixmap" filename="Default-HD/scrollbarslider-fs8.png" />
    </windowstylescrollbar>


    BackgroundPixmapTopHeight (BackgroundPixmapBottomHeight) --> Höhe in Pixel, wieviel oberer (unterer) Rand eure Scrollbar-Hintergrundbild hat (in meinem Beispiel im Anhang sind das 1 Pixel)
    ValuePixmapTopHeight (ValuePixmapBottomHeight) --> Höhe in Pixel, wieviel oberer (unterer) Rand eure Scrollbar-Value-Bild hat (in meinem Beispiel im Anhang sind das 2 Pixel)
    ScrollbarWidth --> Breite der Scrollbar in Pixel (im Beispiel sind das 14 bei mir)
    ScrollbarBorderWidth --> Breite des gezeichneten Rands in Pixel ( im Beispiel bei mir 0, also keinen Rand)
    BackgroundPixmap --> Hintergrund-Bild der Scrollbar
    ValuePixmap --> Value-Bild der Scrollbar


    Wenn Ihr Euch jetzt die Bilder im Anhang anschaut seht ihr, dass sowohl das Hintergrund- als auch das Vordergrundbild sehr kleine Bilder sind. Diese werden automatisch auf die entsprechende Höhe der Scrollbar gezeichnet. Macht die Bilder nicht zu groß in Eurem Skin, da es auch Scrollbars gibt, welche nicht so hoch sind (das gleiche gilt für das value-Bild), und dann werden, falls die Bilder zu hoch sind, von oben und unten Pixel abgeschnitten).


    Wenn Ihr einen Screen individuell mit einem eigenen Scrollbar-Aussehen erstellen wollt, könnt ihr das beispielsweise wie folgt machen:


    Code
    <widget name="list" position="10,60" size="930,450" itemHeight="30" scrollbarMode="showOnDemand" scrollbarSliderBorderWidth="0" scrollbarWidth="20" scrollbarBackgroundPixmapTopHeight="21" scrollbarBackgroundPixmapBottomHeight="21" scrollbarSliderBackgroundPicture="Default-HD/scrollbackpic-fs8.png" scrollbarValuePicture="Default-HD/scrollvaluepic.png"/>


    Analog zu den obigen Erkärungen kann man nun da setzen:
    scrollbarBackgroundPixmapTopHeight
    scrollbarBackgroundPixmapBottomHeight
    scrollbarValuePixmapTopHeight
    scrollbarValuePixmapBottomHeight
    scrollbarWidth
    scrollbarSliderBorderWidth
    scrollbarSliderBackgroundPicture
    scrollbarValuePicture


    in meinem Beispiel hat das Hintergrundbild eine Höhe von 21 Pixel für den oberen und unteren Rand, das Value-Bild hat da keine Werte, also setze ich das nicht.


    Da ich kein Grafiker bin sehen meine Resultate für die Scrollbars sehr bescheiden aus, das soll alles nur zur Veranschaulichung dienen ;)


    Hier die Bilder, welche ich als Scrollbar-Hintergund und Value genommen habe für die Beispiele:


    [Blocked Image: http://drbest.merlin3.info/scrollbars/scrollbarbackground-fs8.png]


    [Blocked Image: http://drbest.merlin3.info/scrollbars/scrollbarslider-fs8.png]


    [Blocked Image: http://drbest.merlin3.info/scrollbars/scrollbackpic-fs8.png]


    [Blocked Image: http://drbest.merlin3.info/scrollbars/scrollvaluepic.png]



    Und hier die Resulate damit:


    [Blocked Image: http://drbest.merlin3.info/scrollbars/1.jpg]


    [Blocked Image: http://drbest.merlin3.info/scrollbars/2.jpg]


    [Blocked Image: http://drbest.merlin3.info/scrollbars/3.jpg]


    [Blocked Image: http://drbest.merlin3.info/scrollbars/4.jpg]

  • Bedankt :thumbsup::thumbup:

    DM8000 HD, (sata) HDD + (sata) SSD - DeLOCK + (usb) Stick, OoZooN OE2.0 (flash)
    QNAP TS-209 Pro, TS-409U, TS-219P
    40'' LCD Toshiba 40ZF355D
    AV : Logitech Z-5500 Digital