frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2023-10-10 13:36:59 +02:00
Code Issues Releases Wiki Activity

Components divided on the dashboard

Browse Source
This commit is contained in:
Paulchen Panther 2021-05-02 15:47:14 +02:00
parent 781862775e
commit b06126ee28
5 changed files with 89 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/webconfig/content/dashboard.html
View File

@ -16,6 +16,20 @@
<span id="dash_config_status">Status</span> <span id="dash_config_status">Status</span>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<table class="table borderless">
<thead>
<tr>
<th colspan="3">
<i class="fa fa-eye fa-fw"></i>
<span data-i18n="dashboard_componentbox_label_title">Components</span>
</th>
</tr>
</thead>
<tbody class="glob_components"></tbody>
</table>
<table class="table borderless"> <table class="table borderless">
<thead> <thead>
<tr> <tr>
@ -28,22 +42,22 @@
<tbody> <tbody>
<tr> <tr>
<td></td> <td></td>
<td data-i18n="dashboard_infobox_label_port_proto">proto</td> <td><a onclick="SwitchToMenuItem('MenuItemNetwork', 'conf_cont_proto')" href="#" data-i18n="dashboard_infobox_label_port_proto">proto</a></td>
<td id="dash_pbPort" style="text-align:right">unknown</td> <td id="dash_pbPort" style="text-align:right">unknown</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td data-i18n="dashboard_infobox_label_port_flat">flat</td> <td><a onclick="SwitchToMenuItem('MenuItemNetwork', 'conf_cont_flatbuf')" href="#" data-i18n="dashboard_infobox_label_port_flat">flat</a></td>
<td id="dash_fbPort" style="text-align:right">unknown</td> <td id="dash_fbPort" style="text-align:right">unknown</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td data-i18n="dashboard_infobox_label_port_json">json</td> <td><a onclick="SwitchToMenuItem('MenuItemNetwork', 'conf_cont_json')" href="#" data-i18n="dashboard_infobox_label_port_json">json</a></td>
<td id="dash_jsonPort" style="text-align:right">unknown</td> <td id="dash_jsonPort" style="text-align:right">unknown</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td data-i18n="dashboard_infobox_label_ports_websocket">websocket</td> <td><a onclick="SwitchToMenuItem('MenuItemWeb')" href="#" data-i18n="dashboard_infobox_label_ports_websocket">websocket</a></td>
<td id="dash_wsPorts" style="text-align:right">unknown</td> <td id="dash_wsPorts" style="text-align:right">unknown</td>
</tr> </tr>
</tbody> </tbody>

8
assets/webconfig/index.html
View File

@ -207,22 +207,22 @@
<li> <a class="inactive mnava" href="#dashboard"><i class="fa fa-dashboard fa-fw"></i><span data-i18n="main_menu_dashboard_token">Dashboard</span></a> </li> <li> <a class="inactive mnava" href="#dashboard"><i class="fa fa-dashboard fa-fw"></i><span data-i18n="main_menu_dashboard_token">Dashboard</span></a> </li>
<li> <a class="inactive mnava" href="#conf_general"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_general_conf_token">General</span></a> </li> <li> <a class="inactive mnava" href="#conf_general"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_general_conf_token">General</span></a> </li>
<li> <li>
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span data-i18n="main_menu_configuration_token">Configuration</span><span class="fa arrow"></span></a> <a class="inactive"><i class="fa fa-cog fa-fw"></i><span data-i18n="main_menu_configuration_token">LED-Instances</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level"> <ul class="nav nav-second-level">
<li> <a class="inactive mnava" href="#conf_leds"><i class="mdi mdi-lightbulb-on fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li> <li> <a class="inactive mnava" id="MenuItemLeds" href="#conf_leds"><i class="mdi mdi-lightbulb-on fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li>
<li> <a class="inactive mnava" href="#conf_effect"><i class="fa fa-spinner fa-fw"></i><span data-i18n="main_menu_effect_conf_token">Effects</span></a> </li> <li> <a class="inactive mnava" href="#conf_effect"><i class="fa fa-spinner fa-fw"></i><span data-i18n="main_menu_effect_conf_token">Effects</span></a> </li>
<li> <a class="inactive mnava" href="#conf_colors"><i class="fa fa-photo fa-fw"></i><span data-i18n="main_menu_colors_conf_token">Image Processing</span></a> </li> <li> <a class="inactive mnava" href="#conf_colors"><i class="fa fa-photo fa-fw"></i><span data-i18n="main_menu_colors_conf_token">Image Processing</span></a> </li>
</ul> </ul>
</li> </li>
<li> <a class="inactive mnava" href="#conf_grabber"><i class="fa fa-camera fa-fw"></i><span data-i18n="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li> <li> <a class="inactive mnava" href="#conf_grabber"><i class="fa fa-camera fa-fw"></i><span data-i18n="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
<li> <a class="inactive mnava" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span data-i18n="main_menu_network_conf_token">Network</span></a> </li> <li> <a class="inactive mnava" id="MenuItemNetwork" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span data-i18n="main_menu_network_conf_token">Network</span></a> </li>
<li> <a class="inactive mnava" href="#remote"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></a> </li> <li> <a class="inactive mnava" href="#remote"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></a> </li>
<li> <a class="inactive mnava" href="#effects_configurator"><i class="fa fa-cogs fa-fw"></i><span data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></a> </li> <li> <a class="inactive mnava" href="#effects_configurator"><i class="fa fa-cogs fa-fw"></i><span data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></a> </li>
<li> <a class="inactive mnava" href="#support"><i class="fa fa-info fa-fw"></i><span data-i18n="main_menu_support_token">Support</span></a> </li> <li> <a class="inactive mnava" href="#support"><i class="fa fa-info fa-fw"></i><span data-i18n="main_menu_support_token">Support</span></a> </li>
<li> <li>
<a class="inactive"><i class="fa fa-industry fa-fw"></i><span data-i18n="main_menu_system_token">System</span><span class="fa arrow"></span></a> <a class="inactive"><i class="fa fa-industry fa-fw"></i><span data-i18n="main_menu_system_token">System</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level"> <ul class="nav nav-second-level">
<li> <a class="inactive mnava" href="#conf_webconfig" id="load_webconfig"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_webconfig_token">Webconfiguration</span></a> </li> <li> <a class="inactive mnava" id="MenuItemWeb" href="#conf_webconfig" id="load_webconfig"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_webconfig_token">Webconfiguration</span></a> </li>
<li> <a class="inactive mnava" id="MenuItemLogging" href="#conf_logging"><i class="fa fa-reorder fa-fw"></i><span data-i18n="main_menu_logging_token">Log</span></a> </li> <li> <a class="inactive mnava" id="MenuItemLogging" href="#conf_logging"><i class="fa fa-reorder fa-fw"></i><span data-i18n="main_menu_logging_token">Log</span></a> </li>
<li> <a class="inactive mnava" href="#update"><i class="fa fa-download fa-fw"></i><span data-i18n="main_menu_update_token">Update</span></a> </li> <li> <a class="inactive mnava" href="#update"><i class="fa fa-download fa-fw"></i><span data-i18n="main_menu_update_token">Update</span></a> </li>
<li> <a class="inactive mnava" href="#about"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="main_menu_about_token">About</span></a> </li> <li> <a class="inactive mnava" href="#about"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="main_menu_about_token">About</span></a> </li>

29
assets/webconfig/js/content_dashboard.js
View File

@ -40,7 +40,7 @@ $(document).ready(function () {
instances_html += '<span>' + $.i18n('dashboard_infobox_label_title') + '</span>'; instances_html += '<span>' + $.i18n('dashboard_infobox_label_title') + '</span>';
instances_html += '</th></tr></thead>'; instances_html += '</th></tr></thead>';
instances_html += '<tbody><tr><td></td>'; instances_html += '<tbody><tr><td></td>';
instances_html += '<td>' + $.i18n('conf_leds_contr_label_contrtype') + '</td>'; instances_html += '<td><a onclick="SwitchToMenuItem(\'MenuItemLeds\')" href="#">' + $.i18n('conf_leds_contr_label_contrtype') + '</a></td>';
instances_html += '<td style="text-align:right">' + window.serverConfig.device.type + '</td>'; instances_html += '<td style="text-align:right">' + window.serverConfig.device.type + '</td>';
instances_html += '</tr><tr></tbody></table>'; instances_html += '</tr><tr></tbody></table>';
@ -50,9 +50,11 @@ $(document).ready(function () {
instances_html += '<span>' + $.i18n('dashboard_componentbox_label_title') + '</span>'; instances_html += '<span>' + $.i18n('dashboard_componentbox_label_title') + '</span>';
instances_html += '</th></tr></thead>'; instances_html += '</th></tr></thead>';
var tab_components = ""; var instance_components = "";
var global_components = "";
for (var idx = 0; idx < components.length; idx++) { for (var idx = 0; idx < components.length; idx++) {
if (components[idx].name != "ALL") { if (components[idx].name != "ALL") {
if (components[idx].name != "FORWARDER" && components[idx].name != "GRABBER" && components[idx].name != "V4L") {
var comp_enabled = components[idx].enabled ? "checked" : ""; var comp_enabled = components[idx].enabled ? "checked" : "";
const general_comp = "general_comp_" + components[idx].name; const general_comp = "general_comp_" + components[idx].name;
var componentBtn = '<input ' + var componentBtn = '<input ' +
@ -64,14 +66,30 @@ $(document).ready(function () {
'data-on="' + $.i18n('general_btn_on') + '" ' + 'data-on="' + $.i18n('general_btn_on') + '" ' +
'data-off="' + $.i18n('general_btn_off') + '">'; 'data-off="' + $.i18n('general_btn_off') + '">';
tab_components += '<tr><td></td><td>' + $.i18n('general_comp_' + components[idx].name) + '</td><td style="text-align:right">' + componentBtn + '</td></tr>'; instance_components += '<tr><td></td><td>' + $.i18n('general_comp_' + components[idx].name) + '</td><td style="text-align:right">' + componentBtn + '</td></tr>';
} else {
var comp_enabled = components[idx].enabled ? "checked" : "";
const general_comp = "general_comp_" + components[idx].name;
var componentBtn = '<input ' +
'id="' + general_comp + '" ' + comp_enabled +
' type="checkbox" ' +
'data-toggle="toggle" ' +
'data-size="mini" ' +
'data-onstyle="success" ' +
'data-on="' + $.i18n('general_btn_on') + '" ' +
'data-off="' + $.i18n('general_btn_off') + '">';
global_components += '<tr><td></td><td>' + $.i18n('general_comp_' + components[idx].name) + '</td><td style="text-align:right">' + componentBtn + '</td></tr>';
}
} }
} }
instances_html += '<tbody>' + tab_components + '</tbody></table>'; instances_html += '<tbody>' + instance_components + '</tbody></table>';
instances_html += '</div></div></div>'; instances_html += '</div></div></div>';
$('.instances').prepend(instances_html); $('.instances').prepend(instances_html);
$('.glob_components').html(global_components);
updateUiOnInstance(window.currentHyperionInstance); updateUiOnInstance(window.currentHyperionInstance);
updateHyperionInstanceListing(); updateHyperionInstanceListing();
@ -83,7 +101,10 @@ $(document).ready(function () {
for (var idx = 0; idx < components.length; idx++) { for (var idx = 0; idx < components.length; idx++) {
if (components[idx].name != "ALL") { if (components[idx].name != "ALL") {
$("#general_comp_" + components[idx].name).bootstrapToggle(); $("#general_comp_" + components[idx].name).bootstrapToggle();
if (components[idx].name != "FORWARDER" && components[idx].name != "GRABBER" && components[idx].name != "V4L")
$("#general_comp_" + components[idx].name).bootstrapToggle(hyperion_enabled ? "enable" : "disable") $("#general_comp_" + components[idx].name).bootstrapToggle(hyperion_enabled ? "enable" : "disable")
$("#general_comp_" + components[idx].name).change(e => { $("#general_comp_" + components[idx].name).change(e => {
requestSetComponentState(e.currentTarget.id.split('_')[2], e.currentTarget.checked); requestSetComponentState(e.currentTarget.id.split('_')[2], e.currentTarget.checked);
}); });

12
assets/webconfig/js/content_grabber.js
View File

@ -182,26 +182,26 @@ $(document).ready(function () {
if (window.showOptHelp) { if (window.showOptHelp) {
// Instance Capture // Instance Capture
$('#conf_cont').append(createRow('conf_cont_instCapt')); $('#conf_cont').append(createRow('conf_cont_instCapt'));
$('#conf_cont_instCapt').append(createOptPanel('fa-camera', $.i18n("edt_conf_instCapture_heading_title"), 'editor_container_instCapt', 'btn_submit_instCapt')); $('#conf_cont_instCapt').append(createOptPanel('fa-camera', $.i18n("edt_conf_instCapture_heading_title"), 'editor_container_instCapt', 'btn_submit_instCapt', 'panel-system'));
$('#conf_cont_instCapt').append(createHelpTable(window.schema.instCapture.properties, $.i18n("edt_conf_instCapture_heading_title"))); $('#conf_cont_instCapt').append(createHelpTable(window.schema.instCapture.properties, $.i18n("edt_conf_instCapture_heading_title")));
// Framegrabber // Framegrabber
$('#conf_cont').append(createRow('conf_cont_fg')); $('#conf_cont').append(createRow('conf_cont_fg'));
$('#conf_cont_fg').append(createOptPanel('fa-camera', $.i18n("edt_conf_fg_heading_title"), 'editor_container_fg', 'btn_submit_fg')); $('#conf_cont_fg').append(createOptPanel('fa-camera', $.i18n("edt_conf_fg_heading_title"), 'editor_container_fg', 'btn_submit_fg', 'panel-system'));
$('#conf_cont_fg').append(createHelpTable(window.schema.framegrabber.properties, $.i18n("edt_conf_fg_heading_title"))); $('#conf_cont_fg').append(createHelpTable(window.schema.framegrabber.properties, $.i18n("edt_conf_fg_heading_title")));
// V4L2 - hide if not available // V4L2 - hide if not available
if (V4L2_AVAIL) { if (V4L2_AVAIL) {
$('#conf_cont').append(createRow('conf_cont_v4l')); $('#conf_cont').append(createRow('conf_cont_v4l'));
$('#conf_cont_v4l').append(createOptPanel('fa-camera', $.i18n("edt_conf_v4l2_heading_title"), 'editor_container_v4l2', 'btn_submit_v4l2')); $('#conf_cont_v4l').append(createOptPanel('fa-camera', $.i18n("edt_conf_v4l2_heading_title"), 'editor_container_v4l2', 'btn_submit_v4l2', 'panel-system'));
$('#conf_cont_v4l').append(createHelpTable(window.schema.grabberV4L2.properties, $.i18n("edt_conf_v4l2_heading_title"))); $('#conf_cont_v4l').append(createHelpTable(window.schema.grabberV4L2.properties, $.i18n("edt_conf_v4l2_heading_title")));
} }
} else { } else {
$('#conf_cont').addClass('row'); $('#conf_cont').addClass('row');
$('#conf_cont').append(createOptPanel('fa-camera', $.i18n("edt_conf_instCapture_heading_title"), 'editor_container_instCapt', 'btn_submit_instCapt')); $('#conf_cont').append(createOptPanel('fa-camera', $.i18n("edt_conf_instCapture_heading_title"), 'editor_container_instCapt', 'btn_submit_instCapt', 'panel-system'));
$('#conf_cont').append(createOptPanel('fa-camera', $.i18n("edt_conf_fg_heading_title"), 'editor_container_fg', 'btn_submit_fg')); $('#conf_cont').append(createOptPanel('fa-camera', $.i18n("edt_conf_fg_heading_title"), 'editor_container_fg', 'btn_submit_fg', 'panel-system'));
if (V4L2_AVAIL) { if (V4L2_AVAIL) {
$('#conf_cont').append(createOptPanel('fa-camera', $.i18n("edt_conf_v4l2_heading_title"), 'editor_container_v4l2', 'btn_submit_v4l2')); $('#conf_cont').append(createOptPanel('fa-camera', $.i18n("edt_conf_v4l2_heading_title"), 'editor_container_v4l2', 'btn_submit_v4l2', 'panel-system'));
} }
} }

27
assets/webconfig/js/content_index.js
View File

@ -307,12 +307,18 @@ $(document).ready(function () {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}); });
$(window).scroll(function(){ $(window).scroll(function() {
if ($(window).scrollTop() > 65) if ($(window).scrollTop() > 65)
$("#navbar_brand_logo").css("display", "none"); $("#navbar_brand_logo").css("display", "none");
else else
$("#navbar_brand_logo").css("display", ""); $("#navbar_brand_logo").css("display", "");
}); });
$('#side-menu li a, #side-menu li ul li a').click(function() {
console.log('test');
$('#side-menu').find('.active').toggleClass('inactive'); // find all active classes and set inactive;
$(this).addClass('active');
});
}); });
function suppressDefaultPwWarning() { function suppressDefaultPwWarning() {
@ -349,7 +355,7 @@ $("#btn_darkmode").off().on("click", function (e) {
}); });
// Menuitem toggle; // Menuitem toggle;
function SwitchToMenuItem(target) { function SwitchToMenuItem(target, item) {
document.getElementById(target).click(); // Get <a href menu item; document.getElementById(target).click(); // Get <a href menu item;
let sidebar = $('#side-menu'); // Get sidebar menu; let sidebar = $('#side-menu'); // Get sidebar menu;
sidebar.find('.active').toggleClass('inactive'); // find all active classes and set inactive; sidebar.find('.active').toggleClass('inactive'); // find all active classes and set inactive;
@ -357,6 +363,21 @@ function SwitchToMenuItem(target) {
$('#' + target).removeClass('inactive'); // Remove inactive state by classname; $('#' + target).removeClass('inactive'); // Remove inactive state by classname;
$('#' + target).addClass('active'); // Add active state by classname; $('#' + target).addClass('active'); // Add active state by classname;
let cl_object = $('#' + target).closest('ul'); // Find closest ul sidemenu header; let cl_object = $('#' + target).closest('ul'); // Find closest ul sidemenu header;
cl_object.addClass('in'); // add class "in" to expand header in sidebar menu; cl_object.addClass('in'); // Add class "in" to expand header in sidebar menu;
if (item) { // Jump to div "item" if available. Time limit 3 seconds
function scrollTo(counter) {
if(counter < 30) {
setTimeout(function() {
counter++;
if ($('#' + item).length)
$('#' + item)[0].scrollIntoView();
else
scrollTo(counter);
}, 100);
}
}
scrollTo(0);
}
}; };