diff options
author | Luciano Iam <lucianito@gmail.com> | 2020-04-09 16:34:16 +0200 |
---|---|---|
committer | Robin Gareus <robin@gareus.org> | 2020-04-09 20:56:46 +0200 |
commit | 891c63fe892b59fcf5a5579191ea844fad9f9d07 (patch) | |
tree | e93223d81aa26654fca0357750882d6c84b9d8c7 /share/web_surfaces/builtin/mixer-demo/js | |
parent | d694ee97c7a77172943ab342c9d5edd9bb57d2d0 (diff) |
Update HTML/CSS/JS frontend
Diffstat (limited to 'share/web_surfaces/builtin/mixer-demo/js')
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/js/connection.js | 77 | ||||
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/js/main.js | 156 | ||||
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/js/widget.js | 157 |
3 files changed, 390 insertions, 0 deletions
diff --git a/share/web_surfaces/builtin/mixer-demo/js/connection.js b/share/web_surfaces/builtin/mixer-demo/js/connection.js new file mode 100644 index 0000000000..077799b48b --- /dev/null +++ b/share/web_surfaces/builtin/mixer-demo/js/connection.js @@ -0,0 +1,77 @@ +/* + * Copyright (C) 2020 Luciano Iam <lucianito@gmail.com> + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. + */ + +const JSON_INF = 1.0e+128; + +class Connection { + + // https://developer.mozilla.org/en-US/docs/Web/API/URL/host + + constructor (host) { + this.socket = new WebSocket(`ws://${host}`); + this.socket.onopen = () => this.openCallback(); + this.socket.onclose = () => this.closeCallback(); + this.socket.onerror = (error) => this.errorCallback(error); + this.socket.onmessage = (event) => this._onMessage(event); + } + + openCallback () { + // empty + } + + closeCallback () { + // empty + } + + errorCallback (error) { + // empty + } + + messageCallback (node, addr, val) { + // empty + } + + send (node, addr, val) { + for (const i in val) { + if (val[i] == Infinity) { + val[i] = JSON_INF; + } else if (val[i] == -Infinity) { + val[i] = -JSON_INF; + } + } + + const json = JSON.stringify({node: node, addr: addr, val: val}); + + this.socket.send(json); + } + + _onMessage (event) { + const msg = JSON.parse(event.data); + + for (const i in msg.val) { + if (msg.val[i] >= JSON_INF) { + msg.val[i] = Infinity; + } else if (msg.val[i] <= -JSON_INF) { + msg.val[i] = -Infinity; + } + } + + this.messageCallback(msg.node, msg.addr || [], msg.val); + } + +} diff --git a/share/web_surfaces/builtin/mixer-demo/js/main.js b/share/web_surfaces/builtin/mixer-demo/js/main.js new file mode 100644 index 0000000000..931371979a --- /dev/null +++ b/share/web_surfaces/builtin/mixer-demo/js/main.js @@ -0,0 +1,156 @@ +/* + * Copyright (C) 2020 Luciano Iam <lucianito@gmail.com> + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. + */ + +(() => { + + const MAX_LOG_LINES = 1000; + const FEEDBACK_NODES = ['strip_gain', 'strip_pan', 'strip_meter', 'strip_plugin_enable', + 'strip_plugin_param_value']; + + const conn = new Connection(location.host); + const widgets = {}; + + conn.messageCallback = (node, addr, val) => { + log(`↙ ${node} (${addr}) = ${val}`, 'message-in'); + + if (node == 'strip_desc') { + createStrip (addr, ...val); + } else if (node == 'strip_plugin_desc') { + createStripPlugin (addr, ...val); + } else if (node == 'strip_plugin_param_desc') { + createStripPluginParam (addr, ...val); + } else if (FEEDBACK_NODES.includes(node)) { + if (widgets[[node, addr]]) { + widgets[[node, addr]].value = val[0]; + } + } + }; + + conn.closeCallback = () => { + log('Connection dropped', 'error'); + }; + + conn.errorCallback = () => { + log('Connection error', 'error'); + }; + + function createStrip (addr, name) { + const id = `strip-${addr[0]}`; + const strips = document.getElementById('strips'); + const div = createElem(`<div class="strip" id="${id}"></div>`, strips); + createElem(`<label class="comp-name" for="${id}">∿  ${name}</label>`, div); + + // meter + const meter = new StripMeter('strip_meter', addr); + meter.el.classList.add('slider-meter'); + meter.attach(div); + register(meter); + + // gain + let holder = createElem(`<div class="strip-slider"></div>`, div); + createElem(`<label>Gain</label>`, holder); + const gain = new StripGainSlider('strip_gain', addr); + gain.attach(holder, (val) => send(gain)); + register(gain); + + // pan + holder = createElem(`<div class="strip-slider"></div>`, div); + createElem(`<label>Pan</label>`, holder); + const pan = new StripPanSlider('strip_pan', addr); + pan.attach(holder, (val) => send(pan)); + register(pan); + } + + function createStripPlugin (addr, name) { + const strip = document.getElementById(`strip-${addr[0]}`); + const id = `plugin-${addr[0]}-${addr[1]}`; + const div = createElem(`<div class="plugin" id="${id}"></div>`, strip); + createElem(`<label class="comp-name">⨍  ${name}</label>`, div); + const enable = new Switch('strip_plugin_enable', addr); + enable.el.classList.add('plugin-enable'); + enable.attach(div, (val) => send(enable)); + register(enable); + } + + function createStripPluginParam (addr, name, data_type, min, max, is_log) { + let param, clazz; + + if (data_type == 'b') { + clazz = 'boolean'; + param = new Switch('strip_plugin_param_value', addr); + } else if (data_type == 'i') { + clazz = 'discrete'; + param = new DiscreteSlider('strip_plugin_param_value', addr, min, max); + } else if (data_type == 'd') { + clazz = 'continuous'; + if (is_log) { + param = new LogarithmicSlider('strip_plugin_param_value', addr, min, max); + } else { + param = new ContinuousSlider('strip_plugin_param_value', addr, min, max); + } + } + + const plugin = document.getElementById(`plugin-${addr[0]}-${addr[1]}`); + const id = `param-${addr[0]}-${addr[1]}-${addr[2]}`; + const div = createElem(`<div class="plugin-param ${clazz}" id="${id}"></div>`, plugin); + createElem(`<label for="${id}">${name}</label>`, div); + + param.attach(div, (val) => send(param)); + param.el.name = id; + register(param); + } + + function send (widget) { + const val = widget.value; + log(`↗ ${widget.node} (${widget.addr}) = ${val}`, 'message-out'); + conn.send(widget.node, widget.addr, [val]); + } + + function createElem (html, parent) { + const t = document.createElement('template'); + t.innerHTML = html; + + const elem = t.content.firstChild; + + if (parent) { + parent.appendChild(elem); + } + + return elem; + } + + function register (widget) { + widgets[widget.hash] = widget; + } + + function log (message, className) { + const output = document.getElementById('log'); + + if (output.childElementCount > MAX_LOG_LINES) { + output.removeChild(output.childNodes[0]); + } + + const pre = document.createElement('pre'); + pre.innerHTML = message; + pre.className = className; + + output.appendChild(pre); + output.scrollTop = output.scrollHeight; + } + +})(); diff --git a/share/web_surfaces/builtin/mixer-demo/js/widget.js b/share/web_surfaces/builtin/mixer-demo/js/widget.js new file mode 100644 index 0000000000..7bab5b1b1a --- /dev/null +++ b/share/web_surfaces/builtin/mixer-demo/js/widget.js @@ -0,0 +1,157 @@ +/* + * Copyright (C) 2020 Luciano Iam <lucianito@gmail.com> + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. + */ + +class Widget { + + constructor (node, addr, html) { + this.node = node; + this.addr = addr; + const template = document.createElement('template'); + template.innerHTML = html; + this.el = template.content.firstChild; + } + + attach (parent, callback) { + parent.appendChild(this.el); + + if (callback) { + this.callback = callback; + } + } + + callback (value) { + // do nothing by default + } + + get hash () { + return [this.node, this.addr]; + } + +} + +class Switch extends Widget { + + constructor (node, addr) { + super (node, addr, `<input type="checkbox" class="widget-switch">`); + this.el.addEventListener('input', (ev) => this.callback(this.value)); + } + + get value () { + return this.el.checked; + } + + set value (val) { + this.el.checked = val; + } + +} + +class Slider extends Widget { + + constructor (node, addr, min, max, step) { + const html = `<input type="range" class="widget-slider" + min="${min}" max="${max}" step="${step}">`; + super(node, addr, html); + this.min = min; + this.max = max; + this.el.addEventListener('input', (ev) => this.callback(this.value)); + } + + get value () { + return parseFloat(this.el.value) + } + + set value (val) { + this.el.value = val; + } + +} + +class DiscreteSlider extends Slider { + + constructor (node, addr, min, max) { + super(node, addr, min, max, 1); + } + +} + +class ContinuousSlider extends Slider { + + constructor (node, addr, min, max) { + super(node, addr, min, max, 0.001); + } + +} + +class LogarithmicSlider extends ContinuousSlider { + + constructor (node, addr, min, max) { + super(node, addr, 0, 1.0); + this.minVal = Math.log(min); + this.maxVal = Math.log(max); + this.scale = this.maxVal - this.minVal; + } + + get value () { + return Math.exp(this.minVal + this.scale * super.value); + } + + set value (val) { + this.el.value = (Math.log(val) - this.minVal) / this.scale; + } + +} + +class StripPanSlider extends ContinuousSlider { + + constructor (node, addr) { + super(node, addr, -1.0, 1.0); + } + +} + +class StripGainSlider extends ContinuousSlider { + + constructor (node, addr) { + super(node, addr, 0, 1.0) + this.minVal = -58.0; + this.maxVal = 6.0; + this.scale = (this.maxVal - this.minVal); + } + + get value () { + return this.maxVal + Math.log10(super.value) * this.scale; + } + + set value (val) { + this.el.value = Math.pow(10.0, (val - this.maxVal) / this.scale); + } + +} + +class StripMeter extends Widget { + + constructor (node, addr) { + super(node, addr, `<label></label>`); + } + + set value (val) { + this.el.innerHTML = val == -Infinity ? '-∞' : `${Math.round(val)} dB`; + } + +} |