API tools faq
paste
Advertisement
MrRockchip

super_s_html

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