Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'>
- <head>
- <title>Neopixel control</title>
- <meta name='mobile-web-app-capable' content='yes' />
- <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes' />
- </head>
- <body style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; font-family: "Courier New", Courier, monospace; font-weight: bold;'>
- <script type='text/javascript'>
- function toggleDetails() {
- var elem = document.getElementById('my_details');
- if (elem.open == true) {
- elem.open = false;
- }
- else {
- elem.open = true;
- }
- }
- var stripLocked = false;
- function updateStrip(val_r, val_g, val_b, val_m) {
- if (stripLocked) {
- return;
- }
- function colourCorrect(v) {
- return Math.round(1023 - ((v * v)/64));
- }
- var params = [
- 'r=' + colourCorrect(val_r),
- 'g=' + colourCorrect(val_g),
- 'b=' + colourCorrect(val_b),
- 'm=' + val_m
- ].join('&');
- var req = new XMLHttpRequest();
- req.open('POST', '?' + params, true);
- req.send();
- stripLocked = true;
- req.onreadystatechange = function() {
- if (req.readyState == 4) {
- stripLocked = false;
- }
- }
- }
- function updateSummaryColor() {
- var val_r = document.getElementById('range_r').value;
- my_r = (parseInt(val_r, 10 )).toString(16).padStart(2, '0');
- my_r_inv = (255 - (parseInt(val_r, 10))).toString(16).padStart(2, '0');
- var val_g = document.getElementById('range_g').value;
- my_g = (parseInt(val_g, 10 )).toString(16).padStart(2, '0');
- my_g_inv = (255 - (parseInt(val_g, 10))).toString(16).padStart(2, '0');
- var val_b = document.getElementById('range_b').value;
- my_b = (parseInt(val_b, 10 )).toString(16).padStart(2, '0');
- my_b_inv = (255 - (parseInt(val_b, 10))).toString(16).padStart(2, '0');
- document.getElementById('text_r').value = my_r;
- document.getElementById('text_g').value = my_g;
- document.getElementById('text_b').value = my_b;
- document.getElementById('text_a').value = my_r + my_g + my_b;
- var my_details = document.getElementById('my_details');
- my_details.style.background = '#' + my_r + my_g + my_b;
- my_details.style.color = '#' + my_r_inv + my_g_inv + my_b_inv;
- var val_m = document.getElementById('range_m').value;
- my_m = (parseInt(val_m, 10 )).toString(10).padStart(2, '0');
- document.getElementById('text_m').value = my_m;
- updateStrip(parseInt(val_r, 10), parseInt(val_g, 10), parseInt(val_b, 10), parseInt(val_m, 10));
- }
- function changedText(range_id, text_id, my_base) {
- document.getElementById(range_id).value = parseInt(document.getElementById(text_id).value, my_base);
- updateSummaryColor();
- }
- function changedText_a() {
- var text_a = document.getElementById('text_a');
- document.getElementById('range_r').value = parseInt(text_a.value.substring(0, 2), 16);
- document.getElementById('range_g').value = parseInt(text_a.value.substring(2, 4), 16);
- document.getElementById('range_b').value = parseInt(text_a.value.substring(4, 6), 16);
- updateSummaryColor();
- }
- function setMode(val_m) {
- document.getElementById('range_m').value = val_m;
- updateSummaryColor();
- }
- // window.onload = updateSummaryColor;
- </script>
- <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%;'>
- <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%;'>
- <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>
- <button id='my_toggler' onclick='toggleDetails()' style='width: 100%; margin: 0%; font-family: inherit; font-weight: inherit;'>
- <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;'>
- <summary id='my_summary'>Palette</summary>
- <iframe style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;' srcdoc="
- <body style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'>
- <canvas id='colorspace' style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'></canvas>
- </body>
- <script type='text/javascript'>
- (function () {
- var canvas = document.getElementById('colorspace');
- var ctx = canvas.getContext('2d');
- function drawCanvas() {
- var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0);
- for (var i = 0; i <= 360; i += 10) {
- colours.addColorStop((i/360), 'hsl(' + i + ', 100%, 50%)');
- }
- ctx.fillStyle = colours;
- ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
- var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
- luminance.addColorStop(0, '#ffffff');
- luminance.addColorStop(0.05, '#ffffff');
- luminance.addColorStop(0.5, 'rgba(0,0,0,0)');
- luminance.addColorStop(0.95, '#000000');
- luminance.addColorStop(1, '#000000');
- ctx.fillStyle = luminance;
- ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
- }
- var eventLocked = false;
- function handleEvent(clientX, clientY) {
- if (eventLocked) {
- return;
- }
- function colourCorrect(v) {
- return Math.round(1023 - ((v * v)/64));
- }
- var data = ctx.getImageData(clientX, clientY, 1, 1).data;
- my_r = (parseInt(data[0], 10 )).toString(16).padStart(2, '0');
- my_r_inv = (255 - (parseInt(data[0], 10))).toString(16).padStart(2, '0');
- my_g = (parseInt(data[1], 10 )).toString(16).padStart(2, '0');
- my_g_inv = (255 - (parseInt(data[1], 10))).toString(16).padStart(2, '0');
- my_b = (parseInt(data[2], 10 )).toString(16).padStart(2, '0');
- my_b_inv = (255 - (parseInt(data[2], 10))).toString(16).padStart(2, '0');
- function drawCoordinates(x,y) {
- var ctx = document.getElementById('colorspace').getContext('2d');
- var pointSize = 3;
- ctx.fillStyle = '#' + my_r_inv + my_g_inv + my_b_inv;
- ctx.beginPath();
- ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
- ctx.fill();
- }
- drawCanvas();
- drawCoordinates(clientX, clientY);
- var my_details = parent.document.getElementById('my_details');
- my_details.style.background = '#' + my_r + my_g + my_b;
- my_details.style.color = '#' + my_r_inv + my_g_inv + my_b_inv;
- function updateSliders(val_r, val_g, val_b) {
- parent.document.getElementById('range_r').value = val_r;
- parent.document.getElementById('range_g').value = val_g;
- parent.document.getElementById('range_b').value = val_b;
- parent.document.getElementById('text_r').value = (parseInt(val_r, 10 )).toString(16).padStart(2, '0');
- parent.document.getElementById('text_g').value = (parseInt(val_g, 10 )).toString(16).padStart(2, '0');
- parent.document.getElementById('text_b').value = (parseInt(val_b, 10 )).toString(16).padStart(2, '0');
- parent.document.getElementById('text_a').value = parent.document.getElementById('text_r').value +
- parent.document.getElementById('text_g').value +
- parent.document.getElementById('text_b').value;
- }
- updateSliders(parseInt(data[0], 10), parseInt(data[1], 10), parseInt(data[2], 10));
- var params = [
- 'r=' + colourCorrect(data[0]),
- 'g=' + colourCorrect(data[1]),
- 'b=' + colourCorrect(data[2]),
- 'm=' + parseInt(parent.document.getElementById('range_m').value, 10)
- ].join('&');
- var req = new XMLHttpRequest();
- req.open('POST', '?' + params, true);
- req.send();
- eventLocked = true;
- req.onreadystatechange = function() {
- if (req.readyState == 4) {
- eventLocked = false;
- }
- }
- }
- canvas.addEventListener('click', function(event) {
- var rect = canvas.getBoundingClientRect();
- var my_x = event.clientX - rect.left;
- var my_y = event.clientY - rect.top;
- handleEvent(my_x, my_y);
- }, false);
- canvas.addEventListener('touchmove', function(event) {
- var rect = canvas.getBoundingClientRect();
- var my_x = event.touches[0].clientX - rect.left;
- var my_y = event.touches[0].clientY - rect.top;
- handleEvent(my_x, my_y);
- }, false);
- function resizeCanvas() {
- var rect = canvas.getBoundingClientRect();
- canvas.width = window.innerWidth - rect.left;
- canvas.height = window.innerHeight - rect.top - 4;
- drawCanvas();
- }
- window.addEventListener('resize', resizeCanvas, false);
- resizeCanvas();
- document.ontouchmove = function(e) { e.preventDefault() };
- })();
- </script>
- ">
- </iframe>
- </details>
- </button>
- <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;'>
- <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>
- <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;'>
- <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;'>
- <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>
- <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;'>
- <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;'>
- <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>
- <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;'>
- <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;'>
- <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>
- <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;'>
- <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;'>
- <div></div>
- <div>
- <button id='effect_00' onclick='setMode(00)' style='height: 100%; width: 100%; margin: 0%; font-family: inherit; font-weight: inherit;'>00. STATIC</button>
- </div>
- <div></div>
- <div></div>
- <div><pre></pre></div>
- <div></div>
- </div>
- <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;'>
- <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%;'>
- <button id='effect_01' onclick='setMode(01)' style='font-family: inherit; font-weight: inherit;'>01. Blink</button>
- <button id='effect_02' onclick='setMode(02)' style='font-family: inherit; font-weight: inherit;'>02. Breath</button>
- <button id='effect_03' onclick='setMode(03)' style='font-family: inherit; font-weight: inherit;'>03. Color Wipe</button>
- <button id='effect_04' onclick='setMode(04)' style='font-family: inherit; font-weight: inherit;'>04. Color Wipe Inverse</button>
- <button id='effect_05' onclick='setMode(05)' style='font-family: inherit; font-weight: inherit;'>05. Color Wipe Reverse</button>
- <button id='effect_06' onclick='setMode(06)' style='font-family: inherit; font-weight: inherit;'>06. Color Wipe IRverse</button>
- <button id='effect_07' onclick='setMode(07)' style='font-family: inherit; font-weight: inherit;'>07. Color Wipe Random</button>
- <button id='effect_08' onclick='setMode(08)' style='font-family: inherit; font-weight: inherit;'>08. Random Color</button>
- <button id='effect_09' onclick='setMode(09)' style='font-family: inherit; font-weight: inherit;'>09. Single Dynamic</button>
- <button id='effect_10' onclick='setMode(10)' style='font-family: inherit; font-weight: inherit;'>10. Multi Dynamic</button>
- <button id='effect_11' onclick='setMode(11)' style='font-family: inherit; font-weight: inherit;'>11. Rainbow</button>
- <button id='effect_12' onclick='setMode(12)' style='font-family: inherit; font-weight: inherit;'>12. Rainbow Cycle</button>
- <button id='effect_13' onclick='setMode(13)' style='font-family: inherit; font-weight: inherit;'>13. Scan</button>
- <button id='effect_14' onclick='setMode(14)' style='font-family: inherit; font-weight: inherit;'>14. Dual Scan</button>
- <button id='effect_15' onclick='setMode(15)' style='font-family: inherit; font-weight: inherit;'>15. Fade</button>
- <button id='effect_16' onclick='setMode(16)' style='font-family: inherit; font-weight: inherit;'>16. Theater Chase</button>
- <button id='effect_17' onclick='setMode(17)' style='font-family: inherit; font-weight: inherit;'>17. Theater Chase Rainbow</button>
- <button id='effect_18' onclick='setMode(18)' style='font-family: inherit; font-weight: inherit;'>18. Running Lights</button>
- <button id='effect_19' onclick='setMode(19)' style='font-family: inherit; font-weight: inherit;'>19. Twinkle</button>
- <button id='effect_20' onclick='setMode(20)' style='font-family: inherit; font-weight: inherit;'>20. Twinkle Random</button>
- <button id='effect_21' onclick='setMode(21)' style='font-family: inherit; font-weight: inherit;'>21. Twinkle Fade</button>
- <button id='effect_22' onclick='setMode(22)' style='font-family: inherit; font-weight: inherit;'>22. Twinkle Fade Random</button>
- <button id='effect_23' onclick='setMode(23)' style='font-family: inherit; font-weight: inherit;'>23. Sparkle</button>
- <button id='effect_24' onclick='setMode(24)' style='font-family: inherit; font-weight: inherit;'>24. Flash Sparkle</button>
- <button id='effect_25' onclick='setMode(25)' style='font-family: inherit; font-weight: inherit;'>25. Hyper Sparkle</button>
- <button id='effect_26' onclick='setMode(26)' style='font-family: inherit; font-weight: inherit;'>26. Strobe</button>
- <button id='effect_27' onclick='setMode(27)' style='font-family: inherit; font-weight: inherit;'>27. Strobe Rainbow</button>
- <button id='effect_28' onclick='setMode(28)' style='font-family: inherit; font-weight: inherit;'>28. Multi Strobe</button>
- <button id='effect_29' onclick='setMode(29)' style='font-family: inherit; font-weight: inherit;'>29. Blink Rainbow</button>
- <button id='effect_30' onclick='setMode(30)' style='font-family: inherit; font-weight: inherit;'>30. Chase White</button>
- <button id='effect_31' onclick='setMode(31)' style='font-family: inherit; font-weight: inherit;'>31. Chase Color</button>
- <button id='effect_32' onclick='setMode(32)' style='font-family: inherit; font-weight: inherit;'>32. Chase Random</button>
- <button id='effect_33' onclick='setMode(33)' style='font-family: inherit; font-weight: inherit;'>33. Chase Rainbow</button>
- <button id='effect_34' onclick='setMode(34)' style='font-family: inherit; font-weight: inherit;'>34. Chase Flash</button>
- <button id='effect_35' onclick='setMode(35)' style='font-family: inherit; font-weight: inherit;'>35. Chase Flash Random</button>
- <button id='effect_36' onclick='setMode(36)' style='font-family: inherit; font-weight: inherit;'>36. Chase Rainbow White</button>
- <button id='effect_37' onclick='setMode(37)' style='font-family: inherit; font-weight: inherit;'>37. Chase Blackout</button>
- <button id='effect_38' onclick='setMode(38)' style='font-family: inherit; font-weight: inherit;'>38. Chase Blackout Rainbow</button>
- <button id='effect_39' onclick='setMode(39)' style='font-family: inherit; font-weight: inherit;'>39. Color Sweep Random</button>
- <button id='effect_40' onclick='setMode(40)' style='font-family: inherit; font-weight: inherit;'>40. Running Color</button>
- <button id='effect_41' onclick='setMode(41)' style='font-family: inherit; font-weight: inherit;'>41. Running Red Blue</button>
- <button id='effect_42' onclick='setMode(42)' style='font-family: inherit; font-weight: inherit;'>42. Running Random</button>
- <button id='effect_43' onclick='setMode(43)' style='font-family: inherit; font-weight: inherit;'>43. Larson Scanner</button>
- <button id='effect_44' onclick='setMode(44)' style='font-family: inherit; font-weight: inherit;'>44. Comet</button>
- <button id='effect_45' onclick='setMode(45)' style='font-family: inherit; font-weight: inherit;'>45. Fireworks</button>
- <button id='effect_46' onclick='setMode(46)' style='font-family: inherit; font-weight: inherit;'>46. Fireworks Random</button>
- <button id='effect_47' onclick='setMode(47)' style='font-family: inherit; font-weight: inherit;'>47. Merry Christmas</button>
- <button id='effect_48' onclick='setMode(48)' style='font-family: inherit; font-weight: inherit;'>48. Fire Flicker</button>
- <button id='effect_49' onclick='setMode(49)' style='font-family: inherit; font-weight: inherit;'>49. Fire Flicker Soft</button>
- <button id='effect_50' onclick='setMode(50)' style='font-family: inherit; font-weight: inherit;'>50. Fire Flicker Intense</button>
- <button id='effect_51' onclick='setMode(51)' style='font-family: inherit; font-weight: inherit;'>51. Circus Combustus</button>
- <button id='effect_52' onclick='setMode(52)' style='font-family: inherit; font-weight: inherit;'>52. Halloween</button>
- <button id='effect_53' onclick='setMode(53)' style='font-family: inherit; font-weight: inherit;'>53. 2-color Chase</button>
- <button id='effect_54' onclick='setMode(54)' style='font-family: inherit; font-weight: inherit;'>54. 3-color Chase</button>
- <button id='effect_55' onclick='setMode(55)' style='font-family: inherit; font-weight: inherit;'>55. Twinkle Fox</button>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement