').get(0);
+ $(newEl).append(slider);
+
+ var sh = $('
'+currVal+'
').get(0);
+ $(slider).append(sh);
+ if(elName)
+ $(newEl).append('
');
+
+ var lastX=-1, offX=0, maxX=0, val;
+
+ newEl.activateFn = function() {
+ if(currVal < min || currVal > max)
+ return;
+ maxX = slider.offsetWidth-sh.offsetWidth;
+ offX = (currVal-min)*maxX/(max-min);
+ sh.innerHTML = currVal;
+ sh.setAttribute('style', 'left:'+offX+'px;');
+ if(elName)
+ slider.nextSibling.setAttribute('value', currVal);
+ }
+
+ function
+ touchFn(e, fn)
+ {
+ e.preventDefault(); // Prevents Safari from scrolling!
+ if(e.touches == null || e.touches.length == 0)
+ return;
+ e.clientX = e.touches[0].clientX;
+ fn(e);
+ }
+
+ function
+ mouseDown(e)
+ {
+ var oldFn1 = document.onmousemove, oldFn2 = document.onmouseup,
+ oldFn3 = document.ontouchmove, oldFn4 = document.ontouchend;
+
+ lastX = e.clientX; // Does not work on IE8
+
+ function
+ mouseMove(e)
+ {
+ var diff = e.clientX-lastX; lastX = e.clientX;
+ offX += diff;
+ if(offX < 0) offX = 0;
+ if(offX > maxX) offX = maxX;
+ val = min+(offX/maxX * (max-min));
+ val = (flt ? Math.floor(val/stp)*stp :
+ Math.floor(Math.floor(val/stp)*stp));
+ sh.innerHTML = val;
+ sh.setAttribute('style', 'left:'+offX+'px;');
+ }
+ document.onmousemove = mouseMove;
+ document.ontouchmove = function(e) { touchFn(e, mouseMove); }
+
+ document.onmouseup = document.ontouchend = function(e)
+ {
+ document.onmousemove = oldFn1; document.onmouseup = oldFn2;
+ document.ontouchmove = oldFn3; document.ontouchend = oldFn4;
+ if(cmd)
+ cmd(val);
+ if(elName)
+ slider.nextSibling.setAttribute('value', val);
+ };
+ };
+
+ sh.onselectstart = function() { return false; }
+ sh.onmousedown = mouseDown;
+ sh.ontouchstart = function(e) { touchFn(e, mouseDown); }
+
+ newEl.setValueFn = function(arg) {
+ arg = arg.replace(/[^\d.\-]/g, ""); // remove non numbers
+ currVal = (arg == "" ? min : parseFloat(arg));
+ if(currVal < min || currVal > max)
+ currVal = min;
+ newEl.activateFn();
+ };
+ return newEl;
+}
+
+
+/*************** TIME **************/
+function
+FW_createTime(elName, devName, vArr, currVal, set, params, cmd)
+{
+ if(vArr.length != 1 || vArr[0] != "time" || (params && params.length))
+ return undefined;
+ var open="-", closed="+";
+
+ var newEl = document.createElement('div');
+ $(newEl).append('
');
+ $(newEl).append('
');
+
+ var inp = $(newEl).find("[type=text]");
+ var btn = $(newEl).find("[type=button]");
+ $(inp).val(currVal ? currVal : "12:00");
+ if(elName)
+ $(inp).attr("name", elName);
+
+ var hh, mm; // the slider elements
+ newEl.setValueFn = function(arg) {
+ $(inp).val(arg);
+ var hhmm = arg.split(":");
+ if(hhmm.length == 2 && hh && mm) {
+ hh.setValueFn(hhmm[0]);
+ mm.setValueFn(hhmm[1]);
+ }
+ };
+
+ $(btn).click(function(){ // Open/Close the slider view
+ var v = $(inp).val();
+
+ if($(btn).val() == open) {
+ $(btn).val(closed);
+ $(newEl).find(".timeSlider").remove();
+ hh = mm = undefined;
+ if(cmd)
+ cmd(v);
return;
}
+
+ $(btn).val(open);
+ if(v.indexOf(":") < 0) {
+ v = "12:00";
+ $(inp).val(v);
+ }
+ var hhmm = v.split(":");
+
+ function
+ tSet(idx, arg)
+ {
+ if((""+arg).length < 2)
+ arg = '0'+arg;
+ hhmm[idx] = arg;
+ $(inp).val(hhmm.join(":"));
+ }
+
+ $(newEl).append('
');
+ var ts = $(newEl).find(".timeSlider");
+
+ hh = FW_createSlider(undefined, devName+"HH", ["slider", 0, 1, 12],
+ hhmm[0], undefined, params, function(arg) { tSet(0, arg) });
+ mm = FW_createSlider(undefined, devName+"MM", ["slider", 0, 5, 55],
+ hhmm[1], undefined, params, function(arg) { tSet(1, arg) });
+ $(ts).append("
"); $(ts).append(hh); hh.activateFn();
+ $(ts).append("
"); $(ts).append(mm); mm.activateFn();
+ });
+
+ return newEl;
+}
+
+/*************** MULTIPLE **************/
+function
+FW_createMultiple(elName, devName, vArr, currVal, set, params, cmd)
+{
+ if(vArr.length < 2 || (vArr[0]!="multiple" && vArr[0]!="multiple-strict") ||
+ (params && params.length))
+ return undefined;
+
+ var newEl = $('
').get(0);
+ if(currVal)
+ $(newEl).val(currVal);
+ if(elName)
+ $(newEl).attr("name", elName);
+ newEl.setValueFn = function(arg){ $(newEl).val(arg) };
+
+ for(var i1=1; i1
'+
+ '
'+
+ ' | ';
+ delete(selObj[v]);
+ }
+
+ var selArr=[];
+ for(var i1 in selObj)
+ selArr.push(i1);
+
+ var strict = (vArr[0] == "multiple-strict");
+ $('body').append(
+ ''+
+ '
'+(!strict ? '
' : '')+
+ '
').get(0);
+ $(newEl).click(function(arg) { cmd(params[0]) });
+ return newEl;
+
+ }
+
+ if( mode == "CT" ) {
+ var newEl = FW_createSlider(elName, devName, ["slider",vArr[2],vArr[3],vArr[4]], currVal, set, params, cmd);
+ $(newEl).addClass("colorpicker_ct");
+ return newEl;
+
+ } else if( mode == "HUE" ) {
+ var newEl = FW_createSlider(elName, devName, ["slider",vArr[2],vArr[3],vArr[4]], currVal, set, params, cmd);
+ $(newEl).addClass("colorpicker_hue");
+ return newEl;
+
+ }
+
+ if( currVal )
+ currVal = currVal.toUpperCase();
+
+ var newEl = $("
").get(0);
+ $(newEl).append('
');
+
+ var inp = $(newEl).find("[type=text]");
+
+ var myPicker = new jscolor.color(inp.get(0),
+ {pickerMode:'RGB',pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'red'});
+ inp.get(0).color = myPicker;
+
+ if( currVal ) {
+ if( currVal.length > 6 ) currVal = currVal.slice(0,6);
+ myPicker.fromString(currVal);
+ }
+
+ if( elName )
+ $(inp).attr("name", elName);
+
+ if( cmd )
+ $(newEl).change(function(arg) { cmd( myPicker.toString() ) });
+ else
+ $(newEl).change(function(arg) { $(inp).attr("value", myPicker.toString() ) });
+
+ newEl.setValueFn = function(arg){ if( arg.length > 6 ) arg = arg.slice(0,6);
+ myPicker.fromString(arg); };
+
+ return newEl;
+}
+
+function
+colorpicker_ct2rgb(ct)
+{
+ // calculation from http://www.tannerhelland.com/4435/convert-temperature-rgb-algorithm-code
+
+ if( ct > 1000 ) // kelvin -> mired
+ ct = 1000000/ct;
+
+ // adjusted by 1000K
+ var temp = (1000000/ct)/100 + 10;
+
+ var r = 0;
+ var g = 0;
+ var b = 0;
+
+ r = 255;
+ if( temp > 66 )
+ r = 329.698727446 * Math.pow((temp - 60), -0.1332047592);
+
+ if( r < 0 )
+ r = 0;
+ else if( r > 255 )
+ r = 255;
+
+ if( temp <= 66 )
+ g = 99.4708025861 * Math.log(temp) - 161.1195681661;
+ else
+ g = 288.1221695283 * Math.pow((temp - 60), -0.0755148492);
+
+ if( g < 0 )
+ g = 0;
+ else if( g > 255 )
+ g = 255;
+
+ b = 255;
+ if( temp <= 19 )
+ b = 0;
+ if( temp < 66 )
+ b = 138.5177312231 * Math.log(temp-10) - 305.0447927307;
+
+ r = Math.round( r );
+ g = Math.round( g );
+ b = Math.round( b );
+
+ if( b < 0 )
+ b = 0;
+ else if( b > 255 )
+ b = 255;
+
+ return colorpicker_rgb2hex(r,g,b);
+}
+
+function
+colorpicker_rgb2hex(r,g,b) {
+ if( g !== undefined )
+ return Number(0x1000000 + r*0x10000 + g*0x100 + b).toString(16).substring(1);
+ else
+ return Number(0x1000000 + r[0]*0x10000 + r[1]*0x100 + r[2]).toString(16).substring(1);
+}
diff --git a/fhem/www/pgm2/fhemweb_knob.js b/fhem/www/pgm2/fhemweb_knob.js
new file mode 100644
index 000000000..9ccc90b3f
--- /dev/null
+++ b/fhem/www/pgm2/fhemweb_knob.js
@@ -0,0 +1,38 @@
+// Wrapper for the jquery knob widget.
+FW_widgets['knob'] = { createFn:FW_knobCreate, };
+
+function
+FW_knobCreate(elName, devName, vArr, currVal, set, params, cmd)
+{
+ if(!vArr.length || vArr[0] != "knob" || (params && params.length))
+ return undefined;
+
+ var conf = {};
+ for(var i1=0; i1
").get(0);
+ $(newEl).append('');
+ var inp = $(newEl).find("input");
+ if(elName)
+ $(inp).attr("name", elName);
+ for(c in conf)
+ $(inp).attr("data-"+c, conf[c]);
+
+ loadScript("pgm2/jquery.knob.min.js",
+ function() {
+ inp.knob({ 'release' : function(v){ if(cmd) cmd(v) } });
+ newEl.setValueFn = function(arg){ inp.val(arg);
+ inp.trigger('change'); };
+ newEl.setValueFn(currVal);
+ });
+
+ return newEl;
+}
diff --git a/fhem/www/pgm2/fhemweb_multiple.js b/fhem/www/pgm2/fhemweb_multiple.js
deleted file mode 100644
index f6797f46f..000000000
--- a/fhem/www/pgm2/fhemweb_multiple.js
+++ /dev/null
@@ -1,90 +0,0 @@
-function
-FW_multipleSelChange(name, devName, vArr)
-{
- if(vArr.length < 2 || (vArr[0] != "multiple" && vArr[0] != "multiple-strict"))
- return undefined;
-
- var o = new Object();
- o.newEl = document.createElement('input');
- o.newEl.type='text';
- o.newEl.size=30;
- o.qFn = 'FW_multipleSetSelected(qArg, "%")';
- o.qArg = o.newEl;
-
- o.newEl.setAttribute('onFocus', vArr[0] == "multiple-strict" ?
- 'FW_multipleSelect(this, true)' : 'FW_multipleSelect(this, false)');
-
- o.newEl.setAttribute('allVals', vArr);
- o.newEl.setAttribute('readonly', 'readonly');
- return o;
-}
-
-function
-FW_multipleSelect(el, strict)
-{
- loadLink("pgm2/jquery-ui.min.css");
- loadScript("pgm2/jquery.min.js", function(){
- loadScript("pgm2/jquery-ui.min.js", function() {
-
- var sel = $(el).val().split(","), selObj={};
- for(var i1=0; i1'+
- '
'+
- ' | ';
- delete(selObj[v]);
- }
-
- var selArr=[];
- for(var i1 in selObj)
- selArr.push(i1);
-
- $('body').append(
- ''+
- '
'+(!strict ? '
' : '')+
- '