From 4579f5b4cd673165ebe01a5389bc0cd484ba7f15 Mon Sep 17 00:00:00 2001 From: Luciano Iam Date: Mon, 20 Apr 2020 12:34:28 +0200 Subject: [PATCH] WebSockets: transport surface minor optimizations Layout tweaks on small screens (ie, phones) Custom font for transport time Fix ArdourClient constructor parameters --- .../web_surfaces/builtin/transport/index.html | 2 +- share/web_surfaces/builtin/transport/main.css | 44 ++++++++++++------ share/web_surfaces/builtin/transport/main.js | 12 ++--- .../web_surfaces/builtin/transport/square.ttf | Bin 0 -> 8532 bytes share/web_surfaces/shared/ardour.js | 4 +- 5 files changed, 40 insertions(+), 22 deletions(-) create mode 100755 share/web_surfaces/builtin/transport/square.ttf diff --git a/share/web_surfaces/builtin/transport/index.html b/share/web_surfaces/builtin/transport/index.html index 252ccba540..2ae09870ec 100644 --- a/share/web_surfaces/builtin/transport/index.html +++ b/share/web_surfaces/builtin/transport/index.html @@ -4,7 +4,7 @@ Ardour Transport - +
diff --git a/share/web_surfaces/builtin/transport/main.css b/share/web_surfaces/builtin/transport/main.css index d4d9253f93..36bc6d40b8 100644 --- a/share/web_surfaces/builtin/transport/main.css +++ b/share/web_surfaces/builtin/transport/main.css @@ -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; + } +} diff --git a/share/web_surfaces/builtin/transport/main.js b/share/web_surfaces/builtin/transport/main.js index fcfff6c561..a4e36a6d0c 100644 --- a/share/web_surfaces/builtin/transport/main.js +++ b/share/web_surfaces/builtin/transport/main.js @@ -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); diff --git a/share/web_surfaces/builtin/transport/square.ttf b/share/web_surfaces/builtin/transport/square.ttf new file mode 100755 index 0000000000000000000000000000000000000000..d9509772d09a59e4626e469cc732eab8e7a2bfc9 GIT binary patch literal 8532 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 Wejnm)0P~&)Z!e=VdH^!LM)W`403r7P literal 0 HcmV?d00001 diff --git a/share/web_surfaces/shared/ardour.js b/share/web_surfaces/shared/ardour.js index 63a548e174..a3cb647143 100644 --- a/share/web_surfaces/shared/ardour.js +++ b/share/web_surfaces/shared/ardour.js @@ -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);