Widgets und Klassen

[mrabdip]

Hallo zusammen,

vielleicht stelle ich gerade eine blöde Frage, aber ich probiere es trotzdem mal.

Es ist ja so, dass Widgets "nur" bestimmte Klassen unterstützen. Das kann man ja aus https://github.com/knowthelist/fhem-tablet-ui#format rauslesen.
Laut der Seite unterstützt das Widget "level" die Klassen "mini, horizontal,big,bigger,large". Wo wird definiert wo das Widget nur diese Klassen unterstützt? Oder anders gefragt, wie kann man diese Klassen erweitern?
Mir ist das Widget noch zu klein und hätte das gerne größer als "bigger".

Danke und Grüße
mrabdip

[setstate]

Laut Code finde ich nur die class "mini".

Aber man kann mit data-height und data-width alle beliebigen Größen erzeugen.

[mrabdip]

Danke für die Antwort. Oh Mann, das habe ich total übersehen.  Ja, so geht es natürlich. Habe mich nur voll auf die Klassen konzentriert.

Danke und Grüße
mrabdip

[curt]

@setstate

Laut Code finde ich nur die class "mini".

Und die tut nicht, was man erwarten würde.

Aber man kann mit data-height und data-width alle beliebigen Größen erzeugen.

Reagiert auch unerwartet. Ich würde vermuten, dass das Widget buggy ist. (Oder ich zu dumm, das einzusetzen - auch möglich.)

Ich möchte den "Stromverbrauch" in Watt anzeigen lassen, der schwankt bei der Device um 100 Watt. Also baue ich mir 0-150, in der Erwartung, dass der "Zeiger" bei 2/3 steht.

Ohne weitere Optionen funktioniert das auch (erster Screenshot), allerdings ist das mit der Vererbung nicht sooo ... die Anzeige verlässt die Kachel.

Ok, probieren wir mal "mini", also 50% (zweiter Screenshot). Da ist die Anzeige in der Kachel. Allerdings stimmt die Normierung nicht mehr.

Probieren wir also noch data-height (dritter Screenshot). Bei 100-er Kachel muss man auf 80 setzen, damit das in die Kachel passt, damit könnte man noch leben. Allerdings stimmt da die Normierung auch nicht.

Sicherheitshalber mein Code:

Code Auswählen Erweitern


  <div data-type="level"
data-device="Stecker_06"
data-get="power"
data-part="1"
data-min="0"
data-max="150"
data-orientation="vertical"
data-color="#aa6900"
data-tick="0"
data-height="80"
  data-width="10"
class="nocache nolabels"></div>