diff options
| author | Luciano Iam <lucianito@gmail.com> | 2020-04-20 12:34:28 +0200 |
|---|---|---|
| committer | Robin Gareus <robin@gareus.org> | 2020-04-20 22:59:17 +0200 |
| commit | 4579f5b4cd673165ebe01a5389bc0cd484ba7f15 (patch) | |
| tree | 5e11c43a26ee53dc6df65a443b26d23add71758f /share | |
| parent | d5c2af1cfb4c1125e536d81ece46afe7f7ccd384 (diff) | |
WebSockets: transport surface minor optimizations
Layout tweaks on small screens (ie, phones)
Custom font for transport time
Fix ArdourClient constructor parameters
Diffstat (limited to 'share')
| -rw-r--r-- | share/web_surfaces/builtin/transport/index.html | 2 | ||||
| -rw-r--r-- | share/web_surfaces/builtin/transport/main.css | 44 | ||||
| -rw-r--r-- | share/web_surfaces/builtin/transport/main.js | 12 | ||||
| -rwxr-xr-x | share/web_surfaces/builtin/transport/square.ttf | bin | 0 -> 8532 bytes | |||
| -rw-r--r-- | share/web_surfaces/shared/ardour.js | 4 |
5 files changed, 40 insertions, 22 deletions
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 @@ <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"> 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 Binary files differnew file mode 100755 index 0000000000..d9509772d0 --- /dev/null +++ b/share/web_surfaces/builtin/transport/square.ttf 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); |