118 lines
5.8 KiB
HTML
118 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Digi Demo - Multimedia viewer</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./static/css/stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
<link href="./static/css/cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
|
|
<link href="./static/css/cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css" rel="stylesheet">
|
|
<link href="./static/css/fontawesome5.15.4/all.min.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="./static/css/general.css">
|
|
<link rel="stylesheet" href="./static/css/toastr.css">
|
|
|
|
<!-- JS, Popper.js, and jQuery -->
|
|
<script src="./static/js/code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
|
<script src="./static/js/cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
|
<script src="./static/js/stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
|
|
<script src="./static/js/cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
|
|
<script src="./static/js/cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/bootstrap-slider.min.js"></script>
|
|
<script type="text/javascript" src="./static/js/common.js"></script>
|
|
<script type="text/javascript" src="./static/js/devices.js"></script>
|
|
<script type="text/javascript" src="./static/js/jquery.pjax.js"></script>
|
|
<script type="text/javascript" src="./static/js/jquery.matchHeight-min.js"></script>
|
|
<script type="text/javascript" src="./static/js/toastr.min.js"></script>
|
|
</head>
|
|
<body class="multimedia-viewer">
|
|
<nav id="topBar" class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
|
<div class="nav-container" style="padding-right: 0px;">
|
|
<a id="banner-link" class="navbar-brand align-middle" href="index.html">
|
|
<div class="d-flex align-items-baseline">
|
|
<img id="banner-logo" class="banner-icon" src="./static/images/Digi_logo_banner.png">
|
|
<p id="banner-text">ConnectCore Demo</p>
|
|
</div>
|
|
</a>
|
|
<div class="nav-right-container">
|
|
<div class="stat" style="min-width: 200px">
|
|
<div class="status-icon">
|
|
<img src="./static/images/cpu.png" height=32px/>
|
|
</div>
|
|
<div class="status-text">CPU:</div>
|
|
<div id="stats-cpu-load" class="status-text">-</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="status-icon">
|
|
<img src="./static/images/ram.png" height=32px/>
|
|
</div>
|
|
<div class="status-text">Memory:</div>
|
|
<div id="stats-memory" class="status-text">-</div>
|
|
</div>
|
|
<a href="multimedia.html">
|
|
<div id="back-button" class="device-card-button back-button">Back</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Demo content container -->
|
|
<iframe frameborder="0" class="multimedia-content" id="multimedia-content"></iframe>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$("#banner-link").on({
|
|
"mouseover" : function() {
|
|
$("#banner-logo").attr("src", "./static/images/Digi_logo_banner_gray.png");
|
|
},
|
|
"mouseout" : function() {
|
|
$("#banner-logo").attr("src", "./static/images/Digi_logo_banner.png");
|
|
}
|
|
});
|
|
});
|
|
|
|
// Enable the tooltip library.
|
|
$(function() {
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
// Get the example ID from the URL parameters.
|
|
let urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams == null)
|
|
return;
|
|
let exampleURL = urlParams.get('exampleURL');
|
|
if (exampleURL !== null)
|
|
// Load the example.
|
|
loadExample(exampleURL);
|
|
// Start the timer that updates the system stats.
|
|
getSystemStats();
|
|
var statsTimer = setInterval(getSystemStats, 5000);
|
|
});
|
|
|
|
function loadExample(exampleURL) {
|
|
if (exampleURL.startsWith("http"))
|
|
document.getElementById('multimedia-content').src = exampleURL;
|
|
else
|
|
document.getElementById('multimedia-content').src = "./" + exampleURL;
|
|
}
|
|
|
|
function getSystemStats() {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
var url = "http://" + getServerAddress() + "/ajax/get_device_status";
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var jsonPayload = JSON.parse(this.responseText);
|
|
updateStats(jsonPayload);
|
|
}
|
|
};
|
|
xmlhttp.open("POST", url, true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
function updateStats(stats) {
|
|
updateValueWithEffect("stats-cpu-load", roundToTwoDecimals(stats[STREAM_CPU_LOAD]) + " %");
|
|
updateValueWithEffect("stats-memory", roundToTwoDecimals(kiloBytesToMegaBytes(stats[STREAM_MEMORY_FREE])) + " MB");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|