diff options
author | Luciano Iam <lucianito@gmail.com> | 2020-04-14 09:53:25 +0200 |
---|---|---|
committer | Robin Gareus <robin@gareus.org> | 2020-04-17 20:15:10 +0200 |
commit | 2ba8dab95e10596ac88539a74e47024836138019 (patch) | |
tree | 77e96abf8eee3767804476a1f0fa4df655effc23 | |
parent | b9674115b7d3780164ed30e4151984de78b904e7 (diff) |
WebSockets: update JS client and demo
avoid hardcoded node name strings in mixer-demo
improve mixer-demo design
split ardour.js client into control and metadata mixins
rename JS client class Ardour to ArdourClient
JS client improve mixin implementation
JS client improve manifest parser
NO-OP whitespace and comments
NO-OP update websurface manifest versions
add Ardour icon in mixer-demo
improve mixer-demo scrolling on touch screens
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/css/main.css | 50 | ||||
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg | 21 | ||||
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/index.html | 9 | ||||
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/js/main.js | 44 | ||||
-rw-r--r-- | share/web_surfaces/builtin/mixer-demo/manifest.xml | 2 | ||||
-rw-r--r-- | share/web_surfaces/builtin/transport/manifest.xml | 2 | ||||
-rw-r--r-- | share/web_surfaces/index/main.js | 4 | ||||
-rw-r--r-- | share/web_surfaces/shared/ardour.js | 102 | ||||
-rw-r--r-- | share/web_surfaces/shared/callback.js | 2 | ||||
-rw-r--r-- | share/web_surfaces/shared/control.js | 73 | ||||
-rw-r--r-- | share/web_surfaces/shared/metadata.js | 51 |
11 files changed, 237 insertions, 123 deletions
diff --git a/share/web_surfaces/builtin/mixer-demo/css/main.css b/share/web_surfaces/builtin/mixer-demo/css/main.css index 5477f9840e..0fd812c39b 100644 --- a/share/web_surfaces/builtin/mixer-demo/css/main.css +++ b/share/web_surfaces/builtin/mixer-demo/css/main.css @@ -7,6 +7,8 @@ body { color: rgb(248,248,242); font-family: Helvetica, Arial, sans-serif; height: 100%; + width: 100%; + position: fixed; margin: 0; } @@ -20,26 +22,46 @@ div { height: 100%; } -#strips { +#surface { flex: 1; - overflow: scroll; - overflow-x: hidden; + display: flex; + flex-direction: column; box-shadow: 0px 0px 10px #000; } -#manifest { +#top { + display: flex; + align-items: center; padding: 0.25em 0.5em; - opacity: 0.5; - background: rgba(0,0,0,0.4); + box-shadow: 0px 0px 10px #000; +} + +#top > img { + height: 24px; +} + +#top > span { + opacity: 0.75; + margin-left: 12px; } #log { - height: 6em; + height: 7em; overflow: scroll; overflow-x: hidden; background: rgba(0,0,0,0.4); } +#strips { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + overflow: scroll; + overflow-x: hidden; + background: rgba(0,0,0,0.2); +} + #log pre { margin: 0; font-family: Menlo, monospace; @@ -64,10 +86,12 @@ div { } .strip { - margin: 5%; - padding: 2.5% 5%; + margin: 20px; + padding: 20px 40px; background: rgba(0,0,0,0.1); border-radius: 5px; + width: 100%; + max-width: 768px; } .slider-meter { @@ -75,12 +99,12 @@ div { } .strip-slider { - margin-top: 2.5%; + margin-top: 20px; } .plugin { - margin: 5%; - padding: 2.5% 5%; + margin: 40px 0; + padding: 20px 40px; background: rgba(0,0,0,0.05); border-radius: 5px; } @@ -90,7 +114,7 @@ div { } .plugin-param { - margin: 5%; + margin: 40px; } .plugin-param.boolean { diff --git a/share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg b/share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg new file mode 100644 index 0000000000..b824d7df55 --- /dev/null +++ b/share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="92px" height="80px" viewBox="0 0 92 80" enable-background="new 0 0 92 80" xml:space="preserve">
+<path id="path6984" fill="#C61F40" d="
+ M45.586,0.44L-0.082,79.558c3.356,0,2.828-2.382,4.417-2.382c1.681,0.004,1.367,1.19,2.951,1.19c0.814,0,1.467-0.806,1.466-2.804
+ c0-2.664,0.661-4.017,1.476-4.017s1.476,1.187,1.476,2.372c0,1.492,0.662,2.678,1.476,2.678c0.814,0,1.477-2.019,1.477-4.512
+ l-0.01-2.857c0-3.447,0.661-6.24,1.476-6.24s1.477,1.207,1.476,5.112c0,3.104,0.662,6.198,1.476,6.198
+ c0.814,0,1.478-3.602,1.477-9.382c0-6.68,0.65-10.996,1.465-10.996c0.815,0,1.477,4.32,1.476,8.582c0,4.977,0.662,9.878,1.477,9.878
+ s1.477-4.902,1.476-11.701c0-7.302,0.651-12.609,1.466-12.609c0.813,0,1.477,5.308,1.476,11.406c0,6.4,0.661,11.955,1.476,11.955
+ s1.476-5.551,1.476-12.661c0-7.109,0.651-12.766,1.466-12.766s1.476,5.656,1.476,12.649c0,6.994,0.662,12.641,1.476,12.641
+ c0.814,0,1.477-5.65,1.477-12.397c0-6.602,0.65-12.135,1.465-12.135s1.476,5.53,1.476,12.746c0,6.952,0.663,12.271,1.477,12.271
+ c0.813,0,1.477-5.318,1.476-11.332c0-5.651,0.651-10.669,1.465-10.669c0.814,0,1.478,5.027,1.477,11.882
+ c0,6.413,0.661,11.068,1.476,11.068s1.477-4.657,1.476-9.667c0-4.514,0.651-8.781,1.466-8.781s1.477,4.265,1.476,10.32
+ c0,5.522,0.662,9.351,1.476,9.351c0.814,0,1.477-3.825,1.477-7.727c0-3.353,0.65-6.737,1.465-6.737s1.476,3.382,1.476,8.382
+ c0,4.449,0.662,7.389,1.477,7.389s1.476-2.586,1.476-5.407c0-2.911,0.662-5.145,1.476-5.145c0.814,0,1.466,2.501,1.466,6.356
+ c0,3.345,0.661,5.439,1.476,5.439s1.476-1.732,1.476-3.479c0-1.801,0.662-3.563,1.477-3.563c0.813,0,1.465,1.703,1.465,4.459
+ c0,2.317,0.662,3.668,1.477,3.668s1.477-0.941,1.477-2.034c0-1.438,0.661-2.098,1.476-2.098s1.466,0.987,1.466,2.814
+ c0,1.44,0.661,2.192,1.476,2.192c1.539,0,1.331-1.917,2.951-1.929c1.773,0,1.253,2.571,2.941,2.571c1.217,0,2.159-0.469,2.952-0.474
+ c1.316,0,1.408,0.928,4.416,0.928L45.588,0.44H45.586z"/>
+</svg>
diff --git a/share/web_surfaces/builtin/mixer-demo/index.html b/share/web_surfaces/builtin/mixer-demo/index.html index a94dd17f61..d1c4308616 100644 --- a/share/web_surfaces/builtin/mixer-demo/index.html +++ b/share/web_surfaces/builtin/mixer-demo/index.html @@ -8,8 +8,13 @@ </head> <body> <div id="main"> - <div id="manifest"></div> - <div id="strips"></div> + <div id="surface"> + <div id="top"> + <img src="img/ardour-icon.svg"> + <span id="manifest"></span> + </div> + <div id="strips"></div> + </div> <div id="log"></div> </div> <script type="module" src="js/main.js"></script> diff --git a/share/web_surfaces/builtin/mixer-demo/js/main.js b/share/web_surfaces/builtin/mixer-demo/js/main.js index a2780565b6..64d5fca33f 100644 --- a/share/web_surfaces/builtin/mixer-demo/js/main.js +++ b/share/web_surfaces/builtin/mixer-demo/js/main.js @@ -21,7 +21,7 @@ // tightly to the message stream import { ANode, Message } from '/shared/message.js'; -import { Ardour } from '/shared/ardour.js'; +import { ArdourClient } from '/shared/ardour.js'; import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, StripPanSlider, StripGainSlider, StripMeter } from './widget.js'; @@ -32,7 +32,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, const FEEDBACK_NODES = [ANode.STRIP_GAIN, ANode.STRIP_PAN, ANode.STRIP_METER, ANode.STRIP_PLUGIN_ENABLE, ANode.STRIP_PLUGIN_PARAM_VALUE]; - const ardour = new Ardour(location.host); + const ardour = new ArdourClient(location.host); const widgets = {}; main(); @@ -40,7 +40,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, function main () { ardour.getSurfaceManifest().then((manifest) => { const div = document.getElementById('manifest'); - div.innerHTML = `${manifest.name} v${manifest.version}`; + div.innerHTML = `${manifest.name.toUpperCase()} v${manifest.version} — ${manifest.description}`; }); ardour.addCallback({ @@ -75,7 +75,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, createElem(`<label class="comp-name" for="${id}">∿  ${name}</label>`, div); // meter - const meter = new StripMeter('strip_meter', addr); + const meter = new StripMeter(ANode.STRIP_METER, addr); meter.el.classList.add('slider-meter'); meter.attach(div); register(meter); @@ -83,14 +83,14 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, // gain let holder = createElem(`<div class="strip-slider"></div>`, div); createElem(`<label>Gain</label>`, holder); - const gain = new StripGainSlider('strip_gain', addr); + const gain = new StripGainSlider(ANode.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); + const pan = new StripPanSlider(ANode.STRIP_PAN, addr); pan.attach(holder, (val) => send(pan)); register(pan); } @@ -100,33 +100,33 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider, 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); + const enable = new Switch(ANode.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); + function createStripPluginParam (addr, name, dataType, min, max, isLog) { + let param, cssClass; + + if (dataType == 'b') { + cssClass = 'boolean'; + param = new Switch(ANode.STRIP_PLUGIN_PARAM_VALUE, addr); + } else if (dataType == 'i') { + cssClass = 'discrete'; + param = new DiscreteSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max); + } else if (dataType == 'd') { + cssClass = 'continuous'; + if (isLog) { + param = new LogarithmicSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max); } else { - param = new ContinuousSlider('strip_plugin_param_value', addr, min, max); + param = new ContinuousSlider(ANode.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); + const div = createElem(`<div class="plugin-param ${cssClass}" id="${id}"></div>`, plugin); createElem(`<label for="${id}">${name}</label>`, div); param.attach(div, (val) => send(param)); diff --git a/share/web_surfaces/builtin/mixer-demo/manifest.xml b/share/web_surfaces/builtin/mixer-demo/manifest.xml index f0c1b5ddc3..bfa80a21b9 100644 --- a/share/web_surfaces/builtin/mixer-demo/manifest.xml +++ b/share/web_surfaces/builtin/mixer-demo/manifest.xml @@ -2,5 +2,5 @@ <WebSurface> <Name value="Mixer Demo"/> <Description value="Mixer control capabilities demo aimed at developers"/> - <Version value="0.0.1"/> + <Version value="0.1.0"/> </WebSurface> diff --git a/share/web_surfaces/builtin/transport/manifest.xml b/share/web_surfaces/builtin/transport/manifest.xml index 2f9174a152..aef70440cc 100644 --- a/share/web_surfaces/builtin/transport/manifest.xml +++ b/share/web_surfaces/builtin/transport/manifest.xml @@ -2,5 +2,5 @@ <WebSurface> <Name value="Transport"/> <Description value="Provides basic transport control (under construction)"/> - <Version value="0.0.1"/> + <Version value="0.1.0"/> </WebSurface> diff --git a/share/web_surfaces/index/main.js b/share/web_surfaces/index/main.js index 2dcb59e654..3594268991 100644 --- a/share/web_surfaces/index/main.js +++ b/share/web_surfaces/index/main.js @@ -16,13 +16,13 @@ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */ -import { Ardour } from '/shared/ardour.js'; +import { ArdourClient } from '/shared/ardour.js'; (() => { async function main () { try { - const surfaces = await new Ardour().getAvailableSurfaces(); + const surfaces = await new ArdourClient().getAvailableSurfaces(); printSurfaces(surfaces); } catch (err) { printError(`Error loading surfaces list: ${err.message}`); diff --git a/share/web_surfaces/shared/ardour.js b/share/web_surfaces/shared/ardour.js index 77e6bf49b9..a7e6978ba2 100644 --- a/share/web_surfaces/shared/ardour.js +++ b/share/web_surfaces/shared/ardour.js @@ -16,10 +16,14 @@ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */ -import { ANode, Message } from './message.js'; +import { MetadataMixin } from './metadata.js'; +import { ControlMixin } from './control.js'; +import { Message } from './message.js'; import { MessageChannel } from './channel.js'; -export class Ardour { +// See *Mixin for the available APIs + +class BaseArdourClient { constructor () { this._callbacks = []; @@ -56,90 +60,11 @@ export class Ardour { this._channel.send(msg); } - // Surface metadata API over HTTP - - async getAvailableSurfaces () { - const response = await fetch('/surfaces.json'); - - if (response.status == 200) { - return await response.json(); - } else { - throw this._fetchResponseStatusError(response.status); - } - } - - async getSurfaceManifest () { - const response = await fetch('manifest.xml'); - - if (response.status == 200) { - const xmlText = await response.text(); - const xmlDoc = new DOMParser().parseFromString(xmlText, 'text/xml'); - return { - name: xmlDoc.getElementsByTagName('Name')[0].getAttribute('value'), - description: xmlDoc.getElementsByTagName('Description')[0].getAttribute('value'), - version: xmlDoc.getElementsByTagName('Version')[0].getAttribute('value') - } - } else { - throw this._fetchResponseStatusError(response.status); - } - } - - // Surface control API over WebSockets - // clients need to call open() before calling these methods - - async getTempo () { - return (await this._sendAndReceive(ANode.TEMPO))[0]; - } - - async getStripGain (stripId) { - return (await this._sendAndReceive(ANode.STRIP_GAIN, [stripId]))[0]; - } - - async getStripPan (stripId) { - return (await this._sendAndReceive(ANode.STRIP_PAN, [stripId]))[0]; - } - - async getStripMute (stripId) { - return (await this._sendAndReceive(ANode.STRIP_MUTE, [stripId]))[0]; - } - - async getStripPluginEnable (stripId, pluginId) { - return (await this._sendAndReceive(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId]))[0]; - } - - async getStripPluginParamValue (stripId, pluginId, paramId) { - return (await this._sendAndReceive(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId]))[0]; - } - - setTempo (bpm) { - this._send(ANode.TEMPO, [], [bpm]); - } - - setStripGain (stripId, db) { - this._send(ANode.STRIP_GAIN, [stripId], [db]); - } - - setStripPan (stripId, value) { - this._send(ANode.STRIP_PAN, [stripId], [value]); - } - - setStripMute (stripId, value) { - this._send(ANode.STRIP_MUTE, [stripId], [value]); - } - - setStripPluginEnable (stripId, pluginId, value) { - this._send(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId], [value]); - } - - setStripPluginParamValue (stripId, pluginId, paramId, value) { - this._send(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId], [value]); - } - // Private methods _send (node, addr, val) { const msg = new Message(node, addr, val); - this._channel.send(msg); + this.send(msg); return msg; } @@ -178,3 +103,16 @@ export class Ardour { } } + +export class ArdourClient extends mixin(BaseArdourClient, ControlMixin, MetadataMixin) {} + +function mixin (dstClass, ...classes) { + for (const srcClass of classes) { + for (const methName of Object.getOwnPropertyNames(srcClass.prototype)) { + if (methName != 'constructor') { + dstClass.prototype[methName] = srcClass.prototype[methName]; + } + } + } + return dstClass; +} diff --git a/share/web_surfaces/shared/callback.js b/share/web_surfaces/shared/callback.js index 1328f49ffb..a510b118cf 100644 --- a/share/web_surfaces/shared/callback.js +++ b/share/web_surfaces/shared/callback.js @@ -16,6 +16,8 @@ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */ + // Example empty callback + export class ArdourCallback { onTempo (bpm) {} diff --git a/share/web_surfaces/shared/control.js b/share/web_surfaces/shared/control.js new file mode 100644 index 0000000000..19116bf4c7 --- /dev/null +++ b/share/web_surfaces/shared/control.js @@ -0,0 +1,73 @@ +/* + * Copyright © 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. + */ + +import { ANode } from './message.js'; + +// Surface control API over WebSockets + +export class ControlMixin { + + async getTempo () { + return (await this._sendAndReceive(ANode.TEMPO))[0]; + } + + async getStripGain (stripId) { + return (await this._sendAndReceive(ANode.STRIP_GAIN, [stripId]))[0]; + } + + async getStripPan (stripId) { + return (await this._sendAndReceive(ANode.STRIP_PAN, [stripId]))[0]; + } + + async getStripMute (stripId) { + return (await this._sendAndReceive(ANode.STRIP_MUTE, [stripId]))[0]; + } + + async getStripPluginEnable (stripId, pluginId) { + return (await this._sendAndReceive(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId]))[0]; + } + + async getStripPluginParamValue (stripId, pluginId, paramId) { + return (await this._sendAndReceive(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId]))[0]; + } + + setTempo (bpm) { + this._send(ANode.TEMPO, [], [bpm]); + } + + setStripGain (stripId, db) { + this._send(ANode.STRIP_GAIN, [stripId], [db]); + } + + setStripPan (stripId, value) { + this._send(ANode.STRIP_PAN, [stripId], [value]); + } + + setStripMute (stripId, value) { + this._send(ANode.STRIP_MUTE, [stripId], [value]); + } + + setStripPluginEnable (stripId, pluginId, value) { + this._send(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId], [value]); + } + + setStripPluginParamValue (stripId, pluginId, paramId, value) { + this._send(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId], [value]); + } + +} diff --git a/share/web_surfaces/shared/metadata.js b/share/web_surfaces/shared/metadata.js new file mode 100644 index 0000000000..888476c681 --- /dev/null +++ b/share/web_surfaces/shared/metadata.js @@ -0,0 +1,51 @@ +/* + * Copyright © 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. + */ + +// Surface metadata API over HTTP + +export class MetadataMixin { + + async getAvailableSurfaces () { + const response = await fetch('/surfaces.json'); + + if (response.status == 200) { + return await response.json(); + } else { + throw this._fetchResponseStatusError(response.status); + } + } + + async getSurfaceManifest () { + const response = await fetch('manifest.xml'); + + if (response.status == 200) { + const manifest = {}; + const xmlText = await response.text(); + const xmlDoc = new DOMParser().parseFromString(xmlText, 'text/xml'); + + for (const child of xmlDoc.children[0].children) { + manifest[child.tagName.toLowerCase()] = child.getAttribute('value'); + } + + return manifest; + } else { + throw this._fetchResponseStatusError(response.status); + } + } + +} |