ardour/livetrax
13
0
Fork 0
Code

WS: Add a fullscreen toggle to the mixer demo

Browse Source
This commit is contained in:
Luciano Iam 2020-07-25 18:09:12 +02:00 committed by Robin Gareus
parent 0b71764f44
commit 75338ad4c5
Signed by: rgareus
GPG Key ID: A090BCE02CF57F04
5 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
share/web_surfaces/builtin/mixer/expand.svg Normal file
View File

@ -0,0 +1,25 @@
<?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="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M28.939,34.766c-1.092-1.069-2.842-1.051-3.91,0.04L5.785,54.458V39.901c0-1.527-1.24-2.766-2.766-2.766
c-1.527,0-2.766,1.238-2.766,2.766v21.333c0,0.005,0.002,0.009,0.002,0.014c0,0.182,0.018,0.364,0.055,0.544
c0,0.006,0.004,0.012,0.004,0.019c0.037,0.169,0.088,0.336,0.156,0.497c0.027,0.069,0.07,0.13,0.104,0.195
c0.068,0.13,0.143,0.255,0.232,0.374c0.082,0.112,0.168,0.223,0.266,0.32c0.004,0.004,0.008,0.01,0.012,0.014
c0.053,0.052,0.115,0.091,0.172,0.138c0.078,0.065,0.152,0.134,0.236,0.19c0.082,0.053,0.168,0.092,0.252,0.136
c0.074,0.039,0.145,0.083,0.223,0.115c0.098,0.04,0.199,0.065,0.303,0.094c0.07,0.021,0.137,0.048,0.211,0.063
C2.658,63.98,2.838,64,3.02,64h21.332c1.527,0,2.766-1.238,2.766-2.766c0-1.526-1.238-2.766-2.766-2.766H9.598L28.98,38.676
C30.049,37.585,30.031,35.834,28.939,34.766z"/>
<path fill="#FFFFFF" d="M35.059,29.234c1.092,1.07,2.844,1.051,3.912-0.04L58.215,9.543v14.556c0,1.527,1.238,2.766,2.766,2.766
s2.766-1.238,2.766-2.766V2.766c0-0.005-0.002-0.009-0.002-0.014c0-0.182-0.018-0.363-0.055-0.543c0-0.007-0.004-0.014-0.006-0.02
c-0.035-0.17-0.086-0.336-0.154-0.498c-0.029-0.068-0.072-0.129-0.105-0.194c-0.066-0.13-0.141-0.255-0.23-0.374
c-0.082-0.112-0.168-0.223-0.268-0.32c-0.004-0.004-0.006-0.01-0.01-0.014c-0.055-0.053-0.117-0.091-0.172-0.138
c-0.078-0.065-0.152-0.134-0.238-0.19c-0.08-0.053-0.166-0.092-0.252-0.137c-0.072-0.038-0.145-0.082-0.221-0.114
c-0.1-0.04-0.201-0.065-0.303-0.095c-0.07-0.02-0.139-0.047-0.211-0.061C61.342,0.02,61.16,0,60.98,0H39.646
c-1.527,0-2.766,1.238-2.766,2.766s1.238,2.766,2.766,2.766H54.4L35.018,25.324C33.949,26.415,33.969,28.166,35.059,29.234z"/>
</g>
<rect fill="none" width="64" height="64"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
share/web_surfaces/builtin/mixer/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="main.css">
</head> </head>
<body> <body>
<button id="fullscreen"></button>
<script type="module" src="js/main.js"></script> <script type="module" src="js/main.js"></script>
</body> </body>
</html> </html>

31
share/web_surfaces/builtin/mixer/js/main.js
View File

@ -25,6 +25,8 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
const ardour = new ArdourClient(); const ardour = new ArdourClient();
async function main () { async function main () {
setupFullscreenButton();
const root = await createRootContainer(); const root = await createRootContainer();
ardour.mixer.on('ready', () => { ardour.mixer.on('ready', () => {
@ -36,6 +38,7 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
mixer.id = 'mixer'; mixer.id = 'mixer';
mixer.appendTo(root); mixer.appendTo(root);
// left flexbox padding
mixer.appendChild(new Container()); mixer.appendChild(new Container());
for (const strip of ardour.mixer.strips) { for (const strip of ardour.mixer.strips) {
@ -45,6 +48,7 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
createStrip(strip, container); createStrip(strip, container);
} }
// right flexbox padding
mixer.appendChild(new Container()); mixer.appendChild(new Container());
}); });
@ -113,6 +117,33 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
widget.bindTo(param, 'value'); widget.bindTo(param, 'value');
} }
function setupFullscreenButton () {
const doc = document.documentElement,
button = document.getElementById('fullscreen'),
touchOrClick = ('ontouchstart' in doc) ? 'touchstart' : 'click';
let requestFullscreen = null, fullscreenChange = null;
if ('requestFullscreen' in doc) {
requestFullscreen = doc.requestFullscreen.bind(doc);
fullscreenChange = 'fullscreenchange';
} else if ('webkitRequestFullscreen' in doc) {
requestFullscreen = doc.webkitRequestFullscreen.bind(doc);
fullscreenChange = 'webkitfullscreenchange';
}
if (requestFullscreen && fullscreenChange) {
button.addEventListener(touchOrClick, requestFullscreen);
document.addEventListener(fullscreenChange, (e) => {
const fullscreen = document.fullscreen || document.webkitIsFullScreen;
button.style.display = fullscreen ? 'none' : 'inline';
});
} else {
button.style.display = 'none';
}
}
main(); main();
})(); })();

19
share/web_surfaces/builtin/mixer/main.css
View File

@ -26,6 +26,23 @@ div {
justify-content: center; justify-content: center;
} }
#fullscreen {
position: fixed;
z-index: 10;
top: 16px;
right: 12px;
width: 24px;
height: 24px;
opacity: 0.5;
outline: none;
border: none;
background: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('expand.svg');
}
#mixer { #mixer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -40,7 +57,7 @@ div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
min-width: 150px; min-width: 200px;
} }
.strip-meter-fader { .strip-meter-fader {

2
share/web_surfaces/builtin/transport/main.js
View File

@ -76,7 +76,7 @@ import ArdourClient from '/shared/ardour.js';
dom.fullscreen.addEventListener(touchOrClick, requestFullscreen); dom.fullscreen.addEventListener(touchOrClick, requestFullscreen);
document.addEventListener(fullscreenChange, (e) => { document.addEventListener(fullscreenChange, (e) => {
const fullscreen = document.fullScreen || document.webkitIsFullScreen; const fullscreen = document.fullscreen || document.webkitIsFullScreen;
dom.fullscreen.style.display = fullscreen ? 'none' : 'inline'; dom.fullscreen.style.display = fullscreen ? 'none' : 'inline';
}); });
} else { } else {