Listboxes - An introduction to mode, selection zoom and margin

An explanation of the 3 layout modes, selection zoom and margins with examples about how to use them.

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 8

  • dm920 orjinalmı nasıl bilirim

  • slm

  • Warum wird hier nicht einfach die HTML / CSS Syntax genutzt und das Rad nochmal neu erfunden ?!

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

      Aber gut zu wissen, dass was kommen soll.


      über ein Jahr später immer noch nichts, da hätte man auch gleich sagen können "für die alten, abgeernteten Boxen gibt es nichts mehr"

    • wird wohl nix mehr, schade.

    • dm920 orjinalmı nasıl bilirim