Hallo,
ich habe mal den Color-Picker „Color Sphere“ mit meinem Webdesigner-Framework verheiratet.
Installiere das Framework wie im Thread beschrieben, dann spiele den Color-Picker in ein Unterverzeichnis des Frameworks und ersetze die index.html mit dieser HTML-Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML Color Picker mit Verbindung zu IP Symcon</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./plugin.css" rel="stylesheet" type="text/css" />
<!-- Include the required client-side scripts -->
<script src="../js/mootools-release-1.11.js" type="text/javascript"></script>
<script src="../js/ipsymcon_json.js" type="text/javascript"></script>
<script>
// Instantiate Ipsymcon_JSON_Handler
// ips_json.php is in the directory "..",
// polling interval is 1 second
var Ipsymcon = new Ipsymcon_JSON_Handler("..", 1);
</script>
</head>
<body>
<div id="everything">
<div style="FONT-FAMILY: Garamond, Times, Serif; TEXT-ALIGN: center; PADDING-TOP: 20px;">
<fieldset id="colorspy"><legend>DHTML Color Picker mit Verbindung zu IP Symcon</legend>
<div id="mini" onmousedown="Picker.core('mini',event)">
<div class="north"><span id="mHEX">FFFFFF</span><div onmousedown="\$S('mini').display='none';">X</div></div>
<div class="south" id="mSpec" style="HEIGHT: 128px; WIDTH: 128px;" onmousedown="Picker.core('mCur',event)">
<div id="mCur" style="TOP: 86px; LEFT: 68px;"></div>
<img src="./media/circle.png" onmousedown="return false;" ondrag="return false;" onselectstart="return false;">
<img src="./media/resize.gif" id="mSize" onmousedown="Picker.core('mSize',event); return false;" ondrag="return false;" onselectstart="return false;">
</div>
</div>
<div id="plugID" style="HEIGHT: 104px; WIDTH: 550px; MARGIN: 12px 0 0 170px; PADDING-TOP: 60px; COLOR: #000; BORDER: 1px solid #333; TEXT-ALIGN: center; FONT-SiZE: 25px; BACKGROUND: #333;">Diese Farbe wird der DMX-Steuerung übergeben</div>
</fieldset>
</div>
</div>
<script type="text/javascript">
/* DHTML Color Sphere : v1.0.2 : 2008/04/17 */
/* http://www.colorjack.com/software/dhtml+color+sphere.html */
function $S(o) { o=$(o); if(o) return(o.style); }
function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function isset(v) { return((typeof(v)=='undefined' || v.length==0)?false:true); }
function toggle(i,t,xy) { var v=$S(i); v.display=t?t:(v.display=='none'?'block':'none'); if(xy) { v.left=xy[0]; v.top=xy[1]; } }
function XY(e,v) { var o=agent('msie')?{'X':e.clientX+document.body.scrollLeft,'Y':e.clientY+document.body.scrollTop}:{'X':e.pageX,'Y':e.pageY}; return(v?o[v]:o); }
function zero(n) { return(!isNaN(n=parseFloat(n))?n:0); }
function zindex(d) { d.style.zIndex=zINDEX++; }
/* COLOR PICKER */
Picker={};
Picker.stop=1;
Picker.core=function(o,e,xy,z,fu) {
function point(a,b,e) { eZ=XY(e); commit([eZ.X+a,eZ.Y+b]); }
function M(v,a,z) { return(Math.max(!isNaN(z)?z:0,!isNaN(a)?Math.min(a,v):v)); }
function commit(v) { if(fu) fu(v);
if(o=='mCur') { var W=parseInt($S('mSpec').width), W2=W/2, W3=W2/2;
var x=v[0]-W2-3, y=W-v[1]-W2+21, SV=Math.sqrt(Math.pow(x,2)+Math.pow(y,2)), hue=Math.atan2(x,y)/(Math.PI*2);
hsv={'H':hue>0?(hue*360):((hue*360)+360), 'S':SV<W3?(SV/W3)*100:100, 'V':SV>=W3?Math.max(0,1-((SV-W3)/(W2-W3)))*100:100};
$('mHEX').innerHTML=color.HSV_HEX(hsv); $S('plugID').background='#'+$('mHEX').innerHTML; color.cords(W);
// set IP Symcon variable
Ipsymcon.Variables.DMX_Color.SetValue(color.HSV_HEX(hsv));
}
else if(o=='mSize') { var b=Math.max(Math.max(v[0],v[1])+oH,75); color.cords(b);
$S('mini').height=(b+28)+'px'; $S('mini').width=(b+20)+'px';
$S('mSpec').height=b+'px'; $S('mSpec').width=b+'px';
}
else {
if(xy) v=[M(v[0],xy[0],xy[2]), M(v[1],xy[1],xy[3])]; // XY LIMIT
if(!xy || xy[0]) d.left=v[0]+'px'; if(!xy || xy[1]) d.top=v[1]+'px';
}
};
if(Picker.stop) { Picker.stop=''; var d=$S(o), eZ=XY(e); if(!z) zindex($(o));
if(o=='mCur') { var ab=abPos($(o).parentNode); point(-(ab.X-5),-(ab.Y-28),e); }
if(o=='mSize') { var oH=parseInt($S('mSpec').height), oX=-XY(e).X, oY=-XY(e).Y; }
else { var oX=zero(d.left)-eZ.X, oY=zero(d.top)-eZ.Y; }
document.onmousemove=function(e){ if(!Picker.stop) point(oX,oY,e); };
document.onmouseup=function(){ Picker.stop=1; document.onmousemove=''; document.onmouseup=''; };
}
};
Picker.hsv={H:0, S:0, V:100};
zINDEX=2;
/* COLOR LIBRARY */
color={};
color.cords=function(W) {
var W2=W/2, rad=(hsv.H/360)*(Math.PI*2), hyp=(hsv.S+(100-hsv.V))/100*(W2/2);
$S('mCur').left=Math.round(Math.abs(Math.round(Math.sin(rad)*hyp)+W2+3))+'px';
$S('mCur').top=Math.round(Math.abs(Math.round(Math.cos(rad)*hyp)-W2-21))+'px';
};
color.HEX=function(o) { o=Math.round(Math.min(Math.max(0,o),255));
return("0123456789ABCDEF".charAt((o-o%16)/16)+"0123456789ABCDEF".charAt(o%16));
};
color.RGB_HEX=function(o) { var fu=color.HEX; return(fu(o.R)+fu(o.G)+fu(o.B)); };
color.HSV_RGB=function(o) {
var R, G, A, B, C, S=o.S/100, V=o.V/100, H=o.H/360;
if(S>0) { if(H>=1) H=0;
H=6*H; F=H-Math.floor(H);
A=Math.round(255*V*(1-S));
B=Math.round(255*V*(1-(S*F)));
C=Math.round(255*V*(1-(S*(1-F))));
V=Math.round(255*V);
switch(Math.floor(H)) {
case 0: R=V; G=C; B=A; break;
case 1: R=B; G=V; B=A; break;
case 2: R=A; G=V; B=C; break;
case 3: R=A; G=B; B=V; break;
case 4: R=C; G=A; B=V; break;
case 5: R=V; G=A; B=B; break;
}
return({'R':R?R:0, 'G':G?G:0, 'B':B?B:0, 'A':1});
}
else return({'R':(V=Math.round(V*255)), 'G':V, 'B':V, 'A':1});
};
color.HSV_HEX=function(o) { return(color.RGB_HEX(color.HSV_RGB(o))); };
/* LOAD */
$S('mini').left=($('colorspy').offsetLeft+35)+'px';
$S('mini').top=($('colorspy').offsetTop+36)+'px';
// connect to server-component
Ipsymcon.Connect();
</script>
</body>
</html>
In Zeile 78 wird der Wert des Pickers in HTML-Color-Notation (RGB in Hex) in die IP Symcon Variable DMX_Color vom Type String übergeben. Hier kann auch der Variablenname geändert werden. Achtung, Keine Bindestriche im Variablennamen!
Ciao,
Andreas