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
This commit is contained in:
parent
b9674115b7
commit
2ba8dab95e
@ -7,6 +7,8 @@ body {
|
|||||||
color: rgb(248,248,242);
|
color: rgb(248,248,242);
|
||||||
font-family: Helvetica, Arial, sans-serif;
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -20,26 +22,46 @@ div {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#strips {
|
#surface {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: scroll;
|
display: flex;
|
||||||
overflow-x: hidden;
|
flex-direction: column;
|
||||||
box-shadow: 0px 0px 10px #000;
|
box-shadow: 0px 0px 10px #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#manifest {
|
#top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
padding: 0.25em 0.5em;
|
padding: 0.25em 0.5em;
|
||||||
opacity: 0.5;
|
box-shadow: 0px 0px 10px #000;
|
||||||
background: rgba(0,0,0,0.4);
|
}
|
||||||
|
|
||||||
|
#top > img {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top > span {
|
||||||
|
opacity: 0.75;
|
||||||
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#log {
|
#log {
|
||||||
height: 6em;
|
height: 7em;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
background: rgba(0,0,0,0.4);
|
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 {
|
#log pre {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: Menlo, monospace;
|
font-family: Menlo, monospace;
|
||||||
@ -64,10 +86,12 @@ div {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.strip {
|
.strip {
|
||||||
margin: 5%;
|
margin: 20px;
|
||||||
padding: 2.5% 5%;
|
padding: 20px 40px;
|
||||||
background: rgba(0,0,0,0.1);
|
background: rgba(0,0,0,0.1);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 768px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-meter {
|
.slider-meter {
|
||||||
@ -75,12 +99,12 @@ div {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.strip-slider {
|
.strip-slider {
|
||||||
margin-top: 2.5%;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugin {
|
.plugin {
|
||||||
margin: 5%;
|
margin: 40px 0;
|
||||||
padding: 2.5% 5%;
|
padding: 20px 40px;
|
||||||
background: rgba(0,0,0,0.05);
|
background: rgba(0,0,0,0.05);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
@ -90,7 +114,7 @@ div {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.plugin-param {
|
.plugin-param {
|
||||||
margin: 5%;
|
margin: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugin-param.boolean {
|
.plugin-param.boolean {
|
||||||
|
21
share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg
Normal file
21
share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 2.1 KiB |
@ -8,8 +8,13 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<div id="manifest"></div>
|
<div id="surface">
|
||||||
<div id="strips"></div>
|
<div id="top">
|
||||||
|
<img src="img/ardour-icon.svg">
|
||||||
|
<span id="manifest"></span>
|
||||||
|
</div>
|
||||||
|
<div id="strips"></div>
|
||||||
|
</div>
|
||||||
<div id="log"></div>
|
<div id="log"></div>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="js/main.js"></script>
|
<script type="module" src="js/main.js"></script>
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
// tightly to the message stream
|
// tightly to the message stream
|
||||||
|
|
||||||
import { ANode, Message } from '/shared/message.js';
|
import { ANode, Message } from '/shared/message.js';
|
||||||
import { Ardour } from '/shared/ardour.js';
|
import { ArdourClient } from '/shared/ardour.js';
|
||||||
|
|
||||||
import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
|
import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
|
||||||
StripPanSlider, StripGainSlider, StripMeter } from './widget.js';
|
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,
|
const FEEDBACK_NODES = [ANode.STRIP_GAIN, ANode.STRIP_PAN, ANode.STRIP_METER,
|
||||||
ANode.STRIP_PLUGIN_ENABLE, ANode.STRIP_PLUGIN_PARAM_VALUE];
|
ANode.STRIP_PLUGIN_ENABLE, ANode.STRIP_PLUGIN_PARAM_VALUE];
|
||||||
|
|
||||||
const ardour = new Ardour(location.host);
|
const ardour = new ArdourClient(location.host);
|
||||||
const widgets = {};
|
const widgets = {};
|
||||||
|
|
||||||
main();
|
main();
|
||||||
@ -40,7 +40,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
|
|||||||
function main () {
|
function main () {
|
||||||
ardour.getSurfaceManifest().then((manifest) => {
|
ardour.getSurfaceManifest().then((manifest) => {
|
||||||
const div = document.getElementById('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({
|
ardour.addCallback({
|
||||||
@ -75,7 +75,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
|
|||||||
createElem(`<label class="comp-name" for="${id}">∿  ${name}</label>`, div);
|
createElem(`<label class="comp-name" for="${id}">∿  ${name}</label>`, div);
|
||||||
|
|
||||||
// meter
|
// meter
|
||||||
const meter = new StripMeter('strip_meter', addr);
|
const meter = new StripMeter(ANode.STRIP_METER, addr);
|
||||||
meter.el.classList.add('slider-meter');
|
meter.el.classList.add('slider-meter');
|
||||||
meter.attach(div);
|
meter.attach(div);
|
||||||
register(meter);
|
register(meter);
|
||||||
@ -83,14 +83,14 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
|
|||||||
// gain
|
// gain
|
||||||
let holder = createElem(`<div class="strip-slider"></div>`, div);
|
let holder = createElem(`<div class="strip-slider"></div>`, div);
|
||||||
createElem(`<label>Gain</label>`, holder);
|
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));
|
gain.attach(holder, (val) => send(gain));
|
||||||
register(gain);
|
register(gain);
|
||||||
|
|
||||||
// pan
|
// pan
|
||||||
holder = createElem(`<div class="strip-slider"></div>`, div);
|
holder = createElem(`<div class="strip-slider"></div>`, div);
|
||||||
createElem(`<label>Pan</label>`, holder);
|
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));
|
pan.attach(holder, (val) => send(pan));
|
||||||
register(pan);
|
register(pan);
|
||||||
}
|
}
|
||||||
@ -100,33 +100,33 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
|
|||||||
const id = `plugin-${addr[0]}-${addr[1]}`;
|
const id = `plugin-${addr[0]}-${addr[1]}`;
|
||||||
const div = createElem(`<div class="plugin" id="${id}"></div>`, strip);
|
const div = createElem(`<div class="plugin" id="${id}"></div>`, strip);
|
||||||
createElem(`<label class="comp-name">⨍  ${name}</label>`, div);
|
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.el.classList.add('plugin-enable');
|
||||||
enable.attach(div, (val) => send(enable));
|
enable.attach(div, (val) => send(enable));
|
||||||
register(enable);
|
register(enable);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createStripPluginParam (addr, name, data_type, min, max, is_log) {
|
function createStripPluginParam (addr, name, dataType, min, max, isLog) {
|
||||||
let param, clazz;
|
let param, cssClass;
|
||||||
|
|
||||||
if (data_type == 'b') {
|
if (dataType == 'b') {
|
||||||
clazz = 'boolean';
|
cssClass = 'boolean';
|
||||||
param = new Switch('strip_plugin_param_value', addr);
|
param = new Switch(ANode.STRIP_PLUGIN_PARAM_VALUE, addr);
|
||||||
} else if (data_type == 'i') {
|
} else if (dataType == 'i') {
|
||||||
clazz = 'discrete';
|
cssClass = 'discrete';
|
||||||
param = new DiscreteSlider('strip_plugin_param_value', addr, min, max);
|
param = new DiscreteSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max);
|
||||||
} else if (data_type == 'd') {
|
} else if (dataType == 'd') {
|
||||||
clazz = 'continuous';
|
cssClass = 'continuous';
|
||||||
if (is_log) {
|
if (isLog) {
|
||||||
param = new LogarithmicSlider('strip_plugin_param_value', addr, min, max);
|
param = new LogarithmicSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max);
|
||||||
} else {
|
} 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 plugin = document.getElementById(`plugin-${addr[0]}-${addr[1]}`);
|
||||||
const id = `param-${addr[0]}-${addr[1]}-${addr[2]}`;
|
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);
|
createElem(`<label for="${id}">${name}</label>`, div);
|
||||||
|
|
||||||
param.attach(div, (val) => send(param));
|
param.attach(div, (val) => send(param));
|
||||||
|
@ -2,5 +2,5 @@
|
|||||||
<WebSurface>
|
<WebSurface>
|
||||||
<Name value="Mixer Demo"/>
|
<Name value="Mixer Demo"/>
|
||||||
<Description value="Mixer control capabilities demo aimed at developers"/>
|
<Description value="Mixer control capabilities demo aimed at developers"/>
|
||||||
<Version value="0.0.1"/>
|
<Version value="0.1.0"/>
|
||||||
</WebSurface>
|
</WebSurface>
|
||||||
|
@ -2,5 +2,5 @@
|
|||||||
<WebSurface>
|
<WebSurface>
|
||||||
<Name value="Transport"/>
|
<Name value="Transport"/>
|
||||||
<Description value="Provides basic transport control (under construction)"/>
|
<Description value="Provides basic transport control (under construction)"/>
|
||||||
<Version value="0.0.1"/>
|
<Version value="0.1.0"/>
|
||||||
</WebSurface>
|
</WebSurface>
|
||||||
|
@ -16,13 +16,13 @@
|
|||||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
* 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 () {
|
async function main () {
|
||||||
try {
|
try {
|
||||||
const surfaces = await new Ardour().getAvailableSurfaces();
|
const surfaces = await new ArdourClient().getAvailableSurfaces();
|
||||||
printSurfaces(surfaces);
|
printSurfaces(surfaces);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
printError(`Error loading surfaces list: ${err.message}`);
|
printError(`Error loading surfaces list: ${err.message}`);
|
||||||
|
@ -16,10 +16,14 @@
|
|||||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
* 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';
|
import { MessageChannel } from './channel.js';
|
||||||
|
|
||||||
export class Ardour {
|
// See *Mixin for the available APIs
|
||||||
|
|
||||||
|
class BaseArdourClient {
|
||||||
|
|
||||||
constructor () {
|
constructor () {
|
||||||
this._callbacks = [];
|
this._callbacks = [];
|
||||||
@ -56,90 +60,11 @@ export class Ardour {
|
|||||||
this._channel.send(msg);
|
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
|
// Private methods
|
||||||
|
|
||||||
_send (node, addr, val) {
|
_send (node, addr, val) {
|
||||||
const msg = new Message(node, addr, val);
|
const msg = new Message(node, addr, val);
|
||||||
this._channel.send(msg);
|
this.send(msg);
|
||||||
return 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;
|
||||||
|
}
|
||||||
|
@ -16,6 +16,8 @@
|
|||||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// Example empty callback
|
||||||
|
|
||||||
export class ArdourCallback {
|
export class ArdourCallback {
|
||||||
|
|
||||||
onTempo (bpm) {}
|
onTempo (bpm) {}
|
||||||
|
73
share/web_surfaces/shared/control.js
Normal file
73
share/web_surfaces/shared/control.js
Normal file
@ -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]);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
51
share/web_surfaces/shared/metadata.js
Normal file
51
share/web_surfaces/shared/metadata.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user