Ankündigung

Einklappen
Keine Ankündigung bisher.

Slider für Color Temperature

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Slider für Color Temperature

    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
    Zuletzt geändert von wvhn; 08.02.2021, 00:18. Grund: als gelöst markiert

    #2
    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

    Kommentar


      #3
      Btw es muss heissen

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

      Kommentar


        #4
        Zitat von wvhn Beitrag anzeigen
        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.

        Zitat von Bonze Beitrag anzeigen
        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.

        Kommentar


          #5
          ne 100%
          grad getestet Screenshot_2021-02-02 Documentation [smartVISU].png
          Code:
          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
          Angehängte Dateien

          Kommentar


            #6
            soo , hab mal etwas gebastelt..
            Screenshot_2021-02-07.png
            bzw image_108724.png
            rufe den slider nun so auf
            Code:
             {{ 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
            Code:
            /**
            * 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
            Code:
            // ----- 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);
            }
            }
            
            });
            Zuletzt geändert von Bonze; 07.02.2021, 14:43.

            Kommentar


              #7
              Cool, DANKE!

              Kommentar


                #8
                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:
                Code:
                ... data-widget="mybasic.slider" ...
                mybasic.js Zeilen 6-8:
                Code:
                $.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

                Kommentar

                Lädt...
                X