Java umbasteln

Hallo Liebes Forum
Ich brauche mal bei einem Projekt eure hilfe.
Ich möchte über eine HTML seite „nicht Wips“ einen Lichtfarbe fürs DMX anwählen können ich habe auch schon was passendes gefunden .http://www.colorjack.com/sphere/
Dort gibt es unter Jafascript http://www.nofunc.com/ 3 scripte mit denen man schon Farben einstellen kann diese geben auch schon die RGB werte aus .nur habe ich leider nicht den geringsten Schimmer wie ich die werte von Java ins php bekomme.

Ich hoffe ihr könnt mit helfen.
MFG Ken und genießt die Sonne :slight_smile:

Javascript ist nicht Java. Javascript läuft auf dem PC-Browser. Es besteht also kein Grund, irgendwas umzubauen. Einfach das Javascript in eine statische HTML-Seite einbauen und den return wert über ein HTML-Formular wieder zurück an den Server schicken.
Am einfachsten wird es wohl sein, den Quelltext der angebenen Demo-Seite auszuschlachten (Copyrights nicht vergessen).

Tommi

danke Tommi mein prob was nur das ich nichts über Js weiß also auch das ausschlachen nicht so einfach ist .

Ausschlachten heisst eigentlich: Im Browser den Quelltext ansehen, die dort erwähnten .js Dateien auf den eigenen PC ziehen, sich weiterhin ansehen, wie die Funktionen benutzt werden und dann in die eigene Seite übernehmen.
Die Theorie zu JavaScript können wir Dir da nicht abnehmen. Da gibt es unzählige Seiten.

<div id="curr" onmousedown="coreXY('currMe',event,[W,W,0,0,-4,-4],0,Scheme);" style="z-index: 26;">

z.B. onmousedown ist ein Event, wenn man in dem Bereich eine Maustaste drückt. Diesem Event kann man eine Funktion hinterlegen(im Beispiel ist es CoreXY). Das kann man unendlich verketten, bis aus dem Mausklick der Farbwert wird.
Ich muss aber schon zugeben, das diese Seite nicht gerade trivial ist, insbesondere die Umrechnung der Farben und Ebenen auf Koordinaten, und das alles dynamisch berechnet.
Man(n) kann sich es aber auch einfacher machen, in dem man eine normale Grafik mit den Farben anlegt (wie im Malkasten), darüber eine ImageMap legt, welche beim Klick eine speziell preparierte URL mit dem (in der Map fest verdrahtetem) Farbcode erzeugt.

Tommi

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

Habs getestet klapt gut
hir noch eine kleine umrechnung um dmx anzusprechen

<?
$color = GetValueString('DMX_Color');
$r = hexdec(substr($color, 0, 2));
$g = hexdec(substr($color, 2, 2));
$b = hexdec(substr($color, 4, 2));
SetValueInteger("DMX_R",$r);
SetValueInteger("DMX_G",$g);
SetValueInteger("DMX_B",$b);
?>

danke erstmal dafür wir sind auf den besten weg :smiley: