Current section
Files
Jump to
Current section
Files
priv/www/index.html
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="undertone contributors">
<title>undertone</title>
<!-- CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/site.webmanifest">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#603cba">
<link rel="shortcut icon" href="/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="undertone">
<meta name="application-name" content="undertone">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
<meta name="theme-color" content="#2d89ef">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="/css/cover.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0 svg-wrapper">
<img src="/images/undertone-logo-white.svg" width="18%" class="inline-svg" /> undertone
</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">current play</a>
<a class="nav-link" href="#os">os info</a>
<a class="nav-link" href="#node-data">node data</a>
</nav>
</div>
</header>
<main class="px-3">
<h1 class="chord" id="current-chord">X</h1>
<p><br/></p>
<div class="progress beat">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
style="width: 13%" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100">1</div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"
style="width: 13%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">2</div>
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
style="width: 13%" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">3</div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"
style="width: 13%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">4</div>
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
style="width: 13%" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100">5</div>
</div>
<p><br/></p>
<h2 class="next-chord">Next chord: <span id="next-chord">Y</span></h2>
<p><br/></p>
<div class="table-responsive">
<table class="table table-dark table-striped table-sm">
<thead>
<tr>
<th>Key</th>
<th>Timing</th>
<th>Tempo</th>
<th>Current Phrase</th>
<th>Current Beat</th>
</tr>
</thead>
<tbody>
<tr>
<td id="key">Z</td>
<td id="time-signature">N/N</td>
<td><span id="tempo">0</span> bpm</td>
<td><span id="total-beats">0</span> beats</td>
<td>Beat <span id="current-beat">0</span></td>
</tr>
</tbody>
</table>
</div>
</main>
<footer class="mt-auto text-white-50">
<p>undertone on <a href="https://github.com/ut-proj/undertone" class="text-white">GitHub</a></p>
</footer>
</div>
<script type="text/javascript" src="/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
function poll() {
setInterval(pollRequest, 1000);
}
function pollRequest(){
$.ajax({
url: "http://localhost:7080/esi/undertone.web.api:phrase-data",
success: function(data){
if (data['errors'].length != 0) {
data['errors'].forEach(function (item, index) {
console.error(item, index);
});
}
//var result = JSON.parse(data['result']);
var result = data['result'];
$("#current-chord").html(result['current-chord']);
$("#next-chord").html(result['next-chord']);
$("#key").html(result['key']);
$("#time-signature").html(result['time-signature']);
$("#tempo").html(result['tempo']);
$("#total-beats").html(result['total-beats']);
$("#current-beat").html(result['current-beat']);
},
error: function(err) {
console.error(err);
},
type: "get",
dataType: "json",
timeout: 15000,
});
};
poll();
});
</script>
</body>
</html>