13
0

WS: Add strip labels in the mixer demo

Plus some minor widget code and layout improvements
This commit is contained in:
Luciano Iam 2020-07-25 17:45:39 +02:00 committed by Robin Gareus
parent c8bc9a25b3
commit 0b71764f44
Signed by: rgareus
GPG Key ID: A090BCE02CF57F04
4 changed files with 54 additions and 27 deletions

View File

@ -17,8 +17,8 @@
*/
import ArdourClient from '/shared/ardour.js';
import { createRootContainer, Container, DiscreteKnob, LinearKnob, PanKnob,
StripGainFader, StripMeter, Toggle } from './tkwidget.js';
import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
PanKnob, StripGainFader, StripMeter, Toggle } from './tkwidget.js';
(() => {
@ -40,7 +40,7 @@ import { createRootContainer, Container, DiscreteKnob, LinearKnob, PanKnob,
for (const strip of ardour.mixer.strips) {
const container = new Container();
container.classList = 'strip';
container.classList.add('strip');
container.appendTo(mixer);
createStrip(strip, container);
}
@ -53,10 +53,9 @@ import { createRootContainer, Container, DiscreteKnob, LinearKnob, PanKnob,
function createStrip (strip, container) {
const pan = new PanKnob();
pan.classList += 'pan';
pan.appendTo(container);
if (strip.isVca) {
// hide pan, keeping layout
// hide pan keeping layout
pan.element.style.visibility = 'hidden';
} else {
pan.bindTo(strip, 'pan');
@ -64,7 +63,7 @@ import { createRootContainer, Container, DiscreteKnob, LinearKnob, PanKnob,
const meterFader = new Container();
meterFader.appendTo(container);
meterFader.classList = 'strip-meter-fader';
meterFader.classList.add('strip-meter-fader');
const gain = new StripGainFader();
gain.appendTo(meterFader);
@ -74,6 +73,11 @@ import { createRootContainer, Container, DiscreteKnob, LinearKnob, PanKnob,
meter.appendTo(meterFader);
meter.bindTo(strip, 'meter');
const label = new Label();
label.text = strip.name;
label.classList.add('strip-label');
label.appendTo(container);
// TO DO
/*for (const plugin of strip.plugins) {
createStripPlugin(plugin, container);

View File

@ -17,10 +17,40 @@
*/
import loadToolkit from './tkloader.js';
import { BaseContainer, BaseControl } from './widget.js';
import { BaseWidget, BaseContainer, BaseControl } from './widget.js';
class Widget extends BaseWidget {
constructor (tk) {
super();
this.tk = tk;
}
get element () {
return this.tk.element;
}
}
export class Label extends Widget {
constructor () {
super(new TK.Label());
}
set text (text) {
this.tk.set('label', text);
}
}
class Control extends BaseControl {
constructor (tk) {
super();
this.tk = tk;
}
get element () {
return this.tk.element;
}
@ -30,7 +60,7 @@ class Control extends BaseControl {
class RangeControl extends Control {
constructor (tk) {
super();
super(tk);
this.tk = tk;
this.lastValue = NaN;

View File

@ -18,8 +18,10 @@
export class BaseWidget {
get element () {
// empty
constructor (element) {
if (element) {
this.element = element;
}
}
appendTo (container) {
@ -38,16 +40,12 @@ export class BaseWidget {
return this.element.classList;
}
set classList (classList) {
this.element.classList = classList;
}
}
export class BaseContainer extends BaseWidget {
constructor (context) {
super(context);
constructor () {
super();
this.children = [];
}
@ -80,12 +78,3 @@ export class BaseControl extends BaseWidget {
}
}
// Currently unused
export function createElement (html) {
const t = document.createElement('template');
t.innerHTML = html;
const elem = t.content.firstChild;
return elem;
}

View File

@ -30,7 +30,7 @@ div {
display: flex;
flex-direction: row;
height: 100%;
max-height: 480px;
max-height: 600px;
width: 100%;
overflow-x: auto;
justify-content: space-between;
@ -40,7 +40,7 @@ div {
display: flex;
flex-direction: column;
align-items: center;
min-width: 120px;
min-width: 150px;
}
.strip-meter-fader {
@ -48,6 +48,10 @@ div {
flex: 1;
}
.strip-label {
padding: 1em 0;
}
.toolkit-fader {
/* empty */
}