connectcore-demo-example: multimedia: add multimedia section
While on it remove 'History data' section. https://onedigi.atlassian.net/browse/DEL-7742 Signed-off-by: Tatiana Leon <Tatiana.Leon@digi.com>
|
|
@ -62,10 +62,10 @@ Digi Demo - Dashboard
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-pjax href="history.html" class="list-group-item list-group-item-action d-flex align-items-center">
|
||||
<a data-pjax href="multimedia.html" class="list-group-item list-group-item-action d-flex align-items-center">
|
||||
<div class="d-flex w-100 justify-content-start align-items-center">
|
||||
<span class="digi-menu-icon fas fa-chart-area fa-fw fa-lg mr-3"></span>
|
||||
<span class="menu-collapsed">Historical data</span>
|
||||
<span class="digi-menu-icon fas fa-film fa-fw fa-lg mr-3"></span>
|
||||
<span class="menu-collapsed">Multimedia</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -762,8 +762,8 @@ Digi Demo - Dashboard
|
|||
<script type="text/javascript" src="./static/js/ccimx8m-nano.js"></script>
|
||||
<script type="text/javascript" src="./static/js/ccimx8x-sbc-pro.js"></script>
|
||||
<script type="text/javascript" src="./static/js/dashboard.js"></script>
|
||||
<script type="text/javascript" src="./static/js/multimedia.js"></script>
|
||||
<script type="text/javascript" src="./static/js/management.js"></script>
|
||||
<script type="text/javascript" src="./static/js/history.js"></script>
|
||||
<script type="text/javascript" src="./static/js/file-system.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,283 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Digi Demo - Multimedia
|
||||
</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.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="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
|
||||
<script src="https://kit.fontawesome.com/1e66c78073.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
|
||||
<script src="https://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>
|
||||
<nav id="topBar" class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||
<div class="nav-container">
|
||||
<a id="banner-link" class="navbar-brand align-middle" href="/">
|
||||
<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>
|
||||
<img src="./static/images/board.png" class="device-title-img" title="Device">
|
||||
</div>
|
||||
<div id="device-name">DEY DEVICE</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bg-light" id="body-row">
|
||||
|
||||
<!-- Sidebar https://www.codeply.com/go/3e0RAjccRO/bootstrap-4-collapsing-sidebar-menu# -->
|
||||
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
|
||||
<!-- d-* hides the Sidebar in smaller devices. Its items can be kept on the Navbar 'Menu' -->
|
||||
<div id="sidebar-contents">
|
||||
<!-- Bootstrap List Group -->
|
||||
|
||||
<ul id="sections" data-pjax class="list-group">
|
||||
<li>
|
||||
<a data-pjax href="index.html" class="list-group-item list-group-item-action d-flex align-items-center">
|
||||
<div class="d-flex w-100 justify-content-start align-items-center">
|
||||
<span class="digi-menu-icon fas fa-tachometer-alt fa-fw fa-lg mr-3"></span>
|
||||
<span class="menu-collapsed">Dashboard</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-pjax href="multimedia.html" class="list-group-item list-group-item-action d-flex align-items-center">
|
||||
<div class="d-flex w-100 justify-content-start align-items-center">
|
||||
<span class="digi-menu-icon fas fa-film fa-fw fa-lg mr-3"></span>
|
||||
<span class="menu-collapsed">Multimedia</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-pjax href="management.html" class="list-group-item list-group-item-action d-flex align-items-center">
|
||||
<div class="d-flex w-100 justify-content-start align-items-center">
|
||||
<span class="digi-menu-icon fas fa-cog fa-fw fa-lg mr-3"></span>
|
||||
<span class="menu-collapsed">Management</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id="collapsator" class="list-group">
|
||||
<a href="#top" data-toggle="sidebar-collapse" class="list-group-item list-group-item-action d-flex align-items-center">
|
||||
<div class="d-flex w-100 justify-content-start align-items-center">
|
||||
<span id="collapse-icon" class="digi-menu-icon fas fa-fw fa-lg mr-3"></span>
|
||||
<span id="collapse-text" class="menu-collapsed">Collapse</span>
|
||||
</div>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="loading">
|
||||
<img id="loading-image" src="./static/images/loading.gif" alt="Loading..." />
|
||||
</div>
|
||||
<div id="pjax-container">
|
||||
|
||||
<div class="row justify-content-lg-center">
|
||||
<div class="col-lg-12 col-xl-12">
|
||||
<div id="loading_popup" class="popup popup-loading shadow">
|
||||
<img class="popup-item" src="./static/images/loading.gif" alt="Loading..." />
|
||||
<div id="loading_popup_message" class="popup-text">Loading information...</div>
|
||||
</div>
|
||||
<div id="info_popup" class="popup popup-info shadow d-none">
|
||||
<div id="info_popup_title" class="popup-title">Error</div>
|
||||
<div id="info_popup_message" class="popup-text">-</div>
|
||||
</div>
|
||||
<div id="loading_wrapper" class="loading-wrapper element-grayed">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">WebGL examples</h5>
|
||||
<!-- Multimedia items section -->
|
||||
<div class="row">
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=aquarium/aquarium.html'">
|
||||
<div class="multimedia-title">Aquarium</div>
|
||||
<img src="./static/images/aquarium.jpg" alt="Aquarium">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=blob/blob.html'">
|
||||
<div class="multimedia-title">Blob</div>
|
||||
<img src="./static/images/blob.jpg" alt="Blob">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=electricflower/electricflower.html'">
|
||||
<div class="multimedia-title">Electricflower</div>
|
||||
<img src="./static/images/electricflower.jpg" alt="Electricflower">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=multiple-views/multiple-views.html'">
|
||||
<div class="multimedia-title">Multiple Views</div>
|
||||
<img src="./static/images/multiple-views.jpg" alt="Multiple Views">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=spacerocks/spacerocks.html'">
|
||||
<div class="multimedia-title">Spacerocks</div>
|
||||
<img src="./static/images/spacerocks.jpg" alt="Spacerocks">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=toon-shading/toon-shading.html'">
|
||||
<div class="multimedia-title">Toon Shading</div>
|
||||
<img src="./static/images/toon-shading.jpg" alt="Toon Shading">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- Multimedia items -->
|
||||
<div style="padding-top: 20px;">
|
||||
All the WebGL examples have been obtained from <a href="#" onclick="location.href='multimedia_viewer.html?exampleURL=https://webglsamples.org/'">https://webglsamples.org/</a>
|
||||
</div>
|
||||
</div> <!-- card body -->
|
||||
</div> <!-- card shadow -->
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Videos</h5>
|
||||
<!-- Videos -->
|
||||
<div class="row">
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=videos/big_buck_bunny.mov'">
|
||||
<div class="multimedia-title">Big Buck Bunny (MOV)</div>
|
||||
<img src="./static/images/big_buck_bunny.jpg" alt="Big Buck Bunny (MOV)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 multimedia-container">
|
||||
<div class="d-flex justify-content-center align-items-center multimedia-box">
|
||||
<div class="multimedia-item" onclick="location.href='multimedia_viewer.html?exampleURL=videos/big_buck_bunny.webm'">
|
||||
<div class="multimedia-title">Big Buck Bunny (WEBM)</div>
|
||||
<img src="./static/images/big_buck_bunny.jpg" alt="Big Buck Bunny (WEBM)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--Videos -->
|
||||
</div> <!-- card body -->
|
||||
</div> <!-- card shadow -->
|
||||
</div> <!-- loading wrapper -->
|
||||
</div> <!-- col -->
|
||||
</div> <!-- row justify -->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Reset variables.
|
||||
readingMultimediaInfo = false;
|
||||
multimediaInfoRead = false;
|
||||
// Initialize page.
|
||||
initializeMultimediaPage();
|
||||
});
|
||||
</script>
|
||||
</div> <!-- pjax-container -->
|
||||
</div> <!-- container-fluid -->
|
||||
</div> <!-- bg-light -->
|
||||
|
||||
<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();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Local JS files and functions -->
|
||||
<script type="text/javascript" src="./static/js/sidebar.js"></script>
|
||||
<script type="text/javascript" src="./static/js/ccimx8mm-dvk.js"></script>
|
||||
<script type="text/javascript" src="./static/js/ccimx8m-nano.js"></script>
|
||||
<script type="text/javascript" src="./static/js/ccimx8x-sbc-pro.js"></script>
|
||||
<script type="text/javascript" src="./static/js/dashboard.js"></script>
|
||||
<script type="text/javascript" src="./static/js/multimedia.js"></script>
|
||||
<script type="text/javascript" src="./static/js/management.js"></script>
|
||||
<script type="text/javascript" src="./static/js/file-system.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Don't show the loading spinner at the beginning. Initial page
|
||||
// load is full, so not relying on AJAX.
|
||||
$("#loading").hide();
|
||||
|
||||
// Set up PJAX.
|
||||
if ($.support.pjax) {
|
||||
$.pjax.defaults.timeout = 20000;
|
||||
$.pjax.defaults.fragment = "#pjax-container";
|
||||
$(document).pjax("a[data-pjax]", "#pjax-container");
|
||||
|
||||
$(document).on("pjax:beforeSend", function() {
|
||||
// Do not load new content if there are unsaved changes.
|
||||
if ($("#save-schedule").length && !$("#save-schedule").attr("disabled") && !confirm("There are unsaved changes. Do you want to exit?"))
|
||||
return false;
|
||||
});
|
||||
|
||||
$(document).on("pjax:send", function(e) {
|
||||
setSelectedSection(e.currentTarget.activeElement);
|
||||
$("#pjax-container").hide();
|
||||
$("#loading").show();
|
||||
});
|
||||
|
||||
$(document).on("pjax:complete", function() {
|
||||
$("#loading").hide();
|
||||
$("#pjax-container").show();
|
||||
});
|
||||
}
|
||||
|
||||
// Append the URL parameters to the section links.
|
||||
var params = new URLSearchParams(window.location.search).toString();
|
||||
if (params) {
|
||||
$("#sections li").each(function(i, n) {
|
||||
n.children[0].href += "?" + params;
|
||||
});
|
||||
}
|
||||
|
||||
// Set the selected section.
|
||||
setSelectedSection();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.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="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
|
||||
<script src="https://kit.fontawesome.com/1e66c78073.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
|
||||
<script src="https://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="/">
|
||||
<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>
|
||||
|
||||
|
|
@ -836,7 +836,7 @@ body {
|
|||
}
|
||||
|
||||
.value-updated {
|
||||
color: var(--digi-green);
|
||||
color: var(--digi-green) !important;
|
||||
font-weight: 1000;
|
||||
visibility: inherit;
|
||||
}
|
||||
|
|
@ -1768,37 +1768,105 @@ body {
|
|||
}
|
||||
/* END DEVICE TOOLBAR */
|
||||
|
||||
/* HISTORY */
|
||||
.chart-container {
|
||||
/* MULTIMEDIA */
|
||||
.multimedia-container {
|
||||
color: #666666;
|
||||
padding: 20px 0px 20px 0px;
|
||||
padding: 20px 7px 0px 7px;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
.multimedia-box {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.big-chart {
|
||||
.multimedia-item {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
height: 190px;
|
||||
border: 1px solid var(--light);
|
||||
border-radius: 0px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
box-shadow: 4px .25rem .25rem rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
.multimedia-item:hover {
|
||||
border: 1px solid var(--digi-green);
|
||||
}
|
||||
|
||||
.multimedia-title {
|
||||
padding: 0px 0px 3px 0px;
|
||||
margin-bottom: 0px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.multimedia-item hr {
|
||||
border-width: 1px;
|
||||
border-color: #CCCCCC;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.multimedia-item img {
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* END MULTIMEDIA */
|
||||
|
||||
/* MULTIMEDIA VIEWER */
|
||||
.multimedia-viewer {
|
||||
background-color: #848486;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.multimedia-content {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
padding: 20px;
|
||||
height: calc( 100vh - var(--nav-img-size) - 25px ); /* height of the top toolbar or banner plus 25px of padding */
|
||||
}
|
||||
|
||||
.chart-loading {
|
||||
.multimedia-status-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
min-height: 50px;
|
||||
box-sizing: content-box;
|
||||
background-color: white;
|
||||
color: var(--digi-gray);
|
||||
}
|
||||
|
||||
.loading-chart-image, .no-data-label {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.stat {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
/* END HISTORY */
|
||||
|
||||
.status-icon {
|
||||
float: left;
|
||||
margin-top: 9px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
margin-top: 14px;
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
color: var(--digi-gray);
|
||||
}
|
||||
|
||||
.back-button {
|
||||
float: right;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
width: 150px;
|
||||
margin: 7px 7px 0px 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
/* END MULTIMEDIA VIEWER */
|
||||
|
||||
/* MANAGEMENT */
|
||||
.system-monitor-param-container {
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -127,6 +127,8 @@ const CLASS_D_NONE = "d-none";
|
|||
const CLASS_DISABLED_DIV = "disabled-div";
|
||||
const CLASS_ELEMENT_GRAYED = "element-grayed";
|
||||
const CLASS_SELECTED = "selected";
|
||||
const CLASS_VALUE_ANIMATION = "value-animation";
|
||||
const CLASS_VALUE_UPDATED = "value-updated";
|
||||
|
||||
const ERROR_ABORTED = "Operation aborted";
|
||||
const ERROR_URL_NOT_FOUND = "Requested URL not found";
|
||||
|
|
@ -134,6 +136,10 @@ const ERROR_SERVER_ERROR = "Internal server error";
|
|||
const ERROR_TITLE = "Error";
|
||||
const ERROR_UNKNOWN_ERROR = "Unknown error";
|
||||
|
||||
const PREFIX_STREAM = "system_monitor/";
|
||||
const STREAM_CPU_LOAD = PREFIX_STREAM + "cpu_load";
|
||||
const STREAM_MEMORY_FREE = PREFIX_STREAM + "free_memory";
|
||||
|
||||
const PATH_IMAGES = "../static/images/";
|
||||
|
||||
const PORT = "9090";
|
||||
|
|
@ -145,6 +151,25 @@ String.prototype.format = function() {
|
|||
return formatted;
|
||||
};
|
||||
|
||||
// Updates the value of the given element ID.
|
||||
function updateValueWithEffect(elementID, value) {
|
||||
// Initialize variables.
|
||||
var htmlElement = document.getElementById(elementID);
|
||||
// Sanity checks.
|
||||
if (htmlElement == null || htmlElement == "undefined" || value == null)
|
||||
return;
|
||||
// Apply value and classes.
|
||||
htmlElement.classList.add(CLASS_VALUE_UPDATED);
|
||||
htmlElement.innerText = value;
|
||||
htmlElement.classList.add(CLASS_VALUE_ANIMATION);
|
||||
setTimeout(function() {
|
||||
htmlElement.classList.remove(CLASS_VALUE_UPDATED);
|
||||
setTimeout(function() {
|
||||
htmlElement.classList.remove(CLASS_VALUE_ANIMATION);
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Returns the server address.
|
||||
function getServerAddress() {
|
||||
var host = window.location.hostname;
|
||||
|
|
@ -445,9 +470,9 @@ function isManagementShowing() {
|
|||
return window.location.pathname.indexOf("management") > -1;
|
||||
}
|
||||
|
||||
// Returns whether the history page is showing or not.
|
||||
function isHistoryShowing() {
|
||||
return window.location.pathname.indexOf("history") > -1;
|
||||
// Returns whether the multimedia page is showing or not.
|
||||
function isMultimediaShowing() {
|
||||
return window.location.pathname.indexOf("multimedia") > -1;
|
||||
}
|
||||
|
||||
// Returns the device name.
|
||||
|
|
|
|||
|
|
@ -66,16 +66,12 @@ const IFACE_WIFI = "wlan0/";
|
|||
|
||||
const USER_LED = "user_led";
|
||||
|
||||
const PREFIX_STREAM = "system_monitor/";
|
||||
|
||||
const STREAM_CPU_LOAD = PREFIX_STREAM + "cpu_load";
|
||||
const STREAM_CPU_FREQUENCY = PREFIX_STREAM + "frequency";
|
||||
const STREAM_CPU_TEMPERATURE = PREFIX_STREAM + "cpu_temperature";
|
||||
const STREAM_CPU_UPTIME = PREFIX_STREAM + "uptime";
|
||||
const STREAM_ETHERNET_READ_BYTES = PREFIX_STREAM + IFACE_ETHERNET + "rx_bytes";
|
||||
const STREAM_ETHERNET_SENT_BYTES = PREFIX_STREAM + IFACE_ETHERNET + "tx_bytes";
|
||||
const STREAM_ETHERNET_STATE = PREFIX_STREAM + IFACE_ETHERNET + "state";
|
||||
const STREAM_MEMORY_FREE = PREFIX_STREAM + "free_memory";
|
||||
const STREAM_LED_STATUS = PREFIX_STREAM + "led_status";
|
||||
const STREAM_MEMORY_USED = PREFIX_STREAM + "used_memory";
|
||||
const STREAM_WIFI_READ_BYTES = PREFIX_STREAM + IFACE_WIFI + "rx_bytes";
|
||||
|
|
@ -94,8 +90,6 @@ const CLASS_LED_PANEL_AREA_ON = "led-panel-area-on";
|
|||
const CLASS_PANEL_AREA_SELECTED = "panel-area-selected";
|
||||
const CLASS_PANEL_AREA_ICON_SELECTED = "panel-area-icon-selected";
|
||||
const CLASS_PANEL_TOOLTIP = "panel-tooltip";
|
||||
const CLASS_VALUE_ANIMATION = "value-animation";
|
||||
const CLASS_VALUE_UPDATED = "value-updated";
|
||||
|
||||
const MESSAGE_CHANGING_VIDEO_BRIGHTNESS = "Changing video brightness...";
|
||||
const MESSAGE_CHANGING_AUDIO_VOLUME = "Changing audio volume...";
|
||||
|
|
@ -544,7 +538,7 @@ function positionComponent(component, boardWidth, boardHeight, headerHeight, das
|
|||
// Updates the device information values.
|
||||
function updateInfoValues() {
|
||||
// Set the device type.
|
||||
updateFieldValue("device-name", device.getDeviceType().toUpperCase());
|
||||
updateFieldValue(ID_DEVICE_NAME, device.getDeviceType().toUpperCase());
|
||||
// Set serial number.
|
||||
updateFieldValue(ID_SERIAL_NUMBER, device.getSerialNumber());
|
||||
// Set DEY version.
|
||||
|
|
@ -646,25 +640,6 @@ function updateDataPointValue(streamID, value) {
|
|||
}
|
||||
}
|
||||
|
||||
// Updates the value of the given element ID.
|
||||
function updateValueWithEffect(elementID, value) {
|
||||
// Initialize variables.
|
||||
var htmlElement = document.getElementById(elementID);
|
||||
// Sanity checks.
|
||||
if (htmlElement == null || htmlElement == "undefined" || value == null)
|
||||
return;
|
||||
// Apply value and classes.
|
||||
htmlElement.classList.add(CLASS_VALUE_UPDATED);
|
||||
htmlElement.innerText = value;
|
||||
htmlElement.classList.add(CLASS_VALUE_ANIMATION);
|
||||
setTimeout(function() {
|
||||
htmlElement.classList.remove(CLASS_VALUE_UPDATED);
|
||||
setTimeout(function() {
|
||||
htmlElement.classList.remove(CLASS_VALUE_ANIMATION);
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Toggles the visibility of the given component information panel.
|
||||
function toggleInfoPanelVisibility(componentName) {
|
||||
// Sanity checks.
|
||||
|
|
|
|||
|
|
@ -1,221 +0,0 @@
|
|||
/*
|
||||
* Copyright 2022, Digi International Inc.
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
||||
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
||||
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
||||
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
||||
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
||||
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
*/
|
||||
|
||||
// Constants.
|
||||
const ID_CPU_CHART = "cpu-chart";
|
||||
const ID_CPU_CHART_LOADING = "cpu-chart-loading";
|
||||
const ID_MEMORY_CHART = "memory-chart";
|
||||
const ID_MEMORY_CHART_LOADING = "memory-chart-loading";
|
||||
const ID_TEMPERATURE_CHART = "temperature-chart";
|
||||
const ID_TEMPERATURE_CHART_LOADING = "temperature-chart-loading";
|
||||
|
||||
const COLOR_CPU_CHART = "#3399FF";
|
||||
const COLOR_MEMORY_CHART = "#FFD500";
|
||||
const COLOR_TEMPERATURE_CHART = "#4F4F4F";
|
||||
|
||||
const TITLE_CPU_CHART = "CPU Usage";
|
||||
const TITLE_MEMORY_CHART = "Memory Usage";
|
||||
const TITLE_TEMPERATURE_CHART = "Temperature";
|
||||
|
||||
const UNITS_CPU_CHART = "%";
|
||||
const UNITS_MEMORY_CHART = "MB";
|
||||
const UNITS_TEMPERATURE_CHART = "°C";
|
||||
|
||||
// Variables.
|
||||
var temperatureData = null;
|
||||
var cpuData = null;
|
||||
var memoryData = null;
|
||||
var temperatureInterval = null;
|
||||
var cpuInterval = null;
|
||||
var memoryInterval = null;
|
||||
|
||||
// Initializes the charts.
|
||||
function initCharts() {
|
||||
// Reset the variables.
|
||||
temperatureData = null;
|
||||
cpuData = null;
|
||||
memoryData = null;
|
||||
temperatureInterval = null;
|
||||
cpuInterval = null;
|
||||
memoryInterval = null;
|
||||
// Draw all the charts.
|
||||
drawAllCharts(true, true);
|
||||
}
|
||||
|
||||
// Draws all the charts.
|
||||
function drawAllCharts(refresh=false, showProgress=true) {
|
||||
// Sanity checks.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Draw the charts.
|
||||
drawTemperatureChart(refresh, showProgress);
|
||||
drawCPUChart(refresh, showProgress);
|
||||
drawMemoryChart(refresh, showProgress);
|
||||
}
|
||||
|
||||
// Draws the temperature chart.
|
||||
function drawTemperatureChart(refresh=false, showProgress=false) {
|
||||
if (refresh) {
|
||||
if (showProgress)
|
||||
$("#" + ID_TEMPERATURE_CHART_LOADING).show();
|
||||
$.post(
|
||||
"/ajax/history_temperature",
|
||||
JSON.stringify({
|
||||
"interval": temperatureInterval
|
||||
}),
|
||||
function(response) {
|
||||
// Process only if histograms page is showing.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Check for errors.
|
||||
if (!checkErrorResponse(response, false)) {
|
||||
temperatureData = response.data;
|
||||
drawTemperatureChart();
|
||||
$("#" + ID_TEMPERATURE_CHART_LOADING).hide();
|
||||
}
|
||||
}
|
||||
).fail(function(response) {
|
||||
// Process only if histograms page is showing.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Process error.
|
||||
processAjaxErrorResponse(response);
|
||||
});
|
||||
} else {
|
||||
drawChart(ID_TEMPERATURE_CHART, temperatureData, TITLE_TEMPERATURE_CHART, UNITS_TEMPERATURE_CHART, COLOR_TEMPERATURE_CHART);
|
||||
}
|
||||
}
|
||||
|
||||
// Draws the CPU chart.
|
||||
function drawCPUChart(refresh=false, showProgress=false) {
|
||||
if (refresh) {
|
||||
if (showProgress)
|
||||
$("#" + ID_CPU_CHART_LOADING).show();
|
||||
$.post(
|
||||
"/ajax/history_cpu",
|
||||
JSON.stringify({
|
||||
"interval": cpuInterval
|
||||
}),
|
||||
function(response) {
|
||||
// Process only if histograms page is showing.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Check for errors.
|
||||
if (!checkErrorResponse(response, false)) {
|
||||
cpuData = response.data;
|
||||
drawCPUChart();
|
||||
$("#" + ID_CPU_CHART_LOADING).hide();
|
||||
}
|
||||
}
|
||||
).fail(function(response) {
|
||||
// Process only if histograms page is showing.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Process error.
|
||||
processAjaxErrorResponse(response);
|
||||
});
|
||||
} else {
|
||||
drawChart(ID_CPU_CHART, cpuData, TITLE_CPU_CHART, UNITS_CPU_CHART, COLOR_CPU_CHART);
|
||||
}
|
||||
}
|
||||
|
||||
// Draws the memory chart.
|
||||
function drawMemoryChart(refresh=false, showProgress=false) {
|
||||
if (refresh) {
|
||||
if (showProgress)
|
||||
$("#" + ID_MEMORY_CHART_LOADING).show();
|
||||
$.post(
|
||||
"/ajax/history_memory",
|
||||
JSON.stringify({
|
||||
"interval": memoryInterval
|
||||
}),
|
||||
function(response) {
|
||||
// Process only if histograms page is showing.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Check for errors.
|
||||
if (!checkErrorResponse(response, false)) {
|
||||
memoryData = response.data;
|
||||
drawMemoryChart();
|
||||
$("#" + ID_MEMORY_CHART_LOADING).hide();
|
||||
}
|
||||
}
|
||||
).fail(function(response) {
|
||||
// Process only if histograms page is showing.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Process error.
|
||||
processAjaxErrorResponse(response);
|
||||
});
|
||||
} else {
|
||||
drawChart(ID_MEMORY_CHART, memoryData, TITLE_MEMORY_CHART, UNITS_MEMORY_CHART, COLOR_MEMORY_CHART);
|
||||
}
|
||||
}
|
||||
|
||||
// Draws the chart with the given data.
|
||||
function drawChart(id, data, title, units, color=null) {
|
||||
// Sanity checks.
|
||||
if (!isHistoryShowing())
|
||||
return;
|
||||
// Create the chart table.
|
||||
var dataTable = new google.visualization.DataTable();
|
||||
dataTable.addColumn("date", "");
|
||||
dataTable.addColumn("number", "");
|
||||
// Check if any data was given.
|
||||
if (data.length == 0) {
|
||||
$("#" + id).empty();
|
||||
$("#" + id).append("<span class='no-data-label'>Not enough data</span>");
|
||||
return;
|
||||
}
|
||||
// Add the data rows.
|
||||
dataTable.addRows(data.length);
|
||||
// Fill each row with the given data.
|
||||
$.each(data, function(k, v) {
|
||||
dataTable.setCell(k, 0, new Date(v[ID_TIMESTAMP]));
|
||||
dataTable.setCell(k, 1, v[ID_DATA]);
|
||||
});
|
||||
// Build chart options.
|
||||
var options = {
|
||||
backgroundColor: "transparent",
|
||||
series: {
|
||||
0: {
|
||||
axis: "Data",
|
||||
color: color,
|
||||
visibleInLegend: false
|
||||
}
|
||||
},
|
||||
axes: {
|
||||
y: {
|
||||
Data: {
|
||||
label: units
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: "none"
|
||||
},
|
||||
vAxis: {
|
||||
viewWindow: {
|
||||
min: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
// Create the chart.
|
||||
var chart = new google.charts.Line(document.getElementById(id));
|
||||
// Draw the chart.
|
||||
chart.draw(dataTable, google.charts.Line.convertOptions(options));
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
/*
|
||||
* Copyright 2022, Digi International Inc.
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
||||
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
||||
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
||||
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
||||
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
||||
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
*/
|
||||
|
||||
// Constants.
|
||||
|
||||
// Variables.
|
||||
var readingMultimediaInfo = false;
|
||||
var multimediaInfoRead = false;
|
||||
|
||||
// Initializes the multimedia page.
|
||||
function initializeMultimediaPage() {
|
||||
// Sanity checks.
|
||||
if (!isMultimediaShowing() || multimediaInfoRead)
|
||||
return;
|
||||
// Read multimedia information.
|
||||
readDeviceInfoMultimedia();
|
||||
}
|
||||
|
||||
// Gets the information of the device.
|
||||
function readDeviceInfoMultimedia() {
|
||||
// Execute only in the multimedia page.
|
||||
if (!isMultimediaShowing() || readingMultimediaInfo)
|
||||
return;
|
||||
// Flag reading variable.
|
||||
readingMultimediaInfo = true;
|
||||
// Hide the info popup.
|
||||
showInfoPopup(false);
|
||||
// Show the loading popup.
|
||||
showLoadingPopup(true, MESSAGE_LOADING_INFORMATION);
|
||||
// Send request to retrieve device information.
|
||||
$.post(
|
||||
"http://" + getServerAddress() + "/ajax/get_device_info",
|
||||
function(data) {
|
||||
readingMultimediaInfo = false;
|
||||
// Process only in the management page.
|
||||
if (!isMultimediaShowing())
|
||||
return;
|
||||
// Hide the loading panel.
|
||||
showLoadingPopup(false);
|
||||
// Process device information answer.
|
||||
processDeviceInfoMultimediaResponse(data);
|
||||
}
|
||||
).fail(function(response) {
|
||||
// Flag reading variable.
|
||||
readingMultimediaInfo = false;
|
||||
// Process only in the management page.
|
||||
if (!isMultimediaShowing())
|
||||
return;
|
||||
// Hide the loading panel.
|
||||
showLoadingPopup(false);
|
||||
// Process error.
|
||||
processAjaxErrorResponse(response);
|
||||
});
|
||||
}
|
||||
|
||||
// Processes the response of the device info request.
|
||||
function processDeviceInfoMultimediaResponse(response) {
|
||||
// Check if there was any error in the request.
|
||||
if (!checkErrorResponse(response, false)) {
|
||||
// Set the device type.
|
||||
updateFieldValue(ID_DEVICE_NAME, response[ID_DEVICE_TYPE].toUpperCase());
|
||||
// Flag device info read.
|
||||
multimediatInfoRead = true;
|
||||
}
|
||||
}
|
||||
|
||||