led_pillar

Documentation: http://frombelow.net/projects/led_pillar/
Clone: git clone https://git.frombelow.net/led_pillar.git
Log | Files | Refs | Submodules | README | LICENSE

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>