Web Server with graphical UI to set LED color

Using Arduino LEDs and Multiplexing
6

Hi everybody,

I was searching for something similar and just have coded a simple solution for me.
There is a little slider with 3 Images (red.gif, green.gif & blue.gif) just 1x1 pixel.

<html>
<head>
<script type="text/javascript">
function Slider(i,c)
{
//Get last resized Image
im = c + document.getElementById(c).value
d=document.all[im];
d.height=20;
//Set Textbox to value
document.getElementById(c).value = i;
//Resice actual Image to 1
im = c + i;
d=document.all[im];
d.height=1;
//Set <hr color=""> to Hexcode
document.getElementById('color').color = '#'+document.all.r.value.toString(16)+document.all.g.value.toString(16)+document.all.b.value.toString(16);
}
</script>
<title>
Arduino Colorpicker 1.0
</title>
<meta content="width=480" />
</head>
<body>
<input type="text" id="r" size="2">
<script type="text/javascript">
for (i=0;i<=255;i++) 
 document.write("<img src='red.gif' height=20 width=1 onMouseOver='Slider(" + i + ",\"r\")' id='r" + i + "'>");
</script>


<input type="text" id="g" size="2">
<script type="text/javascript">
for (i=0;i<=255;i++)
 document.write("<img src='green.gif' height=20 width=1 onMouseOver='Slider(" + i + ",\"g\")' id='g" + i + "'>"); 
</script>


<input type="text" id="b" size="2">
<script type="text/javascript">
for (i=0;i<=255;i++) 
 document.write("<img src='blue.gif' height=20 width=1 onMouseOver='Slider(" + i + ",\"b\")' id='b" + i + "'>");  
</script>


<hr color="#ffffff" size="20" width="15" id="color"></hr>
</body>
</html>

So you can put the three Input boxes into a and send them to your EthernetShield by POST or what ever :slight_smile:

I´d love to transfer it "live" to the Arduino, but there would be a POST-Action by JavaScript needed, I think :-/