diff --git a/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css b/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css index b76a40bad9..250a0677ef 100644 --- a/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css +++ b/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 { diff --git a/share/web_surfaces/builtin/mixer/js/main.js b/share/web_surfaces/builtin/mixer/js/main.js index f339574a7a..dcc76a029a 100644 --- a/share/web_surfaces/builtin/mixer/js/main.js +++ b/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(); })(); diff --git a/share/web_surfaces/builtin/mixer/js/tkloader.js b/share/web_surfaces/builtin/mixer/js/tkloader.js index f4b29e4c98..e80bb884e3 100644 --- a/share/web_surfaces/builtin/mixer/js/tkloader.js +++ b/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', diff --git a/share/web_surfaces/builtin/mixer/js/tkwidget.js b/share/web_surfaces/builtin/mixer/js/tkwidget.js index 2fce812686..288d5c4fa4 100644 --- a/share/web_surfaces/builtin/mixer/js/tkwidget.js +++ b/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'); diff --git a/share/web_surfaces/builtin/mixer/js/widget.js b/share/web_surfaces/builtin/mixer/js/widget.js index 88bda8fbc5..cdffc7c71b 100644 --- a/share/web_surfaces/builtin/mixer/js/widget.js +++ b/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 () { diff --git a/share/web_surfaces/builtin/mixer/main.css b/share/web_surfaces/builtin/mixer/main.css index 47928937b3..8ef804fe7d 100644 --- a/share/web_surfaces/builtin/mixer/main.css +++ b/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; } diff --git a/share/web_surfaces/builtin/transport/main.js b/share/web_surfaces/builtin/transport/main.js index f1b6ae9447..99026f1822 100644 --- a/share/web_surfaces/builtin/transport/main.js +++ b/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;