99 lines
3.5 KiB
HTML
99 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Hyperion web control</title>
|
|
|
|
<!-- bootstrap -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
|
|
<!-- Optional theme -->
|
|
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
|
|
<link href="starter-template.css" rel="stylesheet">
|
|
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<!-- <span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>-->
|
|
</button>
|
|
<a class="navbar-brand" href="#">Hyperion</a>
|
|
</div>
|
|
<div id="navbar" class="collapse navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Source Selection</a></li>
|
|
<!-- <li><a href="#about">About</a></li> -->
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="starter-template">
|
|
<div id="inputs"></div>
|
|
</div>
|
|
</div><!-- /.container -->
|
|
|
|
|
|
<!-- ====================================================================== -->
|
|
<script>
|
|
var webSocket = new WebSocket('ws://'+document.location.hostname+':19444');
|
|
var serverInfo;
|
|
|
|
function setSource( prio )
|
|
{
|
|
if ( prio == "auto" )
|
|
webSocket.send('{"command":"sourceselect", "auto" : true}');
|
|
else
|
|
webSocket.send('{"command":"sourceselect", "priority" : '+prio+'}');
|
|
updateButtons();
|
|
}
|
|
|
|
function updateButtons()
|
|
{
|
|
webSocket.send('{"command":"serverinfo"}');
|
|
}
|
|
|
|
webSocket.onerror = function(event) {
|
|
alert(event.data);
|
|
};
|
|
|
|
webSocket.onopen = function(event) {
|
|
updateButtons();
|
|
setInterval(function() {updateButtons();}, 3000);
|
|
};
|
|
|
|
webSocket.onmessage = function(event) {
|
|
serverInfo = JSON.parse( event.data );
|
|
var data = "";
|
|
var i;
|
|
for(i = 0; i < serverInfo.info.priorities.length; i++) {
|
|
var owner = serverInfo.info.priorities[i].owner;
|
|
var active = serverInfo.info.priorities[i].active;
|
|
var visible = serverInfo.info.priorities[i].visible;
|
|
var priority = serverInfo.info.priorities[i].priority;
|
|
var btn_type = "default";
|
|
if (active) btn_type = "warning";
|
|
if (visible) btn_type = "success";
|
|
|
|
data += '<button id="srcBtn'+i+'" type="button" class="btn btn-lg btn-'+btn_type+'" style="margin:10px;min-width:200px" title="prio '+priority+'" onclick="setSource('+priority+');">'+owner+'</button><br/>';
|
|
}
|
|
data += '<button id="srcBtn'+i+'" type="button" class="btn btn-lg btn-info" style="margin:10px;min-width:200px" onclick="setSource(\'auto\');">auto select</button><br/>';
|
|
$('#inputs').html(data);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|