PDA

View Full Version : Help please



FacingPandas
10-30-2010, 09:01 PM
I'm trying to make a program to take a starting hex, ending hex, and string. It will make a gradient through the text, either outputting a html equivalent or in the actual colors and stuff. Almost exactly like this (http://www.tektek.org/color/) but graphics are obviously much more basic.

I've done this program in Java and was trying to transfer to Javascript so that i wouldnt need an applet to run it, but so far it wont work. I just started out in Javascript so im not 100% sure what i can and cant do. Heres all the code I have so far, any suggestions or fixes would be really appreciated.



<HTML>
<HEAD>

<TITLE>Test</TITLE>

<SCRIPT type="text/javascript">

function testResults (form)
{
var HEX1 = form.hex1.value, HEX2 = form.hex2.value, startText = form.text.value;
var redStart = getRed(HEX1), redEnd = getRed(HEX2);
var greenStart = getGreen(HEX1), greenEnd = getGreen(HEX2);
var blueStart = getBlue(HEX1), blueEnd = getBlue(HEX2);
var redAdd = (redEnd-redStart)/length, greenAdd = (greenEnd - greenStart)/length, blueAdd = (blueEnd - blueStart)/length;
var hexCode;
var total = "";

for (i = 0; i < startText.length; i++)
{
hexCode = RGBtoHex(redStart + (int) Math.round(i*redAdd), greenStart + (int) Math.round(i*greenAdd), blueStart + (int) Math.round(i*blueAdd));
total += "<font color=\"" + hexCode + "\">" + string.substring(i, i+1) + "</font>"
}
document.getElementById('output').innerHTML = total;
}

function getRed(string)
{
return string.subString(1, 3);
}

function getGreen(string)
{
return string.subString(3, 5);
}

function getBlue(string)
{
return string.subString(5, 7);
}

function toHex(N)
{
if (N==0) return "00";
var list = "0123456789ABCDEF";

N=Math.max(0,N);
N=Math.min(N,255);
N=Math.round(N);
return list.charAt((N-N%16)/16) + list.substring(N%16, N%16+1);
}

function RGBtoHex(R, G, B)
{
return "#" + toHex(R)+toHex(G)+toHex(B);
}

function returnHexChar(Char)
{
Char = Char.toUpperCase();
if (Char == "A")
return 10;
else if (Char == "B")
return 11;
else if (Char == "C")
return 12;
else if (Char == "D")
return 13;
else if (Char == "E")
return 14;
else if (Char == "F")
return 15;
else return Char;
}
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Starting HEX: <INPUT TYPE="text" NAME="hex1" VALUE=""><P>
Ending HEX: <INPUT TYPE="text" NAME="hex2" VALUE=""><P>
Text: <INPUT TYPE="text" NAME="text" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)" onMouseOver="testResults(this.form)">
</FORM>

<p id="output"></p>

</BODY>
</HTML>