ws-led.html 4.3 KB

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