(gelöst) Label für Temperatur mit Nachkommastelle in kleinerer Schriftgröße

Begonnen von rvideobaer, 26 Februar 2016, 01:10:40

Vorheriges Thema - Nächstes Thema

rvideobaer

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

zap

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, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB

rvideobaer

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

setstate

@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;
}


Thyraz

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, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

rvideobaer

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

setstate

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

Mellowback

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