mirror of
https://github.com/Ardour/ardour.git
synced 2025-12-13 18:16:35 +01:00
Update HTML/CSS/JS frontend
This commit is contained in:
parent
d694ee97c7
commit
891c63fe89
16 changed files with 214 additions and 9 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<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/main.css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/widget.css">
|
<link rel="stylesheet" type="text/css" href="css/widget.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -13,6 +13,6 @@
|
||||||
</div>
|
</div>
|
||||||
<script src="js/connection.js"></script>
|
<script src="js/connection.js"></script>
|
||||||
<script src="js/widget.js"></script>
|
<script src="js/widget.js"></script>
|
||||||
<script src="js/client.js"></script>
|
<script src="js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -20,8 +20,10 @@ const JSON_INF = 1.0e+128;
|
||||||
|
|
||||||
class Connection {
|
class Connection {
|
||||||
|
|
||||||
constructor (host, port) {
|
// https://developer.mozilla.org/en-US/docs/Web/API/URL/host
|
||||||
this.socket = new WebSocket(`ws://${host}:${port}`);
|
|
||||||
|
constructor (host) {
|
||||||
|
this.socket = new WebSocket(`ws://${host}`);
|
||||||
this.socket.onopen = () => this.openCallback();
|
this.socket.onopen = () => this.openCallback();
|
||||||
this.socket.onclose = () => this.closeCallback();
|
this.socket.onclose = () => this.closeCallback();
|
||||||
this.socket.onerror = (error) => this.errorCallback(error);
|
this.socket.onerror = (error) => this.errorCallback(error);
|
||||||
|
|
@ -22,10 +22,7 @@
|
||||||
const FEEDBACK_NODES = ['strip_gain', 'strip_pan', 'strip_meter', 'strip_plugin_enable',
|
const FEEDBACK_NODES = ['strip_gain', 'strip_pan', 'strip_meter', 'strip_plugin_enable',
|
||||||
'strip_plugin_param_value'];
|
'strip_plugin_param_value'];
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const conn = new Connection(location.host);
|
||||||
const host = window.location.hostname || '127.0.0.1';
|
|
||||||
const port = urlParams.get('port') || 9000;
|
|
||||||
const conn = new Connection(host, port);
|
|
||||||
const widgets = {};
|
const widgets = {};
|
||||||
|
|
||||||
conn.messageCallback = (node, addr, val) => {
|
conn.messageCallback = (node, addr, val) => {
|
||||||
5
share/web_surfaces/builtin/mixer-demo/manifest.xml
Normal file
5
share/web_surfaces/builtin/mixer-demo/manifest.xml
Normal 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>
|
||||||
10
share/web_surfaces/builtin/transport/index.html
Normal file
10
share/web_surfaces/builtin/transport/index.html
Normal 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>
|
||||||
5
share/web_surfaces/builtin/transport/manifest.xml
Normal file
5
share/web_surfaces/builtin/transport/manifest.xml
Normal 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>
|
||||||
BIN
share/web_surfaces/css/junge-regular-webfont.ttf
Normal file
BIN
share/web_surfaces/css/junge-regular-webfont.ttf
Normal file
Binary file not shown.
BIN
share/web_surfaces/css/junge-regular-webfont.woff
Normal file
BIN
share/web_surfaces/css/junge-regular-webfont.woff
Normal file
Binary file not shown.
79
share/web_surfaces/css/main.css
Normal file
79
share/web_surfaces/css/main.css
Normal 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;
|
||||||
|
}
|
||||||
BIN
share/web_surfaces/img/logo.png
Normal file
BIN
share/web_surfaces/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
25
share/web_surfaces/index.html
Normal file
25
share/web_surfaces/index.html
Normal 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>
|
||||||
69
share/web_surfaces/js/main.js
Normal file
69
share/web_surfaces/js/main.js
Normal 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();
|
||||||
|
|
||||||
|
})();
|
||||||
13
share/web_surfaces/wscript
Normal file
13
share/web_surfaces/wscript
Normal 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
|
||||||
Loading…
Add table
Add a link
Reference in a new issue