Habt ihr eigentlich schon das neue Widget "Scale" entdeckt?
Das habe ich mir gebaut, um z.B. den aktuellen Stromverbrauch anzuzeigen.
folgende Parameter sind möglich: dahinter der default-Wert
- **data-orientation** : 'horizontal'
- **data-width** :
- **data-height** :
- **data-min** : 0
- **data-max** : 100
- **data-font-size** : 12
- **data-tick** : 1
- **data-value-interval** : 50
- **data-extra-tick** : 10
- **data-tick-color** : '#eee'
- **data-limits-get** :
- **data-limits** :
- **data-colors** :
- **data-color** : #aa6900
Beispiele unter test/test_scale.html
Uhi das sieht auch nice aus. :)
Aktuell verwende ich immer das Level Widget.
VG, Thomas
Gefällt mir gut, ich habe das gleich mal für meine Systemstatusseite zur Anzeige der CPU Last und Temperatur verwendet (siehe Bild).
2 Punkte hätte ich noch:
1. Bei mir hat die Einfärbung nicht funktioniert, weil ich "data-part" verwende. Soweit ich sehe fehlt in der init_attr Funktion die folgende Zeile (zumindest hat es damit bei mir geklappt).
elem.initData('limits-part', elem.data('part'));
2. Es wäre schön, wenn Du noch etwas wie das deaktivieren der Texte einbauen könntest (z.B. über Klasse 'notext'). Vorschlag von mir wäre folgende Änderung:
statt
//draw vvalue as text
if (i % valInterval === 0) {
//draw vvalue as text
if (i % valInterval === 0 && !elem.hasClass('notext')) {
Wer mag, darf das Widget im Wiki gerne vervollständigen. Mir rennt leider gerade die Zeit davon.
https://wiki.fhem.de/wiki/FTUI_Widget_Scale (https://wiki.fhem.de/wiki/FTUI_Widget_Scale)
He drhirn,
was hälst du davon wenn man (solange kein Wikieintrag vorhanden ist) den Link zum Forum-Beitrag bei dem Widget hinterlegt?
Es gibt mittlerweile schon so viele Widgets die viele gar nicht kennen, weil sie nirgends gelistet sind.
So könnte man sich zumindest mal die näheren Infos im Forum ansehen und wer dann möchte, kann den Wiki-Eintrag verfollständigen. ;)
VG, Thomas
Bittesehr ;)
vielen Dank für das Feedback und den (begonnenen) Wiki-Eintrag
@eki: ich habe deine Vorschläge so übernommen. Danke
Danke für dieses tolle Widget, nutze es um meinen momentanen Stromverbrauch anzeigen zu lassen. Eine Sache ist mir jedoch aufgefallen:
Sowohl bei Deinem Demo-Code (https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_scale.html) als auch auf meiner FTUI Installation ist die Anzeige manchmal gestreckt (siehe Anhang). Das passiert sowohl auf meinem Windows PC mit Chrome, als auch auf einem iPad mit Safari. Erst ein erneutes Laden der Seite (manchmal auch mehrmals notwendig) korrigiert die Anzeige wieder.
Habe sowohl FHEM als auch FTUI auf aktuellem Stand.
Irgendeine Idee was es sein könnte?
Okay, ich habe es mit data-width in den Griff bekommen. Trotzdem seltsam dass es so inkonsistent ist.
Bei mir sieht das Widget leider seltsam aus. Hat jemand eine Idee woran das liegen könnte? Meine Definition:
<div class="center" data-type="scale" data-device="PowerWP_IEC_01" data-get="power" data-max="10000"></div>
ZitatHat jemand eine Idee woran das liegen könnte?
Setze mal "data-value-interval" auf einen größeren Wert, der weiße Strich unten sind die ausgegebenen Werte.
Vielen Dank. Kaum macht man es richtig, schon funktioniert es. :)
Hallo,
bei mir ist das Widget irgendwie "unscharf".
Hat jemand eine Möglichkeit gefunden es irgendwie höher aufzulösen oder gar zu vectorisieren?
Oder Stehe ich da allein mit da?
M.f.G.
Zitat von: eki am 30 November 2017, 16:13:21
Gefällt mir gut, ich habe das gleich mal für meine Systemstatusseite zur Anzeige der CPU Last und Temperatur verwendet (siehe Bild).
Das suche ich schon seit "Ewigkeiten".
Kannst Du den Code hierzu noch veröfentlichen?
Ich vermute Du verwendest die Daten vom SYSMON, oder?
Da ich mein FTUI dynamisch aus vielen Templates aufbaue, kann ich Dir nur ein Stück meines Codes schicken, und Du musst eventuell noch das eine oder Andere anpassen. Ich nutze row-col von FTUI, auch da musst Du schauen, ob das in Dein Gesamtkonzept passt. Aber als Anregung hilft es hoffentlich.
...
<div class="row">
<div class="col-5"></div><div class="col-25">
<div class="row" style="background: #505050; margin-bottom: 50px;">
<div>CPU Temperature [°C]</div>
</div>
<div class="row">
<div class="col-1-3 align-start rotate">
<div>Min</div>
</div><div class="col-1-3 align-start rotate">
<div>Average</div>
</div><div class="col-1-3 align-start rotate">
<div>Max</div>
</div>
</div>
<div class="row">
<div class="col-1-3">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-cfg-device="0" data-get="cpu_temp_stat" data-limits='["30","40","55"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="60" data-part="1" style="margin-left: -20px !important;" class="inline darker showdeco"></div>
</div><div class="col-1-3">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-cfg-device="0" data-get="cpu_temp_stat" data-limits='["30","40","55"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="60" data-part="3" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div><div class="col-1-3">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-cfg-device="0" data-get="cpu_temp_stat" data-limits='["30","40","55"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="60" data-part="2" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
</div>
</div><div class="col-5"></div><div class="col-60" style="margin-left: 20px">
<div style="background: #505050; margin-bottom: 50px;">
<div>CPU Load [%]</div>
</div>
<div class="row">
<div class="col-1-7 align-start rotate">
<div>User</div>
</div><div class="col-1-7 align-start rotate">
<div>Nice</div>
</div><div class="col-1-7 align-start rotate">
<div>Sys</div>
</div><div class="col-1-7 align-start rotate">
<div>Idle</div>
</div><div class="col-1-7 align-start rotate">
<div>IO</div>
</div><div class="col-1-7 align-start rotate">
<div>IRQ</div>
</div><div class="col-1-7 align-start rotate">
<div>SIRQ</div>
</div>
</div>
<div class="row">
<div class="col-1-7">
<div data-type="scale" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="vertical" data-height="120" data-width="35px" data-cfg-device="0" data-get="stat_cpu_percent" data-limits='["0","50","90"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="0" data-max="100" data-part="1" style="margin-left: -20px !important;" class="inline darker showdeco"></div>
</div><div class="col-1-7">
<div data-type="scale" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="vertical" data-height="120" data-width="35px" data-cfg-device="0" data-get="stat_cpu_percent" data-limits='["0","50","90"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="0" data-max="100" data-part="2" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div><div class="col-1-7">
<div data-type="scale" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="vertical" data-height="120" data-width="35px" data-cfg-device="0" data-get="stat_cpu_percent" data-limits='["0","50","90"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="0" data-max="100" data-part="3" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div><div class="col-1-7">
<div data-type="scale" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="vertical" data-height="120" data-width="35px" data-cfg-device="0" data-get="stat_cpu_percent" data-limits='["0","50","90"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="0" data-max="100" data-part="4" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div><div class="col-1-7">
<div data-type="scale" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="vertical" data-height="120" data-width="35px" data-cfg-device="0" data-get="stat_cpu_percent" data-limits='["0","50","90"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="0" data-max="100" data-part="5" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div><div class="col-1-7">
<div data-type="scale" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="vertical" data-height="120" data-width="35px" data-cfg-device="0" data-get="stat_cpu_percent" data-limits='["0","50","90"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="0" data-max="100" data-part="6" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div><div class="col-1-7">
<div data-type="scale" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="vertical" data-height="120" data-width="35px" data-cfg-device="0" data-get="stat_cpu_percent" data-limits='["0","50","90"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="0" data-max="100" data-part="7" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
</div>
</div>
</div>
...
Grundsätzlich funktioniert es, außer das sich einiges verschiebt und die Schrift sich nich um 90 Grad dreht.
Aber das kriege ich auch noch hin. :)
Danke.
Oh, da habe ich noch was vergessen. Das mit den um 90 Grad gedrehten Texten braucht im fhem-table-ui-user.css (vorausgesetzt Du nutzt das schon sonst musst Du noch den entsprechenden Eintrag im html File machen) noch folgende Einträge:
.rotate.align-start {
transform: rotate(-90deg) translateX(50%);
transform-origin: 50% 50%;
text-align: start;
}
.rotate.align-end {
transform: rotate(-90deg) translateX(50%);
transform-origin: 50% 50%;
text-align: end;
}
Danke für die Info.
Jetzt wird es langsam rund. :)
Zitat von: eki am 10 April 2018, 12:56:35
Oh, da habe ich noch was vergessen. Das mit den um 90 Grad gedrehten Texten braucht im fhem-table-ui-user.css (vorausgesetzt Du nutzt das schon sonst musst Du noch den entsprechenden Eintrag im html File machen) noch folgende Einträge:
.rotate.align-start {
transform: rotate(-90deg) translateX(50%);
transform-origin: 50% 50%;
text-align: start;
}
.rotate.align-end {
transform: rotate(-90deg) translateX(50%);
transform-origin: 50% 50%;
text-align: end;
}
Die Farben auf der Skala werden wahrscheinlich "teiltransparent" dargestellt. Somit habe ich das Problem, dass "mein" Grün dort anders aussieht. Zum Vergleich mal zwei Screenshots des gleichen Farbwerts für Scala und Symbol.
gibt es auch hier eine Möglichkeit per "fhem-table-ui-user.css" etwas was opacity zu definieren? Konnte in der scale.js nichts dergleichen finden?!
@setstate: it seems that your widget_scale does not honor the standard data-hide, date-hide-on and date-hide-off attributes. I've been looking at the code, but can't seem to find the cause as you do call the parent init_attr() function. I can't seem to figure it out.
Servus,
kann man das Widget auch so einstellen, dass der Balken von 0 aus ins negative und positive angezeigt wird.
Ich bekomms nur hin, dass der Balken von min-Wert aus angezeigt wird.
Möchte nämlich meinen aktuellen Bezug/Lieferung meiner Photovoltaik in einem darstellen (negativ = Bezug = bezahlen / positiv = Liefern = €)
Mercie
Gruß Roland
Gibt es eine Möglichkeit bei data-tick Werte <1 einzugeben?
Hallo.
Was könnte denn falsch sein wenn ich gar nichts sehe ?
Hab das Beispiel von Git versucht, device angepasst, aber es ist nur ein graues Feld zu sehen, also der Platzhalter der über "data-size-" definiert wurde.
EDIT:
Ich habe den "update all ..." zum installieren noch mal ausgeführt. Läuft jetzt.
Eigentlich ging ich davon aus, das ein FHEM update auch das TabletUi auf dem neuesten Stand bringt ?
Leider hat es mir die Mülltonnen meiner Müllabfuhr Anzeige zerhauen. Muss ich mal prüfen.
Frage hat sich damit erledigt :D
EDIT2:
Vermutlich Browser Cache...läuft !