Question

项目

我正在制作一个基于Arduino的RGB-Ledstrip控制器。我目前有硬件工作，但我希望通过托管在Arduino上的页面（理想情况下）使其可控。

问题

我的Arduino目前可以生成此HTML，但是，如果用户有某种类型的反馈，这将是实用的。

<!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>

我正在寻找一种显示所选颜色的方法。理想情况下，它应该使方块的颜色与滑块的设置方式一致。所以，如果我能得到当前的滑块值并将它们作为背景颜色，我会被设置。

但是，据我所知，这根本不是HTML的工作方式。

问题

我可以使用CSS获取当前的滑块值并将其应用为框“＆＃39;颜色？

我尝试了什么

我最好的机会是：

<!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>

但它根本无法解决＆＃34; rgb（）＆＃34;功能。我想我已经接近了，但还没有。

请注意，Arduino的内存非常有限，这就是为什么我尽量让它尽量少。它可以很容易地在Javascript中完成，有一个花哨的色轮等，但这可能需要太多的内存字节。

Answer 1

由于在纯HTML / CSS中无法实现，我使用提供的HTML创建了一个javascript，因为它是我所知道的唯一解决方案。

<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>

当范围发生变化时，脚本会简单地采用不同的范围值，并相应地编辑预览框颜色。

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+")";
}

我已创建fiddle作为参考。

Html（get）在Arduino上形成RGB选择器

1 个答案: