While I was answering another Post, I´ve refered to this solution. I was shocked a little, how obsolet my post was
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