Advertisement
MrRockchip

super_html

May 24th, 2022
986
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.96 KB | None | 0 0
  1.  <!DOCTYPE html>
  2.   <html style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'>
  3.    <head>
  4.     <title>Neopixel control</title>
  5.     <meta name='mobile-web-app-capable' content='yes' />
  6.     <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes' />
  7.    </head>
  8.    <body style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; font-family: "Courier New", Courier, monospace; font-weight: bold;'>
  9.     <script type='text/javascript'>
  10.      function toggleDetails() {
  11.       var elem = document.getElementById('my_details');
  12.       if (elem.open == true) {
  13.        elem.open = false;
  14.       }
  15.       else {
  16.        elem.open = true;
  17.       }
  18.      }
  19.          var stripLocked = false;
  20.          function updateStrip(val_r, val_g, val_b, val_m) {
  21.           if (stripLocked) {
  22.            return;
  23.           }
  24.           function colourCorrect(v) {
  25.            return Math.round(1023 - ((v * v)/64));
  26.           }
  27.           var params = [
  28.            'r=' + colourCorrect(val_r),
  29.            'g=' + colourCorrect(val_g),
  30.            'b=' + colourCorrect(val_b),
  31.            'm=' + val_m
  32.            ].join('&');
  33.           var req = new XMLHttpRequest();
  34.           req.open('POST', '?' + params, true);
  35.           req.send();
  36.           stripLocked = true;
  37.           req.onreadystatechange = function() {
  38.            if (req.readyState == 4) {
  39.             stripLocked = false;
  40.            }
  41.           }
  42.          }
  43.      function updateSummaryColor() {
  44.       var val_r = document.getElementById('range_r').value;
  45.       my_r      =        (parseInt(val_r, 10 )).toString(16).padStart(2, '0');
  46.       my_r_inv  = (255 - (parseInt(val_r, 10))).toString(16).padStart(2, '0');
  47.       var val_g = document.getElementById('range_g').value;
  48.       my_g      =        (parseInt(val_g, 10 )).toString(16).padStart(2, '0');
  49.       my_g_inv  = (255 - (parseInt(val_g, 10))).toString(16).padStart(2, '0');
  50.       var val_b = document.getElementById('range_b').value;
  51.       my_b      =        (parseInt(val_b, 10 )).toString(16).padStart(2, '0');
  52.       my_b_inv  = (255 - (parseInt(val_b, 10))).toString(16).padStart(2, '0');
  53.       document.getElementById('text_r').value = my_r;
  54.       document.getElementById('text_g').value = my_g;
  55.       document.getElementById('text_b').value = my_b;
  56.       document.getElementById('text_a').value = my_r + my_g + my_b;
  57.       var my_details = document.getElementById('my_details');
  58.       my_details.style.background = '#' + my_r     + my_g     + my_b;
  59.       my_details.style.color      = '#' + my_r_inv + my_g_inv + my_b_inv;
  60.       var val_m = document.getElementById('range_m').value;
  61.       my_m      =        (parseInt(val_m, 10 )).toString(10).padStart(2, '0');
  62.       document.getElementById('text_m').value = my_m;
  63.       updateStrip(parseInt(val_r, 10), parseInt(val_g, 10), parseInt(val_b, 10), parseInt(val_m, 10));
  64.      }
  65.      function changedText(range_id, text_id, my_base) {
  66.       document.getElementById(range_id).value = parseInt(document.getElementById(text_id).value, my_base);
  67.       updateSummaryColor();
  68.      }
  69.      function changedText_a() {
  70.       var text_a = document.getElementById('text_a');
  71.       document.getElementById('range_r').value = parseInt(text_a.value.substring(0, 2), 16);
  72.       document.getElementById('range_g').value = parseInt(text_a.value.substring(2, 4), 16);
  73.       document.getElementById('range_b').value = parseInt(text_a.value.substring(4, 6), 16);
  74.       updateSummaryColor();
  75.      }
  76.      function setMode(val_m) {
  77.       document.getElementById('range_m').value = val_m;
  78.       updateSummaryColor();
  79.      }
  80.      // window.onload = updateSummaryColor;
  81.     </script>
  82.     <div style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; display: grid; grid-template-columns: 100%; row-gap: 2%; column-gap: 1%;'>
  83.      <div style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; display: grid; grid-template-columns: 7% 74% 17%; row-gap: 2%; column-gap: 1%;'>
  84.       <text id='rgb' name='rgb' style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #000000;'>RGB</text>
  85.       <button id='my_toggler' onclick='toggleDetails()' style='width: 100%; margin: 0%; font-family: inherit; font-weight: inherit;'>
  86.        <details id='my_details' onclick='toggleDetails()' style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; font-family: inherit; font-weight: inherit; background: #ffffff; color: #000000;'>
  87.         <summary id='my_summary'>Palette</summary>
  88.         <iframe style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;' srcdoc="
  89.         <body style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'>
  90.           <canvas id='colorspace' style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'></canvas>
  91.          </body>
  92.          <script type='text/javascript'>
  93.           (function () {
  94.            var canvas = document.getElementById('colorspace');
  95.            var ctx = canvas.getContext('2d');
  96.            function drawCanvas() {
  97.             var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0);
  98.             for (var i = 0; i <= 360; i += 10) {
  99.             colours.addColorStop((i/360), 'hsl(' + i + ', 100%, 50%)');
  100.            }
  101.            ctx.fillStyle = colours;
  102.            ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
  103.            var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
  104.            luminance.addColorStop(0,    '#ffffff');
  105.            luminance.addColorStop(0.05, '#ffffff');
  106.            luminance.addColorStop(0.5,  'rgba(0,0,0,0)');
  107.            luminance.addColorStop(0.95, '#000000');
  108.            luminance.addColorStop(1,    '#000000');
  109.            ctx.fillStyle = luminance;
  110.            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  111.           }
  112.           var eventLocked = false;
  113.           function handleEvent(clientX, clientY) {
  114.            if (eventLocked) {
  115.             return;
  116.            }
  117.            function colourCorrect(v) {
  118.             return Math.round(1023 - ((v * v)/64));
  119.            }
  120.            var data = ctx.getImageData(clientX, clientY, 1, 1).data;
  121.            my_r     =        (parseInt(data[0], 10 )).toString(16).padStart(2, '0');
  122.            my_r_inv = (255 - (parseInt(data[0], 10))).toString(16).padStart(2, '0');
  123.            my_g     =        (parseInt(data[1], 10 )).toString(16).padStart(2, '0');
  124.            my_g_inv = (255 - (parseInt(data[1], 10))).toString(16).padStart(2, '0');
  125.            my_b     =        (parseInt(data[2], 10 )).toString(16).padStart(2, '0');
  126.            my_b_inv = (255 - (parseInt(data[2], 10))).toString(16).padStart(2, '0');
  127.            function drawCoordinates(x,y) {
  128.             var ctx = document.getElementById('colorspace').getContext('2d');
  129.             var pointSize = 3;
  130.             ctx.fillStyle = '#' + my_r_inv + my_g_inv + my_b_inv;
  131.             ctx.beginPath();
  132.             ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
  133.             ctx.fill();
  134.            }
  135.            drawCanvas();
  136.            drawCoordinates(clientX, clientY);
  137.            var my_details = parent.document.getElementById('my_details');
  138.            my_details.style.background = '#' + my_r     + my_g     + my_b;
  139.            my_details.style.color      = '#' + my_r_inv + my_g_inv + my_b_inv;
  140.            function updateSliders(val_r, val_g, val_b) {
  141.             parent.document.getElementById('range_r').value = val_r;
  142.             parent.document.getElementById('range_g').value = val_g;
  143.             parent.document.getElementById('range_b').value = val_b;
  144.             parent.document.getElementById('text_r').value = (parseInt(val_r, 10 )).toString(16).padStart(2, '0');
  145.             parent.document.getElementById('text_g').value = (parseInt(val_g, 10 )).toString(16).padStart(2, '0');
  146.             parent.document.getElementById('text_b').value = (parseInt(val_b, 10 )).toString(16).padStart(2, '0');
  147.             parent.document.getElementById('text_a').value = parent.document.getElementById('text_r').value +
  148.                                                              parent.document.getElementById('text_g').value +
  149.                                                              parent.document.getElementById('text_b').value;
  150.            }
  151.            updateSliders(parseInt(data[0], 10), parseInt(data[1], 10), parseInt(data[2], 10));
  152.            var params = [
  153.             'r=' + colourCorrect(data[0]),
  154.             'g=' + colourCorrect(data[1]),
  155.             'b=' + colourCorrect(data[2]),
  156.             'm=' + parseInt(parent.document.getElementById('range_m').value, 10)
  157.             ].join('&');
  158.            var req = new XMLHttpRequest();
  159.            req.open('POST', '?' + params, true);
  160.            req.send();
  161.            eventLocked = true;
  162.            req.onreadystatechange = function() {
  163.             if (req.readyState == 4) {
  164.              eventLocked = false;
  165.             }
  166.            }
  167.           }
  168.           canvas.addEventListener('click', function(event) {
  169.            var rect = canvas.getBoundingClientRect();
  170.            var my_x = event.clientX - rect.left;
  171.            var my_y = event.clientY - rect.top;
  172.            handleEvent(my_x, my_y);
  173.            }, false);
  174.           canvas.addEventListener('touchmove', function(event) {
  175.            var rect = canvas.getBoundingClientRect();
  176.            var my_x = event.touches[0].clientX - rect.left;
  177.            var my_y = event.touches[0].clientY - rect.top;
  178.            handleEvent(my_x, my_y);
  179.            }, false);
  180.           function resizeCanvas() {
  181.            var rect = canvas.getBoundingClientRect();
  182.            canvas.width  = window.innerWidth - rect.left;
  183.            canvas.height = window.innerHeight - rect.top - 4;
  184.            drawCanvas();
  185.           }
  186.           window.addEventListener('resize', resizeCanvas, false);
  187.           resizeCanvas();
  188.           document.ontouchmove = function(e) { e.preventDefault() };
  189.          })();
  190.         </script>
  191.          ">
  192.         </iframe>
  193.        </details>
  194.       </button>
  195.       <input type='text'  id='text_a'  name='text_a' size='6' maxlength='6' value='ffffff'  onchange='changedText_a();'                      style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
  196.       <text id='r__'    name='r__'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #ff0000;'>RED</text>
  197.       <input type='range' id='range_r' name='range_r' min='0' max='255'     value='255'    onchange='updateSummaryColor();'                  style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
  198.       <input type='text'  id='text_r'  name='text_r' size='2' maxlength='2' value='ff'      onchange='changedText("range_r", "text_r", 16);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
  199.       <text id='_g_'    name='_g_'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #00ff00;'>GRE</text>
  200.       <input type='range' id='range_g' name='range_g' min='0' max='255'     value='255'    onchange='updateSummaryColor();'                  style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
  201.       <input type='text'  id='text_g'  name='text_g' size='2' maxlength='2' value='ff'      onchange='changedText("range_g", "text_g", 16);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
  202.       <text id='__b'    name='__b'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #0000ff;'>BLU</text>
  203.       <input type='range' id='range_b' name='range_b' min='0' max='255'     value='255'    onchange='updateSummaryColor();'                  style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
  204.       <input type='text'  id='text_b'  name='text_b' size='2' maxlength='2' value='ff'      onchange='changedText("range_b", "text_b", 16);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
  205.       <text id='mod'    name='mod'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #000000;'>MOD</text>
  206.       <input type='range' id='range_m' name='range_m' min='0' max='55'      value='0'      onchange='updateSummaryColor();'                  style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
  207.       <input type='text'  id='text_m'  name='text_m' size='2' maxlength='2' value='00'      onchange='changedText("range_m", "text_m", 10);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
  208.       <div></div>
  209.       <div>
  210.        <button id='effect_00' onclick='setMode(00)' style='height: 100%; width: 100%; margin: 0%; font-family: inherit; font-weight: inherit;'>00. STATIC</button>
  211.       </div>
  212.       <div></div>
  213.       <div></div>
  214.       <div><pre></pre></div>
  215.       <div></div>
  216.      </div>
  217.      <div style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex-direction: column; overflow-y: scroll;'>
  218.       <div style='height: 100%; width: 100%; margin: 0%; justify-content: center; display: grid; grid-template-columns: 19% 19% 19% 19% 19%; row-gap: 1%; column-gap: 1%;'>
  219.        <button id='effect_01' onclick='setMode(01)' style='font-family: inherit; font-weight: inherit;'>01. Blink</button>
  220.        <button id='effect_02' onclick='setMode(02)' style='font-family: inherit; font-weight: inherit;'>02. Breath</button>
  221.        <button id='effect_03' onclick='setMode(03)' style='font-family: inherit; font-weight: inherit;'>03. Color Wipe</button>
  222.        <button id='effect_04' onclick='setMode(04)' style='font-family: inherit; font-weight: inherit;'>04. Color Wipe Inverse</button>
  223.        <button id='effect_05' onclick='setMode(05)' style='font-family: inherit; font-weight: inherit;'>05. Color Wipe Reverse</button>
  224.        <button id='effect_06' onclick='setMode(06)' style='font-family: inherit; font-weight: inherit;'>06. Color Wipe IRverse</button>
  225.        <button id='effect_07' onclick='setMode(07)' style='font-family: inherit; font-weight: inherit;'>07. Color Wipe Random</button>
  226.        <button id='effect_08' onclick='setMode(08)' style='font-family: inherit; font-weight: inherit;'>08. Random Color</button>
  227.        <button id='effect_09' onclick='setMode(09)' style='font-family: inherit; font-weight: inherit;'>09. Single Dynamic</button>
  228.        <button id='effect_10' onclick='setMode(10)' style='font-family: inherit; font-weight: inherit;'>10. Multi Dynamic</button>
  229.        <button id='effect_11' onclick='setMode(11)' style='font-family: inherit; font-weight: inherit;'>11. Rainbow</button>
  230.        <button id='effect_12' onclick='setMode(12)' style='font-family: inherit; font-weight: inherit;'>12. Rainbow Cycle</button>
  231.        <button id='effect_13' onclick='setMode(13)' style='font-family: inherit; font-weight: inherit;'>13. Scan</button>
  232.        <button id='effect_14' onclick='setMode(14)' style='font-family: inherit; font-weight: inherit;'>14. Dual Scan</button>
  233.        <button id='effect_15' onclick='setMode(15)' style='font-family: inherit; font-weight: inherit;'>15. Fade</button>
  234.        <button id='effect_16' onclick='setMode(16)' style='font-family: inherit; font-weight: inherit;'>16. Theater Chase</button>
  235.        <button id='effect_17' onclick='setMode(17)' style='font-family: inherit; font-weight: inherit;'>17. Theater Chase Rainbow</button>
  236.        <button id='effect_18' onclick='setMode(18)' style='font-family: inherit; font-weight: inherit;'>18. Running Lights</button>
  237.        <button id='effect_19' onclick='setMode(19)' style='font-family: inherit; font-weight: inherit;'>19. Twinkle</button>
  238.        <button id='effect_20' onclick='setMode(20)' style='font-family: inherit; font-weight: inherit;'>20. Twinkle Random</button>
  239.        <button id='effect_21' onclick='setMode(21)' style='font-family: inherit; font-weight: inherit;'>21. Twinkle Fade</button>
  240.        <button id='effect_22' onclick='setMode(22)' style='font-family: inherit; font-weight: inherit;'>22. Twinkle Fade Random</button>
  241.        <button id='effect_23' onclick='setMode(23)' style='font-family: inherit; font-weight: inherit;'>23. Sparkle</button>
  242.        <button id='effect_24' onclick='setMode(24)' style='font-family: inherit; font-weight: inherit;'>24. Flash Sparkle</button>
  243.        <button id='effect_25' onclick='setMode(25)' style='font-family: inherit; font-weight: inherit;'>25. Hyper Sparkle</button>
  244.        <button id='effect_26' onclick='setMode(26)' style='font-family: inherit; font-weight: inherit;'>26. Strobe</button>
  245.        <button id='effect_27' onclick='setMode(27)' style='font-family: inherit; font-weight: inherit;'>27. Strobe Rainbow</button>
  246.        <button id='effect_28' onclick='setMode(28)' style='font-family: inherit; font-weight: inherit;'>28. Multi Strobe</button>
  247.        <button id='effect_29' onclick='setMode(29)' style='font-family: inherit; font-weight: inherit;'>29. Blink Rainbow</button>
  248.        <button id='effect_30' onclick='setMode(30)' style='font-family: inherit; font-weight: inherit;'>30. Chase White</button>
  249.        <button id='effect_31' onclick='setMode(31)' style='font-family: inherit; font-weight: inherit;'>31. Chase Color</button>
  250.        <button id='effect_32' onclick='setMode(32)' style='font-family: inherit; font-weight: inherit;'>32. Chase Random</button>
  251.        <button id='effect_33' onclick='setMode(33)' style='font-family: inherit; font-weight: inherit;'>33. Chase Rainbow</button>
  252.        <button id='effect_34' onclick='setMode(34)' style='font-family: inherit; font-weight: inherit;'>34. Chase Flash</button>
  253.        <button id='effect_35' onclick='setMode(35)' style='font-family: inherit; font-weight: inherit;'>35. Chase Flash Random</button>
  254.        <button id='effect_36' onclick='setMode(36)' style='font-family: inherit; font-weight: inherit;'>36. Chase Rainbow White</button>
  255.        <button id='effect_37' onclick='setMode(37)' style='font-family: inherit; font-weight: inherit;'>37. Chase Blackout</button>
  256.        <button id='effect_38' onclick='setMode(38)' style='font-family: inherit; font-weight: inherit;'>38. Chase Blackout Rainbow</button>
  257.        <button id='effect_39' onclick='setMode(39)' style='font-family: inherit; font-weight: inherit;'>39. Color Sweep Random</button>
  258.        <button id='effect_40' onclick='setMode(40)' style='font-family: inherit; font-weight: inherit;'>40. Running Color</button>
  259.        <button id='effect_41' onclick='setMode(41)' style='font-family: inherit; font-weight: inherit;'>41. Running Red Blue</button>
  260.        <button id='effect_42' onclick='setMode(42)' style='font-family: inherit; font-weight: inherit;'>42. Running Random</button>
  261.        <button id='effect_43' onclick='setMode(43)' style='font-family: inherit; font-weight: inherit;'>43. Larson Scanner</button>
  262.        <button id='effect_44' onclick='setMode(44)' style='font-family: inherit; font-weight: inherit;'>44. Comet</button>
  263.        <button id='effect_45' onclick='setMode(45)' style='font-family: inherit; font-weight: inherit;'>45. Fireworks</button>
  264.        <button id='effect_46' onclick='setMode(46)' style='font-family: inherit; font-weight: inherit;'>46. Fireworks Random</button>
  265.        <button id='effect_47' onclick='setMode(47)' style='font-family: inherit; font-weight: inherit;'>47. Merry Christmas</button>
  266.        <button id='effect_48' onclick='setMode(48)' style='font-family: inherit; font-weight: inherit;'>48. Fire Flicker</button>
  267.        <button id='effect_49' onclick='setMode(49)' style='font-family: inherit; font-weight: inherit;'>49. Fire Flicker Soft</button>
  268.        <button id='effect_50' onclick='setMode(50)' style='font-family: inherit; font-weight: inherit;'>50. Fire Flicker Intense</button>
  269.        <button id='effect_51' onclick='setMode(51)' style='font-family: inherit; font-weight: inherit;'>51. Circus Combustus</button>
  270.        <button id='effect_52' onclick='setMode(52)' style='font-family: inherit; font-weight: inherit;'>52. Halloween</button>
  271.        <button id='effect_53' onclick='setMode(53)' style='font-family: inherit; font-weight: inherit;'>53. 2-color Chase</button>
  272.        <button id='effect_54' onclick='setMode(54)' style='font-family: inherit; font-weight: inherit;'>54. 3-color Chase</button>
  273.        <button id='effect_55' onclick='setMode(55)' style='font-family: inherit; font-weight: inherit;'>55. Twinkle Fox</button>
  274.       </div>
  275.      </div>
  276.     </div>
  277.    </body>
  278.   </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement