[FTUI] [teilweise erledigt] Widget Knob tut nicht

[curt]

Hallo,

gegeben seien die Readings Name, Plattenplatz in %, vorliegende Updates, Version. Diese stelle ich für mehrere Server im Moment rein textlich in Kacheln dar. Das geht, kein Problem. Aber ich schaue immer ganz neidisch auf Kollegen @Eisix , der hat das viel schöner.

Also habe ich nun das Widget Knob (https://wiki.fhem.de/wiki/FTUI_Widget_Knob - da steht ganz oben "Mario Stephan", der damalige Maintainer?)) gefunden, das kann das wohl. Dachte ich. Bei genauerem Hinsehen fällt mir auf, dass da einiges eigenartig ist.

In der Wiki-Doku ist data-width durchgestrichen. Na gut, dachte ich, ist ja ein Kreis, wird data-height regeln. Aber data-height funktioniert auch nicht. Dann dachte ich an class, vielleicht behindert diese Angabe ... - dazu unten.

Den Text im Kreis möchte ich nicht, der soll weg. Also dachte ich: data-displayInput, steht ja in der Doku. Tut leider auch nicht. Nun habe ich von Javascript keine Ahnung. Aber mal im Widget nachgucken, das schaffe ich noch: Gibt es da leider nirgends.

Auch die Breite des Kreisrings würde ich gern anpassbar haben ... wo ist mein guter Freund, der sowas als Fingerübung macht? @eki

@setstate
Es gibt doch diese Klassen mini und small und so weiter. Und wenn die nicht passen -lese ich oft- müsse man da in irgendwelchen CSS rummanschen. Dieses widerstrebt mir völlig: Was weiß ich denn, was das übernächste Update damit anstellt? Und mir kam eine Idee - keine Ahnung ob das geht:

Wäre es denn realistisch machbar, nebst mini und small und wie die alle heißen, eine weitere Klasse mit Zahlenwert einzuführen? Also 1 steht für 1%, 100 für 100% und 300 für 300%. Und das funktioniert dann über alle Widgets. Oder ist das zu naiv gedacht?

[setstate]

Es gibt data-width und data-height.

Wenn ein Größen-Style angegeben ist, wirkt dieser:

- bigger (260)
- big (210)
- large (150)
- small (100)
- mini (52)

Code Auswählen Erweitern


            <li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
                <header>KNOB</header>
                <div class="center">
                    <div data-type="knob" data-device="ftuitest" data-lock="readonly"
                         data-width="50" data-height="50" class="green"></div>
                </div>
            </li>


Vollkreis

Code Auswählen Erweitern


            <li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
                <header>FULL CIRCLE</header>
                <div class="center">
                    <div data-type="knob" data-device="ftuitest" data-lock="readonly"
                         data-width="50" data-height="50" class="green"
                         data-angleoffset="0"
                         data-anglearc="360"
                         data-thickness="0.5"></div>
                </div>
            </li>


[curt]

Es gibt data-width und data-height.

Wenn ein Größen-Style angegeben ist, wirkt dieser:
- mini (52)

Hallo @setstate ,
ich rede mir ein, dass ich den Größen-Style löschte und es trotzdem nicht ging. Dein Beispiel zeigt, dass data-width und data-height sehr wohl gehen. Herzlichen Danke für Deine Mühe.

Nun bleibt die Frage, warum data-displayInput wegoptimiert wurde: Manchmal möchte man keinen Text im Kreisring. In meinem jetzigen Fall ist das egal: Der Kreisring wird so klein, dass kaum auffällt, dass der Punkt ein Text sein soll. (Ich habe das mal im Wiki vermerkt.)

Weiterhin ist die Frage, warum data-width in der Wiki-Doku durchgestrichen ist.

[curt]

@setstate
Ich sehe den Wald nicht - da sind sooo viele Bäume! - Darf ich Dich bitte-bitte mit Fragen nerven?

Schau mal bitte den Anhang.
Die grüne "0" ist die vorhandene Anzahl an Updates, ab "1" wird das rot. Der Kreisring ist klar, der ist Plattenbelegung - und von Dir. Unten steht die Version, die mir das baut - das soll unten so stehen bleiben, das ist ok.

Die Updates ("0") würde ich gern links haben, den Kreisring rechts. Das würde man ja beispielsweise mit hbox hinkriegen - aber ich bin zu doof dafür: Horizontal ist das dann mittig zusammengeklatscht, vertikal ist es in der Mitte der Kachel. Und "Version" ist dann gar nicht mehr sichtbar. Zig Experimente, es wurde immer schlimmer, nie besser. Gna. Muss ich da was mit "display" als Elternklasse machen? Oder ist das Mittel der Wahl "html table"? Was mache ich denn da falsch?

Frage am Rande, zu KNOB: Mit dem rosa Kreissegmentdingens visualisiere ich ja die Plattenbelegung. Da wäre ja der Traum, dass das Rot immer intensiver wird, je mehr Platte belegt ist - das ist beim Widget knob vermutlich nicht vorgesehen?

Mein derzeitiger Code, korrespondierend zum Screenshot:

Code Auswählen Erweitern


<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<div data-type="label"
      data-device="192.168.2.11"
      data-get="hostname"
      class="bold nocache">
</div>
   <div data-type="label"
        data-device="192.168.2.11"
        data-get="update"
        data-colors='["#00A000","#A00000"]'
        data-limits='[0,1]'
        class="big bold nocache">
   </div>
   <div data-type="knob"
        data-device="192.168.2.11"
        data-get="platten"
        data-lock="readonly"
        data-anglearc="360"
        data-angleoffset="0"
        data-min="0"
        data-max="100"
        data-width="20"
        data-height="20"
        data-thickness="0.7"
        data-displayInput="false"
        data-fgcolor="#FF6666"
        class="nocache top-space"
        >
   </div>
<div data-type="label"
      data-device="192.168.2.11"
      data-get="version"
      data-color="blue"
      class="bold nocache">
</div>
</li>



[setstate]

Nun bleibt die Frage, warum data-displayInput wegoptimiert wurde: Manchmal möchte man keinen Text im Kreisring. In meinem jetzigen Fall ist das egal: Der Kreisring wird so klein, dass kaum auffällt, dass der Punkt ein Text sein soll. (Ich habe das mal im Wiki vermerkt.)

das heißt jetzt data-displayNominal="false"

[setstate]

Die Updates ("0") würde ich gern links haben, den Kreisring rechts. Das würde man ja beispielsweise mit hbox hinkriegen - aber ich bin zu doof dafür: Horizontal ist das dann mittig zusammengeklatscht, vertikal ist es in der Mitte der Kachel. Und "Version" ist dann gar nicht mehr sichtbar. Zig Experimente, es wurde immer schlimmer, nie besser. Gna. Muss ich da was mit "display" als Elternklasse machen? Oder ist das Mittel der Wahl "html table"? Was mache ich denn da falsch?

hbox / vbox ist immer meine erste Wahl. Gegen Zusammenklatschen hilft "items-space-between"

Code Auswählen Erweitern

<div class="vbox">
   <div class="hbox items-space-between">
    ...
   </div>
   <div class="hbox items-space-between">
    ...
   </div>
</div>

Code Auswählen Erweitern


<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
  <div class="vbox">
   <div class="hbox items-space-between">
    <div data-type="label"
      data-device="192.168.2.11"
      data-get="hostname"
      class="bold nocache">
    </div>
    <div data-type="label"
        data-device="192.168.2.11"
        data-get="update"
        data-colors='["#00A000","#A00000"]'
        data-limits='[0,1]'
        class="big bold nocache">
   </div>
  </div>
  <div class="hbox items-space-between">
      <div data-type="knob"
        data-device="192.168.2.11"
        data-get="platten"
        data-lock="readonly"
        data-anglearc="360"
        data-angleoffset="0"
        data-min="0"
        data-max="100"
        data-width="20"
        data-height="20"
        data-thickness="0.7"
        data-displayInput="false"
        data-fgcolor="#FF6666"
        class="nocache top-space"
        >
   </div>
   <div data-type="label"
      data-device="192.168.2.11"
      data-get="version"
      data-color="blue"
      class="bold nocache">
   </div>
   </div>
  </div>
</li>



[curt]

das heißt jetzt data-displayNominal="false"

Danke, sehr schön! (Ich habe das auch gleich fleißig im zuständigen Wiki-Artikel nachgetragen.)

hbox / vbox ist immer meine erste Wahl.

Du siehst mich beruhigt. Also so einigermaßen ...

Gegen Zusammenklatschen hilft "items-space-between"

Nun ist es aber ganz kaputt. Schau mal bitte:

Code Auswählen Erweitern


<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<div data-type="label"
      data-device="192.168.2.11"
      data-get="hostname"
      class="bold nocache">
</div>
  <div class="vbox">
     <div class="hbox items-space-between">
   <div data-type="label"
        data-device="192.168.2.11"
        data-get="update"
        data-colors='["#00A000","#A00000"]'
        data-limits='[0,1]'
        class="big bold nocache">
   </div>
   <div data-type="knob"
        data-device="192.168.2.11"
        data-get="platten"
        data-lock="readonly"
        data-anglearc="360"
        data-angleoffset="0"
        data-min="0"
        data-max="100"
        data-width="20"
        data-height="20"
        data-thickness="0.7"
        data-displayNominal="false"
        data-fgcolor="#FF6666"
        class="nocache top-space"
        >
   </div>
     </div>
<div data-type="label"
      data-device="192.168.2.11"
      data-get="version"
      data-color="blue"
      class="bold nocache">
  </div>
</div>
</li>


[setstate]

Wie soll es dann aussehen?

2x2 oder 1x2x1

[curt]

Wie soll es dann aussehen?

Noch ganz anders.

Ganz oben ist eine Zeile, der Servername. Der wird (widget label) aus einem Reading gezogen: (hier: apu-samba)

Ganz unten ist eine Zeile, die Version, die auf dem jeweiligen Server aktiv liefert. (hier: V05.b).

Diese beiden Zeilen (ganz oben und ganz unten) sollen so bleiben, die sind da wunderschön aufgehoben. Siehe Screenshot, so etwa.

In dem von mir weiß gemalten Dings (alles nicht maßstäblich) möchte ich nun
* links - die Anzahl vorliegender Updates, das ist auch Widget Label. (Da wäre Hintergrund schön.)
* rechts - das wunderschöne Widget Knob, was Du mir so schön gebaut hast. Ich habe das so klein gemacht, dass das da wirklich gut kommt, siehe Screenshot oben.

Mir geht es tatsächlich um die Positionierung, da bin ich wirklich blond in diesem Fall. Das konnte ich schon mal besser.