mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
webui: merge remote control pages into one single page. (#231)
* 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
GitHub
parent
4649786f68
commit
678624c959
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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
52
assets/webconfig/content/remote.html
Normal 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>
|
||||
@ -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>
|
||||
@ -206,21 +206,12 @@
|
||||
<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_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_huebridge"><i class="fa fa-cog fa-fw"></i><span lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</span></a> </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inactive" href="#"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_remotecontrol_token">Remote Control</span><span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-second-level">
|
||||
<li> <a class="inactive" id="load_lighttest"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_colors_token">Colors</span></a> </li>
|
||||
<li> <a class="inactive" id="load_effects"><i class="fa fa-certificate fa-fw"></i><span lang="en" data-lang-token="main_menu_effects_token">Effects</span></a> </li>
|
||||
<li> <a class="inactive" id="load_components"><i class="fa fa-list fa-fw"></i><span lang="en" data-lang-token="main_menu_component_token">Components</span></a> </li>
|
||||
<li> <a class="inactive" id="load_input_selection"><i class="fa fa-random fa-fw"></i><span lang="en" data-lang-token="main_menu_input_selection_token">Input Selection</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>
|
||||
<li> <a class="inactive" id="load_support"><i class="fa fa-info fa-fw"></i><span lang="en" data-lang-token="main_menu_support_token">Support</span></a> </li>
|
||||
<li>
|
||||
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span lang="en" data-lang-token="main_menu_system_token">System</span><span class="fa arrow"></span></a>
|
||||
<a class="inactive"><i class="fa fa-industry fa-fw"></i><span lang="en" data-lang-token="main_menu_system_token">System</span><span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-second-level">
|
||||
<li> <a class="inactive" id="load_update"><i class="fa fa-download fa-fw"></i><span lang="en" data-lang-token="main_menu_update_token">Update</span></a> </li>
|
||||
</ul>
|
||||
|
||||
@ -21,9 +21,7 @@ function removeAdvanced(obj,searchStack)
|
||||
|
||||
$(hyperion).one("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;
|
||||
blackborderdetector = schema.blackborderdetector;
|
||||
color = schema.color;
|
||||
@ -40,7 +38,6 @@ $(hyperion).one("cmd-config-getschema", function(event) {
|
||||
webConfig = schema.webConfig;
|
||||
|
||||
var element = document.getElementById('editor_holder');
|
||||
//JSONEditor.defaults.options.theme = 'bootstrap3';
|
||||
|
||||
var general_conf_editor = new JSONEditor(element,{
|
||||
theme: 'bootstrap3',
|
||||
@ -70,13 +67,13 @@ $(hyperion).one("cmd-config-getschema", function(event) {
|
||||
});
|
||||
|
||||
//Called everytime a Input Field is changed = No need for save button
|
||||
general_conf_editor.on('change',function() {
|
||||
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
|
||||
document.getElementById('submit').addEventListener('click',function() {
|
||||
$('btn_submit').off().on('click',function() {
|
||||
console.log(general_conf_editor.getValue());
|
||||
});
|
||||
|
||||
|
||||
@ -2,10 +2,7 @@ $(document).ready( function() {
|
||||
loadContentTo("#container_connection_lost","connection_lost");
|
||||
initWebSocket();
|
||||
bindNavToContent("#load_dashboard","dashboard",true);
|
||||
bindNavToContent("#load_lighttest","lighttest",false);
|
||||
bindNavToContent("#load_effects","effects",false);
|
||||
bindNavToContent("#load_components","remote_components",false);
|
||||
bindNavToContent("#load_input_selection","input_selection",false);
|
||||
bindNavToContent("#load_remote","remote",false);
|
||||
bindNavToContent("#load_huebridge","huebridge",false);
|
||||
bindNavToContent("#load_support","support",false);
|
||||
bindNavToContent("#load_confKodi","kodiconf",false);
|
||||
|
||||
@ -68,19 +68,19 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$('#leds_toggle_num').on("click", function() {
|
||||
$('#leds_toggle_num').off().on("click", function() {
|
||||
$('.led_num').toggle();
|
||||
toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$('#leds_toggle').on("click", function() {
|
||||
$('#leds_toggle').off().on("click", function() {
|
||||
$('.led').toggle();
|
||||
toggleClass('#leds_toggle', "btn-success", "btn-danger");
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$('#leds_toggle_live').on("click", function() {
|
||||
$('#leds_toggle_live').off().on("click", function() {
|
||||
setClassByBool('#leds_toggle_live',ledStreamActive,"btn-success","btn-danger");
|
||||
if ( ledStreamActive )
|
||||
{
|
||||
@ -93,7 +93,7 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$("#leds_custom_check").on("click", function() {
|
||||
$("#leds_custom_check").off().on("click", function() {
|
||||
e = isJsonString($("#ledconfig").val());
|
||||
|
||||
if (e.length == 0)
|
||||
@ -103,11 +103,11 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$("#leds_custom_save").on("click", function() {
|
||||
$("#leds_custom_save").off().on("click", function() {
|
||||
|
||||
});
|
||||
|
||||
$('#leds_cfg_nav a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
|
||||
var target = $(e.target).attr("href") // activated tab
|
||||
if (target == "#menu_gencfg" && !ledsCustomCfgInitialized)
|
||||
{
|
||||
@ -119,6 +119,17 @@ $(document).ready(function() {
|
||||
}
|
||||
});
|
||||
|
||||
$("#leddevices").off().on("change", function(event) {
|
||||
if ($(this).val() == "philipshue")
|
||||
{
|
||||
$("#huebridge").show();
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#huebridge").hide();
|
||||
}
|
||||
});
|
||||
|
||||
requestServerConfig();
|
||||
});
|
||||
|
||||
|
||||
126
assets/webconfig/js/content_remote.js
Normal file
126
assets/webconfig/js/content_remote.js
Normal file
@ -0,0 +1,126 @@
|
||||
|
||||
function updateInputSelect()
|
||||
{
|
||||
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");
|
||||
}
|
||||
|
||||
function updateComponents(event) {
|
||||
if ($('#componentsbutton').length == 0)
|
||||
{
|
||||
$(hyperion).off("cmd-serverinfo",updateComponents);
|
||||
}
|
||||
else
|
||||
{
|
||||
updateInputSelect();
|
||||
components = event.response.info.components;
|
||||
// create buttons
|
||||
$('#componentsbutton').html("");
|
||||
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() {
|
||||
// color
|
||||
$(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").off().on("click", requestPriorityClear);
|
||||
|
||||
$("#effect_select").off().on("change", function(event) {
|
||||
efx = $(this).val();
|
||||
if(efx != "__none__")
|
||||
{
|
||||
requestPlayEffect(efx);
|
||||
}
|
||||
});
|
||||
|
||||
// effects
|
||||
effects_html = '<option value="__none__"></option>';
|
||||
for(i = 0; i < parsedServerInfoJSON.info.effects.length; i++) {
|
||||
//console.log(parsedServerInfoJSON.info.effects[i].name);
|
||||
effectName = parsedServerInfoJSON.info.effects[i].name;
|
||||
effects_html += '<option value="'+effectName+'">'+effectName+'</option>';
|
||||
}
|
||||
$('#effect_select').html(effects_html);
|
||||
|
||||
|
||||
// components
|
||||
$(hyperion).on("cmd-serverinfo",updateComponents);
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user