Listboxes - An introduction to mode, selection zoom and margin

Note: The features described here require enigma2 >= 4.4.1r10

Layout Mode

The listbox currently has three modes to layout content.

  1. vertical - the standard vertically oriented list - requires itemHeight to be set, width will always be the width of the actual listbox (minus margins)
  2. horizontal - a horizontally oriented list - requires itemWidth to be set, height will always be the height of the actual listbox (minus margins)
  3. grid - A grid layout, where items are oriented in both directions - requires itemWidth and itemHeight to be set.

Skin Example (grid)

<widget source="list" render="Listbox" position="center,center" size="50%,50%" mode="grid" itemWidth="50", itemHeight="50">


Python example

listInstance.setMode(eListbox.layoutGrid)

listInstance.setItemWidth(50)

listInstance.setItemHeight(50)

Selection Zoom

Selection Zoom does what the name already implies. It zooms the selection by a given factor.

1.0 equals 100% or "original" size. If you want an item zoomed by 20% when selected, the factor would be 1.2.
In vertical mode, the zoomed result is only centered vertically, the horizontal (or x) coordinate will not be changed.

In horizontal and grid mode, a centered zoom is being used (x and y are changed accordingly).


Skin example:

<widget source="list" render="Listbox" position="center,center" size="50%,50%" mode="grid" itemWidth="50", itemHeight="50" selectionZoom="1.2">


Python example:

listInstance.setSelectionZoom(1.2)

Margin

Margin is the outer distance betweeen the listbox and it's items. It is NO item margin!

It's required to keep zoomed items that are touching borders from being clipped (cut off) whenever the selection zoom is > 1.0.

Margins are set per axis (horizontal,vertical).


The correct margin can be easily calculated.

(size * selectionZoom - size) / 2

or

(selectionZoom - 1.0) / 2 * size


We can now calculate the margin for the selectionZoom example above (please don't forget about the point before line rule):


(50 * 1.2 - 50) / 2 = 5

Skin example:

<widget source="list" render="Listbox" position="center,center" size="50%,50%" mode="grid" itemWidth="50", itemHeight="50" selectionZoom="1.2" margin="5,5">


Python example:

listInstance.setMargin(ePoint(5,5))

    Comments 3

    • wird es die benötigte Enigma Version in absehbarer Zeit auch für die 900/920 geben?

      Ich warte auf die Möglichkeiten schon seit 10 Jahren, hab aber keine Lust schon wieder eine neue Box zu kaufen.

      • Ja, wir wollen die Änderungen demnächst für die "krogoth" basierten Boxen anbieten.

        Vorher würde ich nur gerne noch 1-2 Bugs beheben ;).

      • gut Ding will Weile haben, also keinen Stress aufkommen lassen. ;-)

        Aber gut zu wissen, dass was kommen soll.