WS: Add strip labels in the mixer demo

Plus some minor widget code and layout improvements

share/web_surfaces/builtin/mixer/js/main.js

@@ -17,8 +17,8 @@
  */
 
 import ArdourClient from '/shared/ardour.js';
-import { createRootContainer, Container, DiscreteKnob, LinearKnob, PanKnob,
+import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
-            StripGainFader, StripMeter, Toggle } from './tkwidget.js';
+            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);

share/web_surfaces/builtin/mixer/js/tkwidget.js

@@ -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;

share/web_surfaces/builtin/mixer/js/widget.js

@@ -18,8 +18,10 @@
 
 export class BaseWidget {
 
-    get element () {
+    constructor (element) {
-        // empty
+        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) {
+    constructor () {
-        super(context);
+        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;
-}

share/web_surfaces/builtin/mixer/main.css

@@ -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 */
 }