mirror of
https://github.com/Ardour/ardour.git
synced 2025-12-13 10:06:33 +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>
|
||||
<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>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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) => {
|
||||
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