blinkenstrip

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

index.html (3262B)

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