[GELÖST (quasi)] Lineares Multi-Segment-Widget machbar?

[DocCyber]

Hallo Forum,

ich würde gern ein Heizprogramm in einem Widget darstellen.
Wie in der angehängten Grafik gezeigt, soll für jede der 4 Zeitspannen die Temperatur angezeigt werden:
nachts/früh - vormittags - nachmittags - spät/nachts
Die Segmentgrenzen sollen verschiebbar und die Temperatur soll einstellbar sein.

Habt jemand eine Idee, ob und wie ich so etwas realisieren könnte?

Danke euch im Voraus.

[fireboyff]

Hallo DocCyber

Setzt du dies Daten Uhrzeit von bis und Temp mehrfach in FHEM? Oder wie bildest du dies ab?

Das würde ja mal die Grundlage bilden Für deinen mehrfachen Range Regler.

lg Fire

[DocCyber]

ja, genau.
Außer dem Min- und Max-Zeitwert; der ist mit 0 bzw 24h festgelegt.

[eki]

Machbar ist grundsätzlich alles. Man müsste, um das wirklich sinnvoll hin zu bekommen wahrscheinlich ein neues Widget machen. Basis könnte noUiSlider (https://refreshless.com/nouislider/) sein.

[DocCyber]

Hallo Eki,
Natürlich ist (fast) alles grundsätzlich machbar.
Ich hatte aber gehofft, dass ich eine Möglichkeit übersehen hatte, so etwas mit bereits verfügbaren Widgets zu realisieren.
Dein Hinweis auf nouislider ist gut; mit 3 Schiebereglern wäre es das fast schon. Ich muss mich mal intensiver damit befassen.
Vielen Dank!

[DocCyber]

bei genauen Hinschauen stelle ich fest, dass das Teil ja ohnehin mehrere Schieberegler kann... 
Sehr schön. 

[eki]

... darum habe ich Dir das ja vorgeschlagen  .

Sehr rudimentär könntest Du auch so etwas machen:

Code Auswählen Erweitern


<div>
<div style="width: 400px; margin-top: 10px;">
<input type="text" style="width: 21%; display: inline-block"></input>
<input type="text" style="width: 21%; display: inline-block"></input>
<input type="text" style="width: 21%; display: inline-block"></input>
<input type="text" style="width: 21%; display: inline-block"></input>
</div>
<div style="width: 400px; margin-top: 10px;" class="">
<div class="value horizontal" data-step="0.25" data-min="0" data-max="8" data-color="#aabb00" data-background-color="#00bbaa" data-type="slider" style="display: inline-block">
</div>
<div class="value horizontal" data-step="0.25" data-min="8" data-max="16" data-color="#00bbaa" data-background-color="#00aa00" data-type="slider" style="margin-left: -6px; display: inline-block">
</div>
<div class="value horizontal" data-step="0.25" data-min="16" data-max="24" data-color="#00aa00" data-background-color="#0000aa" data-type="slider" style="margin-left: -6px; display: inline-block">
</div>
</div>
</div>


aber das hat sehr viele Unzulänglichkeiten (weil z.B. die Werte nicht an die Slider angepasst werden und die Regler nur einen begrenzten Bereich ermöglichen ....)

[DocCyber]

Danke, Eki

Ich würde lieber deinen ersten Lösungsvorschlag als 'echtes' Widget in FTUI einbauen.
Allerdings muss ich mich dazu erst mal sehr intensiv mit JS befassen, damit ich den Code von setstate vollständig verstehen kann. Aber es ist ja bald Weihnachtszeit, und dann habe ich mehr Ruhe für so etwas.

[eki]

Sehe ich auch so. Ist eigentlich nicht so schwierig. Als Startpunkt könntest Du widget_slider.js verwenden (man muss ja nicht komplett von vorne anfangen). Dort wird powerange.js verwendet, das API für noUISlider ist ähnlich. Falls Du Fragen hast, melde Dich.