From 50ba8dea96415f651b5173c017592dd46a2541ec Mon Sep 17 00:00:00 2001 From: Luciano Iam Date: Tue, 14 Apr 2020 22:58:44 +0200 Subject: WebSockets: improve JS client and demo add methods to callback.js automatically reconnect js client on disconnection mixer-demo do not recreate UI on reconnection NO-OP: indentation in message.js make client JS reconnection optional fix mixer-demo scrolling minor JS client refactor improve mixer-demo readability --- share/web_surfaces/builtin/mixer-demo/css/main.css | 5 + share/web_surfaces/builtin/mixer-demo/js/main.js | 143 +++++++++++---------- share/web_surfaces/builtin/mixer-demo/js/widget.js | 46 +++---- 3 files changed, 98 insertions(+), 96 deletions(-) (limited to 'share/web_surfaces/builtin/mixer-demo') diff --git a/share/web_surfaces/builtin/mixer-demo/css/main.css b/share/web_surfaces/builtin/mixer-demo/css/main.css index 0fd812c39b..23965c3fd0 100644 --- a/share/web_surfaces/builtin/mixer-demo/css/main.css +++ b/share/web_surfaces/builtin/mixer-demo/css/main.css @@ -26,6 +26,7 @@ div { flex: 1; display: flex; flex-direction: column; + overflow: hidden; box-shadow: 0px 0px 10px #000; } @@ -76,6 +77,10 @@ div { color: rgb(172,128,255); } +.info { + color: rgb(99,208,230); +} + .error { color: rgb(249,36,114); } diff --git a/share/web_surfaces/builtin/mixer-demo/js/main.js b/share/web_surfaces/builtin/mixer-demo/js/main.js index 64d5fca33f..b6713664b5 100644 --- a/share/web_surfaces/builtin/mixer-demo/js/main.js +++ b/share/web_surfaces/builtin/mixer-demo/js/main.js @@ -17,8 +17,7 @@ */ // This example does not call the API methods in ardour.js, - // instead it interacts at a lower level by coupling the widgets - // tightly to the message stream + // instead it couples the widgets directly to the message stream import { ANode, Message } from '/shared/message.js'; import { ArdourClient } from '/shared/ardour.js'; @@ -29,8 +28,6 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, (() => { const MAX_LOG_LINES = 1000; - const FEEDBACK_NODES = [ANode.STRIP_GAIN, ANode.STRIP_PAN, ANode.STRIP_METER, - ANode.STRIP_PLUGIN_ENABLE, ANode.STRIP_PLUGIN_PARAM_VALUE]; const ardour = new ArdourClient(location.host); const widgets = {}; @@ -43,101 +40,95 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, div.innerHTML = `${manifest.name.toUpperCase()} v${manifest.version} — ${manifest.description}`; }); - ardour.addCallback({ - onMessage: (msg) => { - log(`↙ ${msg}`, 'message-in'); - - if (msg.node == ANode.STRIP_DESC) { - createStrip (msg.addr, ...msg.val); - } else if (msg.node == ANode.STRIP_PLUGIN_DESC) { - createStripPlugin (msg.addr, ...msg.val); - } else if (msg.node == ANode.STRIP_PLUGIN_PARAM_DESC) { - createStripPluginParam (msg.addr, ...msg.val); - } else if (FEEDBACK_NODES.includes(msg.node)) { - if (widgets[msg.hash]) { - widgets[msg.hash].value = msg.val[0]; - } - } - }, - - onError: () => { - log('Client error', 'error'); - } + ardour.addCallbacks({ + onConnected: (error) => { log('Client connected', 'info'); }, + onDisconnected: (error) => { log('Client disconnected', 'error'); }, + onMessage: processMessage, + onStripDesc: createStrip, + onStripPluginDesc: createStripPlugin, + onStripPluginParamDesc: createStripPluginParam }); - ardour.open(); + ardour.connect(); } - function createStrip (addr, name) { - const id = `strip-${addr[0]}`; + function createStrip (stripId, name) { + const domId = `strip-${stripId}`; + if (document.getElementById(domId) != null) { + return; + } + const strips = document.getElementById('strips'); - const div = createElem(`
`, strips); - createElem(``, div); + const div = createElem(`
`, strips); + createElem(``, div); // meter - const meter = new StripMeter(ANode.STRIP_METER, addr); + const meter = new StripMeter(); meter.el.classList.add('slider-meter'); - meter.attach(div); - register(meter); + meter.appendTo(div); + connectWidget(meter, ANode.STRIP_METER, stripId); // gain let holder = createElem(`
`, div); createElem(``, holder); - const gain = new StripGainSlider(ANode.STRIP_GAIN, addr); - gain.attach(holder, (val) => send(gain)); - register(gain); + const gain = new StripGainSlider(); + gain.appendTo(holder); + connectWidget(gain, ANode.STRIP_GAIN, stripId); // pan holder = createElem(`
`, div); createElem(``, holder); - const pan = new StripPanSlider(ANode.STRIP_PAN, addr); - pan.attach(holder, (val) => send(pan)); - register(pan); + const pan = new StripPanSlider(); + pan.appendTo(holder); + connectWidget(pan, ANode.STRIP_PAN, stripId); } - function createStripPlugin (addr, name) { - const strip = document.getElementById(`strip-${addr[0]}`); - const id = `plugin-${addr[0]}-${addr[1]}`; - const div = createElem(`
`, strip); + function createStripPlugin (stripId, pluginId, name) { + const domId = `plugin-${stripId}-${pluginId}`; + if (document.getElementById(domId) != null) { + return; + } + + const strip = document.getElementById(`strip-${stripId}`); + const div = createElem(`
`, strip); createElem(``, div); - const enable = new Switch(ANode.STRIP_PLUGIN_ENABLE, addr); + + const enable = new Switch(); enable.el.classList.add('plugin-enable'); - enable.attach(div, (val) => send(enable)); - register(enable); + enable.appendTo(div); + connectWidget(enable, ANode.STRIP_PLUGIN_ENABLE, stripId, pluginId); } - function createStripPluginParam (addr, name, dataType, min, max, isLog) { + function createStripPluginParam (stripId, pluginId, paramId, name, valueType, min, max, isLog) { + const domId = `param-${stripId}-${pluginId}-${paramId}`; + if (document.getElementById(domId) != null) { + return; + } + let param, cssClass; - if (dataType == 'b') { + if (valueType == 'b') { cssClass = 'boolean'; - param = new Switch(ANode.STRIP_PLUGIN_PARAM_VALUE, addr); - } else if (dataType == 'i') { + param = new Switch(); + } else if (valueType == 'i') { cssClass = 'discrete'; - param = new DiscreteSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max); - } else if (dataType == 'd') { + param = new DiscreteSlider(min, max); + } else if (valueType == 'd') { cssClass = 'continuous'; if (isLog) { - param = new LogarithmicSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max); + param = new LogarithmicSlider(min, max); } else { - param = new ContinuousSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max); + param = new ContinuousSlider(min, max); } } - const plugin = document.getElementById(`plugin-${addr[0]}-${addr[1]}`); - const id = `param-${addr[0]}-${addr[1]}-${addr[2]}`; - const div = createElem(`
`, plugin); - createElem(``, div); + const plugin = document.getElementById(`plugin-${stripId}-${pluginId}`); + const div = createElem(`
`, plugin); + createElem(``, div); - param.attach(div, (val) => send(param)); - param.el.name = id; - register(param); - } - - function send (widget) { - const msg = new Message(widget.node, widget.addr, [widget.value]); - log(`↗ ${msg}`, 'message-out'); - ardour.send(msg); + param.el.name = domId; + param.appendTo(div); + connectWidget(param, ANode.STRIP_PLUGIN_PARAM_VALUE, stripId, pluginId, paramId); } function createElem (html, parent) { @@ -153,8 +144,24 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, return elem; } - function register (widget) { - widgets[widget.hash] = widget; + function connectWidget (widget, node, ...addr) { + const nodeAddrId = Message.nodeAddrId(node, addr); + + widgets[nodeAddrId] = widget; + + widget.callback = (val) => { + const msg = new Message(node, addr, [val]); + log(`↗ ${msg}`, 'message-out'); + ardour.send(msg); + }; + } + + function processMessage (msg) { + log(`↙ ${msg}`, 'message-in'); + + if (widgets[msg.nodeAddrId]) { + widgets[msg.nodeAddrId].value = msg.val[0]; + } } function log (message, className) { diff --git a/share/web_surfaces/builtin/mixer-demo/js/widget.js b/share/web_surfaces/builtin/mixer-demo/js/widget.js index 335e3d8756..417c0c7c7b 100644 --- a/share/web_surfaces/builtin/mixer-demo/js/widget.js +++ b/share/web_surfaces/builtin/mixer-demo/js/widget.js @@ -20,36 +20,26 @@ import { Message } from '/shared/message.js'; export class Widget { - constructor (node, addr, html) { - this.node = node; - this.addr = addr; + constructor (html) { const template = document.createElement('template'); template.innerHTML = html; this.el = template.content.firstChild; } - attach (parent, callback) { + appendTo (parent) { parent.appendChild(this.el); - - if (callback) { - this.callback = callback; - } } callback (value) { // do nothing by default } - get hash () { - return Message.hash(this.node, this.addr); - } - } export class Switch extends Widget { - constructor (node, addr) { - super (node, addr, ``); + constructor () { + super (``); this.el.addEventListener('input', (ev) => this.callback(this.value)); } @@ -65,10 +55,10 @@ export class Switch extends Widget { export class Slider extends Widget { - constructor (node, addr, min, max, step) { + constructor (min, max, step) { const html = ``; - super(node, addr, html); + super(html); this.min = min; this.max = max; this.el.addEventListener('input', (ev) => this.callback(this.value)); @@ -86,24 +76,24 @@ export class Slider extends Widget { export class DiscreteSlider extends Slider { - constructor (node, addr, min, max) { - super(node, addr, min, max, 1); + constructor (min, max, step) { + super(min, max, step || 1); } } export class ContinuousSlider extends Slider { - constructor (node, addr, min, max) { - super(node, addr, min, max, 0.001); + constructor (min, max) { + super(min, max, 0.001); } } export class LogarithmicSlider extends ContinuousSlider { - constructor (node, addr, min, max) { - super(node, addr, 0, 1.0); + constructor (min, max) { + super(0, 1.0); this.minVal = Math.log(min); this.maxVal = Math.log(max); this.scale = this.maxVal - this.minVal; @@ -121,16 +111,16 @@ export class LogarithmicSlider extends ContinuousSlider { export class StripPanSlider extends ContinuousSlider { - constructor (node, addr) { - super(node, addr, -1.0, 1.0); + constructor () { + super(-1.0, 1.0); } } export class StripGainSlider extends ContinuousSlider { - constructor (node, addr) { - super(node, addr, 0, 1.0) + constructor () { + super(0, 1.0) this.minVal = -58.0; this.maxVal = 6.0; this.scale = (this.maxVal - this.minVal); @@ -148,8 +138,8 @@ export class StripGainSlider extends ContinuousSlider { export class StripMeter extends Widget { - constructor (node, addr) { - super(node, addr, ``); + constructor () { + super(``); } set value (val) { -- cgit v1.2.3