Update HTML/CSS/JS frontend

This commit is contained in:
Luciano Iam 2020-04-09 16:34:16 +02:00 committed by Robin Gareus
parent d694ee97c7
commit 891c63fe89
No known key found for this signature in database
GPG key ID: A090BCE02CF57F04
16 changed files with 214 additions and 9 deletions

View file

@ -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>

View file

@ -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);

View file

@ -22,10 +22,7 @@
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) => {

View file

@ -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>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ardour Transport</title>
</head>
<body>
<h1>Under Construction</h1>
</body>
</html>

View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<WebSurface>
<Name value="Transport"/>
<Description value="Provides basic transport control (under construction)"/>
</WebSurface>

Binary file not shown.

Binary file not shown.

View file

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View file

@ -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>

View file

@ -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();
})();

View file

@ -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