123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=0.67">
- <title>WebSocket LED Matrix</title>
- <style>
- #colorPicker {
- padding: 4px;
- background: #000;
- }
- #ledMatrix {
- width: 320px;
- height: 192px;
- padding: 16px;
- -webkit-border-radius:8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
- background: #C0C0C0;
- }
- .Table {
- display: table;
- margin: 2px;
- }
- .Row {
- display: table-row;
- }
- .Cell {
- display: table-cell;
- }
- .Color {
- width: 20px;
- height: 20px;
- margin: 2px;
- }
- .Circle {
- width: 16px;
- height: 16px;
- margin: 8px;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
- background: #333;
- }
- </style>
- </head>
- <body>
- <h1>WebSocket LED Matrix</h1>
- <div class="Table">
- <div class="Row">
- <div class="Cell">
- Color: <input type="text" id="colorText" size="10" value="#FFF" disabled>
- <div id="colorPicker" class="Table"></div>
- </div>
- <div class="Cell">
- <button id="btnSend">Send dots color to ESP-MINTIA</button>
- <div id="ledMatrix" class="Table"></div>
- </div>
- </div>
- </div>
- <div id="dataOutput"></div>
- <div id="txtResponse"></div>
- <script>
- var w = 10;
- var h = 6;
- var colorMin = 3;
- var colorMax = 15;
- var wsUri = "ws://" + location.hostname + "/ws-led.lc";
- var websocket;
- var wsReady = false;
- function getRGB(e) {
- return window.getComputedStyle(e).backgroundColor.match(/\d+/g).map(function(a){ return Math.round(parseInt(a, 10) / 16.5); });
- }
- function getColor(e) {
- var ct = document.getElementById("colorText");
- var rgb = getRGB(e);
- ct.value = "#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
- ct.style.backgroundColor = ct.value;
- }
- function setColor(e) {
- var ct = document.getElementById("colorText");
- e.style.backgroundColor = ct.value;
- sendData(e);
- }
- function initWebSocket() {
- websocket = new WebSocket(wsUri);
- websocket.onopen = function(evt) { wsReady = true; };
- websocket.onclose = function(evt) { websocket = null; wsReady = false; };
- websocket.onmessage = function(evt) { var o = document.getElementById("dataOutput"); o.innerHTML = evt.data; };
- websocket.onerror = function(evt) { var o = document.getElementById("dataOutput"); o.innerHTML = evt.data; websocket = null; wsReady = false; };
- }
- function sendData() {
- var text = "";
- for (var i = 0; i < (h * w); i++) {
- var d = document.getElementById("dot_" + i);
- var rgb = getRGB(d);
- text += String.fromCharCode(rgb[1] - colorMin);
- text += String.fromCharCode(rgb[0] - colorMin);
- text += String.fromCharCode(rgb[2] - colorMin);
- }
- if (!websocket) {
- initWebSocket();
- }
- if (wsReady) {
- websocket.send(text, { binary: true });
- }
- }
- function initColorPicker() {
- var cp = document.getElementById("colorPicker");
- var colorHtml = "";
- var i = 0;
- for (var r = colorMin; r <= colorMax; r+=6) {
- for (var g = colorMin; g <= colorMax; g+=6) {
- if ((g % 6) == 3) colorHtml += '<div calss="Row">';
- for (var b = colorMin; b <= colorMax; b+=2) {
- i++;
- colorHtml += '<div class="Cell"><div class="Color" id="color' + i + '" style="background:#' + r.toString(16) + g.toString(16) + b.toString(16) + ';"></div></div>';
- }
- if ((g % 6) == 3) colorHtml += '</div>';
- }
- }
- cp.innerHTML = colorHtml;
- for (var j = 1; j <= i; j++) {
- var c = document.getElementById("color" + j);
- c.addEventListener("click", function(e) {
- getColor(e.target||e.srcElement);
- });
- }
- }
- function initLedMatrix() {
- var lm = document.getElementById("ledMatrix");
- var dotHtml = "";
- for (var i = 0; i < (h * w); i++) {
- if ((i % w) == 0) dotHtml += '<div calss="Row">';
- dotHtml += '<div class="Cell"><div class="Circle" id="dot_' + i + '"></div></div>';
- if ((i % w) == (w - 1)) dotHtml += '</div>';
- }
- lm.innerHTML = dotHtml;
- for (var i = 0; i < (h * w); i++) {
- var d = document.getElementById("dot_" + i);
- d.addEventListener("click", function(e) {
- setColor(e.target||e.srcElement);
- });
- }
- }
- initWebSocket();
- initColorPicker();
- initLedMatrix();
- document.getElementById("btnSend").addEventListener("click", sendData);
- </script>
- </body>
- </html>
|