Slider Widgets für Lautstärke bzw. Heizung

[wvhn]

Der Import von Widgets hatte in v2.9 noch einen Fehler, der im develop schon korrigiert ist. Deshalb muss die <widget>.html tatsächlich im Verzeichnis ./dropins/widgets liegen.
Dass Du die slider nicht siehst, liegt leider an einem Fehler, der mir beim Test durchgerutscht ist:
in der slider.html müssen die Attrribute „data-widget“ von „basic.roundslider“ auf „slider.roundslider“ und von „device.rtrslider“ auf „slider.rtrslider“ umgestellt werden. Ich korrigiere das nachher noch im Repo.

Gruß
Wolfram

[Sipple]

Sorry, da muss ich nochmal nachhaken.

Ich habe das nun mal mit Deinen Korrekturen versucht, mit mäßigem Erfolg.
Damit in der Doku unter Custom überhaupt ein Link zu slider.roundslider und slider.rtrslider angezeigt wird, muss die slider.html auf jeden Fall in den Unterordner /dropins/widgets. Das alleine reicht aber noch nicht damit dann etwas funktioniert. Die slider.html muss ZUSÄTZLICH in /dropins.

Die Korrekturen in der slider.html habe ich wie oben angegeben mal gemacht. Jetzt stimmt und funktioniert die Beispielseite des slider.roundslider.
Die Seite für slider.rtrslider sieht immer noch exakt so aus wie in meinem Screenshot dargestellt. Bei allen Browsersn die ich habe. Da hilft auch kein reload oder ähnliches. Der Slider fehlt und der ganze Blockinhalt ist nach oben verschoben, was ich mir nicht erklären kann, denn die beiden Blocks auf der Seite sehen im Source völlig korrekt aus.

[wvhn]

Vermutlich fehlen dem rtrslider nur die item-Werte. Öffne mal die Browser-Konsole (F12) und gib in der Kommandozeile folgendes ein:

io.write('bath.rtr.act', 22)

PS: habe jetzt nochmal eine Version der Dokuseite für rtrslider gepusht, die die items initialisiert. Zudem nochmal in einer frischen Installation von v2.9.2 getestet. Tatsächlich müssen die htmls in ./dropins/widgets liegen, damit die Doku die Seiten findet. Zusätzlich muss slider.html in ./dropins liegen, damit es richtig importiert wird. Wie gesagt ist dieser Bug im aktuellen develop gefixt.

[Sipple]

Jetzt sieht alles gut aus.
Den grauen Sliderknopf würde ich noch etwas kleiner machen. Schätze, das geht in der css, richtig?
die +- Buttons nehm ich für mich raus, braucht man nicht wenn man den Slider hat.
Dafür ersetze ich noch das Heizkörper-Icon durch das entsprechende dynamische. Hab ich in meinem bisherigen RTR Widget auch schon gemacht und gefällt mir besser.

Danke mal wieder für deine Hilfe.

[Sipple]

Hi wvhn

Ich habe da noch ein paar Korrekturen im widget_slider.roundslider gemacht. Nicht alle Beispiele wurden angezeigt, weil der item Wert für bath.light.value2 gefehlt hat. Habe ich oben mit io.write hinzugefügt."
Unten bei "Different Shapes" stand im <table ...> tag noch ein "border". Oben bei "Examples" nicht. Um es konsistent zu machen, habe ich es raus genommen.

Ich habe mal wieder versucht, einen Pull request zu generieren, aber Git mag mich nicht und ich mag Git nicht. Ich scheitere schon beim ersten oder zweiten Schritt.

Daher:

/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Martin Gleiß
* @copyright   2012 - 2015
* @license     GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/


{% extends "custom/widget_custom.html" %}

{% block example %}
{% import 'slider.html' as slider %}
<script type="text/javascript">
	$( document ).ready(function() {
		io.write('bath.blind.pos', 100 );
		io.write('bath.light.text', "20,70" );
		io.write('bath.light.value2', 50 );
	});
</script>
	
	<h5>Examples</h5>
	<div class="twig">
		<code class="prettyprint">{% filter trim|escape|nl2br %}{% verbatim %}
		{{ slider.roundslider('sl1', 'bath.light.value', 0, 100, 5) }}
		{{ slider.roundslider('sl2', 'bath.light.value', 0, 255, 10, 'Rollo', 'Höhe', 'cm') }}
		{{ slider.roundslider('sl3', 'bath.light.value', 0, 255, 10, '', '', '', 'true', '', 'light_light' ) }} 
		{% endverbatim %}{% endfilter %}</code>
	</div>
	<div class="html">
		<table width=100%><tr>
			<td>{{ slider.roundslider('slider1', 'bath.light.value', 0, 100, 5) }} </td>
			<td>{{ slider.roundslider('slider2', 'bath.blind.pos', 0, 255, 10, 'Rollo', 'Höhe', 'cm') }} </td>
			<td>{{ slider.roundslider('slider3', 'bath.light.value2', 0, 255, 10, '', '', '', 'true', '', 'light_light' ) }} </td>
		</tr></table>
	</div>

	<h5>Different Shapes</h5> 	
	Slider shapes can be chosen from the list in the docstring. Default start angles will be used (0, 90, 180, 270 degrees). <br>
	Icons should be avoided due to space constraints.
	
	<div class="twig">
		<code class="prettyprint">{% filter trim|escape|nl2br %}{% verbatim %}
		{{ slider.roundslider('sl4', 'bath.light.value', 0, 100, 5, '', '', '', '', '', '', 'quarter-top-left') }}
		{{ slider.roundslider('sl5', 'bath.light.value', 0, 255, 10, 'Rollo', 'Höhe', 'cm', '', '', '','half-top') }}
		{{ slider.roundslider('sl6', 'bath.light.value', 0, 255, 10, '', '', '', 'true', '50', '', 'quarter-top-right' ) }} 
		{% endverbatim %}{% endfilter %}</code>
	</div>
	<div class="html">
		<table width=100%> 
			<tr>
				<td>{{ slider.roundslider('slider4', 'bath.light.value', 0, 100, 5, '', '', '', 'true', '', '', 'quarter-top-left' ) }} </td>
				<td>{{ slider.roundslider('slider5', 'bath.blind.pos', 0, 100, 5, 'Rollo', 'Höhe', 'cm', 'true', '', '','half-top') }} </td>
				<td>{{ slider.roundslider('slider6', 'bath.light.value2', 0, 100, 5, '', '', '', 'true', '20', '', 'quarter-top-right' ) }} </td>
			</tr>
		</table>
	</div>
		
	<h5>Range Slider (experimental)</h5>
	The range slider transmits a pair of values (min/max) which can be written to an item of text or list type.
	{{ slider.roundslider('slider12', 'bath.light.text', 0, 100, 5,'','','','true','','','','range') }}
	
	<br><br>
	The documentation for the slider can be found here: <a href="https://roundsliderui.com/document.html">https://roundsliderui.com/document.html</a>

{% endblock %}

[wvhn]

Hi Sipple Danke fürs Feedback.

• Den Sliderknopf im rtrslider kannst Du (bisher) nicht im css verändern. Dazu ist in der slider.js in Zeile 289 der Wert für „handleSize“ zu verändern.
• Die Buttons kann ich als Option in die Parameterliste aufnehmen. Ich finde sie für die Feineinstellung ganz praktisch.
• Das dynamische Icon sehe ich mir gerne an. Wie parametrierst Du das bei Dir?
• Die Codeänderungen nehme ich auf. Meine Freundschaft mit GitHub ist auch nur sehr langsam gewachsen.

Gruß
Wolfram

[Sipple]

Den Sliderknopf im rtrslider kannst Du (bisher) nicht im css verändern. Dazu ist in der slider.js in Zeile 289 der Wert für „handleSize“ zu verändern.

Super, danke. Mit einem Wert von 18 anstatt 25 komme ich da gut hin.

Das dynamische Icon sehe ich mir gerne an. Wie parametrierst Du das bei Dir?

Ich löse das über den Parameter supplements und nehme einfach

[icon.heating('','','Galerie.Raumtemperatur.Ventilposition',0,100, '#F00')]

Also:

{{ mydevice.myrtr('', 'Galerie.Raumtemperatur.Ventilposition', 'Galerie.Raumtemperatur.Ist', 'Galerie.Raumtemperatur.Soll',
'Galerie.Raumtemperatur.Komfortbetrieb', 'Galerie.Raumtemperatur.Nachtbetrieb', 'Galerie.Raumtemperatur.Frostschutz', '', '', '0.2', '', [icon.heating('','','Galerie.Raumtemperatur.Ventilposition',0,100, '#F00')]) }}

dazu mit rein und lasse item_state weg. Macht Sinn, weil ja nicht jeder einen stetigen Regler hat. Den supplements Parameter gibt es aber in dem neuen RTR Slider nicht sehe ich grad.

[wvhn]

Supplements einfügen kannst Du wie folgt probieren:
slider.html Zeile 112 ändern in

{% if item_comfort is not empty or item_night is not empty or item_frost is not empty or item_state is not empty or supplements is not empty %}

Nach Zeile 131 einfügen:

{% for supplement in supplements %}
	{{ supplement|raw }}
{% endfor %}

und natürlich die supplements in die Parameterliste aufnehmen.

Bitte (an alle Anwender) auch um Feedback, ob sonst noch etwas an der Funktionalität des Widgets fehlt - insbesondere im Vergleich zum bisherigen device.rtr.

Gruß
Wolfram

[Sipple]

Guten Morgen Wolfram

Super, das baue ich grad ein.
Dabei ist mir noch was aufgefallen.
In der slider.html beim RTR steht

* @param {value=255} the maximum value if the slider is moved to total right (optional, default: 28)

Der default Wert 28 hat ja prinzipiell hier nichts zu bedeuten, ist also reiner Beschreibungstext.
Aber weiter unten steht

data-scale_min="{{min | default('18')}}" data_scale_max="{{max| default('25')}}" data-step="{{step | default('.1')}}"

Hier ist der eigentliche max Wert auf default 25 gesetzt. Soweit nur Kosmetik. Entweder man passt diesen tatsächlichen Max Wert an die Beschreibung an oder umgekehrt.

Allerdings funktioniert der max Wert nicht. Default ist anscheinend tatsächlich 28, wo auch immer festgelegt. Das Dokubeispiel zeigt jedenfalls immer 28 an, auch wenn ich den Wert im Widgetaufruf mit einem anderen Wert belege. Für min funktioniert es aber.
In der slider.js steht in Zeile 176/177 tatsächlich 18/28 für min/max. Warum und weshalb aber ein Überschreiben des min Werts klappt, der des max aber nicht, kann ich nicht sagen.

Gruß, Martin

P.S.: Ich frage mich grad was mit dem Slider passiert, wenn der set oder act Wert den Wertebereich des Sliders unter-/überschreitet.
Beispiel: Man bewegt sich normalerweise im Bereich von sagen wir 17 - 25 Grad, abhängig von Nacht, Standby, Komfort. Dann schlägt der Frostschutz zu, der set auf z.B. 7 Grad setzt. Oder man verstellt den Regler an der Wand manuell so, dass die Werte den Sliderbereich verlassen. Verschluckt sich dann etwas und führt zu wirren Effekten? Muss ich wohl testen.

[wvhn]

Die 25 im Docstring sind natürlich falsch. Ich dachte, ich hätte das überall richtig gestellt. Wenn man in zwei Versionen gleichzeitig arbeitet, ist es nicht ganz einfach, den Überblick zu behalten. Ich versuche ja, diese Dinge für Euch als Anwender der freigegebenen Version vorzeitig zur Verfügung zu stellen, während ich im develop arbeite und teste.

Umso dankbarer bin ich für jeden, der nochmal ausführlich testet und Rückmeldung gibt.

Um die Verarbeitung des Max-Wertes kümmere ich mich gleich. Als Defaults kann ich gerne andere Werte setzen, die dem realen Berieb näher kommen.

Danke und Gruß
Wolfram

[Sipple]

Hab die supplements jetzt drin. Auch den etwas kleineren handle. Nicht wundern, ich habe auch einige Icons ausgetauscht, die besser zu meinen Regler Displays passen.
Beispiel wie das nun aussieht:

Screenshot 2020-12-29 113155.png

[wvhn]

Beim Max-Wert ist ein Schreibfehler in Zeile 87 in der slider.html. Es muss heißen:

data-scale_max

Also den Ersten Unterstrich durch ein Minus ersetzen (Lösung ist getestet). Ich pushe das später mit anderen Änderungen.

Beim Überschreiten der Grenzen macht der Slider, was er soll: er geht an den jeweiligen Anschlag. Der Istwert wird leider vom Roundslider Plugin begrenzt, während der Sollwert vom SV-Widget geschrieben wird und deshalb stimmt. Hier gibt es also noch Nachbesserungsbedarf.

Gruß
Wolfram

[Bonze]

Ok für den "überlauf" kann man ja per js noch ne kleine abfrage reinbauen