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

webui: merge remote control pages into one single page. (#231)

Browse Source 
* make enable/disable of bborder work

* fix typo

* smoothing can be disabled via config again

* fix smoothing

* merge remotecontrol into single page

* tiny cleanup in general conf

* tune icons

* fix loading display

* tune some layout stuff

* merge huebridge into leddevice
This commit is contained in:
redPanther
2016-09-09 18:59:58 +02:00
committed by GitHub
parent 4649786f68
commit 678624c959
13 changed files with 251 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/webconfig/content/effects.html
View File

@@ -1,25 +0,0 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_effects_token">Effects</h1>
<div class="introd">
<h4 lang="en" data-lang-token="remote_effects_intro">The Effects remote enables you to set an effect for testing or demonstration purposes. Don't forget to stop it afterwards.</h4>
</div>
<hr>
<div class="col-lg-12" id="buttondiv">
<button type="button" class="btn btn-danger" id="effect_stop" onclick="requestPriorityClear()"><i class="fa fa-stop"></i></button><span lang="en" data-lang-token="remote_effects_label_stopeffect">Stop Effect</span><br />
</div>
</div>
</div>
</div>
<script>
$(document).ready( function() {
for(i = 0; i < parsedServerInfoJSON.info.effects.length; i++) {
//console.log(parsedServerInfoJSON.info.effects[i].name);
var effectName = parsedServerInfoJSON.info.effects[i].name;
$('#buttondiv').append('<button type="button" class="btn btn-success" onclick="requestPlayEffect(\''+effectName+'\')"><i class="fa fa-play"></i></button> '+effectName+'<br />');
}
});
</script>

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

@@ -7,9 +7,8 @@
</div>
<hr>
<div class="col-lg-12">
<!-- <form id="generalConfForm"></form>-->
<div id='editor_holder'></div>
<button id='submit'>Submit (console.log)</button>
<button id='btn_submit'>Submit (console.log)</button>
</div>
</div>
</div>

44
assets/webconfig/content/huebridge.html
View File

@@ -1,44 +0,0 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</h1>
<div class="col-lg-12" >
<div class="col-lg-6" >
<span id="ip_alert" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_ip_token">Please check your IP Address.</span>
<span id="abortConnection" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_connection_token">Connection Timeout. Please press the button in time.</span>
<div class="form-group">
<label for="ip">IP:</label>
<input type="text" class="form-control" id="ip">
<label for="user" lang="en" data-lang-token="hue_label_username">Username:</label>
<input type="text" class="form-control" id="user" disabled>
<br />
<button type="button" class="btn btn-success" id="create_user"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_create_user_token"> Create User</span></button>
</div>
</div>
</div>
</div>
</div>
<hr />
<div id="hue_lights" class="row" />
</div>
<div class="modal fade bs-pair-modal-lg" id="pairmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Hue Bridge</h4>
</div>
<div class="modal-body">
<span lang="en" data-lang-token="hue_press_link_modal">Please press link button on the Hue Bridge.</span> <br /><br />
<center>
<span id="connectionTime"></span><br />
<img src="/img/hyperion/ring-alt.svg">
<center>
</div>
<div class="modal-footer" />
</div>
</div>
</div>
<script src="/js/content_huebridge.js"></script>

41
assets/webconfig/content/input_selection.html
View File

@@ -1,41 +0,0 @@
<div class="container-fluid">
<h1 class="page-header" lang="en" data-lang-token="main_menu_input_selection_token">Input Selection</h1>
<!-- <div class="introd">
<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
</div>-->
<div style="text-align:center;margin:auto;padding:auto">
<div id="hyperion_inputs" />
</div>
</div>
<script>
$(hyperion).on("cmd-serverinfo", function(event) {
var data = "";
var i;
for(i = 0; i < parsedServerInfoJSON.info.priorities.length; i++) {
var owner = parsedServerInfoJSON.info.priorities[i].owner;
var active = parsedServerInfoJSON.info.priorities[i].active;
var visible = parsedServerInfoJSON.info.priorities[i].visible;
var priority = parsedServerInfoJSON.info.priorities[i].priority;
var btn_type = "default";
if (active) btn_type = "warning";
if (visible) btn_type = "success";
data += '<button id="srcBtn'+i+'" type="button" class="btn btn-lg btn-'+btn_type+' btn_input_selection" style="margin:10px;min-width:200px" title="prio '+priority+'" onclick="requestSetSource('+priority+');">'+owner+'</button><br/>';
}
data += '<button id="srcBtn'+i+'" type="button" class="btn btn-lg btn-info btn_input_selection" style="margin:10px;min-width:200px" onclick="requestSetSource(\'auto\');">auto select</button><br/>';
$('#hyperion_inputs').html(data);
var max_width=200;
$('.btn_input_selection').each(function() {
if ($(this).innerWidth() > max_width)
max_width = $(this).innerWidth();
});
$('.btn_input_selection').css("min-width",max_width+"px");
});
</script>

49
assets/webconfig/content/leds.html
View File

@@ -8,6 +8,26 @@
#leds_controls {white-space:nowrap; margin-top:500px;}
</style>
<div class="modal fade bs-pair-modal-lg" id="pairmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Hue Bridge</h4>
</div>
<div class="modal-body">
<span lang="en" data-lang-token="hue_press_link_modal">Please press link button on the Hue Bridge.</span> <br /><br />
<center>
<span id="connectionTime"></span><br />
<img src="/img/hyperion/ring-alt.svg" />
<center>
</div>
<div class="modal-footer" />
</div>
</div>
</div>
<div class="container-fluid">
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</h1>
<!-- <div class="introd">
@@ -30,6 +50,34 @@
</div>
<div class="panel-body">
... device specific options ... we need some cpp code extension to get schema for all leds
<div id="huebridge" class="container-fluid" style="display:none">
<hr/>
<div class="row">
<!-- <div class="col-lg-12"> -->
<!-- <h1 class="page-header" lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</h1> -->
<div class="col-lg-12" >
<div class="col-lg-6" >
<span id="ip_alert" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_ip_token">Please check your IP Address.</span>
<span id="abortConnection" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_connection_token">Connection Timeout. Please press the button in time.</span>
<div class="form-group">
<label for="ip">Hue Bridge IP:</label>
<input type="text" class="form-control" id="ip">
<label for="user" lang="en" data-lang-token="hue_label_username">Hue Bridge Username:</label>
<input type="text" class="form-control" id="user" disabled>
<br />
<button type="button" class="btn btn-success" id="create_user"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_create_user_token"> Create User</span></button>
</div>
</div>
<!-- </div> -->
</div>
</div>
<hr />
<div id="hue_lights" class="row" />
</div>
</div>
</div>
</div>
@@ -122,4 +170,5 @@ start
</div>
<script src="/js/content_leds.js"></script>
<script src="/js/content_huebridge.js"></script>

58
assets/webconfig/content/lighttest.html
View File

@@ -1,58 +0,0 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_colors_token">Colors</h1>
<div class="col-lg-1">
<span lang="en" data-lang-token="remote_colors_label_color">Set color: </span>
</div>
<div class="col-lg-3">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<div class="col-lg-8">
<button lang="en" data-lang-token="remote_colors_button_reset" type="button" class="btn btn-warning" id="reset_color">Reset Color</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#cp2').colorpicker({
format: 'rgb',
colorSelectors: {
'default': '#777777',
'primary': '#337ab7',
'success': '#5cb85c',
'info' : '#5bc0de',
'warning': '#f0ad4e',
'danger' : '#d9534f'
},
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
},
}
});
$('#cp2').colorpicker().on('changeColor', function(e) {
color = e.color.toRGB();
requestSetColor(color.r, color.g, color.b);
});
});
$("#reset_color").on("click", requestPriorityClear);
</script>

52
assets/webconfig/content/remote.html Normal file
View File

@@ -0,0 +1,52 @@
<div class="container-fluid">
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Remote Control</h1>
</div>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary" >
<div class="panel-heading"> Colors / Effects </div>
<div class="panel-body">
<span lang="en" data-lang-token="remote_colors_label_color" style="display:inline-block">color: </span>
<div id="cp2" class="colorpicker-component" style="width:auto;display:inline-block;white-space:nowrap;">
<input type="text" value="#00AABB" class="form-control" style="display:inline" /><span class="input-group-addon form-control" style="display:inline-block;width:auto;"><i></i></span>
</div>
<div lang="en" data-lang-token="remote_colors_label_color" style="display:inline-block;margin-left:50px;">effect: </div>
<select id="effect_select" class="form-control" style="width:auto;display:inline-block"></select>
<button lang="en" data-lang-token="remote_colors_button_reset" type="button" class="btn btn-warning" id="reset_color" style="margin-left:20px;width:auto;display:inline-block">Reset Color/Effect</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary" >
<div class="panel-heading"> Input Selection </div>
<div class="panel-body">
<div id="hyperion_inputs"><div style="padding:30px;text-align:center"><img src="/img/hyperion/ring-alt.svg" /></div></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-primary" >
<div class="panel-heading"> Components </div>
<div class="panel-body">
<div id="componentsbutton"><div style="padding:30px;text-align:center"><img src="/img/hyperion/ring-alt.svg" /></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/js/content_remote.js" ></script>

71
assets/webconfig/content/remote_components.html
View File

@@ -1,71 +0,0 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_component_token">Effects</h1>
<div class="introd">
<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">
<div id="componentsbutton">
</div>
</div>
</div>
</div>
</div>
<script>
/*
new Enum('SMOOTHING', 'BLACKBORDER', 'KODICHECKER', 'FORWARDER', 'UDPLISTENER', 'BOBLIGHT_SERVER','GRABBER', 'V4L');
function Enum() {
for (var i in arguments)
{
this[arguments[i]] = i;
$('#componentsbutton').append('<button type="button" class="btn btn-success" onclick="requestSetComponentState(\''+arguments[i]+'\',true)"><i class="fa fa-play"></i></button> '+arguments[i]+'<br />');
$('#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>