frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2025-03-01 10:33:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve Platform Grabber UI (#1073)

Browse Source
This commit is contained in:
LordGrey
2020-11-14 16:22:21 +01:00
committed by GitHub
parent e2c8735fde
commit 758d9a70c5
9 changed files with 136 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/webconfig/i18n/en.json
View File

@@ -298,7 +298,6 @@
"edt_conf_fbs_heading_title": "Flatbuffers Server",
"edt_conf_fbs_timeout_expl": "If no data are received for the given period, the component will be (soft) disabled.",
"edt_conf_fbs_timeout_title": "Timeout",
"edt_conf_fg_device_title": "Device",
"edt_conf_fg_display_expl": "Select which desktop should be captured (multi monitor setup)",
"edt_conf_fg_display_title": "Display",
"edt_conf_fg_frequency_Hz_expl": "How fast new pictures are captured",

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

@@ -1,45 +1,45 @@
$(document).ready( function() {
$(document).ready(function () {
performTranslation();
var conf_editor_v4l2 = null;
var conf_editor_fg = null;
var conf_editor_instCapt = null;
var V4L2_AVAIL = window.serverInfo.grabbers.available.includes("v4l2");
if(V4L2_AVAIL) {
if (V4L2_AVAIL) {
// Dynamic v4l2 enum schema
var v4l2_dynamic_enum_schema = {
"available_devices":
{
"type": "string",
"title": "edt_conf_v4l2_device_title",
"propertyOrder" : 1,
"required" : true
"propertyOrder": 1,
"required": true
},
"device_inputs":
{
"type": "string",
"title": "edt_conf_v4l2_input_title",
"propertyOrder" : 3,
"required" : true
"propertyOrder": 3,
"required": true
},
"resolutions":
{
"type": "string",
"title": "edt_conf_v4l2_resolution_title",
"propertyOrder" : 6,
"required" : true
"propertyOrder": 6,
"required": true
},
"framerates":
{
"type": "string",
"title": "edt_conf_v4l2_framerate_title",
"propertyOrder" : 9,
"required" : true
"propertyOrder": 9,
"required": true
}
};
// Build dynamic v4l2 enum schema parts
var buildSchemaPart = function(key, schema, device) {
var buildSchemaPart = function (key, schema, device) {
if (schema[key]) {
var enumVals = [];
var enumTitelVals = [];
@@ -76,31 +76,31 @@ $(document).ready( function() {
"type": schema[key].type,
"title": schema[key].title,
"enum": [].concat(["auto"], enumVals, ["custom"]),
"options" :
"options":
{
"enum_titles" : [].concat(["edt_conf_enum_automatic"], enumTitelVals, ["edt_conf_enum_custom"]),
"enum_titles": [].concat(["edt_conf_enum_automatic"], enumTitelVals, ["edt_conf_enum_custom"]),
},
"propertyOrder" : schema[key].propertyOrder,
"required" : schema[key].required
"propertyOrder": schema[key].propertyOrder,
"required": schema[key].required
};
}
};
// Switch between visible states
function toggleOption(option, state) {
$('[data-schemapath="root.grabberV4L2.'+option+'"]').toggle(state);
$('[data-schemapath="root.grabberV4L2.' + option + '"]').toggle(state);
if (state) (
$('[data-schemapath="root.grabberV4L2.'+option+'"]').addClass('col-md-12'),
$('label[for="root_grabberV4L2_'+option+'"]').css('left','10px'),
$('[id="root_grabberV4L2_'+option+'"]').css('left','10px')
$('[data-schemapath="root.grabberV4L2.' + option + '"]').addClass('col-md-12'),
$('label[for="root_grabberV4L2_' + option + '"]').css('left', '10px'),
$('[id="root_grabberV4L2_' + option + '"]').css('left', '10px')
);
}
// Watch all v4l2 dynamic fields
var setWatchers = function(schema) {
var setWatchers = function (schema) {
var path = 'root.grabberV4L2.';
Object.keys(schema).forEach(function(key) {
conf_editor_v4l2.watch(path + key, function() {
Object.keys(schema).forEach(function (key) {
conf_editor_v4l2.watch(path + key, function () {
var ed = conf_editor_v4l2.getEditor(path + key);
var val = ed.getValue();
@@ -108,7 +108,7 @@ $(document).ready( function() {
var V4L2properties = ['device_inputs', 'resolutions', 'framerates'];
if (val == 'custom') {
var grabberV4L2 = ed.parent;
V4L2properties.forEach(function(item) {
V4L2properties.forEach(function (item) {
buildSchemaPart(item, v4l2_dynamic_enum_schema, 'none');
grabberV4L2.original_schema.properties[item] = window.schema.grabberV4L2.properties[item];
grabberV4L2.schema.properties[item] = window.schema.grabberV4L2.properties[item];
@@ -123,9 +123,8 @@ $(document).ready( function() {
conf_editor_v4l2.getEditor(path + 'standard').enable();
toggleOption('device', true);
} else if (val == 'auto') {
V4L2properties.forEach(function(item) {
V4L2properties.forEach(function (item) {
conf_editor_v4l2.getEditor(path + item).setValue('auto');
conf_editor_v4l2.getEditor(path + item).disable();
});
@@ -134,12 +133,11 @@ $(document).ready( function() {
conf_editor_v4l2.getEditor(path + 'standard').disable();
(toggleOption('device', false), toggleOption('input', false),
toggleOption('width', false), toggleOption('height', false),
toggleOption('fps', false));
toggleOption('width', false), toggleOption('height', false),
toggleOption('fps', false));
} else {
var grabberV4L2 = ed.parent;
V4L2properties.forEach(function(item) {
V4L2properties.forEach(function (item) {
buildSchemaPart(item, v4l2_dynamic_enum_schema, val);
grabberV4L2.original_schema.properties[item] = window.schema.grabberV4L2.properties[item];
grabberV4L2.schema.properties[item] = window.schema.grabberV4L2.properties[item];
@@ -176,12 +174,12 @@ $(document).ready( function() {
};
// Insert dynamic v4l2 enum schema parts
Object.keys(v4l2_dynamic_enum_schema).forEach(function(key) {
Object.keys(v4l2_dynamic_enum_schema).forEach(function (key) {
buildSchemaPart(key, v4l2_dynamic_enum_schema, window.serverConfig.grabberV4L2.device);
});
}
if(window.showOptHelp) {
if (window.showOptHelp) {
// Instance Capture
$('#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'));
@@ -193,7 +191,7 @@ $(document).ready( function() {
$('#conf_cont_fg').append(createHelpTable(window.schema.framegrabber.properties, $.i18n("edt_conf_fg_heading_title")));
// V4L2 - hide if not available
if(V4L2_AVAIL) {
if (V4L2_AVAIL) {
$('#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(createHelpTable(window.schema.grabberV4L2.properties, $.i18n("edt_conf_v4l2_heading_title")));
@@ -202,7 +200,7 @@ $(document).ready( function() {
$('#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_fg_heading_title"), 'editor_container_fg', 'btn_submit_fg'));
if(V4L2_AVAIL) {
if (V4L2_AVAIL) {
$('#conf_cont').append(createOptPanel('fa-camera', $.i18n("edt_conf_v4l2_heading_title"), 'editor_container_v4l2', 'btn_submit_v4l2'));
}
}
@@ -212,11 +210,11 @@ $(document).ready( function() {
instCapture: window.schema.instCapture
}, true, true);
conf_editor_instCapt.on('change',function() {
conf_editor_instCapt.on('change', function () {
conf_editor_instCapt.validate().length || window.readOnlyMode ? $('#btn_submit_instCapt').attr('disabled', true) : $('#btn_submit_instCapt').attr('disabled', false);
});
$('#btn_submit_instCapt').off().on('click',function() {
$('#btn_submit_instCapt').off().on('click', function () {
requestWriteConfig(conf_editor_instCapt.getValue());
});
@@ -225,24 +223,46 @@ $(document).ready( function() {
framegrabber: window.schema.framegrabber
}, true, true);
conf_editor_fg.on('change',function() {
conf_editor_fg.on('change', function () {
//Remove Grabbers which are not supported
var grabbers = window.serverInfo.grabbers.available;
var selector = "root_framegrabber_type";
var options = $("#" + selector + " option");
for (var i = 0; i < options.length; i++) {
var type = options[i].value;
if (grabbers.indexOf(type) === -1) {
$("#" + selector + " option[value='" + type + "']").remove();
}
}
if (window.serverInfo.grabbers.active)
{
var activegrabber = window.serverInfo.grabbers.active.toLowerCase();
$("#" + selector + " option[value='" + activegrabber + "']").attr('selected', 'selected');
}
var selectedType = $("#root_framegrabber_type").val();
filerFgGrabberOptions(selectedType);
conf_editor_fg.validate().length || window.readOnlyMode ? $('#btn_submit_fg').attr('disabled', true) : $('#btn_submit_fg').attr('disabled', false);
});
$('#btn_submit_fg').off().on('click',function() {
$('#btn_submit_fg').off().on('click', function () {
requestWriteConfig(conf_editor_fg.getValue());
});
if(V4L2_AVAIL) {
if (V4L2_AVAIL) {
conf_editor_v4l2 = createJsonEditor('editor_container_v4l2', {
grabberV4L2 : window.schema.grabberV4L2
grabberV4L2: window.schema.grabberV4L2
}, true, true);
conf_editor_v4l2.on('change',function() {
conf_editor_v4l2.on('change', function () {
conf_editor_v4l2.validate().length || window.readOnlyMode ? $('#btn_submit_v4l2').attr('disabled', true) : $('#btn_submit_v4l2').attr('disabled', false);
});
conf_editor_v4l2.on('ready', function() {
conf_editor_v4l2.on('ready', function () {
setWatchers(v4l2_dynamic_enum_schema);
if (window.serverConfig.grabberV4L2.available_devices == 'custom' && window.serverConfig.grabberV4L2.device != 'auto')
@@ -252,7 +272,7 @@ $(document).ready( function() {
conf_editor_v4l2.getEditor('root.grabberV4L2.available_devices').setValue('auto');
if (window.serverConfig.grabberV4L2.available_devices == 'auto') {
['device_inputs', 'standard', 'resolutions', 'framerates'].forEach(function(item) {
['device_inputs', 'standard', 'resolutions', 'framerates'].forEach(function (item) {
conf_editor_v4l2.getEditor('root.grabberV4L2.' + item).setValue('auto');
conf_editor_v4l2.getEditor('root.grabberV4L2.' + item).disable();
});
@@ -266,10 +286,9 @@ $(document).ready( function() {
if (window.serverConfig.grabberV4L2.framerates == 'custom' && window.serverConfig.grabberV4L2.device != 'auto')
toggleOption('fps', true);
});
$('#btn_submit_v4l2').off().on('click',function() {
$('#btn_submit_v4l2').off().on('click', function () {
var v4l2Options = conf_editor_v4l2.getValue();
if (v4l2Options.grabberV4L2.available_devices != 'custom' && v4l2Options.grabberV4L2.available_devices != 'auto')
@@ -304,31 +323,54 @@ $(document).ready( function() {
//////////////////////////////////////////////////
//create introduction
if(window.showOptHelp) {
if (window.showOptHelp) {
createHint("intro", $.i18n('conf_grabber_fg_intro'), "editor_container_fg");
if(V4L2_AVAIL){
if (V4L2_AVAIL) {
createHint("intro", $.i18n('conf_grabber_v4l_intro'), "editor_container_v4l2");
}
}
function hideEl(el) {
for(var i = 0; i<el.length; i++) {
$('[data-schemapath*="root.framegrabber.'+el[i]+'"]').toggle(false);
function toggleFgOptions(el, state) {
for (var i = 0; i < el.length; i++) {
$('[data-schemapath*="root.framegrabber.' + el[i] + '"]').toggle(state);
}
}
//hide specific options
conf_editor_fg.on('ready',function() {
var grabbers = window.serverInfo.grabbers.available;
function filerFgGrabberOptions(type) {
//hide specific options for grabbers found
if (grabbers.indexOf('dispmanx') > -1)
hideEl(["device","pixelDecimation"]);
else if (grabbers.indexOf('x11') > -1 || grabbers.indexOf('xcb') > -1)
hideEl(["device","width","height"]);
else if (grabbers.indexOf('osx') > -1 )
hideEl(["device","pixelDecimation"]);
else if (grabbers.indexOf('amlogic') > -1)
hideEl(["pixelDecimation"]);
var grabbers = window.serverInfo.grabbers.available;
if (grabbers.indexOf(type) > -1) {
toggleFgOptions(["width", "height", "pixelDecimation", "display"], true);
switch (type) {
case "dispmanx":
toggleFgOptions(["pixelDecimation", "display"], false);
break;
case "x11":
case "xcb":
toggleFgOptions(["width", "height", "display"], false);
break;
case "framebuffer":
toggleFgOptions(["display"], false);
break;
case "amlogic":
toggleFgOptions(["pixelDecimation", "display"], false);
break;
case "qt":
break;
case "dx":
break;
case "osx":
break;
default:
}
}
};
$('#root_framegrabber_type').change(function () {
var selectedType = $("#root_framegrabber_type").val();
filerFgGrabberOptions(selectedType);
});
removeOverlay();