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

回答

相關問題