hyperion.ng/assets/webconfig/select/index.html

99 lines
3.5 KiB
HTML
Raw Normal View History

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