Web Server with graphical UI to set LED color

While I was answering another Post, I´ve refered to this solution. I was shocked a little, how obsolet my post was :astonished:

So here is my current solution, how to create a Color-Picker, which constantly stays on the site and workes quite fast.
The JS-File is outsourced to possibly put it on a different webspace. It also can be re-included in the main page.

HTML-File (Color.htm):

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript" src="color.js"></script>
<title>Arduino Webserver 1.0 - Color</title>
</head>
<body bgcolor='#444444'  text="#c0c0c0">
<table border='0' width='480' cellpadding='5'>
<tr><td>

<hr/>
<h2><div align='center'><font color='#2076CD'>Arduino Webserver 1.0</font></div></h2>
<hr/>

<div align='left'><font face='Verdana' color='#FFFFFF'>Colorpicker</font></div>



<table border='1' width='460' cellpadding='5'>
<tr bgColor='#222222'>
<td align='center' bgcolor='#222222'>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="hidden" id="r" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
  document.write("<td bgcolor='#ff0000' height=40 width=10 onMouseOver='Slider(" + i + ",\"r\")' id='r" + i + "'></td>"); </script>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="hidden" id="g" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
  document.write("<td bgcolor='#00ff00' height=40 width=10 onMouseOver='Slider(" + i + ",\"g\")' id='g" + i + "'></td>"); 
</script>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="hidden" id="b" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++) 
  document.write("<td bgcolor='#0000ff' height=40 width=10 onMouseOver='Slider(" + i + ",\"b\")' id='b" + i + "'></td>"); 
</script>
</tr>
</table>
</td></tr>
<tr><td  align='center' bgcolor='#222222'>
<hr color="#ffffff" size="50" width="50" id="color"></hr>
</td></tr>
<tr bgColor='#222222'>
<td align='center' bgcolor='#222222'>
<form id="myform" action="../?" onsubmit="return submitformColor();">
<input type='hidden' name='action' id="action">
Password: <input type="password" name="pw" id="pw">


<input type="submit" name="btn" value="Change">
</form>
</td>
</tr>
</table>



</td></tr>
</table>
<a href="INDEX.HTM">back</a>
</body></html>

JavaScript-File (color.js):

function Slider(i,c)
{
	//Get last resized Image
	im = c + document.getElementById(c).value
	d=document.all[im];
	switch (c)
	{
		case "r":
		d.bgColor = "#ff0000";
		break;
		case "g":
		d.bgColor = "#00ff00";
		break;
		case "b":
		d.bgColor = "#0000ff";
		break;
	}
	//Set Textbox to value
	document.getElementById(c).value = i;
	//Resice actual Image to 1
	im = c + i;
	d=document.all[im];
	d.bgColor = "#000000";
	//Set <hr color=""> to Hexcode
	var r,g,b;
	r = Math.round((document.all.r.value*255)/31);
	g = Math.round((document.all.g.value*255)/31);
	b = Math.round((document.all.b.value*255)/31);
	document.getElementById('color').color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
	document.getElementById('action').value = 'color'+document.all.r.value+'-'+document.all.g.value+'-'+document.all.b.value;
}

function submitformColor()
{
	var oRequest = new XMLHttpRequest();
	var sURL  = '/?action='+document.getElementById('action').value;
	sURL += '&pw='+document.getElementById('pw').value;
	sURL += '&btn=Change';
	oRequest.open("GET",sURL,false);
	oRequest.setRequestHeader("User-Agent",navigator.userAgent);
	oRequest.send(null)

	if (oRequest.status==200)
	  {
	   //var txt = oRequest.responseText;     
	   //document.write(txt);
	   return false;
	  }
	else
	  document.write('Error while sending!');
}

Arduino Code:
(A working Ethernet Shield is mandatory & some knowlodge where to paste the code required)

 char pw[21] = "&pw=MySecurepassword&btn=Change"; 
  if(strstr(filename,"?action=") !=0)
  {
    filename = filename + 8; // look behind "?action=" (8 chars) 
    if(strstr(filename,pw) !=0)
    {
      //Delete Password stuff
      (strstr(filename, pw))[0] = 0;

      if(strstr(filename, "color") != 0)
        { 
          All(LP.color(0,0,0));
          client.println("Color:
");
          filename = filename + 5; //Remove "color"
          client.println(filename);
                
          String str = filename;
          char theName[3];
          str = str.substring(0,str.indexOf('-'));
          str.toCharArray(theName, 3);
          Serial.println(theName);
          r = atoi(theName);          
    
          str = filename;
          str = str.substring(str.indexOf('-')+1,str.lastIndexOf('-'));
          str.toCharArray(theName, 3);
          Serial.println(theName);
          g = atoi(theName);
          
          str = filename;
          str = str.substring(str.lastIndexOf('-')+1);
          str.toCharArray(theName, 3);
          Serial.println(theName);
          b = atoi(theName);
          All(LP.color(r,g,b));
        }
   }
}

This string conversations are quite ugly and should be redesigned...
The Password-Thing is just a little unsecure solution, but there werent high confidential data on my arduino. So it is just to avoid people to turn my livingroom into a disco :slight_smile:

And this is how it looks like: