frodovdr
/
hyperion.ng
mirror of https://github.com/hyperion-project/hyperion.ng.git
1
0
Fork 0
Code Issues Releases Wiki Activity

implement a function for easy json editor creation (#264) 

* implement a function for easy json editor creation

* grabber and kodi moved to new editor func

* webui: implement conf editors

* add missing files and remove debug code
This commit is contained in:
redPanther 2016-10-09 10:23:04 +02:00 committed by GitHub
parent b42f3453b4
commit 0a142b0e7d
16 changed files with 249 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/webconfig/content/colors.html Normal file
View File

@ -0,0 +1,21 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_grabber_conf_token">Image Processing</h1>
<div class="introd">
<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
</div>
<hr />
<div class="col-lg-12">
<!-- <form id="grabberConfForm"></form>-->
<div id='editor_container'/>
<button id='btn_submit'>Submit (console.log)</button>
</div>
</div>
</div>
</div>
<script src="/js/content_colors.js"></script>

4
assets/webconfig/content/generalconf.html → assets/webconfig/content/effects.html
View File

@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_general_conf_token">General</h1>
<h1 class="page-header" lang="en" data-lang-token="main_menu_general_conf_token">Effects</h1>
<div class="introd">
<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
</div>
@ -15,4 +15,4 @@
</div>
<script src="/js/content_generalconf.js"></script>
<script src="/js/content_effects.js"></script>

3
assets/webconfig/content/grabber.html
View File

@ -6,12 +6,13 @@
<div class="introd">
<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
</div>
<hr>
<hr />
<div class="col-lg-12">
<!-- <form id="grabberConfForm"></form>-->
<div id='editor_container'/>
<button id='btn_submit'>Submit (console.log)</button>
</div>
</div>
</div>
</div>

141
assets/webconfig/content/kodiconf.html
View File

@ -1,136 +1,23 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="conf_kodi_label_title">Kodi Watch</span></h1>
<div class="col-lg-12">
<div class="introd">
<h4 lang="en" data-lang-token="conf_kodi_label_intro">The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4>
</div>
<hr>
<div class="alert alert-info" role="alert">
<strong>HINT 1:</strong> In any case you need to enable the remote control for Kodi. Please checkout Wiki for instructions. LINK<br>
<strong>HINT 2:</strong> If you just use a USB-Grabber you could enable the Kodi Watch for this separately at the USB-Grabber page.
</div>
<div class="introd">
<h4 lang="en" data-lang-token="conf_kodi_label_intro">The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4>
</div>
<hr />
<div class="alert alert-info" role="alert">
<strong>HINT 1:</strong> In any case you need to enable the remote control for Kodi. Please checkout Wiki for instructions. LINK<br>
<strong>HINT 2:</strong> If you just use a USB-Grabber you could enable the Kodi Watch for this separately at the USB-Grabber page.
</div>
<div class="col-lg-7">
<div class="panel panel-default">
<div class="panel-body">
<!--Form example start-->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-10" for="SetEnableKodiCheck">Aktiviere die Überwachung für Kodi:</label>
<div class="col-xs-2">
<div class="checkbox checkbox-success">
<input type="checkbox" id="SetEnableKodiCheck">
<label for="SetEnableKodiCheck"></label>
</div>
</div>
</div>
<hr>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiIP">Kodi IP-Adresse:</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="SetKodiIP" placeholder="127.0.0.1">
<p>Set your Kodi IP, this could be also a running Kodi on your desktop computer</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiPort">Kodi TCP Port:</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="SetKodiPort" placeholder="9090">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiMenu">LEDs an im Menü:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox" id="SetKodiMenu" data-toggle="toggle">
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiVideo">LEDs an bei Video:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary pull-left">
<input type="checkbox" id="SetKodiVideo">
<label for="SetKodiVideo"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiMusic">LEDs an bei Musik:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiMusic">
<label for="SetKodiMusic"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiPicture">LEDs an bei Bilder:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiPicture">
<label for="SetKodiPicture"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiPause">LEDs an bei Pause:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiPause">
<label for="SetKodiPause"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodi3D">LEDs an bei 3D:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodi3D">
<label for="SetKodi3D"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiScreensaver">LEDs an bei Bildschirmschoner:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiScreensaver">
<label for="SetKodiScreensaver"></label>
</div>
</div>
</div>
<!--form example end -->
</div>
</div>
</div>
<div class="col-lg-12">
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-target="#dkodiWatchInfo">
Kodi options explained
</div>
<div id="kodiWatchInfo" class="collapse panel-body">
<ul>
<li><strong>Enabled:</strong> If checked, the Kodi Checker is enabled</li>
<li><strong>Kodi IP-Address:</strong> The ip address of your kodi "127.0.01" means your kodi on the same machine (see hint below)</li>
<li><strong>TCP Port:</strong> The TCP port of your Kodi. If you changed nothing, the default "9090" is correct.</li>
<li><strong>Menu:</strong> If checked, the ambilight will be "ON" if you are at the kodi menu. "OFF" if unchecked</li>
<li><strong>Video:</strong> If checked, the ambilight will be "ON" if you are playing a video (Movie/TV-Show/Youtube etc). "OFF" if unchecked</li>
<li><strong>Picture:</strong> If checked, the ambilight will be "ON" if you are watching pictures. "OFF" if unchecked</li>
<li><strong>Audio:</strong> If checked, the ambilight will be "ON" if you are listening to audio (music/web radio etc). "OFF" if unchecked</li>
<li><strong>Screensaver:</strong> If checked, the ambilight will be "ON" if the screensaver is active. "OFF" if unchecked</li>
<li><strong>3D Check:</strong> If checked, Hyperion will be switching to the detected 3D mode. (SBS/TAB) no MVC yet!</li>
<li><strong>Pause:</strong> If checked, the ambilight will be "ON" if the Kodi player is at pause state. "OFF" if unchecked</li>
</ul>
</div>
</div>
<div id='editor_container'/>
<button id='btn_submit'>Submit (console.log)</button>
</div>
</div>
</div>
</div>
<script src="/js/content_kodi.js"></script>

21
assets/webconfig/content/network.html Normal file
View File

@ -0,0 +1,21 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_grabber_conf_token">Network Services</h1>
<div class="introd">
<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
</div>
<hr />
<div class="col-lg-12">
<!-- <form id="grabberConfForm"></form>-->
<div id='editor_container'/>
<button id='btn_submit'>Submit (console.log)</button>
</div>
</div>
</div>
</div>
<script src="/js/content_network.js"></script>

6
assets/webconfig/index.html
View File

@ -208,10 +208,12 @@
<li>
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span lang="en" data-lang-token="main_menu_configuration_token">Configuration</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <a class="inactive" id="load_confGeneral"><i class="fa fa-wrench fa-fw"></i><span lang="en" data-lang-token="main_menu_general_conf_token">General</span></a> </li>
<li> <a class="inactive" id="load_confGrabber"><i class="fa fa-camera fa-fw"></i><span lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
<li> <a class="inactive" id="load_confLeds"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</span></a> </li>
<li> <a class="inactive" id="load_confGrabber"><i class="fa fa-camera fa-fw"></i><span lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
<li> <a class="inactive" id="load_confEffects"><i class="fa fa-spinner fa-fw"></i><span lang="en" data-lang-token="main_menu_general_conf_token">Effects</span></a> </li>
<li> <a class="inactive" id="load_confColors"><i class="fa fa-photo fa-fw"></i><span lang="en" data-lang-token="main_menu_colors_conf_token">Image Processing</span></a> </li>
<li> <a class="inactive" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_kodiwatch_token">KODI Connector</span></a> </li>
<li> <a class="inactive" id="load_confNetwork"><i class="fa fa-wrench fa-fw"></i><span lang="en" data-lang-token="main_menu_network_conf_token">Network</span></a> </li>
</ul>
</li>
<li> <a class="inactive" id="load_remote"><i class="fa fa-wifi fa-fw"></i><span lang="en" data-lang-token="main_menu_remotecontrol_token">Remote Control</span></a> </li>

34
assets/webconfig/js/content_colors.js Normal file
View File

@ -0,0 +1,34 @@
var conf_editor = null;
$(hyperion).one("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result;
schema = parsedConfSchemaJSON.properties;
conf_editor = createJsonEditor('editor_container',
{
title:'',
properties: {
color : schema.color,
smoothing : schema.smoothing,
blackborderdetector: schema.blackborderdetector,
}
});
$('#editor_container .well').css("background-color","white");
$('#editor_container .well').css("border","none");
$('#editor_container .well').css("box-shadow","none");
$('#editor_container .btn').addClass("btn-primary");
$('#editor_container h3').first().remove();
});
$(document).ready( function() {
requestServerConfigSchema();
document.getElementById('btn_submit').addEventListener('click',function() {
// Get the value from the editor
console.log(conf_editor.getValue());
});
});

42
assets/webconfig/js/content_effects.js Normal file
View File

@ -0,0 +1,42 @@
$(hyperion).one("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result;
schema = parsedConfSchemaJSON.properties;
var general_conf_editor = createJsonEditor('editor_container',
{
title:'',
properties: {
effects : schema.effects,
initialEffect : schema.initialEffect
}
});
$('#editor_container .well').css("background-color","white");
// $('#editor_container .well').css("border","none");
// $('#editor_container .well').css("box-shadow","none");
$('#editor_container .btn').addClass("btn-primary");
$('#editor_container h3').first().remove();
//Called everytime a Input Field is changed = No need for save button
// general_conf_editor.off().on('change',function() {
// console.log(JSON.stringify(general_conf_editor.getValue()));
// requestWriteConfig(general_conf_editor.getValue());
// });
//Alternative Function with submit button to get Values
$('#btn_submit').off().on('click',function() {
console.log(general_conf_editor.getValue());
});
$(hyperion).on("cmd-config-setconfig",function(event){
parsedServerInfoJSON = event.response;
console.log(parsedServerInfoJSON);
});
});
$(document).ready( function() {
requestServerConfigSchema();
//$("[type='checkbox']").bootstrapSwitch();
});

83
assets/webconfig/js/content_generalconf.js
View File

@ -1,83 +0,0 @@
/*
function removeAdvanced(obj,searchStack)
{
searchStack = [];
$.each(obj, function(key, val) {
if ( typeof(val) == 'object' )
{
searchStack.push(key);
if (! removeAdvanced(val,searchStack) )
searchStack.pop();
}
else if ( key == "advanced" && val == true )
{
console.log(searchStack);
return true;
}
});
return false;
}
*/
$(hyperion).one("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result;
schema = parsedConfSchemaJSON.properties;
var element = document.getElementById('editor_container');
var general_conf_editor = new JSONEditor(element,{
theme: 'bootstrap3',
iconlib: "fontawesome4",
disable_collapse: 'true',
form_name_root: 'sa',
disable_edit_json: 'true',
disable_properties: 'true',
no_additional_properties: 'true',
schema: {
title:'',
properties: {
blackborderdetector: schema.blackborderdetector,
color : schema.color,
effects : schema.effects,
forwarder : schema.forwarder,
initialEffect : schema.initialEffect,
kodiVideoChecker : schema.kodiVideoChecker,
smoothing : schema.smoothing,
logger : schema.logger,
jsonServer : schema.jsonServer,
protoServer : schema.protoServer,
boblightServer : schema.boblightServer,
udpListener : schema.udpListener,
webConfig : schema.webConfig
}
}
});
// $('#editor_container .well').css("background-color","white");
// $('#editor_container .well').css("border","none");
// $('#editor_container .well').css("box-shadow","none");
$('#editor_container .btn').addClass("btn-primary");
$('#editor_container h3').first().remove();
//Called everytime a Input Field is changed = No need for save button
// general_conf_editor.off().on('change',function() {
// console.log(JSON.stringify(general_conf_editor.getValue()));
// requestWriteConfig(general_conf_editor.getValue());
// });
//Alternative Function with submit button to get Values
$('#btn_submit').off().on('click',function() {
console.log(general_conf_editor.getValue());
});
$(hyperion).on("cmd-config-setconfig",function(event){
parsedServerInfoJSON = event.response;
console.log(parsedServerInfoJSON);
});
});
$(document).ready( function() {
requestServerConfigSchema();
//$("[type='checkbox']").bootstrapSwitch();
});

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

@ -1,49 +1,19 @@
/*
function removeAdvanced(obj,searchStack)
{
searchStack = [];
$.each(obj, function(key, val) {
if ( typeof(val) == 'object' )
{
searchStack.push(key);
if (! removeAdvanced(val,searchStack) )
searchStack.pop();
}
else if ( key == "advanced" && val == true )
{
console.log(searchStack);
return true;
}
});
return false;
}
*/
var grabber_conf_editor = null;
var conf_editor = null;
$(hyperion).one("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result;
schema = parsedConfSchemaJSON.properties;
var element = document.getElementById('editor_container');
grabber_conf_editor = new JSONEditor(element,{
theme: 'bootstrap3',
iconlib: "fontawesome4",
disable_collapse: 'true',
form_name_root: 'sa',
disable_edit_json: 'true',
disable_properties: 'true',
no_additional_properties: 'true',
schema: {
conf_editor = createJsonEditor('editor_container',
{
title:'',
properties: {
framegrabber: schema.framegrabber,
grabberV4L2 : schema["grabberV4L2"]
grabberV4L2 : schema.grabberV4L2
}
}
});
});
$('#editor_container .well').css("background-color","white");
$('#editor_container .well').css("border","none");
$('#editor_container .well').css("box-shadow","none");
@ -58,8 +28,7 @@ $(document).ready( function() {
document.getElementById('btn_submit').addEventListener('click',function() {
// Get the value from the editor
console.log(grabber_conf_editor.getValue());
console.log(conf_editor.getValue());
});
// $("[type='checkbox']").bootstrapSwitch();
});

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

@ -9,9 +9,11 @@ $(document).ready( function() {
bindNavToContent("#load_support","support",false);
bindNavToContent("#load_confKodi","kodiconf",false);
bindNavToContent("#load_update","update",false);
bindNavToContent("#load_confGeneral","generalconf",false);
bindNavToContent("#load_confEffects","effects",false);
bindNavToContent("#load_confLeds","leds",false);
bindNavToContent("#load_confGrabber","grabber",false);
bindNavToContent("#load_confColors","colors",false);
bindNavToContent("#load_confNetwork","network",false);
//Change all Checkboxes to Switches

33
assets/webconfig/js/content_kodi.js
View File

@ -1 +1,32 @@
var conf_editor = null;
$(hyperion).one("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result;
schema = parsedConfSchemaJSON.properties;
conf_editor = createJsonEditor('editor_container',
{
title:'',
properties: {
kodiVideoChecker: schema.kodiVideoChecker,
}
});
$('#editor_container .well').css("background-color","white");
$('#editor_container .well').css("border","none");
$('#editor_container .well').css("box-shadow","none");
$('#editor_container .btn').addClass("btn-primary");
$('#editor_container h3').remove();
});
$(document).ready( function() {
requestServerConfigSchema();
document.getElementById('btn_submit').addEventListener('click',function() {
// Get the value from the editor
console.log(conf_editor.getValue());
});
});

18
assets/webconfig/js/content_leds.js
View File

@ -138,27 +138,15 @@ $(document).ready(function() {
generalOptions = parsedConfSchemaJSON.properties.device;
specificOptions = parsedConfSchemaJSON.properties.alldevices[$(this).val()];
//$('#ledDeviceOptions').html(JSON.stringify(generalOptions)+"<br>"+JSON.stringify(specificOptions));
$('#editor_container').off();
$('#editor_container').html("");
var element = document.getElementById('editor_container');
grabber_conf_editor = new JSONEditor(element,{
theme: 'bootstrap3',
iconlib: "fontawesome4",
disable_collapse: 'true',
form_name_root: 'sa',
disable_edit_json: 'true',
disable_properties: 'true',
no_additional_properties: 'true',
schema: {
grabber_conf_editor = createJsonEditor('editor_container',
{
title:' ',
properties: {
generalOptions : generalOptions,
specificOptions : specificOptions,
}
}
});
values_general = {};
values_specific = {};
isCurrentDevice = (server.info.ledDevices.active == $(this).val());

36
assets/webconfig/js/content_network.js Normal file
View File

@ -0,0 +1,36 @@
var conf_editor = null;
$(hyperion).one("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result;
schema = parsedConfSchemaJSON.properties;
conf_editor = createJsonEditor('editor_container',
{
title:'',
properties: {
jsonServer : schema.jsonServer,
protoServer : schema.protoServer,
boblightServer : schema.boblightServer,
udpListener : schema.udpListener,
forwarder : schema.forwarder,
}
});
$('#editor_container .well').css("background-color","white");
$('#editor_container .well').css("border","none");
$('#editor_container .well').css("box-shadow","none");
$('#editor_container .btn').addClass("btn-primary");
$('#editor_container h3').first().remove();
});
$(document).ready( function() {
requestServerConfigSchema();
document.getElementById('btn_submit').addEventListener('click',function() {
// Get the value from the editor
console.log(conf_editor.getValue());
});
});

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

@ -54,11 +54,34 @@ function showErrorDialog(header,message)
$('#error_dialog').modal('show');
}
function isJsonString(str) {
try {
function isJsonString(str)
{
try
{
JSON.parse(str);
} catch (e) {
}
catch (e)
{
return e;
}
return "";
}
function createJsonEditor(container,schema)
{
$('#'+container).off();
$('#'+container).html("");
return new JSONEditor(document.getElementById(container),
{
theme: 'bootstrap3',
iconlib: "fontawesome4",
disable_collapse: 'true',
form_name_root: 'sa',
disable_edit_json: 'true',
disable_properties: 'true',
no_additional_properties: 'true',
schema: schema
});
}

2
libsrc/hyperion/hyperion.schema.json
View File

@ -908,12 +908,14 @@
"json" :
{
"type" : "array",
"title" : "List of JSON clients",
"required" : true,
"propertyOrder" : 2
},
"proto" :
{
"type" : "array",
"title" : "List of PROTO clients",
"required" : true,
"propertyOrder" : 3
}