824 lines
61 KiB
HTML
824 lines
61 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>
|
|
Digi Demo - Dashboard
|
|
</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./static/css/stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
<link href="./static/css/cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
|
|
<link href="./static/css/cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css" rel="stylesheet">
|
|
<link href="./static/css/fontawesome5.15.4/all.min.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="./static/css/general.css">
|
|
<link rel="stylesheet" href="./static/css/toastr.css">
|
|
|
|
<!-- JS, Popper.js, and jQuery -->
|
|
<script src="./static/js/code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
|
<script src="./static/js/cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
|
<script src="./static/js/stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
|
|
<script src="./static/js/cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
|
|
<script src="./static/js/cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/bootstrap-slider.min.js"></script>
|
|
<script type="text/javascript" src="./static/js/common.js"></script>
|
|
<script type="text/javascript" src="./static/js/devices.js"></script>
|
|
<script type="text/javascript" src="./static/js/jquery.pjax.js"></script>
|
|
<script type="text/javascript" src="./static/js/jquery.matchHeight-min.js"></script>
|
|
<script type="text/javascript" src="./static/js/toastr.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<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="index.html">
|
|
<div class="d-flex align-items-baseline">
|
|
<img id="banner-logo" class="banner-icon" src="./static/images/Digi_logo_banner.png">
|
|
<p id="banner-text">ConnectCore Demo</p>
|
|
</div>
|
|
</a>
|
|
<div class="nav-right-container">
|
|
<div>
|
|
<img src="./static/images/board.png" class="device-title-img" title="Device">
|
|
</div>
|
|
<div id="device-name">DEY DEVICE</div>
|
|
</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 id="section_dashboard">
|
|
<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 id="section_multimedia">
|
|
<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 id="section_network">
|
|
<a data-pjax href="network.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-network-wired fa-fw fa-lg mr-3"></span>
|
|
<span class="menu-collapsed">Network</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li id="section_management">
|
|
<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">
|
|
|
|
<input type="file" id="file_to_upload" style="display:none"/>
|
|
<div class="row justify-content-lg-center">
|
|
<div class="col-lg-12 col-xl-12">
|
|
<div class="column main-row">
|
|
<div class="card dashboard-device-card">
|
|
<div class="card-body">
|
|
<div id="dashboard_device" class="dashboard-device">
|
|
<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 device...</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="confirm_dialog" class="confirm-dialog d-none">
|
|
<div class="device-card-header">
|
|
<span class="fas fa-question-circle fa-lg mr-2"></span>
|
|
<span id="confirm_dialog_title"></span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="showPopup(ID_LOADING_WRAPPER, ID_CONFIRM_DIALOG, false)"></div>
|
|
</div>
|
|
<div id="confirm_dialog_message" class="confirm-dialog-message"></div>
|
|
<div class="confirm-dialog-buttons-container">
|
|
<div id="confirm_dialog_no_button" class="device-card-button confirm-dialog-button">No</div>
|
|
<div id="confirm_dialog_yes_button" class="device-card-button confirm-dialog-button">Yes</div>
|
|
</div>
|
|
</div>
|
|
<div id="loading_wrapper" class="loading-wrapper element-grayed">
|
|
<div id="device_board" class="device-board">
|
|
<div class="dashboard-top-panel shadow-sm">
|
|
<div id="device_toolbar" class="device-toolbar">
|
|
<div id="platform_name" class="platform-name"></div>
|
|
<div id="device-button-show-info" class="device-button" onclick="setInfoPanelsVisible(true)">
|
|
<img id="device-button-show-info-img" src="./static/images/show_info.png" width="32px" data-toggle="tooltip" data-placement="bottom" title="Show all information panels">
|
|
</div>
|
|
<div id="device-button-hide-info" class="device-button" onclick="setInfoPanelsVisible(false)">
|
|
<img id="device-button-hide-info-img" src="./static/images/hide_info.png" width="32px" data-toggle="tooltip" data-placement="bottom" title="Hide all information panels">
|
|
</div>
|
|
</div>
|
|
<div id="board_image_container" class="device-board-container">
|
|
<center><img id="board_image" class="device-board-image" width="" src=""/></center>
|
|
</div>
|
|
</div>
|
|
<div id="device_info" class="device-info">
|
|
<div id="device_info_panel_header" class="device-card-header" style="cursor: pointer;" onclick="toggleDeviceInfoVisibility()">
|
|
<span class="fas fa-info-circle fa-lg mr-2"></span>
|
|
<span>Device information</span>
|
|
<div id="device_info_toggle_button" class="fas fa-caret-down fa-lg device-card-header-button"></div>
|
|
</div>
|
|
<div id="device_info_panel_container" class="device-card-content shadow-sm" style="display: none;">
|
|
<table>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">Serial number:</span>
|
|
</td>
|
|
<td>
|
|
<span id="serial_number" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">DEY version:</span>
|
|
</td>
|
|
<td>
|
|
<span id="dey_version" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">Kernel version:</span>
|
|
</td>
|
|
<td>
|
|
<span id="kernel_version" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">U-Boot version:</span>
|
|
</td>
|
|
<td>
|
|
<span id="uboot_version" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">Module variant:</span>
|
|
</td>
|
|
<td>
|
|
<span id="module_variant" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">Board variant:</span>
|
|
</td>
|
|
<td>
|
|
<span id="board_variant" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">Board ID:</span>
|
|
</td>
|
|
<td>
|
|
<span id="board_id" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">MCA FW version:</span>
|
|
</td>
|
|
<td>
|
|
<span id="mca_fw_version" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<span class="device-card-content-text">MCA HW version:</span>
|
|
</td>
|
|
<td>
|
|
<span id="mca_hw_version" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="device-error" class="device-error"></div>
|
|
<div id="help_panel_area" class="help-panel-area fas fa-question fa-2x d-flex align-items-center justify-content-center" onclick="toggleHelpPopup()"></div>
|
|
<div id="help_panel" class="help-panel">
|
|
<span id="help_panel_arrow" class="help-arrow"></span>
|
|
<div class="help-panel-content">
|
|
<p><b>Welcome to the device dashboard.</b></p>
|
|
<span>From this page you can explore and interact with the different device components. Hover and click the green-highlighted panels to discover the board interfaces and specific enabled functionality.</span>
|
|
<div class="help-panel-button" onclick="setHelpPopupVisible(false)">Got it!</div>
|
|
</div>
|
|
</div>
|
|
<div id="cpu_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('cpu')">
|
|
<span class="panel-tooltip-text">CPU stats</span>
|
|
<span id="cpu_panel_icon" class="fas fa-microchip panel-area-icon"></span>
|
|
</div>
|
|
<div id="cpu_panel" class="device-card cpu-panel shadow-sm">
|
|
<span id="cpu_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-microchip fa-lg mr-2"></span>
|
|
<span>CPU stats</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('cpu', false)"></div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<div class="cpu-info">
|
|
<table>
|
|
<tr style="vertical-align: baseline;">
|
|
<td>
|
|
<span class="device-card-content-text">Usage:</span>
|
|
</td>
|
|
<td>
|
|
<span id="cpu_load" class="device-card-content-value">-</span> %
|
|
</td>
|
|
</tr>
|
|
<tr style="vertical-align: baseline;">
|
|
<td>
|
|
<span class="device-card-content-text">Uptime:</span>
|
|
</td>
|
|
<td>
|
|
<span id="cpu_uptime" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr style="vertical-align: baseline;">
|
|
<td>
|
|
<span class="device-card-content-text">Frequency:</span>
|
|
</td>
|
|
<td>
|
|
<span id="cpu_frequency" class="device-card-content-value">-</span> MHz
|
|
</td>
|
|
</tr>
|
|
<tr style="vertical-align: baseline;">
|
|
<td>
|
|
<span class="device-card-content-text">Temperature:</span>
|
|
</td>
|
|
<td>
|
|
<span id="cpu_temperature" class="device-card-content-value">-</span> C
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="memory_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('memory')">
|
|
<span class="panel-tooltip-text">RAM memory</span>
|
|
<span id="memory_panel_icon" class="fas fa-memory panel-area-icon"></span>
|
|
</div>
|
|
<div id="memory_panel" class="device-card memory-panel shadow-sm">
|
|
<span id="memory_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-memory fa-lg mr-2"></span>
|
|
<span>RAM memory stats</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('memory', false)"></div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Total memory:</span>
|
|
</td>
|
|
<td>
|
|
<span id="memory_total" class="device-card-content-value">-</span> MB
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Used memory:</span>
|
|
</td>
|
|
<td>
|
|
<span id="memory_used" class="device-card-content-value">-</span> MB
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Free memory:</span>
|
|
</td>
|
|
<td>
|
|
<span id="memory_free" class="device-card-content-value">-</span> MB
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="filesystem_panel" class="filesystem-panel">
|
|
<div class="filesystem-background"></div>
|
|
<div id="filesystem_container" class="filesystem-container">
|
|
<div id="filesystem_header" class="device-card-header">
|
|
<span class="fas fa-folder-open fa-lg mr-2"></span>
|
|
<span>Device file system</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="closeFileSystem()"></div>
|
|
</div>
|
|
<div id="filesystem_hover_background" class="filesystem-hover-background"></div>
|
|
<div id="filesystem_dir_name_panel" class="filesystem-dir-name-panel">
|
|
<div class="filesystem-dir-name-background"></div>
|
|
<div class="filesystem-dir-name-container">
|
|
<div class="device-card-header">
|
|
<span class="fas fa-folder-plus fa-lg mr-2"></span>
|
|
<span>Create new directory</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="closeDirectoryNamePanel()"></div>
|
|
</div>
|
|
<div class="filesystem-dir-name-label">Enter the new directory name</div>
|
|
<input id="filesystem_directory_name" class="filesystem-dir-name-input" type="text"/>
|
|
<div id="filesystem_directory_name_error" class="filesystem-dir-name-error"></div>
|
|
<div id="filesystem_directory_name_button" class="device-card-button filesystem-dir-name-button filesystem-dir-name-button-disabled" onclick="onCreateDirectory()">Create directory</div>
|
|
</div>
|
|
</div>
|
|
<div id="filesystem_toolbar" class="filesystem-toolbar">
|
|
<div class="filesystem-current-directory-container">
|
|
<div class="filesystem-current-directory-label">Current dir:</div>
|
|
<div id="current_directory" class="filesystem-current-directory"></div>
|
|
</div>
|
|
<div id="filesystem_toolbar_buttons_container" class="filesystem-toolbar-buttons-container">
|
|
<div id="filesystem_create_directory_button" class="filesystem-button fas fa-folder-plus fa-2x" onclick="openDirectoryNamePanel()" title="Create directory"></div>
|
|
<div id="filesystem_upload_file_button" class="filesystem-button fas fa-upload fa-2x" onclick="openFileBrowser()" title="Upload file"></div>
|
|
<div id="filesystem_download_file_button" class="filesystem-button fas fa-file-download fa-2x" onclick="downloadSelectedFile()" title="Download file"></div>
|
|
<div id="filesystem_remove_file_button" class="filesystem-button fas fa-trash fa-2x" onclick="askRemoveFile()" title="Remove file"></div>
|
|
</div>
|
|
</div>
|
|
<div id="filesystem_items_header" class="filesystem-items-header">
|
|
<div class="filesystem-entry-icon"></div>
|
|
<div class="filesystem-entry-name">Name</div>
|
|
<div class="filesystem-entry-size">Size</div>
|
|
<div class="filesystem-entry-last-modified">Last modified</div>
|
|
</div>
|
|
<div id="filesystem_items_container" class="filesystem-items-container"></div>
|
|
<div id="filesystem_loading" class="popup shadow" style="top: 33%">
|
|
<img class="popup-item" src="./static/images/loading.gif" alt="Loading..." />
|
|
<div class="popup-text">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="wifi_bt_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('wifi-bt')">
|
|
<span class="panel-tooltip-text">WiFi/BT stats</span>
|
|
<span id="wifi_bt_panel_icon" class="fas fa-wifi panel-area-icon"></span>
|
|
</div>
|
|
<div id="wifi_bt_panel" class="device-card wifi-panel shadow-sm">
|
|
<span id="wifi_bt_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-wifi fa-lg mr-2"></span>
|
|
<span>Wi-Fi/BT stats</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('wifi-bt', false)"></div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Status:</span>
|
|
</td>
|
|
<td>
|
|
<span id="wifi_state" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">MAC address:</span>
|
|
</td>
|
|
<td>
|
|
<span id="wifi_mac" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">IP address:</span>
|
|
</td>
|
|
<td>
|
|
<span id="wifi_ip" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Sent data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="wifi_sent_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Received data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="wifi_received_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="device-card-header">
|
|
<span class="fab fa-bluetooth-b fa-lg mr-2"></span>
|
|
<span>Bluetooth</span>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Status:</span>
|
|
</td>
|
|
<td>
|
|
<span id="bluetooth_state" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">MAC address:</span>
|
|
</td>
|
|
<td>
|
|
<span id="bluetooth_mac" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Sent data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="bluetooth_sent_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Received data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="bluetooth_received_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="ethernet0_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('ethernet0')">
|
|
<span id="ethernet0_tooltip" class="panel-tooltip-text">Ethernet 0 stats</span>
|
|
<span id="ethernet0_panel_icon" class="fas fa-ethernet panel-area-icon"></span>
|
|
</div>
|
|
<div id="ethernet0_panel" class="device-card ethernet-panel shadow-sm">
|
|
<span id="ethernet0_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-ethernet fa-lg mr-2"></span>
|
|
<span id="ethernet0_title">Ethernet 0 stats</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('ethernet0', false)"></div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Status:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet0_state" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">MAC address:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet0_mac" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">IP address:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet0_ip" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Sent data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet0_sent_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Received data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet0_received_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="ethernet1_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('ethernet1')">
|
|
<span class="panel-tooltip-text">Ethernet 1 stats</span>
|
|
<span id="ethernet1_panel_icon" class="fas fa-ethernet panel-area-icon"></span>
|
|
</div>
|
|
<div id="ethernet1_panel" class="device-card ethernet-panel shadow-sm">
|
|
<span id="ethernet1_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-ethernet fa-lg mr-2"></span>
|
|
<span>Ethernet 1 stats</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('ethernet1', false)"></div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Status:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet1_state" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">MAC address:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet1_mac" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">IP address:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet1_ip" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Sent data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet1_sent_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Received data:</span>
|
|
</td>
|
|
<td>
|
|
<span id="ethernet1_received_data" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="video_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('video')">
|
|
<span class="panel-tooltip-text">Video info</span>
|
|
<span id="video_panel_icon" class="fas fa-desktop panel-area-icon"></span>
|
|
</div>
|
|
<div id="video_panel" class="device-card video-panel shadow-sm">
|
|
<span id="video_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-desktop fa-lg mr-2"></span>
|
|
<span>Video info</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('video', false)"></div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Resolution:</span>
|
|
</td>
|
|
<td>
|
|
<span id="video_resolution" class="device-card-content-value">-</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div id="video_brightness_container">
|
|
<span class="device-card-content-text">Brightness:</span>
|
|
<span class="device-card-content-value"> 0%</span>
|
|
<input id="video_brightness"/>
|
|
<span class="device-card-content-value"> 100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="audio_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('audio')">
|
|
<span class="panel-tooltip-text">Audio control</span>
|
|
<span id="audio_panel_icon" class="fas fa-volume-up panel-area-icon"></span>
|
|
</div>
|
|
<div id="audio_panel" class="device-card audio-panel shadow-sm">
|
|
<span id="audio_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-volume-up fa-lg mr-2"></span>
|
|
<span>Audio control</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('audio', false)"></div>
|
|
</div>
|
|
<div class="device-card-content" style="padding-bottom: 0px;">
|
|
<span class="device-card-content-text" style="margin-right: 15px;">Music:</span>
|
|
<div id="play_audio_button" class="fas fa-play audio-button" onclick="playMusic(true)">
|
|
</div>
|
|
<div id="stop_audio_button" class="fas fa-stop audio-button" onclick="playMusic(false)">
|
|
</div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<div>
|
|
<span class="device-card-content-text">Volume:</span>
|
|
<span class="device-card-content-value"> 0%</span>
|
|
<input id="audio_volume"/>
|
|
<span class="device-card-content-value"> 100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="led_panel_area" class="led-panel-area-off"></div>
|
|
<div id="led_panel" class="led-panel shadow-sm panel-tooltip" onclick="toggleUserLED()">
|
|
<span class="panel-tooltip-text">Toggle LED</span>
|
|
<span id="led_panel_arrow" class="panel-arrow"></span>
|
|
<img id ="led_image" class="led-image" src="./static/images/led_bubble.png"/>
|
|
</div>
|
|
<div id="flash_memory_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('flash_memory')">
|
|
<span class="panel-tooltip-text">Flash memory</span>
|
|
<span id="flash_memory_panel_icon" class="fas fa-database panel-area-icon"></span>
|
|
</div>
|
|
<div id="flash_memory_panel" class="device-card flash-memory-panel shadow-sm">
|
|
<span id="flash_memory_panel_arrow" class="panel-arrow"></span>
|
|
<div class="device-card-header">
|
|
<span class="fas fa-database fa-lg mr-2"></span>
|
|
<span>Flash memory stats</span>
|
|
<div class="fas fa-window-close fa-lg device-card-header-button" onclick="setInfoPanelVisible('flash_memory', false)"></div>
|
|
</div>
|
|
<div class="device-card-content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<span class="device-card-content-text">Total flash memory:</span>
|
|
</td>
|
|
<td>
|
|
<span id="flash_size" class="device-card-content-value">-</span> GB
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="device-card-button filesystem-explore-button" onclick="openFileSystem()">Explore file system...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize the device.
|
|
initDevice();
|
|
// Initialize sliders.
|
|
initSliders();
|
|
// Register resize event.
|
|
window.onresize = adjustImageSize;
|
|
// Change the color of the device toolbar icons when hovering.
|
|
$("#device-button-hide-info").on({
|
|
"mouseover" : function() {
|
|
$("#device-button-hide-info-img").attr("src", "./static/images/hide_info_green.png");
|
|
},
|
|
"mouseout" : function() {
|
|
$("#device-button-hide-info-img").attr("src", "./static/images/hide_info.png");
|
|
}
|
|
});
|
|
$("#device-button-show-info").on({
|
|
"mouseover" : function() {
|
|
$("#device-button-show-info-img").attr("src", "./static/images/show_info_green.png");
|
|
},
|
|
"mouseout" : function() {
|
|
$("#device-button-show-info-img").attr("src", "./static/images/show_info.png");
|
|
}
|
|
});
|
|
// Register file upload change event.
|
|
$("#file_to_upload").on("change", function(event) {
|
|
uploadFile(event.target.files[0]);
|
|
});
|
|
// Register directory name input changed.
|
|
$("#filesystem_directory_name").on("input", function(event) {
|
|
validateDirectoryName(event.target.value);
|
|
});
|
|
// Change image of the LED panel when hovering.
|
|
$("#led_panel").on({
|
|
"mouseover" : function() {
|
|
$("#led_image").attr("src", "./static/images/led_bubble_hover.png");
|
|
},
|
|
"mouseout" : function() {
|
|
$("#led_image").attr("src", "./static/images/led_bubble.png");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<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/ccmp133-dvk.js"></script>
|
|
<script type="text/javascript" src="./static/js/ccmp157-dvk.js"></script>
|
|
<script type="text/javascript" src="./static/js/ccimx6ulsbc.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/network.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;
|
|
});
|
|
}
|
|
|
|
// Update available sections.
|
|
updateAvailableSections();
|
|
|
|
// Set the selected section.
|
|
setSelectedSection();
|
|
});
|
|
|
|
// Callback executed when the page loads.
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
// Start the timer that updates device status.
|
|
var statsTimer = setInterval(refreshDevice, 5000);
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|