Autor Thema: (gelöst) Label für Temperatur mit Nachkommastelle in kleinerer Schriftgröße  (Gelesen 3841 mal)

Offline rvideobaer

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

ich bastele gerade an einer Temperaturanzeige, und möchte die Nachkommastelle in einer kleineren Schrift darstellen und die Einheit darüber anordnen um Platz zu sparen.
Die Nachkommastelle weglassen geht ja mit data-fix, kann man auch die Stellen vor dem Komma weg lassen?
Hat jemand einen tip?

Gruß Rolf
« Letzte Änderung: 26 Februar 2016, 23:50:36 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 zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3705
    • HMCCU
Mit data-substitution kannst Du einiges erreichen.

z.B. mit einem regulären Ausdruck, der alles außer den Nachkommastellen aus Value entfernt:

data-substitution="s/^[0-9]+\.([0-9]+)$/$1/"

Du kannst aber auch Javascript-Funktionen angeben (setzt voraus, dass nur 1 Nachkommastelle vorhanden ist (-1)):

data-substitution="toString().substr(-1)"
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline rvideobaer

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

@zap
Danke für die Hilfe, klappt wunderbar genau so wie ich mir es vorgestellt habe.

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: 4200
  • FHEM TabletUI
    • FHEM Tablet UI
@rvideobaer: +1 von mir für deine Frage zum besseren Layout Design
und
@zap: Danke für die gute Unterstützung

Ich habe aber auch noch einen Lösungsansatz mit nur einem Label, aber mit etwas CSS Zauber für eure fhem-tablet-ui-user.css

.label-precomma{
    font-size:100%;
}
.label-comma{
    left: 3px;
    top: -24px;
    position: relative;
}
.label-aftercomma{
    font-size:40%;
    left: 4px;
    top: -25px;
    position: relative;
}
.label-unit{
    font-size:40%;
    left: -20px;
    top: 1px;
    position: relative;
}

funktioniert nach update von widget_label

Wenn man den anderen Style nur bei einem bestimmten Label anwenden will, muss man mit IDs arbeiten:

<div id="hier" data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#ad3333"]' data-unit="%B0C%0A" class="bigger thin top-narrow"></div>
#hier>.label-precomma{
    font-size:100%;
}
#hier>.label-comma{
    left: 3px;
    top: -24px;
    position: relative;
}
#hier>.label-aftercomma{
    font-size:40%;
    left: 4px;
    top: -25px;
    position: relative;
}
#hier>.label-unit{
    font-size:40%;
    left: -20px;
    top: 1px;
    position: relative;
}

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1202
Danke für die coole Idee und natürlich auch für die Umsetzung @setstate.  :)
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Lacrosse, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, ...

Offline rvideobaer

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

schöne Umsetzung, aber bei mir gibt es verschiede Temperatur Label in unterschiedlichen Schriftgrößen und da sieht dann jedes andes aus. Die Abstände der Elemente ändern sich bei Änderung der Schriftgröße nicht im Verhältnis. Ich habe etwas mit em versucht da scheint es etwas besser zu gehen, aber ich habe auch 2 Elemente in gleicher Schriftgröße gehabt die jeder eine andere Position der Einheit hatten. Habe das jetzt erst einmal auf eis gelegt, und die manuelle Variante wieder eingestellt.

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: 4200
  • FHEM TabletUI
    • FHEM Tablet UI
Wenn jedes Label eine Sonderbehandlung braucht, muss man mit IDs arbeiten:

id="label1"
und dann im CSS Einzel Sektionen für jedes Label

#label1>.label-aftercomma{
    font-size:40%;
    left: 4px;
    top: -25px;
    position: relative;
}

Offline Mellowback

  • Full Member
  • ***
  • Beiträge: 133
Hallo zusammen,

möchte gerne data-fix nutzen damit ich keine Nachkommastellen habe.
Wie muss ich das in mein aktuellen Label integrieren ?

Verbrauch Min: $data{min2}, Max: $data{max2}, Aktuell: $data{currval2}

Vorab Danke
« Letzte Änderung: 28 Dezember 2017, 16:19:08 von Mellowback »