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

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>

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>

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>

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>

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>

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>

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());
});
});

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();
});

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();
});

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();
});

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

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());
});
});

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());

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());
});
});

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
});
}

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
}