WS: Add strip mute buttons to mixer demo

share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css

@@ -20,13 +20,13 @@
     margin: 4px;
     padding: 8px 16px;
     color: #002f42;
-    text-shadow: 0px 1px 0px rgba(255,255,255,0.6);
-    background-color: rgb(245,245,245);
+    /*text-shadow: 0px 1px 0px rgba(255,255,255,0.6);*/
+    /*background-color: rgb(245,245,245);
     background-image: url(../images/gradients/grey_out.png);
     background-repeat: repeat-x;
     background-size: 100% 200%;
     background-position: 50% 0;
-    background-clip: padding-box;
+    background-clip: padding-box;*/
     border: 1px solid #aaa;
     -webkit-border-radius: 6px;
     -moz-border-radius:    6px;
@@ -35,15 +35,15 @@
     box-sizing: border-box;
     transition: border 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
 }
-.toolkit-button:hover {
+/*.toolkit-button:hover {
     border: 1px solid #002f42;
     background-size: 100% 120%;
     background-position: 50% 0;
     -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-}
-.toolkit-button:active {
+}*/
+/*.toolkit-button:active {
     background-image: url(../images/gradients/grey_in.png);
     background-size: 100% 250%;
     background-position: 50% 75%;
@@ -51,14 +51,14 @@
     -moz-box-shadow: 0px 3px 0px rgba(255,255,255,0.5), 0px -3px 0px rgba(0,0,0,0.05), 2px 0px 0px rgba(255,255,255,0.3), 0px -2px 0px rgba(0,0,0,0.025);
     box-shadow: 0px 3px 0px rgba(255,255,255,0.5), 0px -3px 0px rgba(0,0,0,0.05), 2px 0px 0px rgba(255,255,255,0.3), 0px -2px 0px rgba(0,0,0,0.025);
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gradients/grey_in.png',sizingMethod='scale');
-}
+}*/
 
 .toolkit-button > .toolkit-label {
     line-height: 1.1em;
     text-align: center;
     margin: auto;
     padding: 0 3px;
-    transition: background 0.33s ease-in-out, color 0.33s ease-in-out;
+    /*transition: background 0.33s ease-in-out, color 0.33s ease-in-out;*/
     -webkit-border-radius: 3px;
     -moz-border-radius:    3px;
     border-radius:         3px;
@@ -78,13 +78,13 @@
     margin-right: 5px;
 }
 
-.toolkit-button.toolkit-active {
+/*.toolkit-button.toolkit-active {
     border: 1px solid #002f42;
-}
+}*/
 .toolkit-button.toolkit-active > .toolkit-label {
     background-color: #002f42;
     color: white;
-    text-shadow: 0px -1px 0px black;
+    /*text-shadow: 0px -1px 0px black;*/
 }
 .toolkit-button.toolkit-active > .toolkit-icon {
     

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

@@ -17,8 +17,8 @@
  */
 
 import ArdourClient from '/shared/ardour.js';
-import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
-            PanKnob, StripGainFader, StripMeter, Toggle } from './tkwidget.js';
+import { createRootContainer, Container, Dialog, Label, Button, DiscreteKnob,
+            LinearKnob, PanKnob, StripGainFader, StripMeter, Toggle } from './tkwidget.js';
 
 (() => {
     
@@ -56,15 +56,28 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
     }
 
     function createStrip (strip, container) {
+        const inserts = new Button();
+        inserts.text = 'ƒ';
+        inserts.appendTo(container);
+        inserts.classList.add('strip-inserts');
+        if (strip.isVca || (strip.plugins.length == 0)) {
+            inserts.classList.add('disabled');
+        } else {
+            inserts.callback = () => openInserts (strip.plugins);
+        }
+
         const pan = new PanKnob();
         pan.appendTo(container);
-        if (strip.isVca) {
-            // hide pan keeping layout
-            pan.element.style.visibility = 'hidden';
-        } else {
+        if (!strip.isVca) {
             pan.bindTo(strip, 'pan');
         }
 
+        const mute = new Toggle();
+        mute.text = 'Mute';
+        mute.appendTo(container);
+        mute.bindTo(strip, 'mute');
+        mute.classList.add('strip-mute');
+
         const meterFader = new Container();
         meterFader.appendTo(container);
         meterFader.classList.add('strip-meter-fader');
@@ -82,10 +95,11 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
         label.classList.add('strip-label');
         label.appendTo(container);
 
-        // TO DO
-        /*for (const plugin of strip.plugins) {
-            createStripPlugin(plugin, container);
-        }*/
+        if (strip.isVca) {
+            // hide inserts and pan keeping layout
+            pan.element.style.visibility = 'hidden';
+            inserts.element.style.visibility = 'hidden';
+        }
     }
 
     function createStripPlugin (plugin, container) {
@@ -119,8 +133,7 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
 
     function setupFullscreenButton () {
         const doc = document.documentElement,
-              button = document.getElementById('fullscreen'),
-              touchOrClick = ('ontouchstart' in doc) ? 'touchstart' : 'click';
+              button = document.getElementById('fullscreen');
 
         let requestFullscreen = null, fullscreenChange = null;
 
@@ -133,7 +146,7 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
         }
 
         if (requestFullscreen && fullscreenChange) {
-            button.addEventListener(touchOrClick, requestFullscreen);
+            button.addEventListener('click', requestFullscreen);
 
             document.addEventListener(fullscreenChange, (e) => {
                 const fullscreen = document.fullscreen || document.webkitIsFullScreen;
@@ -144,6 +157,21 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
         }
     }
 
+    function openInserts (plugins) {
+        const dialog = new Dialog();
+        dialog.classList.add('inserts-view');
+        dialog.show();
+
+        const label = new Label();
+        label.text = `WIP: This strip has ${plugins.length} plugins...`;
+        label.appendTo(dialog);
+
+        // TO DO
+        /*for (const plugin of plugins) {
+            createStripPlugin(plugin, container);
+        }*/
+    }
+
     main();
 
 })();

share/web_surfaces/builtin/mixer/js/tkloader.js

@@ -27,6 +27,7 @@ const SCRIPTS = [
     'toolkit',
     'implements/audiomath',
     'implements/base',
+    'implements/anchor',
     'implements/globalcursor',
     'implements/ranged',
     'implements/gradient',
@@ -42,6 +43,7 @@ const SCRIPTS = [
     'widgets/label',
     'widgets/button',
     'widgets/container',
+    'widgets/dialog',
     'widgets/meterbase',
     'widgets/state',
     'widgets/toggle',

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

@@ -17,7 +17,18 @@
  */
 
 import loadToolkit from './tkloader.js';
-import { BaseWidget, BaseContainer, BaseControl } from './widget.js';
+import { BaseWidget, BaseContainer, BaseDialog, BaseControl } from './widget.js';
+
+let _tkRoot = null;
+
+export async function createRootContainer () {
+    await loadToolkit();
+    _tkRoot = new TK.Root({id: 'root'});
+    const root = new Container();
+    root.tk = _tkRoot;
+    document.body.appendChild(root.element);
+    return root;
+}
 
 class Widget extends BaseWidget {
 
@@ -91,14 +102,6 @@ class Knob extends RangeControl {
 
 }
 
-export async function createRootContainer () {
-    await loadToolkit();
-    const root = new Container();
-    root.tk = new TK.Root({id: 'root'});
-    document.body.appendChild(root.element);
-    return root;
-}
-
 export class Container extends BaseContainer {
 
     constructor () {
@@ -117,12 +120,63 @@ export class Container extends BaseContainer {
 
 }
 
+export class Dialog extends BaseDialog {
+
+    constructor () {
+        super();
+        this.tk = new TK.Dialog({
+            anchor: 'center',   // center v&h
+            auto_close: true,
+            auto_remove: true,
+            showing_duration: 10,
+            hiding_duration: 10,
+            container: document.getElementById('root')
+        });
+    }
+
+    get element () {
+        return this.tk.element;
+    }
+
+    appendChild (child) {
+        super.appendChild(child);
+        this.tk.append_child(child.tk);
+    }
+
+    show () {
+        // opening a TK.Dialog with auto_close=true from a TK.Button callback 
+        // fails otherwise ev.stopPropagation() is called in the button event
+        // handler or setTimeout() is used here
+        setTimeout(() => {
+            this.tk.set('display_state', 'show');
+        }, 0);
+    }
+
+}
+
+export class Button extends Control {
+
+    constructor () {
+        super(new TK.Button());
+        this.tk.add_event('click', (ev) => this.callback(ev));
+    }
+    
+    set text (text) {
+        this.tk.set('label', text);
+    }
+
+}
+
 export class Toggle extends Control {
 
     constructor () {
         super(new TK.Toggle());
         this.tk.add_event('toggled', (state) => this.callback(state));
     }
+    
+    set text (text) {
+        this.tk.set('label', text);
+    }
 
     get value () {
         return this.tk.get('state');

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

@@ -55,6 +55,19 @@ export class BaseContainer extends BaseWidget {
 
 }
 
+export class BaseDialog extends BaseContainer {
+
+    constructor () {
+        super();
+        this.children = [];
+    }
+
+    show () {
+        // empty
+    }
+
+}
+
 export class BaseControl extends BaseWidget {
 
     get value () {

share/web_surfaces/builtin/mixer/main.css

@@ -69,14 +69,44 @@ div {
     padding: 1em 0;
 }
 
-.toolkit-fader {
-    /* empty */
+.strip-mute {
+    background: rgb(62,61,61);
+    border: 1px solid rgb(36,36,36);
+    width: 50%;
 }
 
-.toolkit-level-meter {
-    /* empty */
+.strip-mute.toolkit-active {
+    background: rgb(172,155,5);
 }
 
-.toolkit-knob {
-    /* empty */
+.strip-mute > .toolkit-label {
+    color: rgb(248,248,242);
+    background-color: inherit;
+}
+
+.strip-mute.toolkit-active > .toolkit-label {
+    color: rgb(36,36,36);
+    background-color: inherit;
+}
+
+.strip-inserts {
+    color: rgb(248,248,242);
+    border: 1px solid rgb(36,36,36);
+    width: 50%;
+}
+
+.strip-inserts.disabled {
+    color: rgb(36,36,36);
+}
+
+.inserts-view {
+    width: 100%;
+    max-width: 666px;
+    height: 100%;
+    max-height: 500px;
+    background: rgb(62,61,61);
+    border: none;
+    /* absolute positioning cannot be disabled for tk dialogs */
+    left: inherit !important;
+    top: inherit !important;
 }

share/web_surfaces/builtin/transport/main.js

@@ -44,22 +44,19 @@ import ArdourClient from '/shared/ardour.js';
     }
 
     function addDomEventListeners () {
-        // transport buttons
-        const touchOrClick = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
-
         const roll = () => {
             setRolling(!_rolling);
             ardour.transport.roll = _rolling;
         };
 
-        dom.roll.addEventListener(touchOrClick, roll);
+        dom.roll.addEventListener('click', roll);
 
         const record = () => {
             setRecord(!_record);
             ardour.transport.record = _record;
         };
 
-        dom.record.addEventListener(touchOrClick, record);
+        dom.record.addEventListener('click', record);
 
         // fullscreen button
         let requestFullscreen = null, fullscreenChange = null;
@@ -73,7 +70,7 @@ import ArdourClient from '/shared/ardour.js';
         }
 
         if (requestFullscreen && fullscreenChange) {
-            dom.fullscreen.addEventListener(touchOrClick, requestFullscreen);
+            dom.fullscreen.addEventListener('click', requestFullscreen);
 
             document.addEventListener(fullscreenChange, (e) => {
                 const fullscreen = document.fullscreen || document.webkitIsFullScreen;