Paul Paul - 2 months ago 20
HTML Question

Html (get) form RGB selector on Arduino

The project

I'm making a RGB-Ledstrip controller based on Arduino.
I currently have the hardware working, but I would want to make it controllable through a page (ideally) hosted on Arduino.

The problem

My Arduino can currently generate this HTML, however, it would be practical if the user had some type of feedback.

<!DOCTYPE html>
<html>
<body>
<form method="get" action="?">
R <input type="range" name="R" value="0" min="0" max="255"></br>
G <input type="range" name="G" value="0" min="0" max="255"></br>
B <input type="range" name="B" value="0" min="0" max="255"></br>
<div style="width:100px;height:100px; background:#f00;"></div>
<input type="submit" value="Send color">
</form>
</body>
</html>


I'm looking for a way to display the chosen color.
Ideally it should make the square colored in the way the sliders are set.
So, if I could get the current slider values and put them as the background color, I would be set.

But, as far as my knowledge goes, this is simply not the way HTML works.

The question(s)


  • Can I use CSS to obtain the current slider values and apply it as the boxs' color?



What I tried

My best shot at it is:

<!DOCTYPE html>
<html>
<body>
<form method="get" action="?">
R <input type="range" id="R" name="R" value="0" min="0" max="255"></br>
G <input type="range" id="G" name="G" value="0" min="0" max="255"></br>
B <input type="range" id="B" name="B" value="0" min="0" max="255"></br>
<div style="width:100px;height:100px; background: rgb(attr(R), attr(G),attr(B));"></div>
<input type="submit" value="Send color">
</form>
</body>
</html>


But it simply does not resolve the "rgb()" function. I think I'm close, but not yet there.

Please mind that the memory of the Arduino is very limited, that's why I try to make it as minimal as possible. It could easily be done in Javascript, with a fancy colorwheel etc. but that will probably take too much bytes of memory.

Answer

As it's not achievable in plain HTML/CSS, I have created a javascript, with the use of the provided HTML instead, as it is the only solution I know of.

<form method="get" action="?">
      R <input type="range" id="r" name="R" value="0" min="0" max="255">
      G <input type="range" id="g" name="G" value="0" min="0" max="255">
      B <input type="range" id="b" name="B" value="0" min="0" max="255">
      <div id="color" style="width:100px;height:100px;"></div>
      <input type="submit" value="Send color">
 </form>

The script simply takes the different rangevalues when the range changes and edits the preview-box color accordingly.

var inputs=document.getElementsByTagName('input'),
    i=0,
    color = document.getElementById('color');
do{
    switch(inputs[i].type){
    case 'range':
      inputs[i].addEventListener('change', onChange)
    break;
  }
}
while(inputs[++i])

function onChange(){
    var r = document.getElementById('r').value,
    g = document.getElementById('g').value,
    b = document.getElementById('b').value;

    color.style.background = "rgb("+r+","+g+","+b+")";
}

I've created a fiddle for reference.

Comments