diff --git a/connectcore-demo-example/index.html b/connectcore-demo-example/index.html index 96fe841..033a107 100644 --- a/connectcore-demo-example/index.html +++ b/connectcore-demo-example/index.html @@ -62,10 +62,10 @@ Digi Demo - Dashboard
  • - +
    - - Historical data + + Multimedia
    • @@ -762,8 +762,8 @@ Digi Demo - Dashboard + - + + + + + + + + + + + + + + +
    + + + + +
    + +
    + Loading... +
    +
    + +
    +
    + + +
    +
    +
    +
    WebGL examples
    + +
    +
    +
    +
    +
    Aquarium
    + Aquarium +
    +
    +
    +
    +
    +
    +
    Blob
    + Blob +
    +
    +
    +
    +
    +
    +
    Electricflower
    + Electricflower +
    +
    +
    +
    +
    +
    +
    Multiple Views
    + Multiple Views +
    +
    +
    +
    +
    +
    +
    Spacerocks
    + Spacerocks +
    +
    +
    +
    +
    +
    +
    Toon Shading
    + Toon Shading +
    +
    +
    +
    +
    + All the WebGL examples have been obtained from https://webglsamples.org/ +
    +
    +
    +
    +
    +
    Videos
    + +
    +
    +
    +
    +
    Big Buck Bunny (MOV)
    + Big Buck Bunny (MOV) +
    +
    +
    +
    +
    +
    +
    Big Buck Bunny (WEBM)
    + Big Buck Bunny (WEBM) +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + diff --git a/connectcore-demo-example/multimedia_viewer.html b/connectcore-demo-example/multimedia_viewer.html new file mode 100644 index 0000000..ee4ea90 --- /dev/null +++ b/connectcore-demo-example/multimedia_viewer.html @@ -0,0 +1,117 @@ + + + + Digi Demo - Multimedia viewer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/connectcore-demo-example/static/css/general.css b/connectcore-demo-example/static/css/general.css index 81487de..f326b1c 100644 --- a/connectcore-demo-example/static/css/general.css +++ b/connectcore-demo-example/static/css/general.css @@ -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 { diff --git a/connectcore-demo-example/static/images/aquarium.jpg b/connectcore-demo-example/static/images/aquarium.jpg new file mode 100644 index 0000000..9bafaf0 Binary files /dev/null and b/connectcore-demo-example/static/images/aquarium.jpg differ diff --git a/connectcore-demo-example/static/images/big_buck_bunny.jpg b/connectcore-demo-example/static/images/big_buck_bunny.jpg new file mode 100644 index 0000000..c3598ad Binary files /dev/null and b/connectcore-demo-example/static/images/big_buck_bunny.jpg differ diff --git a/connectcore-demo-example/static/images/blob.jpg b/connectcore-demo-example/static/images/blob.jpg new file mode 100644 index 0000000..b7988d7 Binary files /dev/null and b/connectcore-demo-example/static/images/blob.jpg differ diff --git a/connectcore-demo-example/static/images/cpu.png b/connectcore-demo-example/static/images/cpu.png new file mode 100644 index 0000000..f847ac4 Binary files /dev/null and b/connectcore-demo-example/static/images/cpu.png differ diff --git a/connectcore-demo-example/static/images/electricflower.jpg b/connectcore-demo-example/static/images/electricflower.jpg new file mode 100644 index 0000000..bad8c51 Binary files /dev/null and b/connectcore-demo-example/static/images/electricflower.jpg differ diff --git a/connectcore-demo-example/static/images/multiple-views.jpg b/connectcore-demo-example/static/images/multiple-views.jpg new file mode 100644 index 0000000..73931f8 Binary files /dev/null and b/connectcore-demo-example/static/images/multiple-views.jpg differ diff --git a/connectcore-demo-example/static/images/ram.png b/connectcore-demo-example/static/images/ram.png new file mode 100644 index 0000000..b3dd0e5 Binary files /dev/null and b/connectcore-demo-example/static/images/ram.png differ diff --git a/connectcore-demo-example/static/images/spacerocks.jpg b/connectcore-demo-example/static/images/spacerocks.jpg new file mode 100644 index 0000000..13f2991 Binary files /dev/null and b/connectcore-demo-example/static/images/spacerocks.jpg differ diff --git a/connectcore-demo-example/static/images/toon-shading.jpg b/connectcore-demo-example/static/images/toon-shading.jpg new file mode 100644 index 0000000..636d3e7 Binary files /dev/null and b/connectcore-demo-example/static/images/toon-shading.jpg differ diff --git a/connectcore-demo-example/static/js/common.js b/connectcore-demo-example/static/js/common.js index c869783..4acd252 100644 --- a/connectcore-demo-example/static/js/common.js +++ b/connectcore-demo-example/static/js/common.js @@ -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. diff --git a/connectcore-demo-example/static/js/dashboard.js b/connectcore-demo-example/static/js/dashboard.js index 7ba13ad..30a957e 100644 --- a/connectcore-demo-example/static/js/dashboard.js +++ b/connectcore-demo-example/static/js/dashboard.js @@ -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. diff --git a/connectcore-demo-example/static/js/history.js b/connectcore-demo-example/static/js/history.js deleted file mode 100644 index 78637d9..0000000 --- a/connectcore-demo-example/static/js/history.js +++ /dev/null @@ -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("Not enough data"); - 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)); -} - diff --git a/connectcore-demo-example/static/js/multimedia.js b/connectcore-demo-example/static/js/multimedia.js new file mode 100644 index 0000000..afcfab8 --- /dev/null +++ b/connectcore-demo-example/static/js/multimedia.js @@ -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; + } +} +