Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]

[DocCyber]

Hallo Forum!
Ich möchte gern zwei Readings in einem "Kombi-Widget" aus Label und Symbol darstellen.
Dabei soll das Label zentriert im Symbol (Kreisring) stehen.

Wenn ich eine einfache Zahl anstelle eines Label-Widgets nehme, dann funktioniert das auch ...


Hat jemand eine Idee? Danke euch.

Edit:
Ich muss mich ein wenig korrigieren: Es funkioniert prinzipiell mit dem Push-Widget in Kombination mit einer einfachen Zahl. Allerdings kann das Push-Widget meines Wissens keine Readings darstellen.

[setstate]

Push kann neuerdings auch Readings darstellen, nur nicht per default. Du musst data-get und data-get-on angeben.
Die Kombi bekommt man durch Verschachtelung hin. Label innerhalb eines Push

<div data-type="push" ...><div data-type="label" ...></div></div>

[DocCyber]

Ich hab es mal mit dem Push-Widget ausprobiert.
Leider ist es nicht das, was ich möchte bzw es lässt sich damit nicht realisieren.

Nochmal zur Erläuterung:
Ich möchte ein Symbol-Widget (Kreisring mit reading-gesteuerter Farbe) mit einem Label-Widget so kombinieren, dass das Label (ebenfalls reading-gesteuert) zentriert im Kreisring steht.

Warum das alles? Im Kellergeschoss habe ich Radiatoren, aber im Rest des Hauses Fußbodenheizung. Bei FBH ist der jeweilige Heizkreis entweder geschlossen (blauer Kreisring) oder offen (roter Vollkreis). Radiatoren können aber mehr oder wenig geöffnet sein.
Die Zustände bei FBH und Radiatoren möchte ich einheitlich darstellen: Die Ventilöffnung in einem Kreisring mit variablen Farbtönen und als numerischen Wert.

Das Knob-Widget wäre zur Not auch okay, aber hierbei stört mich der breite untere Rand, und das Thermostat-Widget ist mir zu groß.

[rvideobaer]

Hallo,

ich schlage mich mit einem ähnlichen Problem herum. Ich möchte einen Punkt mit Zahl darin darstellen, aber bis jetzt schaffe ich das nur mit einem kleinen Kniff über "position absolute"

Code Auswählen Erweitern

<div
class="bigger compressed"
data-type="symbol"
data-device="DM_7020"
data-get="recordings"
data-icons='["","fa-circle recPuls"]'
      data-on-colors='["","dodgerblue"]'
      data-get-on='["0","(?!0).+"]'
      ></div>
     
      <div style="position:absolute; top:1px;left:13px"
      class="tall black"
      data-type="label"
data-device="DM_7020"
data-get="recordings"
      ></div>
     
mit dem verschachteln klappt es irgend wie nicht.

Gruß Rolf

[setstate]

wie ich schon oben geschrieben habe, verschachteln

Code Auswählen Erweitern


<div>
    <div
        data-type="symbol"
        data-device="dummy1"
        data-get="STATE"
        data-icon="none"
        data-color='none'
        data-background-icons='["none","fa-circle-thin"]'
        data-background-colors='["","dodgerblue"]'
        data-states='["0","(?!0).+"]'>
        <div
            data-type="label"
            data-device="ftuitest"
            data-get="STATE"
            data-limits='[0,1,2]' data-colors='["#6699FF","#aa6900","#ad3333"]'
            ></div>
    </div>
</div>


[rvideobaer]

Hallo,

@setstate

Danke für den Tip, jetzt habe ich es hinbekommen. Ein paar kleine Veränderungen habe ich noch angepasst.

Code Auswählen Erweitern

<div  class="top-space">
<div data-type="symbol"
data-device="DM_7020"
data-get="recordings"
data-icon="none"
        data-color='none'
        data-background-icons='["none","fa-circle"]'
        data-background-colors='["black","dodgerblue"]'
      data-limits='["0","(?!0).+"]'>
     
      <div data-type="label"
data-device="DM_7020"
data-get="recordings"
      data-color="black"></div>
      </div>
     </div>

Mein problem war das zusätzliche alles umfassende <DIV> das bei Deinem ersten Tip leider nicht so erkennbar war. Ich hatte es nur verschachtelt und da klappt es dann nicht.

Danke Gruß Rolf

[tekniker-69]

Hallo zusammen,

ich habe bei mir mal etwas ähnliches versucht, allerdings übernimmt das Label die Größenklasse nicht, so daß das Ergebnis wie unten aussieht.
Der Wert im Label ist übrigens 40,5°C, wie man unschwer erkennen kann.

Code Auswählen Erweitern


<div class="cell">
<div data-type="symbol"
data-device="dummy1"      
data-limits='["on","off"]'
data-icon="none"
data-color='none'
data-background-icons='["fa-square","fa-square"]'
data-background-colors='["blue","red"]'
onclick="ftui.setFhemStatus('set dummy2 trigger')"
data-states='["off","on"]'
class="bigger">                                   
<div data-type="label"                     
        data-device="dummy3"
data-limits='[0,38,43]'
data-colors='["#f2f2f2","orange","red"]'
data-unit="&deg;C"
data-fix="1"                 
class="mini">
</div>
         </div>
</div>


[rvideobaer]

Hallo,

vielleicht funktioniert es so:

Code Auswählen Erweitern

<div style="font-size:40px">

Gruß Rolf

[tekniker-69]

Hatte ich auch schon probiert, hat aber keinen Effekt.

[setstate]

Kann ich nachvollziehen, habe aber noch keine Lösung.

[setstate]

Lösung gefunden ...

[tekniker-69]

Super, funktioniert.

Danke setstate.

[drhirn]

Dürfen wir auch noch erfahren, was die Lösung war?

[setstate]

Änderung in der famultibutton Lib.

[rvideobaer]

Hallo,

mir ist jetzt aufgefallen das sich die Zahl im Label nur bei einem reload der Seite aktualisiert. Ist das ein problem bei mir?

Gruß Rolf