Neues Widget "Scale"

Begonnen von setstate, 29 November 2017, 23:23:21

Vorheriges Thema - Nächstes Thema

setstate

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

ToM_ToM

Uhi das sieht auch nice aus. :)

Aktuell verwende ich immer das Level Widget.

VG, Thomas
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

eki

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')) {

drhirn

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

ToM_ToM

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
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

drhirn


setstate

vielen Dank für das Feedback und den (begonnenen) Wiki-Eintrag

@eki: ich habe deine Vorschläge so übernommen. Danke

MarkusN

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?

MarkusN

Okay, ich habe es mit data-width in den Griff bekommen. Trotzdem seltsam dass es so inkonsistent ist.

andre.k

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>

grossmaggul

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.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

andre.k

Vielen Dank. Kaum macht man es richtig, schon funktioniert es. :)

Franky1992

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.

Soc

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?

eki

#14
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>
...