diff options
author | 2017-07-05 17:27:34 +0100 | |
---|---|---|
committer | 2017-07-05 17:27:34 +0100 | |
commit | 0206314395c7dcf7b51311e635588778f6d9cca3 (patch) | |
tree | ab242d5e87d9c1f2578edda08c7f150b841831e6 /web | |
parent | 2924e3c17470291a520492d68189dda16e99e2a4 (diff) |
Add an external panel for the Ensoniq VFX family of keyboards, with a websocket interface and an HTML/Javascript implementation that can be served over HTTP.
Diffstat (limited to 'web')
-rw-r--r-- | web/esqpanel/vfx/FrontPanel.html | 25 | ||||
-rw-r--r-- | web/esqpanel/vfx/FrontPanel.js | 1209 |
2 files changed, 1234 insertions, 0 deletions
diff --git a/web/esqpanel/vfx/FrontPanel.html b/web/esqpanel/vfx/FrontPanel.html new file mode 100644 index 00000000000..bdf99c78167 --- /dev/null +++ b/web/esqpanel/vfx/FrontPanel.html @@ -0,0 +1,25 @@ +<html> +<head> + <title>Front Panel</title> +</head> +<body onload="prepare();" bgcolor="black" class="notranslate""> + +</body> + +<script language="javascript" src="FrontPanel.js"></script> +<script language="javascript"> +function wsroot() { + var l = window.location.href; + return (l.startsWith("https") ? "wss" : "ws") + l.substring(l.indexOf(':'), l.lastIndexOf('/')) + "/socket"; +} + +function prepare() { + var panelUrl = wsroot(); + var panel = new fp.Panel(panelUrl, '$keyboard$', $version$); + document.body.appendChild(panel.container); + panel.display.clear(); + panel.display.showString(0, 0, "Waiting to connect..."); +} +</script> + +</html>
\ No newline at end of file diff --git a/web/esqpanel/vfx/FrontPanel.js b/web/esqpanel/vfx/FrontPanel.js new file mode 100644 index 00000000000..69e1b67ac8f --- /dev/null +++ b/web/esqpanel/vfx/FrontPanel.js @@ -0,0 +1,1209 @@ +var fp = (function() { + var my = {}; + + if ('indexOf' in Array.prototype) { + my.indexOf = function(array, item) { + return array.indexOf(item); + } + } else { + my.indexOf = function(array, item) { + for (var i = 0; i < array.length; i++) { + if (array[i] == item) { + return i; + } + } + return -1; + } + } + + my.Shade = { + LIGHT: "#bbbbbb", + MEDIUM: "#777777", + DARK: "#333333" + }; + + my.LabelPosition = { + ABOVE: 1, + ABOVE_CENTERED: 2, + BELOW: 3 + }; + + my.Light = { + OFF: 0, + ON: 1, + BLINK: 2 + }; + + my.DisplayBlinkState = { + OFF: 0, + UNDERLINE: 1, + CHAR: 2 + }; + + my.Keyboard = { + VFX: 'VFX', + VFX_SD: 'VFX-SD', + SD1: 'SD-1', + SD1_32: 'SD-1/32' + } + + my.segmentPaths = [ + "M1053 705 c-43 19 -57 47 -43 89 23 70 87 106 189 106 38 0 70 8 106 25 79 39 111 41 183 11 80 -34 119 -33 205 6 68 31 78 33 192 33 116 0 123 -1 195 -35 67 -31 87 -35 182 -40 101 -5 108 -7 137 -34 40 -38 50 -89 25 -118 -11 -11 -37 -29 -59 -39 -37 -17 -79 -19 -660 -18 -505 0 -626 2 -652 14z", + "M2519 963 c-20 13 -46 47 -63 81 -28 53 -31 69 -37 199 -7 155 -20 211 -75 319 -50 99 -68 199 -54 301 23 167 52 217 126 217 37 0 47 -5 77 -40 53 -63 74 -151 97 -410 5 -63 16 -167 24 -230 42 -326 45 -374 21 -419 -24 -47 -63 -54 -116 -18z", + "M2144 1089 c-59 43 -88 78 -135 161 -23 41 -75 112 -115 156 -108 119 -132 188 -136 386 -3 107 -1 118 17 132 11 9 28 16 37 16 25 0 92 -63 154 -145 29 -39 100 -129 158 -200 58 -72 113 -144 121 -162 19 -40 32 -106 41 -214 5 -68 3 -91 -9 -116 -28 -52 -74 -57 -133 -14z", + "M1515 1089 c-70 43 -69 41 -77 285 -3 121 -11 259 -18 306 -6 47 -13 142 -17 211 -6 141 5 183 54 195 78 20 124 -53 135 -216 13 -192 26 -274 61 -385 77 -245 76 -359 -3 -400 -39 -20 -99 -19 -135 4z", + "M1108 1087 c-32 36 -42 71 -50 163 -5 52 -11 122 -14 156 -6 55 -1 75 41 200 53 152 59 165 87 183 16 10 24 9 44 -4 31 -20 43 -51 55 -135 5 -36 17 -97 26 -137 14 -63 15 -81 3 -145 -37 -205 -43 -222 -88 -271 -30 -32 -80 -37 -104 -10z", + "M797 938 c-32 36 -44 102 -67 377 -19 222 -30 337 -42 428 -17 138 12 277 67 313 55 36 123 -6 173 -109 52 -106 54 -167 12 -292 -27 -78 -30 -102 -30 -205 0 -79 7 -147 20 -210 11 -51 20 -111 20 -133 0 -123 -97 -231 -153 -169z", + "M1940 2120 c-14 4 -56 8 -94 9 -80 1 -141 26 -181 73 -32 38 -32 78 1 118 48 56 84 67 249 74 146 7 151 7 195 -17 52 -27 99 -89 100 -130 0 -33 -31 -81 -63 -98 -27 -15 -125 -38 -157 -38 -14 1 -36 5 -50 9z", + "M1099 2129 c-51 10 -110 43 -132 73 -28 37 -16 88 32 138 36 38 41 40 95 40 64 0 115 -22 159 -68 32 -34 46 -97 28 -130 -23 -43 -109 -68 -182 -53z", + "M2279 2467 c-56 50 -69 80 -80 186 -6 51 -16 127 -24 169 -14 83 -10 123 25 213 36 95 44 146 31 203 -14 66 -14 205 -1 254 12 41 70 98 100 98 52 0 75 -100 100 -435 6 -77 22 -241 36 -364 28 -255 27 -268 -37 -325 -54 -49 -94 -49 -150 1z", + "M1701 2579 c-24 24 -40 122 -44 261 -2 95 1 112 27 178 15 41 44 94 63 119 19 25 57 92 84 149 58 121 94 164 137 164 38 0 78 -32 90 -73 19 -60 22 -181 7 -238 -20 -77 -116 -277 -180 -376 -30 -46 -66 -106 -80 -133 -35 -69 -69 -86 -104 -51z", + "M1372 2456 c-40 28 -52 66 -52 166 0 92 -27 323 -55 468 -21 108 -19 246 3 290 21 44 59 65 96 56 47 -12 123 -92 146 -152 28 -77 28 -203 -1 -281 -21 -55 -22 -62 -10 -218 6 -88 14 -178 16 -201 6 -54 -11 -110 -38 -129 -28 -19 -76 -19 -105 1z", + "M1067 2721 c-19 11 -122 161 -156 228 -42 81 -51 129 -51 276 0 113 3 147 18 175 39 80 102 35 199 -141 28 -52 56 -112 62 -134 6 -22 11 -114 11 -205 0 -134 -3 -170 -16 -188 -16 -24 -39 -27 -67 -11z", + "M695 2447 c-45 23 -76 54 -91 90 -8 18 -18 101 -24 190 -18 298 -21 328 -52 516 -26 164 -29 194 -18 235 23 91 68 107 130 44 46 -45 59 -86 71 -217 5 -55 13 -143 18 -195 11 -120 37 -199 101 -302 48 -78 50 -85 50 -153 0 -95 -15 -143 -60 -187 -42 -42 -75 -48 -125 -21z", + "M1550 3539 c-14 5 -57 24 -97 44 -107 54 -134 56 -218 12 -79 -42 -105 -41 -170 3 -35 23 -53 28 -145 33 -131 8 -181 24 -194 62 -14 39 9 78 54 94 49 17 1278 18 1315 1 51 -23 42 -87 -18 -132 -21 -15 -48 -21 -115 -26 -77 -4 -94 -9 -140 -38 -85 -55 -195 -76 -272 -53z", + "M2619 3393 c-19 12 -45 43 -59 67 -36 65 -36 183 0 255 48 93 136 107 207 33 60 -61 76 -152 48 -257 -17 -63 -45 -97 -94 -111 -52 -14 -64 -13 -102 13z", + "M512 4422 c-38 8 -46 15 -63 51 -37 83 -18 153 51 181 36 14 127 16 863 16 642 0 827 -3 847 -13 16 -8 31 -31 44 -64 16 -46 17 -57 5 -94 -8 -24 -26 -51 -42 -63 -28 -21 -34 -21 -845 -23 -501 0 -834 3 -860 9z", + ]; + my.charWidth = 342; + my.charHeight = 572; + my.segmentScale = 0.1; + + my.createElement = function(tag) { + return document.createElementNS("http://www.w3.org/2000/svg", tag); + } + + my.showElement = function(e) { + e.removeAttribute("display"); + } + + my.hideElement = function(e) { + e.setAttribute("display", "none"); + } + + my.svg = function() { + if (my._svg == null) { + my._svg = document.getElementsByTagName('svg')[0]; + } + return my._svg; + } + + my.pt = function() { + if (my._pt == null) { + my._pt = my.svg().createSVGPoint(); + } + return my._pt; + } + + my.pointIn = function(el, x, y) { + var pt = my.pt(); + pt.x = x; pt.y = y; + return pt.matrixTransform(el.getScreenCTM().inverse()); + } + + my.Display = function(parent, rows, cols) { + this.cells = new Array(); + this.width = my.charWidth * cols; + this.height = my.charHeight * rows; + this.blinkPhase = true; + + var templateCell = my.createElement("g"); + templateCell.setAttribute('transform', 'scale(' + my.segmentScale + ',' + my.segmentScale + ')'); + for (var i = 0; i < my.segmentPaths.length; i++) { + var segmentPath = my.createElement("path"); + segmentPath.setAttribute('d', my.segmentPaths[i]); + templateCell.appendChild(segmentPath); + } + + for (var row = 0; row < 2; row++) { + this.cells[row] = new Array(); + for (var col = 0; col < 40; col++) { + this.cells[row][col] = { + char: ' ', + blink: false, + underline: false, + segments: new Array(), + }; + var charCell = templateCell.cloneNode(true); + var ctm = "translate(" + col * my.charWidth + ", " + row * my.charHeight + ") " + charCell.getAttribute("transform"); + charCell.setAttribute("transform", ctm); + parent.appendChild(charCell); + + var segs = charCell.getElementsByTagName("path"); + for (var cc = 0; cc < segs.length; cc++) { + this.cells[row][col].segments[cc] = segs[cc]; + } + } + } + + parent.setAttribute("viewBox", "0 0 " + this.width + " " + this.height); + } + + my.Display.segmentsByCharacter = [ + 0x0000, // 0000 0000 0000 0000 SPACE + 0x7927, // 0011 1001 0010 0111 '0.' + 0x0028, // 0000 0000 0010 1000 '"' + 0x4408, // 0000 0100 0000 1000 '1.' + 0x25e9, // 0010 0101 1110 1001 '$' + 0x70c3, // 0011 0000 1100 0011 '2.' + 0x0000, // 0000 0000 0000 0000 '&' + 0x0010, // 0000 0000 0001 0000 ''' + 0x61c3, // 0010 0001 1100 0011 '3.' + 0x41e2, // 0000 0001 1110 0010 '4.' + 0x0edc, // 0000 1110 1101 1100 '*' + 0x04c8, // 0000 0100 1100 1000 '+' + 0x0000, // 0000 0000 0000 0000 ',' + 0x00c0, // 0000 0000 1100 0000 '-' + 0x4000, // 0100 0000 0000 0000 '.' + 0x0804, // 0000 1000 0000 0100 '/' + 0x3927, // 0011 1001 0010 0111 '0' + 0x0408, // 0000 0100 0000 1000 '1' + 0x30c3, // 0011 0000 1100 0011 '2' + 0x21c3, // 0010 0001 1100 0011 '3' + 0x01e2, // 0000 0001 1110 0010 '4' + 0x21e1, // 0010 0001 1110 0001 '5' + 0x31e1, // 0011 0001 1110 0001 '6' + 0x0103, // 0000 0001 0000 0011 '7' + 0x31e3, // 0011 0001 1110 0011 '8' + 0x21e3, // 0010 0001 1110 0011 '9' + 0x0000, // 0000 0000 0000 0000 ':' + 0x71e1, // 0011 0001 1110 0001 '6.' + 0x0204, // 0000 0010 0000 0100 '(' + 0x20c0, // 0010 0000 1100 0000 '=' + 0x0810, // 0000 1000 0001 0000 ')' + 0x0000, // 0000 0000 0000 0000 '?' + 0x3583, // 0011 0101 1000 0011 '@' + 0x11e3, // 0001 0001 1110 0011 'A' + 0x254b, // 0010 0101 0100 1011 'B' + 0x3021, // 0011 0000 0010 0001 'C' + 0x250b, // 0010 0101 0000 1011 'D' + 0x30e1, // 0011 0000 1110 0001 'E' + 0x10e1, // 0001 0000 1110 0001 'F' + 0x3161, // 0011 0001 0110 0001 'G' + 0x11e2, // 0001 0001 1110 0010 'H' + 0x2409, // 0010 0100 0000 1001 'I' + 0x3102, // 0011 0001 0000 0010 'J' + 0x12a4, // 0001 0010 1010 0100 'K' + 0x3020, // 0011 0000 0010 0000 'L' + 0x1136, // 0001 0001 0011 0110 'M' + 0x1332, // 0001 0011 0011 0010 'N' + 0x3123, // 0011 0001 0010 0011 'O' + 0x10e3, // 0001 0000 1110 0011 'P' + 0x3323, // 0011 0011 0010 0011 'Q' + 0x12e3, // 0001 0010 1110 0011 'R' + 0x21e1, // 0010 0001 1110 0001 'S' + 0x0409, // 0000 0100 0000 1001 'T' + 0x3122, // 0011 0001 0010 0010 'U' + 0x1824, // 0001 1000 0010 0100 'V' + 0x1b22, // 0001 1011 0010 0010 'W' + 0x0a14, // 0000 1010 0001 0100 'X' + 0x0414, // 0000 0100 0001 0100 'Y' + 0x2805, // 0010 1000 0000 0101 'Z' + 0x3021, // 0011 0000 0010 0001 '[' + 0x71e3, // 0011 0001 1110 0011 '8.' + 0x2103, // 0010 0001 0000 0011 ']' + 0x0a00, // 0000 1010 0000 0000 '^' + 0x2000, // 0010 0000 0000 0000 '_' + 0x0010, // 0000 0000 0001 0000 '`' + 0x11e3, // 0001 0001 1110 0011 'a' + 0x254b, // 0010 0101 0100 1011 'b' + 0x3021, // 0011 0000 0010 0001 'c' + 0x250b, // 0010 0101 0000 1011 'd' + 0x30e1, // 0011 0000 1110 0001 'e' + 0x10e1, // 0001 0000 1110 0001 'f' + 0x3161, // 0011 0001 0110 0001 'g' + 0x11e2, // 0001 0001 1110 0010 'h' + 0x2409, // 0010 0100 0000 1001 'i' + 0x3102, // 0011 0001 0000 0010 'j' + 0x12a4, // 0001 0010 1010 0100 'k' + 0x3020, // 0011 0000 0010 0000 'l' + 0x1136, // 0001 0001 0011 0110 'm' + 0x1332, // 0001 0011 0011 0010 'n' + 0x3123, // 0011 0001 0010 0011 'o' + 0x10e3, // 0001 0000 1110 0011 'p' + 0x3323, // 0011 0011 0010 0011 'q' + 0x12e3, // 0001 0010 1110 0011 'r' + 0x21e1, // 0010 0001 1110 0001 's' + 0x0409, // 0000 0100 0000 1001 't' + 0x3122, // 0011 0001 0010 0010 'u' + 0x1824, // 0001 1000 0010 0100 'v' + 0x1b22, // 0001 1011 0010 0010 'w' + 0x0a14, // 0000 1010 0001 0100 'x' + 0x0414, // 0000 0100 0001 0100 'y' + 0x2805, // 0010 1000 0000 0101 'z' + 0x3021, // 0011 0000 0010 0001 '{' + 0x0408, // 0000 0100 0000 1000 '|' + 0x2103, // 0010 0001 0000 0011 '}' + 0x0a00, // 0000 1010 0000 0000 '~' + 0x0000, // 0000 0000 0000 0000 DEL + ]; + + my.Display.colorOn = "#00ffbb"; + my.Display.colorOff = "#002211"; + my.Display.overdraw = 0; + + my.Display.prototype.showSegments = function(segments, lit) { + // debugger; + var mask = 1; + var i; + for (i = 0; i < 16; i++) { + var on = (lit & mask) != 0; + segments[i].setAttribute("fill", on ? my.Display.colorOn : my.Display.colorOff); + if (my.Display.overdraw) { + segments[i].setAttribute("stroke-width", my.Display.overdraw); + if (on) { + segments[i].setAttribute("stroke", my.Display.colorOn); + } else { + segments[i].setAttribute("stroke", "none"); + } + } else { + segments[i].setAttribute("stroke", "none"); + } + mask <<= 1; + } + } + + my.Display.segmentsForCharacter = function(c, underline, blink, blinkPhase) { + var lit = (c < 32 || 127 < c) ? 0 : my.Display.segmentsByCharacter[c - 32]; + if (blink && !blinkPhase) { + if (underline) { + return lit; + } else { + return 0; + } + } else { + if (underline) { + return lit | 0x8000; + } else { + return lit; + } + } + } + + my.Display.prototype.setChar = function(y, x, c, underline, blink) { + var cell = this.cells[y][x]; + cell.char = c; + cell.underline = underline; + cell.blink = blink; + + this.showSegments(cell.segments, my.Display.segmentsForCharacter(c, underline, blink, this.blinkPhase)); + } + + my.Display.prototype.showString = function(y, x, s) { + for (var i = 0; i < s.length; i++) { + this.setChar(y, x, s.charCodeAt(i), false, false); + x++; + if (x >= this.cells[y].length) { + x = 0; + y++; + } + if (y >= this.cells.length) { + y = 0; + } + } + } + + my.Display.prototype.clear = function() { + for (var row = 0; row < this.cells.length; row++) { + var line = this.cells[row]; + for (var col = 0; col < line.length; col++) { + this.setChar(row, col, ' ', false, false); + } + } + } + + my.Display.prototype.blink = function(y, x) { + return this.cells[y][x].blink; + } + + my.Display.prototype.underline = function(y, x) { + return this.cells[y][x].underline; + } + + my.Display.prototype.setBlinkPhase = function(phase) { + this.blinkPhase = phase; + for (var row = 0; row < this.cells.length; row++) { + var line = this.cells[row]; + for (var col = 0; col < line.length; col++) { + var cell = line[col]; + if (cell.blink) { + this.showSegments(cell.segments, + my.Display.segmentsForCharacter(cell.char, cell.underline, cell.blink, this.blinkPhase)); + } + } + } + } + + my.Rect = function(x, y, w, h) { + this.x = x; + this.y = y; + this.w = w; + this.h = h; + } + + my.Rect.prototype.union = function(other) { + if (this.w == 0 || this.h == 0) { + return other; + } else if (other.w == 0 || other.h == 0) { + return this; + } else { + minX = Math.min(this.x, other.x); + maxX = Math.max(this.x+this.w, other.x+other.w); + minY = Math.min(this.y, other.y); + maxY = Math.max(this.y+this.h, other.y+other.h); + return new my.Rect(minX, minY, maxX-minX, maxY-minY); + } + } + + my.Rect.prototype.inset = function(dx, dy) { + return new my.Rect(this.x + dx, this.y + dy, this.w - 2*dx, this.h - 2*dy); + } + + my.Rect.prototype.offset = function(dx, dy) { + return new my.Rect(this.x+dx, this.y+dy, this.w, this.h); + } + + my.Rect.prototype.toPath = function(r) { + var rect = my.createElement("rect"); + rect.setAttribute("x", this.x); + rect.setAttribute("y", this.y); + rect.setAttribute("width", this.w); + rect.setAttribute("height", this.h); + if (r != null) { + rect.setAttribute("rx", r); + rect.setAttribute("ry", r); + } + return rect; + } + + my.Rect.prototype.getX = function(d) { + return this.x + d * this.w; + } + + my.Rect.prototype.getY = function(d) { + return this.y + d * this.h; + } + + my.displayRect = new my.Rect(15, 7, 82, 13); + + my.Button = function(x, y, w, h, label, labelPosition, value, color, multiPage, lightId) { + var that = this; + this.rect = new my.Rect(x, y, w, h); + + var rect = this.rect.inset(0.1, 0.1); + var translation = "translate(" + x + "," + y + ")"; + this.halo = rect.toPath(0.5); + this.halo.setAttribute("stroke", "#666666"); + this.halo.setAttribute("stroke-width", "2"); + this.halo.setAttribute("fill", "none"); + my.hideElement(this.halo); + + rect = rect.offset(-x, -y); + this.outline = rect.toPath(0.5); + this.outline.setAttribute("fill", color); + this.outline.setAttribute("stroke", "none"); + + this.group = my.createElement("g"); + this.group.setAttribute("transform", translation); + this.group.appendChild(this.outline); + + this.label = label; + this.labelPosition = labelPosition; + this.value = value; + this.color = color; + this.multiPage = multiPage; + this.lightId = lightId; + + if (label != undefined) { + var labelLines = label.split("\n"); + var fontSize = 1.4; + var labelText = my.createElement("text"); + labelText.setAttribute('fill', 'white'); + labelText.setAttribute('stroke', 'none'); + labelText.setAttribute('font-size', fontSize); + labelText.setAttribute('font-family', 'Helvetica'); + labelText.setAttribute('font-style', 'italic'); + labelText.setAttribute('width', w); + labelText.setAttribute('dominant-baseline', 'bottom'); + var x0 = 0; + var y0 = (1 - labelLines.length) * fontSize; + switch(labelPosition) { + case my.LabelPosition.ABOVE_CENTERED: + labelText.setAttribute('text-anchor', 'middle'); + x0 = w/2; + // fall through + case my.LabelPosition.ABOVE: + y0 = (1 - labelLines.length) * fontSize - 0.3; + break; + case my.LabelPosition.BELOW: + y0 = h + fontSize - 0.3; + break; + } + for (var i = 0; i < labelLines.length; i++) { + var tspan = my.createElement("tspan"); + tspan.setAttribute('x', x0); + tspan.setAttribute('y', y0 + i * fontSize); + tspan.appendChild(document.createTextNode(labelLines[i])); + labelText.appendChild(tspan); + } + this.group.appendChild(labelText); + } + + if (lightId >= 0) { + this.lightOn = my.createElement("path"); + this.lightOn.setAttribute("d", "M" + (rect.w/3) + "," + (rect.y+rect.h/25) + " h" + (rect.w/3) + " v" + (rect.h/3) + " h" + (-rect.w/3) + " z"); + this.lightOff = this.lightOn.cloneNode(true); + this.lightOn.setAttribute("fill", "#22ff22"); + this.lightOff.setAttribute("fill", "#112211"); + my.hideElement(this.lightOn); + + this.group.appendChild(this.lightOn); + this.group.appendChild(this.lightOff); + } + + this.group.addEventListener("touchstart", function(e) { that.press(e); }, true); + this.group.addEventListener("touchend", function(e) { that.release(e); }, true); + this.group.addEventListener("mousedown", function(e) { that.press(e); }, true); + this.group.addEventListener("mouseout", function(e) { that.release(e); }, true); + this.group.addEventListener("mouseup", function(e) { that.release(e); }, true); + + this.isPressed = false; + this.lightState = my.Light.OFF; + this.lightIsOn = false; + this.blinkPhase = true; + + this.onPress = undefined; + this.onRelease = undefined; + } + + my.Button.prototype.showPressed = function(isPressed) { + if (isPressed) { + my.showElement(this.halo); + } else { + my.hideElement(this.halo); + } + } + + my.Button.prototype.press = function(e) { + e.preventDefault(); + + if (!this.isPressed) { + this.isPressed = true; + this.showPressed(true); + + if (this.onPress != undefined) { + this.onPress(this); + } + } + + return false; + } + + my.Button.prototype.release = function(e) { + e.preventDefault(); + + if (this.isPressed) { + this.isPressed = false; + this.showPressed(false); + + if (this.onRelease != undefined) { + this.onRelease(this); + } + } + + return false; + } + + my.Button.prototype.updateLight = function() { + var on = this.lightState == my.Light.ON || (this.blinkPhase && this.lightState == my.Light.BLINK); + if (on != this.lightIsOn) { + my.hideElement(this.lightIsOn ? this.lightOn : this.lightOff); + this.lightIsOn = on; + my.showElement(this.lightIsOn ? this.lightOn : this.lightOff); + } + } + + my.Button.prototype.setLight = function(state) { + this.lightState = state; + this.updateLight(); + } + + my.Button.prototype.setBlinkPhase = function(phase) { + this.blinkPhase = phase; + this.updateLight(); + } + + my.Touch = function(x, y) { + this.x = x; + this.y = y; + } + + my.makeTouch = function(e) { + return new my.Touch(e.clientX, e.clientY); + } + + my.Slider = function(x, y, w, h, channel, value) { + + function makeRectPath(x, y, w, h, color) { + path = new my.Rect(x, y, w, h).toPath(); + path.setAttribute("fill", color); + return path; + } + + var that = this; + this.channel = channel; + this.value = value; + + this.rect = new my.Rect(x, y, w, h); + var rect = this.rect.offset(-x, -y); + var translation = "translate(" + x + "," + y + ")"; + this.group = my.createElement("g"); + this.group.setAttribute("transform", translation); + + this.frameColor = "#333333"; + this.frameActiveColor = "#666666"; + this.frame = rect.inset(0.25, 0.25).toPath(); + this.frame.setAttribute("stroke", this.frameColor); + this.frame.setAttribute("stroke-width", "0.5"); + this.group.appendChild(this.frame); + + this.handleX = 0.75; + this.handleW = w - 1.5; + this.handleH = 4; + this.handleMinY = 0.75; + this.handleMaxY = h - 0.75 - this.handleH; + + this.handle = my.createElement("g"); + this.handle.appendChild(makeRectPath(0, 0, this.handleW, this.handleH, "#333333")); + this.handle.appendChild(makeRectPath(0, 0, this.handleW, 0.75, "#444444")); + this.handle.appendChild(makeRectPath(0, 1.75, this.handleW, 0.25, "#222222")); + this.handle.appendChild(makeRectPath(0, 2, this.handleW, 0.25, "#444444")); + this.handle.appendChild(makeRectPath(0, 3.25, this.handleW, 0.75, "#222222")); + this.group.appendChild(this.handle); + + this.setValue(value); + + this.handle.addEventListener("touchstart", function(e) { that.touchstart(e); }, true); + this.group.addEventListener("touchmove", function(e) { that.touchmove(e); }, true); + this.group.addEventListener("touchend", function(e) { that.touchend(e); }, true); + this.group.addEventListener("touchcancel", function(e) { that.touchend(e); }, true); + + this.handle.addEventListener("mousedown", function(e) { that.grab(e.clientX, e.clientY); }, true); + this.group.addEventListener("mousemove", function(e) { that.drag(e.clientX, e.clientY); }, true); + this.group.addEventListener("mouseup", function(e) { that.release(); }, true); + + this.onValueChanged = undefined; + this.isGrabbed = false; + this.activeTouches = new Map(); + + } + + my.Slider.prototype.setValue = function(value) { + this.value = Math.max(0.0, Math.min((1.0, value))); + this.handleY = this.handleMinY + (1.0 - value) * (this.handleMaxY - this.handleMinY); + this.handle.setAttribute("transform", "translate(" + this.handleX + "," + this.handleY + ")"); + } + + my.Slider.prototype.setHandleY = function(handleY) { + this.handleY = Math.max(this.handleMinY, Math.min(this.handleMaxY, handleY)); + // console.log("Setting handleY to " + handleY + " => " + this.handleY); + this.value = 1.0 - (this.handleY - this.handleMinY) / (this.handleMaxY - this.handleMinY); + this.handle.setAttribute("transform", "translate(" + this.handleX + "," + this.handleY + ")"); + } + + my.Slider.prototype.grab = function(x, y) { + this.isGrabbed = true; + this.frame.setAttribute("stroke", this.frameActiveColor); + var p = my.pointIn(this.group, x, y); + this.dragOffset = p.y - this.handleY; + // console.log("Grabbing with handleY=" + this.handleY + ", p.y=" + p.y + " => dragOffset=" + this.dragOffset); + } + + my.Slider.prototype.drag = function(x, y) { + if (this.isGrabbed) { + var p = my.pointIn(this.group, x, y); + var newHandleY = p.y - this.dragOffset; + // console.log("Dragged with p.y=" + p.y + ", dragOffset=" + this.dragOffset + " => new handleY=" + newHandleY); + this.setHandleY(newHandleY); + if (this.onValueChanged != null) { + this.onValueChanged(this); + } + } + } + + my.Slider.prototype.release = function(e) { + this.isGrabbed = false; + this.frame.setAttribute("stroke", this.frameColor); + } + + my.Slider.prototype.activeTouchCenter = function() { + var n = this.activeTouches.size; + if (n <= 0) { + return undefined; + } + var x = 0; + var y = 0; + + for (const touch of this.activeTouches.values()) { + x += touch.x; + y += touch.y; + } + + return new my.Touch(x / n, y / n); + } + + my.Slider.prototype.touchstart = function(e) { + e.preventDefault(); + + var wasEmpty = this.activeTouches.size == 0; + for (var i = 0; i < e.targetTouches.length; i++) { + var touch = e.targetTouches.item(i); + this.activeTouches.set(touch.identifier, my.makeTouch(touch)); + } + + center = this.activeTouchCenter(); + if (center != null) { + this.grab(center.x, center.y); + } + + return false; + } + + my.Slider.prototype.touchmove = function(e) { + e.preventDefault(); + + for (var i = 0; i < e.changedTouches.length; i++) { + var touch = e.changedTouches.item(i); + if (this.activeTouches.has(touch.identifier)) { + this.activeTouches.set(touch.identifier, my.makeTouch(touch)); + } + } + center = this.activeTouchCenter(); + if (center != null) { + this.drag(center.x, center.y); + } + + return false; + } + + my.Slider.prototype.touchend = function(e) { + e.preventDefault(); + + for (var i = 0; i < e.changedTouches.length; i++) { + var touch = e.changedTouches.item(i); + this.activeTouches.delete(touch.identifier) + } + if (this.activeTouches.size == 0) { + this.release(); + } else { + center = this.activeTouchCenter(); + if (center != null) { + this.grab(center.x, center.y); + } + } + + return false; + } + + my.Panel = function(serverUrl, keyboard, version) { + this.serverUrl = serverUrl; + this.keyboard = keyboard; + this.version = version; + + this.container = my.createElement("svg"); + this.container.setAttribute("preserveAspectRatio", "xMidYMid meet"); + this.container.setAttribute("width", "2000"); + this.container.setAttribute("height", "375"); + this.container.setAttribute("overflow", "scroll"); + + this.haloContainer = my.createElement("g"); + this.container.appendChild(this.haloContainer); + + this.mainContainer = my.createElement("g"); + this.container.appendChild(this.mainContainer); + + this.displayContainer = my.createElement("svg"); + this.display = new my.Display(this.displayContainer, 2, 40); + this.displayContainer.setAttribute("preserveAspectRatio", "xMidYMid meet"); + this.displayContainer.setAttribute("x", my.displayRect.x); + this.displayContainer.setAttribute("y", my.displayRect.y); + this.displayContainer.setAttribute("width", my.displayRect.w); + this.displayContainer.setAttribute("height", my.displayRect.h); + this.container.appendChild(this.displayContainer); + + this.buttons = new Array(); + this.lightButtons = new Array(); + this.analogControls = new Array(); + this.addControls(keyboard); + + this.cursorX = 0; + this.cursorY = 0; + this.savedCursorX = 0; + this.savedCursorY = 0; + this.blink = false; + this.underline = false; + + this.serverUrl = serverUrl; + try { + this.connect(); + } catch (e) { + console.log("Unable to connect to '" + serverUrl + "': " + e); + } + + var that = this; + this.blinkPhase = 0; + setInterval(function() { that.updateBlink(); }, 250); + } + + my.Panel.prototype.updateBlink = function() { + this.blinkPhase = (this.blinkPhase + 1) % 4; + this.display.setBlinkPhase(this.blinkPhase < 2); + var buttonPhase = (this.blinkPhase % 2) == 0; + for (var i = 0; i < this.lightButtons.length; i++) { + this.lightButtons[i].setBlinkPhase(buttonPhase); + } + } + + my.Panel.prototype.connect = function() { + var that = this; + var panel = this; + var reconnect = function() { + that.connect(); + } + + this.socket = new WebSocket(this.serverUrl); + this.socket.binaryType = "arraybuffer"; + + this.socket.onopen = function(event) { + console.log("opened: " + event); + panel.sendString("I"); // Request server information + }; + + this.socket.onmessage = function(event) { + var data = new Uint8Array(event.data); + var c = String.fromCharCode(data[0]); + + if (c == 'A') { + console.log("handling analog value") + panel.handleAnalogValue(data.slice(1)); + } else if (c == 'B') { + console.log("handling button state") + panel.handleButtonState(data.slice(1)); + } else if (c == 'D') { + console.log("handling display data") + panel.handleDisplayData(data.slice(1)); + } else if (c == 'I') { + console.log("handling server information"); + panel.handleServerInformation(data.slice(1)); + } + }; + + this.socket.onclose = function(event) { + console.log("closed: ", event); + // reconnect after 1 second + setTimeout(reconnect, 1000); + }; + + this.socket.onerror = function(event) { + console.log("error: ", event); + }; + } + + my.Panel.prototype.addButton = function(x, y, w, h, label, labelPosition, value, color, multiPage, lightId) { + var that = this; + var button = new my.Button(x, y, w, h, label, labelPosition, value, color, multiPage, lightId); + this.haloContainer.appendChild(button.halo); + + if (lightId >= 0) { + if (lightId >= this.lightButtons.length) { + this.lightButtons.length = lightId + 1; + } + this.lightButtons[lightId] = button; + } + + this.mainContainer.appendChild(button.group); + this.buttons[value] = button; + + button.onPress = function(b) { + that.onButtonPressed(b); + } + button.onRelease = function(b) { + that.onButtonReleased(b); + } + + return button; + } + + my.Panel.prototype.addSlider = function(x, y, w, h, channel, value) { + var that = this; + var slider = new my.Slider(x, y, w, h, channel, value); + + this.mainContainer.appendChild(slider.group); + this.analogControls[channel] = slider; + + slider.onValueChanged = function(s) { + that.onAnalogValueChanged(s); + } + + return slider; + } + + my.Panel.prototype.addButtonBelowDisplay = function(x, y, label, value, shade) { + return this.addButton(x, y, 6, 4, label, my.LabelPosition.BELOW, value, shade, false, -1); + } + + my.Panel.prototype.addButtonWithLightBelowDisplay = function(x, y, label, value, shade, lightId) { + return this.addButton(x, y, 6, 4, label, my.LabelPosition.BELOW, value, shade, false, lightId); + } + + my.Panel.prototype.addLargeButton = function(x, y, label, value, shade) { + return this.addButton(x, y, 6, 4, label, my.LabelPosition.ABOVE, value, shade, false, -1); + } + + my.Panel.prototype.addLargeButtonWithLight = function(x, y, label, value, shade, lightId) { + return this.addButton(x, y, 6, 4, label, my.LabelPosition.ABOVE, value, shade, false, lightId); + } + + my.Panel.prototype.addSmallButton = function(x, y, label, value, shade, multiPage) { + return this.addButton(x, y, 6, 2, label, my.LabelPosition.ABOVE, value, shade, multiPage, -1); + } + + my.Panel.prototype.addIncDecButton = function(x, y, label, value, shade, multiPage) { + return this.addButton(x, y, 6, 2, label, my.LabelPosition.ABOVE_CENTERED, value, shade, multiPage, -1); + } + + my.Panel.prototype.addControls = function(keyboard) { + console.log("keyboard is '" + keyboard + "'"); + + // Normalize the keyboard string. + var hasSeq = false; + var hasBankSet = false; + keyboard = keyboard.toLowerCase(); + if (keyboard.indexOf('sd') != -1) { + hasSeq = true; + + if (keyboard.indexOf('1') != -1) { + hasBankSet = true; + + if (keyboard.indexOf('32') != -1) { + keyboard = my.Keyboard.SD1_32; + } else { + keyboard = my.Keyboard.SD1; + } + } else { + keyboard = my.Keyboard.VFX_SD; + } + } else { + keyboard = my.Keyboard.VFX; + } + + console.log("normalized keyboard is '" + keyboard + "'"); + + var cartString = hasBankSet ? "BankSet" : "Cart"; + + this.addButtonWithLightBelowDisplay(10, 29, cartString, 52, my.Shade.LIGHT, 0xf); + this.addButtonWithLightBelowDisplay(16, 29, "Sounds", 53, my.Shade.LIGHT, 0xd); + this.addButtonWithLightBelowDisplay(22, 29, "Presets", 54, my.Shade.LIGHT, 0x7); + if (hasSeq) { + this.addButtonBelowDisplay (28, 29, "Seq", 51, my.Shade.LIGHT); + } + + this.addButtonWithLightBelowDisplay(42, 29, "0", 55, my.Shade.MEDIUM, 0xe); + this.addButtonWithLightBelowDisplay(48, 29, "1", 56, my.Shade.MEDIUM, 0x6); + this.addButtonWithLightBelowDisplay(54, 29, "2", 57, my.Shade.MEDIUM, 0x4); + this.addButtonWithLightBelowDisplay(60, 29, "3", 46, my.Shade.MEDIUM, 0xc); + this.addButtonWithLightBelowDisplay(66, 29, "4", 47, my.Shade.MEDIUM, 0x3); + this.addButtonWithLightBelowDisplay(72, 29, "5", 48, my.Shade.MEDIUM, 0xb); + this.addButtonWithLightBelowDisplay(78, 29, "6", 49, my.Shade.MEDIUM, 0x2); + this.addButtonWithLightBelowDisplay(84, 29, "7", 35, my.Shade.MEDIUM, 0xa); + this.addButtonWithLightBelowDisplay(90, 29, "8", 34, my.Shade.MEDIUM, 0x1); + this.addButtonWithLightBelowDisplay(96, 29, "9", 25, my.Shade.MEDIUM, 0x9); + + // Large buttons on the main panel part + this.addLargeButton (108, 29, "Replace\nProgram", 29, my.Shade.MEDIUM); + this.addLargeButtonWithLight(114, 29, "1-6", 30, my.Shade.MEDIUM, 0x0); + this.addLargeButtonWithLight(120, 29, "7-12", 31, my.Shade.MEDIUM, 0x8); + + this.addLargeButton (154, 29, "Select\nVoice", 5, my.Shade.MEDIUM); + this.addLargeButton (160, 29, "Copy", 9, my.Shade.MEDIUM); + this.addLargeButton (166, 29, "Write", 3, my.Shade.MEDIUM); + this.addLargeButtonWithLight(172, 29, "Compare", 8, my.Shade.MEDIUM, 0x5); + + // Small buttons, main panel + // -- Performance: + this.addSmallButton(108, 20, "Patch\nSelect", 26, my.Shade.DARK, true); + this.addSmallButton(114, 20, "MIDI", 27, my.Shade.DARK, true); + this.addSmallButton(120, 20, "Effects", 28, my.Shade.DARK, true); + + this.addSmallButton(108, 13, "Key\nZone", 39, my.Shade.DARK, false); + this.addSmallButton(114, 13, "Trans-\npose", 40, my.Shade.DARK, false); + this.addSmallButton(120, 13, "Release", 41, my.Shade.DARK, false); + + this.addSmallButton(108, 6, "Volume", 36, my.Shade.DARK, false); + this.addSmallButton(114, 6, "Pan", 37, my.Shade.DARK, false); + this.addSmallButton(120, 6, "Timbre", 38, my.Shade.DARK, false); + + // Sequencer / System, both large and small buttons: + if (hasSeq) { + // The 'Master', 'Storage' and 'MIDI Control' buttons are small & at the to, + // the sequencer buttons are big and at the bottom. + this.addLargeButton(131, 29, "Rec", 19, my.Shade.MEDIUM); + this.addLargeButton(137, 29, "Stop\n/Cont", 22, my.Shade.MEDIUM); + this.addLargeButton(143, 29, "Play", 23, my.Shade.MEDIUM); + + this.addSmallButton(131, 20, "Click", 32, my.Shade.DARK, false); + this.addSmallButton(137, 20, "Seq\nControl", 18, my.Shade.DARK, true); + this.addSmallButton(143, 20, "Locate", 33, my.Shade.DARK, true); + + this.addSmallButton(131, 13, "Song", 60, my.Shade.DARK, false); + this.addSmallButton(137, 13, "Seq", 59, my.Shade.DARK, false); + this.addSmallButton(143, 13, "Track", 61, my.Shade.DARK, false); + + this.addSmallButton(131, 6, "Master", 20, my.Shade.LIGHT, true); + this.addSmallButton(137, 6, "Storage", 21, my.Shade.LIGHT, false); + this.addSmallButton(143, 6, "MIDI\nControl", 24, my.Shade.LIGHT, true); + } else { + // The 'Master', 'Storage' and 'MIDI Control' buttons are large & at the bottom, + // and there are no sequencer buttons + this.addLargeButton(131, 29, "Master", 20, my.Shade.LIGHT, true); + this.addLargeButton(137, 29, "Storage", 21, my.Shade.LIGHT, false); + this.addLargeButton(143, 29, "MIDI\nControl", 24, my.Shade.LIGHT, true); + } + + // -- Programming: + this.addSmallButton(154, 20, "Wave", 4, my.Shade.DARK, false); + this.addSmallButton(160, 20, "Mod\nMixer", 6, my.Shade.DARK, false); + this.addSmallButton(166, 20, "Program\nControl", 2, my.Shade.DARK, false); + this.addSmallButton(172, 20, "Effects", 7, my.Shade.DARK, true); + + this.addSmallButton(154, 13, "Pitch", 11, my.Shade.DARK, false); + this.addSmallButton(160, 13, "Pitch\nMod", 13, my.Shade.DARK, false); + this.addSmallButton(166, 13, "Filters", 15, my.Shade.DARK, true); + this.addSmallButton(172, 13, "Output", 17, my.Shade.DARK, true); + + this.addSmallButton(154, 6, "LFO", 10, my.Shade.DARK, true); + this.addSmallButton(160, 6, "Env1", 12, my.Shade.DARK, true); + this.addSmallButton(166, 6, "Env2", 14, my.Shade.DARK, true); + this.addSmallButton(172, 6, "Env3", 16, my.Shade.DARK, true); + + // Display buttons - approximate: + this.addSmallButton(32, 21, "", 50, my.Shade.DARK, false); + this.addSmallButton(57, 21, "", 44, my.Shade.DARK, false); + this.addSmallButton(82, 21, "", 45, my.Shade.DARK, false); + + this.addSmallButton(32, 4, "", 58, my.Shade.DARK, false); + this.addSmallButton(57, 4, "", 42, my.Shade.DARK, false); + this.addSmallButton(82, 4, "", 43, my.Shade.DARK, false); + + // Value slider + var valueSlider = this.addSlider(-2.75, 4, 7, 22, 3, 0.7); + + // Increment and Decrement + this.addIncDecButton(-12.5, 22, "\u25BC", 63, my.Shade.DARK, false); + this.addIncDecButton(-12.5, 12, "\u25B2", 62, my.Shade.DARK, false); + + // Volume slider + var volumeSlider = this.addSlider(-30, 4, 7, 22, 5, 1.0); + + var r = undefined; + for (var i = 1; i < this.buttons.length; i++) { + var button = this.buttons[i]; + if (button != null) { + if (r != null) { + r = r.union(button.rect); + } else { + r = button.rect; + } + } + } + r = r.union(valueSlider.rect); + r = r.union(volumeSlider.rect); + + r.x -= 2; + r.y -= 2; + r.w += 4; + r.h += 4; + + var viewBox = "" + r.x + " " + r.y + " " + r.w + " " + r.h; + this.container.setAttribute("viewBox", viewBox); + } + + my.Panel.prototype.sendString = function(s) { + if (this.socket != undefined && this.socket.readyState == WebSocket.OPEN) { + var b = new Uint8Array(s.length); + for (var i = 0; i < s.length; i++) { + b[i] = s.charCodeAt(i); + } + this.socket.send(b); + } + } + + my.Panel.prototype.onButtonPressed = function(button) { + this.sendString("BD " + button.value); + } + + my.Panel.prototype.onButtonReleased = function(button) { + this.sendString("BU " + button.value); + } + + my.Panel.prototype.onAnalogValueChanged = function(slider) { + // 0.05 == 0; 0.95 == 760 + var value = (slider.value - 0.05) / 0.9; + value = 760 * value; + value = Math.round(Math.max(0, Math.min(1023, value))); + var s = "A" + slider.channel + " " + value; + + // console.log(s); + this.sendString(s); + } + + my.Panel.prototype.handleDisplayData = function(data) { + console.log("Handling display data " + data.length + " : " + data); + for (var i = 0; i < data.length; i++) { + var received = data[i]; + + if (this.ignoreNext > 0) { + console.log("skipping byte: 0x" + received.toString(16)); + this.ignoreNext--; + continue; + } + + console.log("handling byte: 0x" + received.toString(16)); + if (this.light) { + var whichLight = received & 0x3f; + var button = this.lightButtons[whichLight]; + if (button != null) { + var state = (received & 0xc0); + if (state == 0x80) { + button.setLight(my.Light.ON); + } else if (state == 0xc0) { + button.setLight(my.Light.BLINK); + } else { + button.setLight(my.Light.OFF); + } + } + this.light = false; + } else if ((received >= 0x80) && (received < 0xd0)) { + this.cursorY = ((received & 0x7f) >= 40) ? 1 : 0; + this.cursorX = (received & 0x7f) % 40; + this.blink = this.display.blink(this.cursorY, this.cursorX); + this.underline = this.display.underline(this.cursorY, this.cursorX); + console.log("moving to row " + this.cursorY + ", column " + this.cursorX); + } else if (received >= 0xd0) { + switch (received) { + case 0xd0: // blink start + console.log("blink on"); + this.blink = true; + break; + + case 0xd1: // blink stop (cancel all attribs on VFX+) + console.log("attrs off"); + this.blink = false; + this.underline = false; + break; + + case 0xd2: // blinking underline? + console.log("blinking underline on"); + this.blink = true; + this.underline = true; + break; + + case 0xd3: // start underline + console.log("underline on"); + this.underline = true; + break; + + case 0xd6: // clear screen + console.log("clear screen"); + this.cursorX = this.cursorY = 0; + this.blink = this.underline = false; + this.display.clear(); + break; + + case 0xf5: // save cursor position + this.savedCursorX = this.cursorX; + this.savedCursorY = this.cursorY; + console.log("saving cursor position (row " + this.savedCursorY + ", col " + this.savedCursorX + ")"); + break; + + case 0xf6: // restore cursor position + this.cursorX = this.savedCursorX; + this.cursorY = this.savedCursorY; + this.blink = this.display.blink(this.cursorY, this.cursorX); + this.underline = this.display.underline(this.cursorY, this.cursorX); + console.log("restored cursor position (row " + this.savedCursorY + ", col " + this.savedCursorX + ")"); + break; + + case 0xff: // Specify a button light state + this.light = true; + break; + + default: + console.log("Unexpected control code: " + received); + break; + } + } else if ((received >= 0x20) && (received <= 0x5f)) { + // var attrs = this.blink ? this.underline ? " with blink & underline" : " with blink" : this.underline ? " with underline" : ""; + // console.log("at (" + this.cursorY + ", " + this.cursorX + ") char " + received + attrs); + this.display.setChar(this.cursorY, this.cursorX, received, this.underline, this.blink); + this.cursorX = Math.min(this.cursorX + 1, 39); + } else { + console.log("Unexpected byte: " + received.toString(16)); + } + } + } + + my.Panel.prototype.handleAnalogValue = function(data) { + var s = String.fromCharCode.apply(null, data); + console.log("Handling analog value: '" + s + "'"); + var parts = s.split(" "); + if (parts.length == 2) { + var channel = parseInt(parts[0]); + var value = parseInt(parts[1]); + + var analogControl = this.analogControls[channel]; + if (analogControl != null) { + if (analogControl instanceof my.Slider) { + // 0.05 == 0; 0.95 == 760 + value = value / 760.0; + value = 0.05 + 0.9 * value; + analogControl.setValue(value); + } + } + } + } + + my.Panel.prototype.handleButtonState = function(data) { + var s = String.fromCharCode.apply(null, data); + var parts = s.split(" "); + if (parts.length == 2) { + var pressed = parts[0] == 'D'; + var number = parseInt(parts[1]); + var button = this.buttons[number]; + if (button != null && button instanceof my.Button) { + button.showPressed(pressed); + } + } + } + + my.Panel.prototype.handleServerInformation = function(data) { + var s = String.fromCharCode.apply(null, data); + var parts = s.split(","); + var keyboard = "none"; + var version = -1; + if (parts.length == 2) { + keyboard = parts[0]; + version = parseInt(parts[1]); + } + if (keyboard == this.keyboard && version == this.version) { + // same keyboard type version - proceed! + this.sendString("CA1B1D1"); // Send me analog data, buttons, and display data + } else { + // we need to reload, forcing a refresh from the server. + document.location.reload(true); + } + } + + return my; + })(); +
\ No newline at end of file |