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>
This commit is contained in:
Tatiana Leon 2022-05-09 16:55:56 +02:00
parent 226a64285d
commit 2bfc4d728d
17 changed files with 599 additions and 273 deletions

View File

@ -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() {

View File

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

View File

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

View File

@ -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 {

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -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.

View File

@ -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.

View File

@ -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));
}

View File

@ -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;
}
}