led-matrix.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>LED Matrix</title>
  6. <style>
  7. #colorPicker {
  8. padding: 4px;
  9. background: #000;
  10. }
  11. #ledMatrix {
  12. width: 320px;
  13. height: 192px;
  14. padding: 16px;
  15. -webkit-border-radius:8px;
  16. -moz-border-radius: 8px;
  17. border-radius: 8px;
  18. background: #C0C0C0;
  19. }
  20. .Table {
  21. display: table;
  22. margin: 2px;
  23. }
  24. .Row {
  25. display: table-row;
  26. }
  27. .Cell {
  28. display: table-cell;
  29. }
  30. .Color {
  31. width: 20px;
  32. height: 20px;
  33. margin: 2px;
  34. }
  35. .Circle {
  36. width: 16px;
  37. height: 16px;
  38. margin: 8px;
  39. -webkit-border-radius: 8px;
  40. -moz-border-radius: 8px;
  41. border-radius: 8px;
  42. background: #333;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <h1>LED Matrix</h1>
  48. <div class="Table">
  49. <div class="Row">
  50. <div class="Cell">
  51. Color: <input type="text" id="colorText" size="10" value="#FFF" disabled>
  52. <div id="colorPicker" class="Table"></div>
  53. </div>
  54. <div class="Cell">
  55. <button id="btnSend">Send dots color to ESP-MINTIA</button>
  56. <div id="ledMatrix" class="Table"></div>
  57. </div>
  58. </div>
  59. </div>
  60. <div id="dataOutput"></div>
  61. <div id="txtResponse"></div>
  62. <script>
  63. var w = 10;
  64. var h = 6;
  65. var colorMin = 3;
  66. var colorMax = 15;
  67. var xhr;
  68. function getRGB(e) {
  69. return window.getComputedStyle(e).backgroundColor.match(/\d+/g).map(function(a){ return Math.round(parseInt(a, 10) / 16.5); });
  70. }
  71. function getColor(e) {
  72. var ct = document.getElementById("colorText");
  73. var rgb = getRGB(e);
  74. ct.value = "#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
  75. ct.style.backgroundColor = ct.value;
  76. }
  77. function setColor(e) {
  78. var ct = document.getElementById("colorText");
  79. e.style.backgroundColor = ct.value;
  80. sendData(e);
  81. }
  82. function sendData() {
  83. var o = document.getElementById("dataOutput");
  84. var text = "";
  85. for (var i = 0; i < (h * w); i++) {
  86. var d = document.getElementById("dot_" + i);
  87. var rgb = getRGB(d);
  88. text += String.fromCharCode(rgb[1] - colorMin);
  89. text += String.fromCharCode(rgb[0] - colorMin);
  90. text += String.fromCharCode(rgb[2] - colorMin);
  91. }
  92. text = "data=" + escape(text)
  93. o.innerHTML = text;
  94. if (!xhr) xhr = new XMLHttpRequest();
  95. xhr.open("POST", "led-matrix.lc", true);
  96. xhr.onreadystatechange=function() {
  97. if (xhr.readyState === 4) {
  98. var r = document.getElementById("txtResponse");
  99. r.innerHTML = xhr.responseText;
  100. }
  101. }
  102. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  103. xhr.send(text);
  104. }
  105. var cp = document.getElementById("colorPicker");
  106. var colorHtml = "";
  107. var i = 0;
  108. for (var r = colorMin; r <= colorMax; r+=6) {
  109. for (var g = colorMin; g <= colorMax; g+=6) {
  110. if ((g % 6) == 3) colorHtml += '<div calss="Row">';
  111. for (var b = colorMin; b <= colorMax; b+=2) {
  112. i++;
  113. colorHtml += '<div class="Cell"><div class="Color" id="color' + i + '" style="background:#' + r.toString(16) + g.toString(16) + b.toString(16) + ';"></div></div>';
  114. }
  115. if ((g % 6) == 3) colorHtml += '</div>';
  116. }
  117. }
  118. cp.innerHTML = colorHtml;
  119. for (var j = 1; j <= i; j++) {
  120. var c = document.getElementById("color" + j);
  121. c.addEventListener("click", function(e) {
  122. getColor(e.srcElement);
  123. });
  124. }
  125. var lm = document.getElementById("ledMatrix");
  126. var dotHtml = "";
  127. for (var i = 0; i < (h * w); i++) {
  128. if ((i % w) == 0) dotHtml += '<div calss="Row">';
  129. dotHtml += '<div class="Cell"><div class="Circle" id="dot_' + i + '"></div></div>';
  130. if ((i % w) == (w - 1)) dotHtml += '</div>';
  131. }
  132. lm.innerHTML = dotHtml;
  133. for (var i = 0; i < (h * w); i++) {
  134. var d = document.getElementById("dot_" + i);
  135. d.addEventListener("click", function(e) {
  136. setColor(e.srcElement);
  137. });
  138. }
  139. document.getElementById("btnSend").addEventListener("click", sendData);
  140. </script>
  141. </body>
  142. </html>