diff options
| author | Luciano Iam <lucianito@gmail.com> | 2020-04-09 16:34:16 +0200 |
|---|---|---|
| committer | Robin Gareus <robin@gareus.org> | 2020-04-09 20:56:46 +0200 |
| commit | 891c63fe892b59fcf5a5579191ea844fad9f9d07 (patch) | |
| tree | e93223d81aa26654fca0357750882d6c84b9d8c7 /share | |
| parent | d694ee97c7a77172943ab342c9d5edd9bb57d2d0 (diff) | |
Update HTML/CSS/JS frontend
Diffstat (limited to 'share')
16 files changed, 214 insertions, 9 deletions
diff --git a/share/websockets_client/css/main.css b/share/web_surfaces/builtin/mixer-demo/css/main.css index 5578ab3e55..5578ab3e55 100644 --- a/share/websockets_client/css/main.css +++ b/share/web_surfaces/builtin/mixer-demo/css/main.css diff --git a/share/websockets_client/css/widget.css b/share/web_surfaces/builtin/mixer-demo/css/widget.css index 75be020642..75be020642 100644 --- a/share/websockets_client/css/widget.css +++ b/share/web_surfaces/builtin/mixer-demo/css/widget.css diff --git a/share/websockets_client/index.html b/share/web_surfaces/builtin/mixer-demo/index.html index c592d003c5..947d017397 100644 --- a/share/websockets_client/index.html +++ b/share/web_surfaces/builtin/mixer-demo/index.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>Ardour WebSockets (Experimental)</title> + <title>Ardour WebSockets Demo</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/widget.css"> </head> @@ -13,6 +13,6 @@ </div> <script src="js/connection.js"></script> <script src="js/widget.js"></script> - <script src="js/client.js"></script> + <script src="js/main.js"></script> </body> </html> diff --git a/share/websockets_client/js/connection.js b/share/web_surfaces/builtin/mixer-demo/js/connection.js index e83452e206..077799b48b 100644 --- a/share/websockets_client/js/connection.js +++ b/share/web_surfaces/builtin/mixer-demo/js/connection.js @@ -20,8 +20,10 @@ const JSON_INF = 1.0e+128; class Connection { - constructor (host, port) { - this.socket = new WebSocket(`ws://${host}:${port}`); + // https://developer.mozilla.org/en-US/docs/Web/API/URL/host + + constructor (host) { + this.socket = new WebSocket(`ws://${host}`); this.socket.onopen = () => this.openCallback(); this.socket.onclose = () => this.closeCallback(); this.socket.onerror = (error) => this.errorCallback(error); diff --git a/share/websockets_client/js/client.js b/share/web_surfaces/builtin/mixer-demo/js/main.js index 2219381c8f..931371979a 100644 --- a/share/websockets_client/js/client.js +++ b/share/web_surfaces/builtin/mixer-demo/js/main.js @@ -21,11 +21,8 @@ const MAX_LOG_LINES = 1000; const FEEDBACK_NODES = ['strip_gain', 'strip_pan', 'strip_meter', 'strip_plugin_enable', 'strip_plugin_param_value']; - - const urlParams = new URLSearchParams(window.location.search); - const host = window.location.hostname || '127.0.0.1'; - const port = urlParams.get('port') || 9000; - const conn = new Connection(host, port); + + const conn = new Connection(location.host); const widgets = {}; conn.messageCallback = (node, addr, val) => { diff --git a/share/websockets_client/js/widget.js b/share/web_surfaces/builtin/mixer-demo/js/widget.js index 7bab5b1b1a..7bab5b1b1a 100644 --- a/share/websockets_client/js/widget.js +++ b/share/web_surfaces/builtin/mixer-demo/js/widget.js diff --git a/share/web_surfaces/builtin/mixer-demo/manifest.xml b/share/web_surfaces/builtin/mixer-demo/manifest.xml new file mode 100644 index 0000000000..e4a4287d7d --- /dev/null +++ b/share/web_surfaces/builtin/mixer-demo/manifest.xml @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="UTF-8"?> +<WebSurface> + <Name value="Mixer Demo"/> + <Description value="Mixer control capabilities demo aimed at developers"/> +</WebSurface> diff --git a/share/web_surfaces/builtin/transport/index.html b/share/web_surfaces/builtin/transport/index.html new file mode 100644 index 0000000000..9d1a40f24c --- /dev/null +++ b/share/web_surfaces/builtin/transport/index.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Ardour Transport</title> + </head> + <body> + <h1>Under Construction</h1> + </body> +</html> diff --git a/share/web_surfaces/builtin/transport/manifest.xml b/share/web_surfaces/builtin/transport/manifest.xml new file mode 100644 index 0000000000..ff48533743 --- /dev/null +++ b/share/web_surfaces/builtin/transport/manifest.xml @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="UTF-8"?> +<WebSurface> + <Name value="Transport"/> + <Description value="Provides basic transport control (under construction)"/> +</WebSurface> diff --git a/share/web_surfaces/css/junge-regular-webfont.ttf b/share/web_surfaces/css/junge-regular-webfont.ttf Binary files differnew file mode 100644 index 0000000000..4e381e9e3f --- /dev/null +++ b/share/web_surfaces/css/junge-regular-webfont.ttf diff --git a/share/web_surfaces/css/junge-regular-webfont.woff b/share/web_surfaces/css/junge-regular-webfont.woff Binary files differnew file mode 100644 index 0000000000..4a74925aa9 --- /dev/null +++ b/share/web_surfaces/css/junge-regular-webfont.woff diff --git a/share/web_surfaces/css/main.css b/share/web_surfaces/css/main.css new file mode 100644 index 0000000000..f4f1360f6e --- /dev/null +++ b/share/web_surfaces/css/main.css @@ -0,0 +1,79 @@ +@font-face { + font-family: 'junge-regular'; + src: url('junge-regular-webfont.woff') format('woff'), + url('junge-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +html { + height: 100%; +} + +body { + font-family: 'junge-regular'; + font-size: 16px; + height: 100%; + margin: 0; +} + +div { + box-sizing: border-box; +} + +a { + color: #337ab7; + text-decoration: none; +} + +a:visited { + text-decoration: underline; +} + +a:focus, a:hover { + color: #23527c; + text-decoration: underline; +} + +#top-bar { + background: #212a30; + padding: 4px; +} + +#logo { + height: 36px; + margin: 8px 8px 0 8px; +} + +#content { + padding: 24px; +} + +#content h1, #content h2 { + font-weight: normal; +} + +#content h1 { + font-size: 1.8em; + margin: 0 0 2ex 0; + padding-bottom: .8ex; + /*border-bottom: 2px solid #ccc;*/ +} + +#content h2 { + font-size: 1.3em; + margin: 2ex 0 1ex 0; + border-bottom: 2px solid #ddd; +} + +.surface-list { + margin-bottom: 6ex; +} + +.surface-list > ul { + list-style-type: none; +} + +.surface-list > ul > li { + margin: 4ex 0; +}
\ No newline at end of file diff --git a/share/web_surfaces/img/logo.png b/share/web_surfaces/img/logo.png Binary files differnew file mode 100644 index 0000000000..652a6c3e1c --- /dev/null +++ b/share/web_surfaces/img/logo.png diff --git a/share/web_surfaces/index.html b/share/web_surfaces/index.html new file mode 100644 index 0000000000..e5bcfce013 --- /dev/null +++ b/share/web_surfaces/index.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Ardour Web Surfaces</title> + <link rel="stylesheet" type="text/css" href="css/main.css"> + </head> + <body> + <div id="top-bar"> + <img id="logo" src="img/logo.png"> + </div> + <div id="content"> + <h1>Available Web Surfaces</h1> + <div class="surface-list"> + <h2>Built-In</h2> + <ul id="builtin"></ul> + </div> + <div class="surface-list"> + <h2>User</h2> + <ul id="user"></ul> + </div> + </div> + <script src="js/main.js"></script> + </body> +</html> diff --git a/share/web_surfaces/js/main.js b/share/web_surfaces/js/main.js new file mode 100644 index 0000000000..fad17e3671 --- /dev/null +++ b/share/web_surfaces/js/main.js @@ -0,0 +1,69 @@ +/* + * Copyright (C) 2020 Luciano Iam <lucianito@gmail.com> + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. + */ + +(() => { + + const INDEX_RESOURCE = 'index.json'; + + async function fetchIndex (url) { + const response = await fetch(url); + if (response.status == 200) { + return await response.json(); + } else { + throw new Error(`HTTP response status ${response.status}`); + } + } + + function buildItem (group, model) { + const li = document.createElement('li'); + li.innerHTML = `<li> + <a href="${group}/${model.id}/">${model.name}</a> + <p>${model.description}</p> + </li>`; + return li; + } + + function printIndex (index) { + ['builtin', 'user'].forEach((group) => { + const ul = document.getElementById(group); + let models = index[group]; + if (models.length > 0) { + models.sort((a, b) => a.name.localeCompare(b.name)); + for (model of models) { + ul.appendChild(buildItem(group, model)); + } + } else { + ul.parentNode.style.display = 'none'; + } + }); + } + + async function main () { + try { + const indexUrl = `${location.protocol}//${location.host}/${INDEX_RESOURCE}`; + const index = await fetchIndex (indexUrl); + printIndex (index); + } catch (err) { + const content = document.getElementById('content'); + content.innerHTML = `<pre>${INDEX_RESOURCE}: ${err.message}</pre>`; + } + } + + main(); + +})(); diff --git a/share/web_surfaces/wscript b/share/web_surfaces/wscript new file mode 100644 index 0000000000..d549abea38 --- /dev/null +++ b/share/web_surfaces/wscript @@ -0,0 +1,13 @@ +#!/usr/bin/env python +import os + +def configure(conf): + pass + +def build(bld): + datadir = os.path.join(bld.env['DATADIR'], 'web_surfaces') + surfaces = bld.path.ant_glob ('**', excl='wscript') + bld.install_files (datadir, surfaces, relative_trick=True) + +def options(opt): + pass |
