mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
Webui: extend led hardware config + connection lost page (#226)
* split content and js tune leds config * implement connection lost page * split js/html in huebridge * add js action for connection lost * extend led config make connection loss nicer * tune led code add menu entry for grabber * more tuning of webui * switch back to botstrap textarea add v4l to components * add icon * extend schema for jsoneditor * implement ledcolors streaming with 4fps * implement component state
This commit is contained in:
redPanther
GitHub
@@ -1,16 +1,39 @@
|
||||
<div id="wrapper">
|
||||
<div class="container-fluid">
|
||||
connection lost: <a href="/">reconnect</a>
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom:0">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="/"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container" style="margin-top:50px">
|
||||
<div class="panel panel-danger" style="box-shadow: 10px 10px 5px #BBBBBB;">
|
||||
<div class="panel-heading"><i class="fa fa-exclamation-triangle"></i> Connection to Hyperion Service lost!</div>
|
||||
<div class="panel-body"><a href="/">reconnect</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************ -->
|
||||
|
||||
<script>
|
||||
var connectionLost = false;
|
||||
var connectionTimer;
|
||||
|
||||
function tryReconnect()
|
||||
{
|
||||
$.ajax({ url: "/" }).done(function(data) {
|
||||
window.clearInterval(connectionTimer);
|
||||
window.location.href ="/";
|
||||
});
|
||||
}
|
||||
|
||||
function connectionLostAction()
|
||||
{
|
||||
// demo code to see if this works
|
||||
$("#wrapper").css("margin","auto");
|
||||
$("#wrapper").css("background-color","#BBBBBB");
|
||||
connectionLost = true;
|
||||
connectionTimer = window.setInterval(tryReconnect, 5000);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -52,19 +52,7 @@
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Kodi Watch</td>
|
||||
<td><i class="fa fa-circle component-on"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Blackborder</td>
|
||||
<td><i class="fa fa-circle component-off"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Booteffect</td>
|
||||
<td><i class="fa fa-circle component-off"></i></td>
|
||||
</tr>
|
||||
<tbody id="tab_components">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<hr>
|
||||
<div class="col-lg-12">
|
||||
<form id="generalConfForm"></form>
|
||||
<!-- <form id="generalConfForm"></form>-->
|
||||
<div id='editor_holder'></div>
|
||||
<button id='submit'>Submit (console.log)</button>
|
||||
</div>
|
||||
@@ -16,93 +16,4 @@
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
/*
|
||||
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).on("cmd-config-getschema", function(event) {
|
||||
parsedConfSchemaJSON = event.response.result;
|
||||
// remove all "advanced" options from schema
|
||||
//removeAdvanced(parsedConfSchemaJSON, []); // not working atm
|
||||
//console.log(JSON.stringify(parsedConfSchemaJSON));
|
||||
schema = parsedConfSchemaJSON.properties;
|
||||
schema_blackborderdetector = schema.blackborderdetector;
|
||||
schema_color = schema.color,
|
||||
schema_device = schema.device,
|
||||
schema_effects = schema.effects,
|
||||
schema_forwarder = schema.forwarder,
|
||||
schema_framegrabber = schema.framegrabber,
|
||||
//schema_grabber-v4l2 = schema.grabber-v4l2,
|
||||
schema_initialEffect = schema.initialEffect,
|
||||
schema_kodiVideoChecker = schema.kodiVideoChecker,
|
||||
schema_smoothing = schema.smoothing,
|
||||
schema_logger = schema.logger,
|
||||
schema_jsonServer = schema.jsonServer,
|
||||
schema_protoServer = schema.protoServer,
|
||||
schema_boblightServer = schema.boblightServer,
|
||||
schema_udpListener = schema.udpListener,
|
||||
schema_webConfig = schema.webConfig
|
||||
|
||||
var element = document.getElementById('editor_holder');
|
||||
//JSONEditor.defaults.options.theme = 'bootstrap3';
|
||||
|
||||
var general_conf_editor = new JSONEditor(element,{
|
||||
theme: 'bootstrap3',
|
||||
disable_collapse: 'true',
|
||||
form_name_root: 'sa',
|
||||
disable_edit_json: 'true',
|
||||
disable_properties: 'true',
|
||||
no_additional_properties: 'true',
|
||||
schema: {
|
||||
title:' ',
|
||||
properties: {
|
||||
schema_blackborderdetector,
|
||||
schema_color,
|
||||
schema_device,
|
||||
schema_effects,
|
||||
schema_forwarder,
|
||||
schema_framegrabber,
|
||||
//schema_grabber-v4l2,
|
||||
schema_initialEffect,
|
||||
schema_kodiVideoChecker,
|
||||
schema_smoothing,
|
||||
schema_logger,
|
||||
schema_jsonServer,
|
||||
schema_protoServer,
|
||||
schema_boblightServer,
|
||||
schema_udpListener,
|
||||
schema_webConfig
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready( function() {
|
||||
requestServerConfigSchema();
|
||||
|
||||
document.getElementById('submit').addEventListener('click',function() {
|
||||
// Get the value from the editor
|
||||
//console.log(general_conf_editor.getValue());
|
||||
});
|
||||
// $("[type='checkbox']").bootstrapSwitch();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<script src="/js/content_generalconf.js"></script>
|
||||
|
||||
20
assets/webconfig/content/grabber.html
Normal file
20
assets/webconfig/content/grabber.html
Normal file
@@ -0,0 +1,20 @@
|
||||
|
||||
<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">Capturing Hardware</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='submit'>Submit (console.log)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/js/content_grabber.js"></script>
|
||||
@@ -5,24 +5,36 @@
|
||||
vertical-align:middle; padding:4px; border-radius:2px;}
|
||||
.led_num {display:none; position:relative; color:black; background-color: white;
|
||||
border-radius:2px; padding:1px; vertical-align:middle; text-align:center; font-size:0.8em;}
|
||||
#leds_controls {white-space:nowrap; margin-top:530px;}
|
||||
#leds_controls {white-space:nowrap; margin-top:500px;}
|
||||
</style>
|
||||
|
||||
|
||||
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Led Configuration</h1>
|
||||
<div class="container-fluid">
|
||||
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</h1>
|
||||
<!-- <div class="introd">
|
||||
<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
|
||||
</div>-->
|
||||
|
||||
<ul id="leds_cfg_nav" class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#menu_display">Display LEDs</a></li>
|
||||
<li><a data-toggle="tab" href="#menu_gencfg">Generate Config</a></li>
|
||||
<li><a data-toggle="tab" href="#menu_customcfg">Custom Config</a></li>
|
||||
<li class="active"><a data-toggle="tab" href="#menu_controller">LED Controller</a></li>
|
||||
<li><a data-toggle="tab" href="#menu_gencfg">Generate LED Config</a></li>
|
||||
<li><a data-toggle="tab" href="#menu_display">LED Testing</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div id="menu_display" class="tab-pane fade in active">
|
||||
<div id="menu_controller" class="tab-pane fade in active" style="padding-top:10px">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading form-group" style="font-size:90%;white-space:nowrap;">
|
||||
<label for="leddevices">Controller Type</label>
|
||||
<select id="leddevices" class="form-control" style="color:black;width:auto;margin-left:10px;display:inline-block" />
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
... device specific options ... we need some cpp code extension to get schema for all leds
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu_display" class="tab-pane fade" style="padding-top:10px">
|
||||
<div class="container-fluid">
|
||||
<div id="leds_canvas"/>
|
||||
|
||||
@@ -34,24 +46,80 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu_gencfg" class="tab-pane fade">
|
||||
<h3>coming soon</h3>
|
||||
<p>led config generator ...</p>
|
||||
</div>
|
||||
<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
|
||||
|
||||
<div id="menu_customcfg" class="tab-pane fade">
|
||||
<p>
|
||||
<div class="form-group">
|
||||
<div style="margin-bottom:5px">
|
||||
<button lang="en" type="button" class="btn btn-success" id="leds_custom_check">check config</button>
|
||||
<button lang="en" type="button" class="btn btn-success" id="leds_custom_save">save config</button>
|
||||
</div>
|
||||
<textarea rows="20" id="ledconfig" style="width:90%"></textarea>
|
||||
</div>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
|
||||
<div class="panel-group" id="accordion">
|
||||
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-television fa-fw"></i>Frame Configuration (ambient light)</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse1" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
just a reminder ... this are the needed form elements:
|
||||
<pre>
|
||||
led count horizontal:
|
||||
led count vertical:
|
||||
cabling: zick zack/snake
|
||||
order: horizontal/vertical
|
||||
led 0 position: top-left / top-right / bottom-left / bottom-right
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-th fa-fw"></i>Matrix Configuration (LED wall)</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse2" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
just a reminder ... this are the needed form elements:
|
||||
<pre>
|
||||
led count links
|
||||
led count rechts
|
||||
led count oben
|
||||
led count unten rechts
|
||||
led count unten links
|
||||
start
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- accordion -->
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-primary" style="margin-bottom:5px">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title"><i class="fa fa-wrench fa-fw"></i>Generated Configuration</h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<button lang="en" type="button" class="btn btn-success" id="leds_custom_check">check config</button>
|
||||
<button lang="en" type="button" class="btn btn-success" id="leds_custom_save">save config</button>
|
||||
</div>
|
||||
<textarea rows="25" id="ledconfig" class="form-control"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- left pane -->
|
||||
|
||||
</div> <!-- row layout -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- tab content -->
|
||||
</div>
|
||||
|
||||
<script src="/js/content_leds.js"></script>
|
||||
|
||||
|
||||
@@ -6,14 +6,17 @@
|
||||
<h4 lang="en" data-lang-token="remote_components_intro">The components remote enables you to disable and enable certain components of Hyperion during runtime. Keep in mind this persist just until the next reboot! To enable/disable components permament, use the configuration section.</h4>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="col-lg-12" id="componentsbutton">
|
||||
<div class="col-lg-12">
|
||||
<div id="componentsbutton">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Enum('SMOOTHING', 'BLACKBORDER', 'KODICHECKER', 'FORWARDER', 'UDPLISTENER', 'BOBLIGHT_SERVER','GRABBER');
|
||||
/*
|
||||
new Enum('SMOOTHING', 'BLACKBORDER', 'KODICHECKER', 'FORWARDER', 'UDPLISTENER', 'BOBLIGHT_SERVER','GRABBER', 'V4L');
|
||||
|
||||
function Enum() {
|
||||
for (var i in arguments)
|
||||
@@ -23,4 +26,46 @@ function Enum() {
|
||||
$('#componentsbutton').append('<button type="button" class="btn btn-danger" onclick="requestSetComponentState(\''+arguments[i]+'\',false)"><i class="fa fa-play"></i></button> '+arguments[i]+'<br />');
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
function updateComponents(event) {
|
||||
if ($('#componentsbutton').length == 0)
|
||||
{
|
||||
$(hyperion).off("cmd-serverinfo",updateComponents);
|
||||
}
|
||||
else
|
||||
{
|
||||
components = event.response.info.components;
|
||||
// create buttons
|
||||
for ( idx=0; idx<components.length;idx++)
|
||||
{
|
||||
//components_html += '<tr><td>'+(components[idx].title)+'</td><td><i class="fa fa-circle component-'+(components[idx].enabled?"on":"off")+'"></i></td></tr>';
|
||||
enable_style = (components[idx].enabled? "btn-success" : "btn-danger");
|
||||
enable_icon = (components[idx].enabled? "fa-play" : "fa-stop");
|
||||
comp_name = components[idx].name;
|
||||
comp_btn_id = "comp_btn_"+comp_name;
|
||||
|
||||
// create btn if not there
|
||||
if ($("#"+comp_btn_id).length == 0)
|
||||
{
|
||||
d='<p><button type="button" id="'+comp_btn_id+'" class="btn '+enable_style
|
||||
+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)
|
||||
+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+components[idx].title+'</p>';
|
||||
$('#componentsbutton').append(d);
|
||||
}
|
||||
else // already create, update state
|
||||
{
|
||||
setClassByBool( $('#'+comp_btn_id) , components[idx].enabled, "btn-danger", "btn-success" );
|
||||
setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop" , "fa-play" );
|
||||
$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
$(hyperion).on("cmd-serverinfo",updateComponents);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user