Javascript, van # naar RGB

Status
Niet open voor verdere reacties.

PC-user

Gebruiker
Lid geworden
19 mrt 2003
Berichten
363
Kan iemand me helpen met het volgende:

Als je dit script uitvoert krijg je een #-kleurencode uit een X-Y framesetje.
Ik wil graag ipv de HEX code die eruit komt een RGB waarde (schaal 0-255) opgedeeld in drie textvakken (eentje voor Rood, eentje voor Groen, eentje voor Blauw). Wie kan me zeggen wat ik moet versleutelen aan deze code om dat voor elkaar te krijgen?

Code:
<html>
<head>
<title>Color Picker</title>
<script langauge="javascript">

addary=new Array(255,1,1);
clrary=new Array(360);
for(i=0;i<6;i++)
 for(j=0;j<60;j++)
  { clrary[60*i+j]=new Array(3);
    for(k=0;k<3;k++)
     { clrary[60*i+j][k]=addary[k];
       addary[k]+=((Math.floor(65049010/Math.pow(3,i*3+k))%3)-1)*4; }; };

function capture()
 { if(document.layers)
    { with(document.layers['imgdiv'])
       { document.captureEvents(Event.MOUSEMOVE);
         document.onmousemove=moved; }; }
   else { document.all.imgdiv.onmousemove=moved; };
 };

function moved(e)
 { sx=((document.layers)?e.layerY:event.offsetY)-256;
   sy=((document.layers)?e.layerX:event.offsetX)-256;
   quad=new Array(-180,360,180,0);
   xa=Math.abs(sx); ya=Math.abs(sy);
   d=ya*45/xa;
   if(ya>xa) d=90-(xa*45/ya);
   deg=Math.floor(Math.abs(quad[2*((sy<0)?0:1)+((sx<0)?0:1)]-d));
   n=0; c="000000";
   r=Math.sqrt((xa*xa)+(ya*ya));
   if(sx!=0 || sy!=0)
    { for(i=0;i<3;i++)
       { r2=clrary[deg][i]*r/128;
         if(r>128) r2+=Math.floor(r-128)*2;
         if(r2>255) r2=255;
         n=256*n+Math.floor(r2); };
      c=(n.toString(16)).toUpperCase();
      while(c.length<6) c="0"+c; };
   if(document.layers)
    { document.layers['clrdiv'].bgColor="#"+c; }
   else
    { document.all["clrdiv"].style.backgroundColor="#"+c; };
   document.frm.txt.value="#"+c;
   document.frm.hid.value="#"+c;
   return false; };
function setcolor()
 { document.frm.sel.value=document.frm.hid.value; };
</script>
<style type="text/css">
#imgdiv { position:relative; }
#clrdiv { position:relative; background-color:white; }
</style>
</head>

<body onload="capture();" bgcolor="#ffffff" topmargin=0>
<table border=1 cellpadding=0 cellspacing=0>
 <tr><td></td></tr>
 <tr><td align="center" height=50><font size=+3> <div id=clrdiv><strong><font color=blue>Blue <font color=red> 
        Red <font color=black>Black <font color=yellow>Yellow <font color=green>Green <font color="gray"> 
        Gray<br><font color="purple">
        Purple <font color=white>White <font color=orange>Orange <font color=magenta>Magenta 
        <font color=cyan>Cyan</font></strong></div></td></tr>
 <tr><form name="frm"><td align="center"><input type="text" name="txt" size=12>
  <input type="text" name="sel" size=12>
  <input type="hidden" name="hid"></td></form></tr>
</table>
<div id=imgdiv><a href="javascript:void(0);" onclick="setcolor(); return false;"> 
  <img src="images/colorwheel.jpg" width=512 height=500 border=0></a></div>
</body>

</html>
 
de hex code is in principe de RGB code bv.

FF FF FF = 255 255 255

hex code gaat namelijk van 0-9 end dan a t/m f
f is dus gelijk aan 16.


denk je dat je er zo uit komt?
 
denk het niet, mijn javascript kennis is nog te beperkt. Ik ben het in hard tempo aan het bijleren, maar dit gaat me toch nog even te ver denk ik. Kan je me er misschien een beetje mee op weg helpen?
 
Heb ik niet geschreven, maar deze werkt wel. :D

Code:
<html>
<head>
</head>
<body>

<!--
This file retrieved from the JS-Examples archives
[url]http://www.js-x.com[/url]
1000s of free ready to use scripts, tutorials, forums.
Author: Miahsoft - [url]http://www.convea.com/[/url]
-->

<h3 align="center"><font face="Verdana,Arial,Helvetica,sans-serif" color="#000099">Hex-to-RGB 

Conversion</font></h3>

<script language="JavaScript">
<!--
R = HexToR("#FFFFFF");
G = HexToG("#FFFFFF");
B = HexToB("#FFFFFF");

function HexToR(h) { 
	return parseInt((cutHex(h)).substring(0,2),16)
}

function HexToG(h) { 
	return parseInt((cutHex(h)).substring(2,4),16) 
}

function HexToB(h) { 
	return parseInt((cutHex(h)).substring(4,6),16) 
}

function cutHex(h) { 
	return (h.charAt(0)=="#") ? h.substring(1,7) : h
}

//-->
</script>

<div align="left">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td width="100%" align="center">
<form name=rgb>
<input type=text name=hex size=8 value="FFFFFF">
<input type=button name=btn value="Convert to RGB"
onCLick="this.form.r.value=HexToR(this.form.hex.value);
this.form.g.value=HexToG(this.form.hex.value);
this.form.b.value=HexToB(this.form.hex.value);
">
R:<input type=text name=r size=3>
G:<input type=text name=g size=3>
B:<input type=text name=b size=3>
</form>         
      </td>
    </tr>
  </table>
</div>

<BR>
</body>
</html>
 
Kan je me nog met 1 ding helpen? De rest kan ik zelf wel. Ik wil een real-time conversion, dus dat je niet op een knop hoeft te drukken... Wat moet ik dan nog veranderen in dat script?
 
dan moet je de functies aanroepen vanuit de functie

function moved(e)
 
@vanZwam:
Das niet wat ik bedoel, ik wil zelf een converter in m'n pagina....... Ik zoek dus alleen nog een stukje JavaScript dat Real-Time conversion erin zet...
 
@ wi3bren:
Zou je misschien kunnen uittypen wat ik dan moet veranderen? Ik heb alles nu al geprobeerd en m'n javascript boek erop nageslagen maar ik kom er niet uit..
 
ik hoop dat dit de bedoeling was :
// edit eentje met verschillende boxes voor RGB
Code:
<html>
<head>
<title>Color Picker</title>
<script langauge="javascript">

addary=new Array(255,1,1);
clrary=new Array(360);
for(i=0;i<6;i++)
 for(j=0;j<60;j++)
  { clrary[60*i+j]=new Array(3);
    for(k=0;k<3;k++)
     { clrary[60*i+j][k]=addary[k];
       addary[k]+=((Math.floor(65049010/Math.pow(3,i*3+k))%3)-1)*4; }; };

function capture()
 { if(document.layers)
    { with(document.layers['imgdiv'])
       { document.captureEvents(Event.MOUSEMOVE);
         document.onmousemove=moved; }; }
   else { document.all.imgdiv.onmousemove=moved; };
 };

function HexToR(h) { 
	return parseInt((cutHex(h)).substring(0,2),16)
}

function HexToG(h) { 
	return parseInt((cutHex(h)).substring(2,4),16) 
}

function HexToB(h) { 
	return parseInt((cutHex(h)).substring(4,6),16) 
}

function cutHex(h) { 
	return (h.charAt(0)=="#") ? h.substring(1,7) : h
}


function moved(e) { 
   sx=((document.layers)?e.layerY:event.offsetY)-256;
   sy=((document.layers)?e.layerX:event.offsetX)-256;
   quad=new Array(-180,360,180,0);
   xa=Math.abs(sx); ya=Math.abs(sy);
   d=ya*45/xa;

   if(ya>xa) d=90-(xa*45/ya);

   	deg=Math.floor(Math.abs(quad[2*((sy<0)?0:1)+((sx<0)?0:1)]-d));
   	n=0; c="000000";
   	r=Math.sqrt((xa*xa)+(ya*ya));

   	if(sx!=0 || sy!=0) { 
		for(i=0;i<3;i++) { 
			r2=clrary[deg][i]*r/128;
         			if(r>128) r2+=Math.floor(r-128)*2;
         			if(r2>255) r2=255;
         			n=256*n+Math.floor(r2); 
		};
      		c=(n.toString(16)).toUpperCase();
      		while(c.length<6) c="0"+c; 
	};

   	if(document.layers) { 
		document.layers['clrdiv'].bgColor="#"+c; 
	}
   	else { 
		document.all["clrdiv"].style.backgroundColor="#"+c; 
	};
   		
	document.frm.r.value=""+HexToR(c);
	document.frm.g.value=""+HexToG(c);
	document.frm.b.value=""+HexToB(c);

   	return false; 
   };

function setcolor() { 
	document.frm.rsel.value=document.frm.r.value;
	document.frm.gsel.value=document.frm.g.value;
	document.frm.bsel.value=document.frm.b.value;
};

</script>
<style type="text/css">
#imgdiv {
	position:relative; 
}
#clrdiv { 
	position:relative; background-color:white; 
}
</style>
</head>

<body onload="capture();" bgcolor="#ffffff" topmargin=0>
<table border=1 cellpadding=0 cellspacing=0>
 <tr><td></td></tr>
 <tr><td align="center" height=50><font size=+3> <div id=clrdiv><strong><font color=blue>Blue <font color=red> 
Red <font color=black>Black <font color=yellow>Yellow <font color=green>Green <font color="gray"> 
Gray<br><font color="purple">
Purple <font color=white>White <font color=orange>Orange <font color=magenta>Magenta 
<font color=cyan>Cyan</font></strong></div></td></tr>
<tr>
<form name="frm">
	<td align="center">

	<input type="text" name="r" size = 3>
	<input type="text" name="g" size = 3>
	<input type="text" name="b" size=3>

	<input type="text" name="rsel" size = 3>
	<input type="text" name="gsel" size = 3>
	<input type="text" name="bsel" size=3>


	</td>
</form>
</tr>
</table>
<div id=imgdiv><a href="java script:void(0);" onclick="setcolor(); return false;"> 
 <img src="images/colorwheel.jpg" width=512 height=500 border=0></a></div>
</body>

</html>
 
Laatst bewerkt:
Vet man:thumb: :thumb: !, das echt wat ik zoek, maar ik ben net achter een probleempje gekomen.

Ik zal eerst even uitleggen waarvoor ik uberhaupt een kleurenwiel in RGB wil......:

Het zit zo, ik werk in het theater en daar gebruiken we een softwareprogramma waaraan je extra html pagina's kan koppelen om bepaalde functies van spots snel toegangkelijk te maken. Die colorpicker heb ik nodig voor een aantal spots die zelf hun kleuren kunnen mengen met Rood, Groen en Blauw filters. Helaas accepteerd het programma alleen geen #-invoer, maar alleen RGB.

Opzich is dit wat jij nu aangepast hebt precies wat ik zoek, alleen waar ik net achter kom: dat programma heeft precies omgekeerde waardes nodig. Hier is 255 255 255 wit, maar volgens dat belichtingsprogramma is 255 255 255 zwart, en is 0 0 0 wit.....alles is dus precies tegenovergesteld. Weet jij hier nog een oplossing voor?

Attached zit het colorwheel:thumb: :thumb:
 

Bijlagen

  • colorwheel.jpg
    colorwheel.jpg
    53,2 KB · Weergaven: 22
Laatst bewerkt:
nogmaals nu inverted, the colorwheel jpg is erg goed uit :D



Code:
<html>
<head>
<title>Color Picker</title>
<script langauge="javascript">

addary=new Array(255,1,1);
clrary=new Array(360);
for(i=0;i<6;i++)
 for(j=0;j<60;j++)
  { clrary[60*i+j]=new Array(3);
    for(k=0;k<3;k++)
     { clrary[60*i+j][k]=addary[k];
       addary[k]+=((Math.floor(65049010/Math.pow(3,i*3+k))%3)-1)*4; }; };

function capture()
 { if(document.layers)
    { with(document.layers['imgdiv'])
       { document.captureEvents(Event.MOUSEMOVE);
         document.onmousemove=moved; }; }
   else { document.all.imgdiv.onmousemove=moved; };
 };

function HexToR(h) { 
	return 255-parseInt((cutHex(h)).substring(0,2),16)
}

function HexToG(h) { 
	return 255-parseInt((cutHex(h)).substring(2,4),16) 
}

function HexToB(h) { 
	return 255-parseInt((cutHex(h)).substring(4,6),16) 
}

function cutHex(h) { 
	return (h.charAt(0)=="#") ? h.substring(1,7) : h
}


function moved(e) { 
   sx=((document.layers)?e.layerY:event.offsetY)-256;
   sy=((document.layers)?e.layerX:event.offsetX)-256;
   quad=new Array(-180,360,180,0);
   xa=Math.abs(sx); ya=Math.abs(sy);
   d=ya*45/xa;

   if(ya>xa) d=90-(xa*45/ya);

   	deg=Math.floor(Math.abs(quad[2*((sy<0)?0:1)+((sx<0)?0:1)]-d));
   	n=0; c="000000";
   	r=Math.sqrt((xa*xa)+(ya*ya));

   	if(sx!=0 || sy!=0) { 
		for(i=0;i<3;i++) { 
			r2=clrary[deg][i]*r/128;
         			if(r>128) r2+=Math.floor(r-128)*2;
         			if(r2>255) r2=255;
         			n=256*n+Math.floor(r2); 			
		};
      		c=(n.toString(16)).toUpperCase();
      		while(c.length<6) c="0"+c; 
	};

   	if(document.layers) { 
		document.layers['clrdiv'].bgColor="#"+c; 
	}
   	else { 
		document.all["clrdiv"].style.backgroundColor="#"+c; 
	};
   		
	document.frm.r.value=""+HexToR(c);
	document.frm.g.value=""+HexToG(c);
	document.frm.b.value=""+HexToB(c);

   	return false; 
   };

function setcolor() { 
	document.frm.rsel.value=document.frm.r.value;
	document.frm.gsel.value=document.frm.g.value;
	document.frm.bsel.value=document.frm.b.value;
};

</script>
<style type="text/css">
#imgdiv {
	position:relative; 
}
#clrdiv { 
	position:relative; background-color:white; 
}
</style>
</head>

<body onload="capture();" bgcolor="#ffffff" topmargin=0>
<table border=1 cellpadding=0 cellspacing=0>
 <tr><td></td></tr>
 <tr><td align="center" height=50><font size=+3> <div id=clrdiv><strong><font color=blue>Blue <font color=red> 
Red <font color=black>Black <font color=yellow>Yellow <font color=green>Green <font color="gray"> 
Gray<br><font color="purple">
Purple <font color=white>White <font color=orange>Orange <font color=magenta>Magenta 
<font color=cyan>Cyan</font></strong></div></td></tr>
<tr>
<form name="frm">
	<td align="center">

	<input type="text" name="r" size = 3>
	<input type="text" name="g" size = 3>
	<input type="text" name="b" size=3>

	<input type="text" name="rsel" size = 3>
	<input type="text" name="gsel" size = 3>
	<input type="text" name="bsel" size=3>


	</td>
</form>
</tr>
</table>
<div id=imgdiv><a href="java script:void(0);" onclick="setcolor(); return false;"> 
 <img src="images/colorwheel.jpg" width=512 height=500 border=0></a></div>
</body>

</html>
 
wi3bren, eeuwig bedankt :thumb: , het werkt perfect. Ik zal zorgen dat je in het eerstvolgende programmaboekje eervol vermeld zal worden ;)
 
Alsof het nog niet genoeg is kom ik nog 1 keertje storen

Ik heb het eerst zelf al geprobeerd, maar ik kom er niet uit.

Het probleem is dit: De code die 'vastgezet' wordt moet ik nog doorsturen naar het programma. Ik heb dus geexperimenteerd met buttons etc., maar het lukt mij niet.

De bedoeling is dat de 3 textveldjes samen 1 link opmaken, en wanneer ik op een button klik ik geredirect wordt naar:

Code:
http://0/SetMLParam(cyan, 'aangegeven waarde in de vastegezette cel voor rood'); SetMLParam(magenta, 'aangegeven waarde in de vastgezette cel voor groen'); SetMLParam(yellow, 'aangegeven waarde in de vastgezette cel voor geel')

Hoop dat je snapt wat ik bedoel, en dat je me kan helpen, ik kom er echt niet uit....gaat allemaal een beetje boven m'n pet
 
softwareprogramma waaraan je extra html pagina's kan koppelen om bepaalde functies van spots snel toegangkelijk te maken

Mag ik vragen hoe dat software programma heet, klinkt interresant ?

deze is met een button :D

Code:
 <html>
<head>
<title>Color Picker</title>
<script langauge="javascript">

addary=new Array(255,1,1);
clrary=new Array(360);
for(i=0;i<6;i++)
 for(j=0;j<60;j++)
  { clrary[60*i+j]=new Array(3);
    for(k=0;k<3;k++)
     { clrary[60*i+j][k]=addary[k];
       addary[k]+=((Math.floor(65049010/Math.pow(3,i*3+k))%3)-1)*4; }; };

function capture()
 { if(document.layers)
    { with(document.layers['imgdiv'])
       { document.captureEvents(Event.MOUSEMOVE);
         document.onmousemove=moved; }; }
   else { document.all.imgdiv.onmousemove=moved; };
 };

function HexToR(h) { 
	return 255-parseInt((cutHex(h)).substring(0,2),16)
}

function HexToG(h) { 
	return 255-parseInt((cutHex(h)).substring(2,4),16) 
}

function HexToB(h) { 
	return 255-parseInt((cutHex(h)).substring(4,6),16) 
}

function cutHex(h) { 
	return (h.charAt(0)=="#") ? h.substring(1,7) : h
}


function moved(e) { 
   sx=((document.layers)?e.layerY:event.offsetY)-256;
   sy=((document.layers)?e.layerX:event.offsetX)-256;
   quad=new Array(-180,360,180,0);
   xa=Math.abs(sx); ya=Math.abs(sy);
   d=ya*45/xa;

   if(ya>xa) d=90-(xa*45/ya);

   	deg=Math.floor(Math.abs(quad[2*((sy<0)?0:1)+((sx<0)?0:1)]-d));
   	n=0; c="000000";
   	r=Math.sqrt((xa*xa)+(ya*ya));

   	if(sx!=0 || sy!=0) { 
		for(i=0;i<3;i++) { 
			r2=clrary[deg][i]*r/128;
         			if(r>128) r2+=Math.floor(r-128)*2;
         			if(r2>255) r2=255;
         			n=256*n+Math.floor(r2); 			
		};
      		c=(n.toString(16)).toUpperCase();
      		while(c.length<6) c="0"+c; 
	};

   	if(document.layers) { 
		document.layers['clrdiv'].bgColor="#"+c; 
	}
   	else { 
		document.all["clrdiv"].style.backgroundColor="#"+c; 
	};
   		
	document.frm.r.value=""+HexToR(c);
	document.frm.g.value=""+HexToG(c);
	document.frm.b.value=""+HexToB(c);

   	return false; 
   };

function setcolor() { 
	document.frm.rsel.value=document.frm.r.value;
	document.frm.gsel.value=document.frm.g.value;
	document.frm.bsel.value=document.frm.b.value;
	
	page = "http://0/SetMLParam(cyan,"+
	document.frm.r.value+
	");SetMLParam(magenta,"+document.frm.b.value+
	 ");SetMLParam(yellow,"+document.frm.g.value+")";

};

</script>
<style type="text/css">
#imgdiv {
	position:relative; 
}
#clrdiv { 
	position:relative; background-color:white; 
}
</style>
</head>

<body onload="capture();" bgcolor="#ffffff" topmargin=0>
<table border=1 cellpadding=0 cellspacing=0>
 <tr><td></td></tr>
 <tr><td align="center" height=50><font size=+3> <div id=clrdiv><strong><font color=blue>Blue <font color=red> 
Red <font color=black>Black <font color=yellow>Yellow <font color=green>Green <font color="gray"> 
Gray<br><font color="purple">
Purple <font color=white>White <font color=orange>Orange <font color=magenta>Magenta 
<font color=cyan>Cyan</font></strong></div></td></tr>
<tr>
<form name="frm">
	<td align="center">

	<input type="text" name="r" size = 3>
	<input type="text" name="g" size = 3>
	<input type="text" name="b" size=3>

	<input type="text" name="rsel" size = 3>
	<input type="text" name="gsel" size = 3>
	<input type="text" name="bsel" size=3>

	<input type="button" name="go" value="go" onClick="location.href=''+page">
	</td>
</form>
</tr>
</table>
<div id=imgdiv><a href="java script:void(0);" onclick="setcolor(); return false;"> 
 <img src="images/colorwheel.jpg" width=512 height=500 border=0></a></div>
</body>

</html>
 
Laatst bewerkt:
Tuurlijk mag je weten welk programma dat is, je kan er alleen helemaal niks mee als je de hardware er niet bij koopt en je niet professioneel in het theater bezig bent

www.horizoncontrol.com, (de software kan je direct hier downloaden http://www.horizoncontrol.com/download/Build-128.exe)het programma heet 'Horizon' en is ontwikkeld door Rosco. Je kan theatershows of DJ-shows mee inprogrammeren

Ik ben nu bezig met het maken van een uitgebreid MagicSheet om bewegend licht mee aan te sturen
(deze spots: http://www.claypaky.it/miscimg/press/art_new_stagezoom1200sv_zoom.jpg
 
Laatst bewerkt:
Echt geweldig vind ik het, maar ik heb toch weer een vraagje. Kan je me aanwijzen waar in het script ik de grafiek kan verkleinen? Stel dat ik ipv een 512 bij 512 een 440 bij 440 plaatje wil gebruiken, waar moet ik dan kijken?
 
Denk het trouwens zelf al te weten, maar ik wil graag even een bevestiging. Moet ik daar die getallen "256" dan veranderen in een kleiner getal (2x 256 is immers 512, dus zou ik zeggen als ik de x en y assen verander in 220 het plaatje 440 in totaal wordt)?
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan