Slider für Color Temperature

[ReviloEgros]

Hallo,

ich habe einige Smarte Glühbirnen bei mir verbaut, bei denen sich nur die Farbtemperatur ändern lässt. Nun würde ich diese gerne mit einem Slider ändern können, ähnlich wie die Slider aus dem Widget basic.color, nur leider bekomme ich es nicht hin das Aussehen eines Sliders zu ändern. Für einen Tipp wäre ich sehr dankbar! Ich hätte gerne soetwas wie style="background-image: linear-gradient(90deg, rgb(229, 234, 255), rgb(255, 177, 111));", aber egal wo und wie ich es versuche einzufügen, tut sich nichts, und das normale Aussehen bleibt bestehen. Also das der prozentuale Anteil mit Farbe hinterlegt ist. So wie auf dem Screenshot hätte ich es gerne.

slider.jpg

[wvhn]

Ich konnte das mit einem basic.slider auf die Schnelle weder mit einer Anweisung in der visu.css lösen, noch mit einem eingebetteten javascript-Code, der den Slider Track verändert.

Vorschlag wäre, das Widget basic.color nach mywidget.color zu kopieren und so abzuändern, dass nur der mittlere Slider für die saturation angezeigt wird.

Mittelfristig könnte man das Widget basic.color so erweitern, dass es einen Modus "colortemp" hat und dann nur einen Slider anzeigt.

Gruß
Wolfram

[Bonze]

Btw es muss heissen

style="background: linear-gradient(90deg, rgb(229, 234, 255), rgb(255, 177, 111));"

[ReviloEgros]

Mittelfristig könnte man das Widget basic.color so erweitern, dass es einen Modus "colortemp" hat und dann nur einen Slider anzeigt.

Das wäre wirklich super! Ich denke davon würden einige profitieren.

Btw es muss heissen

style="background: linear-gradient(90deg, rgb(229, 234, 255), rgb(255, 177, 111));"

Keine Ahnung. Habe es so von dem RGB Slider in Firefox über den Inspektor ausgelesen.

[Bonze]

ne 100%
grad getestet Screenshot_2021-02-02 Documentation [smartVISU].png

background: linear-gradient(90deg, rgb(229, 234, 255), rgb(255, 177, 111));

ist halt nur die frage wie man das sinnvoll ins widget einbauen möchte/kann

[Bonze]

soo , hab mal etwas gebastelt..
Screenshot_2021-02-07.png
bzw image_108724.png
rufe den slider nun so auf

 {{ basic.slider('id1', 'test.value1.ist',0, 255, 5, '', 'none', '', '', 'linear-gradient(90deg, rgb(229, 234, 255), rgb(255, 177, 111))') }}

in der basic.html muss der slider-control block durch folgendes geändert werden

/**
* Displays a slider-control
*
* @param {id=} unique id for this widget (optional)
* @param {item} an item
* @param {value=0} the minimum value if the slider is moved to total left (optional, default 0)
* @param {value=255} the maximum value if the slider is moved to total right (optional, default 255)
* @param {value=5} step between two values (optional, default 5)
* @param {text(horizontal,vertical,bottomup,semicircle)=hor izontal} possible options: 'horizontal', 'vertical', 'bottomup', 'semicircle' (optional, default 'horizontal')
* @param {text(input,handle,both,none)=input} how should the value be shown; possible options: 'input', 'handle', 'both', 'none' (optional, default 'input')
* @param {value=} the minimum value to display if the slider is moved to total left if this should differ from sent/received value (optional, default like min)
* @param {value=} the maximum value to display to total right if this should differ from sent/received value (optional, default like max)
* @param {value=} con set a colour for the slider track like: linear-gradient(90deg, rgb(229, 234, 255), rgb(255, 177, 111)) (optional)
*/
{% macro slider(id, item, min, max, step, orientation, value_display, min_display, max_display, style) %}

<input{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} data-widget="basic.slider" data-item="{{ item }}"
type="range" value="0" min="{{ min_display|default(min)|default(0) }}" max="{{ max_display|default(max)|default(255) }}" step="{{ step|default(5) }}" data-min-send="{{ min|default(0) }}" data-max-send="{{ max|default(255) }}" data-style="{{ style|default('') }}"
orientation="{{ orientation }}" handleinfo="{{ value_display == 'handle' or value_display == 'both' }}" data-highlight="true" class="{{ value_display|default('input') == 'input' or value_display == 'both' ? '' : 'ui-slider-no-input' }}" />

{% endmacro %}

in der basic.js muss der slider-control block durch folgendes geändert werden

// ----- basic.slider ---------------------------------------------------------
// The slider had to be handled in a more complex manner. A 'lock' is used
// to stop the change after a refresh. And a timer is used to fire the trigger
// only every 400ms if it was been moved. There should be no trigger on init.
$.widget("sv.basic_slider", $.sv.widget, {

initSelector: 'input[data-widget="basic.slider"]',

options: {
min: 0,
max: 255,
'min-send': 0,
'max-send': 255,
style: ''

},

_mem: null,
_timer: false,
_lock: false,
_sliding: false,

_update: function(response) {
var val = response[0];
var max = this.element.attr('max') * 1;
var min = this.element.attr('min') * 1;
var maxSend = this.options['max-send'];
var minSend = this.options['min-send'];
if(min != minSend || max != maxSend)
val = (val - minSend) / (maxSend - minSend) * (max - min) + min;
if(!this._sliding) {
this._lock = true;
this.element.val(val).slider('refresh');
this._mem = this.element.val();
this._lock = false;
}
else {
this._mem = val;
}

console.log(this.element.attr('data-style'));
if (this.element.attr('data-style') != ''){
//add for colouring the slider track
var id = this.element.attr('id');
$('#'+id).next(".ui-slider-track").css("background-image", this.element.attr('data-style'));
$('#'+id).next(".ui-slider-track").children(".ui-slider-bg").css("background-image", "none");
$('#'+id).next(".ui-slider-track").children(".ui-slider-bg").css("background-color", "transparent");
};
},

_events: {
'slidestart': function (event) {
this._sliding = true;
},

'slidestop': function (event) {
this._timer = false;
this._sliding = false;
this._send();
},

'change': function (event) {
this._send();
},
},

_send: function() {
var val = this.element.val();
if (!this._lock && !this._timer && val != this._mem) {
this._timer = true;
this._mem = val;
var max = this.element.attr('max') * 1;
var min = this.element.attr('min') * 1;
var maxSend = this.options['max-send'];
var minSend = this.options['min-send'];
if(min != minSend || max != maxSend)
val = (val - min) / (max - min) * (maxSend - minSend) + minSend;
this._write(val);
this._delay(function() { if(this._timer) { this._timer = false; this._send(); } }, 400);
}
}

});

[ReviloEgros]

Cool, DANKE!

[wvhn]

Bonze hat den Teil der basic-Widgets auf smartvisu-newstuff zur Verfügung gestellt. Vielen Dank!
Der Code ist so gemacht, dass in den originalen Widget-Dateien basic.html und basic.js der jeweilige Code auszutauschen ist. Wer das nicht möchte, muss die Dateien umbenennen, z.B. in mybasic.* und diese noch leicht modifizieren:
mybasic.html Zeile 18:

... data-widget="mybasic.slider" ...

mybasic.js Zeilen 6-8:

$.widget("sv.mybasic_slider", $.sv.widget, {

     initSelector: 'input[data-widget="mybasic.slider"]',

Die so umbenannten Dateien kann man dann in ./dropins/widgets oder in ./pages/<DeineSeiten>/widgets ablegen. Sie werden dort als "mybasic.slider" automatisch importiert.

Gruß
Wolfram