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 0000000000..d9509772d0 Binary files /dev/null and b/share/web_surfaces/builtin/transport/square.ttf differ 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); -- cgit v1.2.3