index.html (2753B)
1 <!DOCTYPE html> 2 <html lang="de"> 3 <head> 4 <meta charset="utf-8"> 5 <title>LED Pillar</title> 6 <style> 7 button{width:10em;} 8 @media only screen and (max-device-width: 1024px){ 9 html{font-size : 300%; line-height: 50%;} 10 button{font-size : 190%; width:10em;} 11 .slider{ 12 height: 5ex; 13 width: 40em; 14 autoScaleSlider:false, 15 autoHeight: false 16 } 17 </style> 18 </head> 19 <body> 20 <h1>LED Pillar</h1> 21 <form action="/" method="POST"> 22 <div class="slidecontainer"> 23 R <input type="range" min="0" max="255" value="{{ red }}" class="slider" id="slider_red"> 24 <label id="label_red"></label><br /> 25 G <input type="range" min="0" max="255" value="{{ green }}" class="slider" id="slider_green"> 26 <label id="label_green"></label><br /> 27 B <input type="range" min="0" max="255" value="{{ blue }}" class="slider" id="slider_blue"> 28 <label id="label_blue"></label><br /> 29 </div><br /> 30 <button type="submit" name="mode" value="off">OFF</button><br /><br /> 31 <button type="submit" name="mode" value="worm">Worm</button><br /><br /> 32 <button type="submit" name="mode" value="cellular">Cellular Automaton</button><br /><br /> 33 <button type="submit" name="mode" value="flames">Fire</button><br /><br /> 34 <button type="submit" name="mode" value="flow_rgb">Flow (RGB)</button><br /><br /> 35 <button type="submit" name="mode" value="flow_hsv">Flow (HSV)</button><br /><br /> 36 <button type="submit" name="mode" value="test">Test Pattern</button><br /><br /> 37 </form> 38 <!-- Update slider on the fly --> 39 <script> 40 <!-- Handle RGB sliders --> 41 var slider_red = document.getElementById("slider_red"); 42 var label_red = document.getElementById("label_red"); 43 var slider_green = document.getElementById("slider_green"); 44 var label_green = document.getElementById("label_green"); 45 var slider_blue = document.getElementById("slider_blue"); 46 var label_blue = document.getElementById("label_blue"); 47 label_red.innerHTML = slider_red.value; 48 label_green.innerHTML = slider_green.value; 49 label_blue.innerHTML = slider_blue.value; 50 slider_red.oninput = function() { 51 label_red.innerHTML = slider_red.value; 52 label_green.innerHTML = slider_green.value; 53 label_blue.innerHTML = slider_blue.value; 54 var i = document.createElement("img"); 55 // Didn't figure out how to do this with a POST request without 56 // resorting to external libraries 57 i.src = "?mode=rgb&red=" + 58 slider_red.value + "&green=" + slider_green.value + 59 "&blue=" + slider_blue.value; 60 }; 61 slider_green.oninput = slider_red.oninput; 62 slider_blue.oninput = slider_red.oninput; 63 </script> 64 </body> 65 </html>