root/software/hbkif/index.html @ 59c738ae
| 3838ca66 | David Sorber | <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>
|