mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-03-03 16:56:54 +00:00
colorpicker: added HSV mode
git-svn-id: https://svn.fhem.de/fhem/trunk@11740 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
justme-1968
parent
29a3c3af96
commit
49738d6e81
@ -25,6 +25,117 @@ FW_colorpickerCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
if( vArr.length >= 1 )
|
if( vArr.length >= 1 )
|
||||||
mode = vArr[1]
|
mode = vArr[1]
|
||||||
|
|
||||||
|
if( mode == "HSV" ) {
|
||||||
|
for( var i = 2; i <= 4; ++i ) {
|
||||||
|
var d = parseInt(vArr[i]);
|
||||||
|
|
||||||
|
if( !isNaN(d) )
|
||||||
|
vArr[i] = d;
|
||||||
|
else if( !vArr[i] )
|
||||||
|
vArr[i] = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
var hsv = [];
|
||||||
|
function change(index, arg) {
|
||||||
|
hsv[index] = arg;
|
||||||
|
|
||||||
|
if( typeof vArr[2+index] === 'number' )
|
||||||
|
hsv[index] = vArr[2+index]/100;
|
||||||
|
|
||||||
|
var rgb = colorpicker_hsv2rgb(hsv[0],hsv[1],hsv[2]);
|
||||||
|
if( hidden )
|
||||||
|
hidden.attr("value", rgb);
|
||||||
|
cmd( rgb );
|
||||||
|
}
|
||||||
|
|
||||||
|
if( currVal )
|
||||||
|
hsv = colorpicker_rgb2hsv(currVal);
|
||||||
|
else
|
||||||
|
hsv = [0,1,1];
|
||||||
|
var hue = FW_createSlider(undefined, devName, ["slider",0,1,359],
|
||||||
|
""+parseInt(hsv[0]*359), undefined, params, function(arg) { change(0, arg/359) });
|
||||||
|
$(hue).addClass("colorpicker_hue");
|
||||||
|
|
||||||
|
var sat = FW_createSlider(undefined, devName, ["slider",0,1,100],
|
||||||
|
""+parseInt(hsv[1]*100), undefined, params, function(arg) { change(1, arg/100) });
|
||||||
|
$(sat).addClass("colorpicker_sat");
|
||||||
|
|
||||||
|
var bri = FW_createSlider(undefined, devName, ["slider",0,1,100],
|
||||||
|
""+parseInt(hsv[2]*100), undefined, params, function(arg) { change(2, arg/100) });
|
||||||
|
$(bri).addClass("colorpicker_bri");
|
||||||
|
|
||||||
|
|
||||||
|
var newEl = $('<div class="colorpicker">').get(0);
|
||||||
|
var hidden;
|
||||||
|
if(elName)
|
||||||
|
hidden = $('<input type="hidden" name="'+elName+'" value="'+currVal+'">');
|
||||||
|
$(newEl).append(hidden);
|
||||||
|
|
||||||
|
var first = true;
|
||||||
|
if(vArr[2] === undefined) {
|
||||||
|
$(newEl).append(hue);
|
||||||
|
first = false;
|
||||||
|
} else {
|
||||||
|
hue.style.display='none';
|
||||||
|
}
|
||||||
|
|
||||||
|
if(vArr[3] === undefined) {
|
||||||
|
if( !first ) $(newEl).append("<br>");
|
||||||
|
$(newEl).append(sat);
|
||||||
|
first = false;
|
||||||
|
} else {
|
||||||
|
sat.style.display='none';
|
||||||
|
}
|
||||||
|
|
||||||
|
if(vArr[4] === undefined) {
|
||||||
|
if( !first ) $(newEl).append("<br>");
|
||||||
|
$(newEl).append(bri);
|
||||||
|
first = false;
|
||||||
|
} else {
|
||||||
|
bri.style.display='none';
|
||||||
|
}
|
||||||
|
|
||||||
|
newEl.setValueFn = function(arg){
|
||||||
|
if( hidden )
|
||||||
|
hidden.attr("value", arg);
|
||||||
|
|
||||||
|
hsv = colorpicker_rgb2hsv(arg);
|
||||||
|
for( var i = 0; i < 3; ++i ) {
|
||||||
|
if( typeof vArr[2+i] === 'number' )
|
||||||
|
hsv[i] = vArr[2+i]/100;
|
||||||
|
}
|
||||||
|
hue.setValueFn(""+parseInt(hsv[0]*359));
|
||||||
|
sat.setValueFn(""+parseInt(hsv[1]*100));
|
||||||
|
bri.setValueFn(""+parseInt(hsv[2]*100));
|
||||||
|
|
||||||
|
var grad = 'background-image: -webkit-linear-gradient(left, #c1#, #c2# );'
|
||||||
|
+ 'background-image: -moz-linear-gradient(left, #c1#, #c2# );'
|
||||||
|
+ 'background-image: -ms-linear-gradient(left, #c1#, #c2# );'
|
||||||
|
+ 'background-image: -o-linear-gradient(left, #c1#, #c2# );'
|
||||||
|
+ 'background-image: linear-gradient(left, #c1#, #c2# );';
|
||||||
|
function hsv2hsl(a,b,c){return[a,b*c/((a=(2-b)*c)<1?a:2-a),a/2]}
|
||||||
|
|
||||||
|
var s = grad.replace(/#c1#/g, 'hsla(' + hsv[0]*359 + ', 100%, 100%, 1)')
|
||||||
|
.replace(/#c2#/g, 'hsla(' + hsv[0]*359 + ', 100%, 50%, 1)')
|
||||||
|
|
||||||
|
var v = grad.replace(/#c1#/g, 'rgb( 0, 0 ,0)')
|
||||||
|
.replace(/#c2#/g, 'rgb(255,255,255)')
|
||||||
|
|
||||||
|
var slider = $(sat).find('.slider').get(0);
|
||||||
|
slider.setAttribute('style', s );
|
||||||
|
|
||||||
|
slider = $(bri).find('.slider').get(0);
|
||||||
|
slider.setAttribute('style', v );
|
||||||
|
}
|
||||||
|
|
||||||
|
if( currVal ) {
|
||||||
|
newEl.setValueFn(currVal);
|
||||||
|
$(document).ready(function(arg) { newEl.setValueFn(currVal) });
|
||||||
|
}
|
||||||
|
|
||||||
|
return newEl;
|
||||||
|
}
|
||||||
|
|
||||||
//console.log( "mode: "+mode );
|
//console.log( "mode: "+mode );
|
||||||
|
|
||||||
//preset ?
|
//preset ?
|
||||||
@ -47,7 +158,7 @@ FW_colorpickerCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
|| +currVal > +vArr[4] )
|
|| +currVal > +vArr[4] )
|
||||||
currVal = Math.round(1000000/currVal).toString();
|
currVal = Math.round(1000000/currVal).toString();
|
||||||
|
|
||||||
var newEl = FW_createSlider(elName, devName, ["slider",vArr[2],vArr[3],vArr[4]], currVal, set, params, cmd);
|
var newEl = FW_createSlider(elName, devName, ["slider",vArr[2],vArr[3],vArr[4]], currVal, undefined, params, cmd);
|
||||||
|
|
||||||
old_set_fn = newEl.setValueFn;
|
old_set_fn = newEl.setValueFn;
|
||||||
newEl.setValueFn = function(arg) {
|
newEl.setValueFn = function(arg) {
|
||||||
@ -65,7 +176,7 @@ FW_colorpickerCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
return newEl;
|
return newEl;
|
||||||
|
|
||||||
} else if( mode == "HUE" ) {
|
} else if( mode == "HUE" ) {
|
||||||
var newEl = FW_createSlider(elName, devName, ["slider",vArr[2],vArr[3],vArr[4]], currVal, set, params, cmd);
|
var newEl = FW_createSlider(elName, devName, ["slider",vArr[2],vArr[3],vArr[4]], currVal, undefined, params, cmd);
|
||||||
$(newEl).addClass("colorpicker_hue");
|
$(newEl).addClass("colorpicker_hue");
|
||||||
return newEl;
|
return newEl;
|
||||||
|
|
||||||
@ -164,3 +275,93 @@ colorpicker_rgb2hex(r,g,b) {
|
|||||||
else
|
else
|
||||||
return Number(0x1000000 + r[0]*0x10000 + r[1]*0x100 + r[2]).toString(16).substring(1);
|
return Number(0x1000000 + r[0]*0x10000 + r[1]*0x100 + r[2]).toString(16).substring(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function
|
||||||
|
colorpicker_rgb2hsv(r,g,b) {
|
||||||
|
if( r === undefined )
|
||||||
|
return;
|
||||||
|
|
||||||
|
if( g === undefined ) {
|
||||||
|
var str = r;
|
||||||
|
r = parseInt( str.substr(0,2), 16 );
|
||||||
|
g = parseInt( str.substr(2,2), 16 );
|
||||||
|
b = parseInt( str.substr(4,2), 16 );
|
||||||
|
|
||||||
|
r /= 255;
|
||||||
|
g /= 255;
|
||||||
|
b /= 255;
|
||||||
|
}
|
||||||
|
|
||||||
|
var M = Math.max( r, g, b );
|
||||||
|
var m = Math.min( r, g, b );
|
||||||
|
var c = M - m;
|
||||||
|
|
||||||
|
var h, s, v;
|
||||||
|
if( c == 0 ) {
|
||||||
|
h = 0;
|
||||||
|
} else if( M == r ) {
|
||||||
|
h = ( ( 360 + 60 * ( ( g - b ) / c ) ) % 360 ) / 360;
|
||||||
|
} else if( M == g ) {
|
||||||
|
h = ( 60 * ( ( b - r ) / c ) + 120 ) / 360;
|
||||||
|
} else if( M == b ) {
|
||||||
|
h = ( 60 * ( ( r - g ) / c ) + 240 ) / 360;
|
||||||
|
}
|
||||||
|
|
||||||
|
if( M == 0 ) {
|
||||||
|
s = 0;
|
||||||
|
} else {
|
||||||
|
s = c / M;
|
||||||
|
}
|
||||||
|
|
||||||
|
v = M;
|
||||||
|
|
||||||
|
return [h,s,v];
|
||||||
|
}
|
||||||
|
function
|
||||||
|
colorpicker_hsv2rgb(h,s,v) {
|
||||||
|
var r = 0.0;
|
||||||
|
var g = 0.0;
|
||||||
|
var b = 0.0;
|
||||||
|
|
||||||
|
if( s == 0 ) {
|
||||||
|
r = v;
|
||||||
|
g = v;
|
||||||
|
b = v;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
var i = Math.floor( h * 6.0 );
|
||||||
|
var f = ( h * 6.0 ) - i;
|
||||||
|
var p = v * ( 1.0 - s );
|
||||||
|
var q = v * ( 1.0 - s * f );
|
||||||
|
var t = v * ( 1.0 - s * ( 1.0 - f ) );
|
||||||
|
i = i % 6;
|
||||||
|
|
||||||
|
if( i == 0 ) {
|
||||||
|
r = v;
|
||||||
|
g = t;
|
||||||
|
b = p;
|
||||||
|
} else if( i == 1 ) {
|
||||||
|
r = q;
|
||||||
|
g = v;
|
||||||
|
b = p;
|
||||||
|
} else if( i == 2 ) {
|
||||||
|
r = p;
|
||||||
|
g = v;
|
||||||
|
b = t;
|
||||||
|
} else if( i == 3 ) {
|
||||||
|
r = p;
|
||||||
|
g = q;
|
||||||
|
b = v;
|
||||||
|
} else if( i == 4 ) {
|
||||||
|
r = t;
|
||||||
|
g = p;
|
||||||
|
b = v;
|
||||||
|
} else if( i == 5 ) {
|
||||||
|
r = v;
|
||||||
|
g = p;
|
||||||
|
b = q;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return colorpicker_rgb2hex( Math.round(r*255),Math.round(g*255),Math.round(b*255) );
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user