ardour/ardour
ardour/ardour
13
1
Fork 0
Code Pull Requests Releases Activity

WebSockets: transport surface minor optimizations

Browse Source 
Layout tweaks on small screens (ie, phones)
Custom font for transport time
Fix ArdourClient constructor parameters
This commit is contained in:
Luciano Iam 2020-04-20 12:34:28 +02:00 committed by Robin Gareus
parent d5c2af1cfb
commit 4579f5b4cd
Signed by: rgareus
GPG Key ID: A090BCE02CF57F04
5 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
share/web_surfaces/builtin/transport/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>Ardour Transport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="main.css?99">
</head>
<body>
<div id="main">

44
share/web_surfaces/builtin/transport/main.css
View File

@ -1,3 +1,10 @@
@font-face {
font-family: 'Square';
src: url('square.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
background: #000;
@ -31,8 +38,8 @@ button::-moz-focus-inner {
#ui {
display: flex;
flex-direction: column;
width: 800px;
height: 480px;
width: 768px;
height: 384px;
max-width: 100%;
max-height: 100%;
background: rgba(0,0,0,0.1);
@ -49,14 +56,8 @@ button::-moz-focus-inner {
flex: 1;
justify-content: center;
align-items: center;
font-family: Menlo, monospace;
font-size: 64px;
}
@media screen and (max-width: 320px) {
#time {
font-size: 32px;
}
font-family: Square, Menlo, monospace;
font-size: 48px;
}
#buttons {
@ -67,11 +68,11 @@ button::-moz-focus-inner {
}
#buttons > button {
height: 176px;
width: 176px;
height: 160px;
width: 160px;
max-height: 100%;
max-width: 100%;
border: solid 24px transparent;
border: solid 16px transparent;
}
#fullscreen {
@ -99,3 +100,20 @@ button::-moz-focus-inner {
transform: scale(1);
}
}
/* optimizations for small screens */
@media screen and (max-width: 640px) {
#ui {
width: 100%;
height: 100%;
}
#time {
font-size: 7vw;
}
#buttons > button {
height: 128px;
width: 128px;
}
}

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

@ -28,13 +28,13 @@ import { ArdourClient } from '/shared/ardour.js';
fullscreen: document.getElementById('fullscreen')
};
const ardour = new ArdourClient(location.host);
const ardour = new ArdourClient();
let _rolling = false;
let _record = false;
function main () {
addDomEventListeners ();
addDomEventListeners();
ardour.addCallbacks({
onError: console.log,
@ -51,15 +51,15 @@ import { ArdourClient } from '/shared/ardour.js';
const touchOrClick = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
const roll = () => {
setRolling (!_rolling);
ardour.setTransportRoll (_rolling);
setRolling(!_rolling);
ardour.setTransportRoll(_rolling);
};
dom.roll.addEventListener(touchOrClick, roll);
const record = () => {
setRecord (!_record);
ardour.setRecordState (_record);
setRecord(!_record);
ardour.setRecordState(_record);
};
dom.record.addEventListener(touchOrClick, record);

BIN
share/web_surfaces/builtin/transport/square.ttf Executable file
View File

Binary file not shown.

4
share/web_surfaces/shared/ardour.js
View File

@ -26,11 +26,11 @@ import { MessageChannel } from './channel.js';
class BaseArdourClient {
constructor () {
constructor (host) {
this._callbacks = [];
this._connected = false;
this._pendingRequest = null;
this._channel = new MessageChannel(location.host);
this._channel = new MessageChannel(host || location.host);
this._channel.onError = (error) => {
this._fireCallbacks('error', error);