|
<html>
|
|
<!--
|
|
Note: This requires recent JQuery and JQuery UI (for the dope ass progress
|
|
bar).
|
|
-->
|
|
|
|
<head>
|
|
<title>hbkif</title>
|
|
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: Roboto;
|
|
src: url(htdocs/Roboto-Regular.ttf);
|
|
}
|
|
|
|
body {
|
|
background-color: #EEE;
|
|
font-family: Roboto, sans-serif, Arial;
|
|
font-size 18px;
|
|
}
|
|
|
|
div.queue_item {
|
|
width: 70%;
|
|
background-color: #FFF;
|
|
border: 1px solid #000;
|
|
padding: 0.4em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
div.position {
|
|
display: inline-block;
|
|
width: 10%;
|
|
font-size: 48px;
|
|
padding: 1%;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
}
|
|
|
|
div.side {
|
|
display: inline-block;
|
|
width: 80%;
|
|
}
|
|
|
|
div.title {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
div.particulars {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div#pbar {
|
|
height: 8px;
|
|
margin-top: 0.6em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
</style>
|
|
<link rel="stylesheet" href="htdocs/js/jquery-ui/jquery-ui.css">
|
|
|
|
<script type="text/javascript" src="htdocs/js/jquery-3.3.1.min.js"></script>
|
|
<script src="htdocs/js/jquery-ui/jquery-ui.js"></script>
|
|
|
|
<script type="text/javascript" language="javascript">
|
|
function format_size(bytes)
|
|
{
|
|
var tera = 1024 * 1024 * 1024 * 1024;
|
|
var giga = 1024 * 1024 * 1024;
|
|
var mega = 1024 * 1024;
|
|
var kilo = 1024;
|
|
|
|
var output;
|
|
if (bytes >= tera)
|
|
{
|
|
output = (bytes / tera).toFixed(2) + ' TB';
|
|
}
|
|
else if (bytes >= giga)
|
|
{
|
|
output = (bytes / giga).toFixed(2) + ' GB';
|
|
}
|
|
else if (bytes >= mega)
|
|
{
|
|
output = (bytes / mega).toFixed(2) + ' MB';
|
|
}
|
|
else if (bytes >= kilo)
|
|
{
|
|
output = (bytes / kil).toFixed(2) + ' KB';
|
|
}
|
|
else
|
|
{
|
|
output = bytes + ' bytes';
|
|
}
|
|
|
|
return output;
|
|
}
|
|
|
|
// Load JSON and display it
|
|
function getAndDisplay(event) {
|
|
$.getJSON("http://brutus:8081/queue", function(data) {
|
|
// Clear the stage DIV
|
|
$("#stage").empty();
|
|
|
|
var progress_value = 0.0;
|
|
|
|
// Iterate over the contents of the queue
|
|
var queue = data["queue"]
|
|
for (var idx = 0; idx < queue.length; idx++)
|
|
{
|
|
// For the first entry parse out the progress value
|
|
if (idx == 0)
|
|
{
|
|
progress_value = parseFloat(queue[idx]["status"].split(" ")[0]);
|
|
$("#stage").append('<div class="queue_item">' +
|
|
' <div class="position">' + queue[idx]["position"] + '</div>' +
|
|
' <div class="side">' +
|
|
' <div class="title">' + queue[idx]["path"] + '</div>' +
|
|
' <div id="pbar"></div>' +
|
|
' <div class="particulars">' +
|
|
' <ul>' +
|
|
' <li><span class="bold">Status:</span> ' + queue[idx]["status"] + '</li>' +
|
|
' <li><span class="bold">Details:</span> ' + queue[idx]["width"] + 'x' + queue[idx]["height"] + ' @ ' + queue[idx]["framerate"] + 'fps</li>' +
|
|
' <li><span class="bold">Size:</span> ' + format_size(queue[idx]["initial_size"]) + '</li>' +
|
|
' <li><span class="bold">Added:</span> ' + queue[idx]["time_added"] + '</li>' +
|
|
' <li><span class="bold">Started:</span> ' + queue[idx]["encode_started"] + '</li>' +
|
|
' </ul>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
'</div>');
|
|
}
|
|
else
|
|
{
|
|
// There's got to be a better way...
|
|
$("#stage").append('<div class="queue_item">' +
|
|
' <div class="position">' + queue[idx]["position"] + '</div>' +
|
|
' <div class="side">' +
|
|
' <div class="title">' + queue[idx]["path"] + '</div>' +
|
|
' <div class="particulars">' +
|
|
' <ul>' +
|
|
' <li><span class="bold">Status:</span> ' + queue[idx]["status"] + '</li>' +
|
|
' <li><span class="bold">Details:</span> ' + queue[idx]["width"] + 'x' + queue[idx]["height"] + ' @ ' + queue[idx]["framerate"] + 'fps</li>' +
|
|
' <li><span class="bold">Size:</span> ' + format_size(queue[idx]["initial_size"]) + '</li>' +
|
|
' <li><span class="bold">Added:</span> ' + queue[idx]["time_added"] + '</li>' +
|
|
' <li><span class="bold">Started:</span> ' + queue[idx]["encode_started"] + '</li>' +
|
|
' </ul>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
'</div>');
|
|
}
|
|
}
|
|
|
|
$("#pbar").progressbar({
|
|
value: progress_value
|
|
});
|
|
|
|
// The div we're looking for gets dynamically added so we can't
|
|
// make this part of the regular CSS.
|
|
$("#pbar").find(".ui-progressbar-value").css({
|
|
'background-color': '#f60'
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
// Call the getAndDisplay function once the page loads
|
|
$(document).ready(function() {
|
|
getAndDisplay("");
|
|
//$("#driver").click(getAndDisplay);
|
|
});
|
|
|
|
// Call the getAndDisplay function every 2 sec
|
|
window.setInterval(function() {
|
|
getAndDisplay("");
|
|
}, 2000);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<p>Encode status:</p>
|
|
|
|
<div id="stage">STAGE</div>
|
|
|
|
</body>
|
|
</html>
|