Web Server with graphical UI to set LED color

Using Arduino LEDs and Multiplexing
7

Hey,

yesterday I was animated to do the Color-Picker right.
There were some changes to the Version above:

  • Color limited from 0-32
  • Replaced Images with Table Columns
  • Preview with Hex-Colors
  • Include better Touch-Functionality for mobile devices
  • Submit wouldn´t change the actual page

<html>
<head>
<script type="text/javascript">
function Slider(i,c)
{
	//Get last 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;
	//Hide actual Image
	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;	
	oRequest.open("GET",sURL,false);
	oRequest.setRequestHeader("User-Agent",navigator.userAgent);
	oRequest.send(null)

	if (oRequest.status==200)
	  {
	   //Get Answer
	   //var txt = oRequest.responseText;     
	   //document.write(txt);
	   //Stay on actual Site
	   return false;
	  }
	else
	  document.write('Error!');
// 	  document.forms["myform"].submit();
}
</script>
<title>Arduino Webserver 1.0 - Color</title>
</head>
<body bgcolor='#444444'  text="#c0c0c0" OnLoad="ReadCookie()">
<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="text" 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="text" 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="text" 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">
<input type="submit" name="btn" value="Change">
</form>
</td>
</tr>
</table>


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

So I hope someone can use it for his purpose :slight_smile: