Autor Thema: Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]  (Gelesen 5995 mal)

Offline DocCyber

  • Full Member
  • ***
  • Beiträge: 413
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.
« Letzte Änderung: 09 Februar 2017, 22:41:47 von DocCyber »
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-3 mit HM-CFG-LAN und jede Menge HM Komponenten.

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4049
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]
« Antwort #1 am: 10 Februar 2017, 06:53:50 »
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>

Offline DocCyber

  • Full Member
  • ***
  • Beiträge: 413
Antw:Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]
« Antwort #2 am: 10 Februar 2017, 16:19:36 »
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ß.
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-3 mit HM-CFG-LAN und jede Menge HM Komponenten.

Offline rvideobaer

  • Sr. Member
  • ****
  • Beiträge: 742
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"

<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
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4049
  • FHEM TabletUI
    • FHEM Tablet UI
wie ich schon oben geschrieben habe, verschachteln


<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>

Offline rvideobaer

  • Sr. Member
  • ****
  • Beiträge: 742
Hallo,

@setstate

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

<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
« Letzte Änderung: 05 März 2017, 11:38:21 von rvideobaer »
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

Offline tekniker-69

  • New Member
  • *
  • Beiträge: 36
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. :o

<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>

Offline rvideobaer

  • Sr. Member
  • ****
  • Beiträge: 742
Hallo,

vielleicht funktioniert es so:

<div style="font-size:40px">
Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

Offline tekniker-69

  • New Member
  • *
  • Beiträge: 36
Hatte ich auch schon probiert, hat aber keinen Effekt.

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4049
  • FHEM TabletUI
    • FHEM Tablet UI
Kann ich nachvollziehen, habe aber noch keine Lösung.

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4049
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]
« Antwort #10 am: 07 März 2017, 01:11:32 »
Lösung gefunden ... :D

Offline tekniker-69

  • New Member
  • *
  • Beiträge: 36
Antw:Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]
« Antwort #11 am: 07 März 2017, 04:46:04 »
Super, funktioniert.

Danke setstate.

Offline drhirn

  • Sr. Member
  • ****
  • Beiträge: 994
Antw:Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]
« Antwort #12 am: 07 März 2017, 09:39:47 »
Dürfen wir auch noch erfahren, was die Lösung war? ;)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4049
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]
« Antwort #13 am: 07 März 2017, 10:30:02 »
Änderung in der famultibutton Lib.

Offline rvideobaer

  • Sr. Member
  • ****
  • Beiträge: 742
Antw:Wie Label- und Symbol-Widget kombinieren / stapeln? [Zahl im Kreis]
« Antwort #14 am: 09 April 2017, 00:25:27 »
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
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

 

decade-submarginal