HTML（获得）形式的Arduino

我正在做基于Arduino的一个RGB-Ledstrip控制器RGB选择。我目前有硬件工作，但我想通过一个页面（理想情况下）托管在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的工作方式。

的问题（S）

我可以用CSS来获取当前滑块值并把它作为boxs'色？

我试过

我最好的拍摄它是：

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

但它根本没有解决 “RGB（）” 函数。我想我很接近，但还没有。

请注意，Arduino的内存是非常有限的，这就是为什么我尽量使它尽可能小。它可以很容易地在Javascript中完成，使用花式的色轮等，但这可能会占用太多的内存字节。

来源

2016-09-26 Paul

我知道你问没有JavaScript，所以我不会发布这个答案，但我认为它不能在HTML环境中实现。但是，正如你所说，可以用非常简单的JavaScript来完成。做了一个小提琴：https：//jsfiddle.net/9h29ujjk/ – Imbue

@Imbue我确实想知道它是否可以在CSS中完成，因为我认为我的最后一个例子很符合轨道，尽管我并不是真的擅长CSS。你的JavaScript例子其实很小，我相信它可以适应Arduino。但是，循环“输入”并检查它是否属于“范围”类型然后设置事件监听器是否更合乎逻辑？ – Paul

其实您可能只是将其作为答案发布。尽管它增加了大约500字节，但是我确实有32kBytes的程序存储空间，所以如果其余的（网络）没有那么多，它可能恰好适合（并且足够好）。 – Paul

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

<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作为参考。

来源

2016-09-26 10:59:04 Imbue

您使用javascript的评论/回答帮助我发现“使用最小的JavaScript”实际上也可以做到这一点。我在这个小提琴中“最小化”了您的示例（并且使其更加合理）：https：//jsfiddle.net/mc8otx4p/ – Paul

非常高兴它有所帮助，您的解决方案效果很好，尽管内联脚本不是太好漂亮，它不会让性能变差，可能会好一点。您可以在性能方面进行非常小的额外提升，将文档包含在变量（var doc = document;）中，以便不连续四次调用文档。 – Imbue

我同意内联脚本不是很好，但是，在Arduino上它很有意义。它实际上没有完整的网络服务器和文件。它只是用一个长的HTML“字符串”来响应，而这恰好是一个完整的文件。 – Paul

HTML（获得）形式的Arduino

回答

相关问题