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

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 2016-09-09 18:59:58 +02:00 committed by GitHub
parent 4649786f68
commit 678624c959
13 changed files with 251 additions and 268 deletions
Show Stats 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> </div>
<hr> <hr>
<div class="col-lg-12"> <div class="col-lg-12">
<!-- <form id="generalConfForm"></form>-->
<div id='editor_holder'></div> <div id='editor_holder'></div>
<button id='submit'>Submit (console.log)</button> <button id='btn_submit'>Submit (console.log)</button>
</div> </div>
</div> </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;} #leds_controls {white-space:nowrap; margin-top:500px;}
</style> </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"> <div class="container-fluid">
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</h1> <h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</h1>
<!-- <div class="introd"> <!-- <div class="introd">
@ -30,6 +50,34 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
... device specific options ... we need some cpp code extension to get schema for all leds ... 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> </div>
</div> </div>
@ -122,4 +170,5 @@ start
</div> </div>
<script src="/js/content_leds.js"></script> <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>

13
assets/webconfig/index.html
View File

@ -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_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_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_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> </ul>
</li> </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" 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> <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"> <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> <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> </ul>

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

@ -21,9 +21,7 @@ function removeAdvanced(obj,searchStack)
$(hyperion).one("cmd-config-getschema", function(event) { $(hyperion).one("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result; parsedConfSchemaJSON = event.response.result;
// remove all "advanced" options from schema
//removeAdvanced(parsedConfSchemaJSON, []); // not working atm
//console.log(JSON.stringify(parsedConfSchemaJSON));
schema = parsedConfSchemaJSON.properties; schema = parsedConfSchemaJSON.properties;
blackborderdetector = schema.blackborderdetector; blackborderdetector = schema.blackborderdetector;
color = schema.color; color = schema.color;
@ -40,7 +38,6 @@ $(hyperion).one("cmd-config-getschema", function(event) {
webConfig = schema.webConfig; webConfig = schema.webConfig;
var element = document.getElementById('editor_holder'); var element = document.getElementById('editor_holder');
//JSONEditor.defaults.options.theme = 'bootstrap3';
var general_conf_editor = new JSONEditor(element,{ var general_conf_editor = new JSONEditor(element,{
theme: 'bootstrap3', 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 //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())); console.log(JSON.stringify(general_conf_editor.getValue()));
requestWriteConfig(general_conf_editor.getValue()); requestWriteConfig(general_conf_editor.getValue());
}); });
//Alternative Function with submit button to get Values //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()); console.log(general_conf_editor.getValue());
}); });

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

@ -2,10 +2,7 @@ $(document).ready( function() {
loadContentTo("#container_connection_lost","connection_lost"); loadContentTo("#container_connection_lost","connection_lost");
initWebSocket(); initWebSocket();
bindNavToContent("#load_dashboard","dashboard",true); bindNavToContent("#load_dashboard","dashboard",true);
bindNavToContent("#load_lighttest","lighttest",false); bindNavToContent("#load_remote","remote",false);
bindNavToContent("#load_effects","effects",false);
bindNavToContent("#load_components","remote_components",false);
bindNavToContent("#load_input_selection","input_selection",false);
bindNavToContent("#load_huebridge","huebridge",false); bindNavToContent("#load_huebridge","huebridge",false);
bindNavToContent("#load_support","support",false); bindNavToContent("#load_support","support",false);
bindNavToContent("#load_confKodi","kodiconf",false); bindNavToContent("#load_confKodi","kodiconf",false);

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

@ -68,19 +68,19 @@ $(document).ready(function() {
}); });
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$('#leds_toggle_num').on("click", function() { $('#leds_toggle_num').off().on("click", function() {
$('.led_num').toggle(); $('.led_num').toggle();
toggleClass('#leds_toggle_num', "btn-danger", "btn-success"); toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
}); });
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$('#leds_toggle').on("click", function() { $('#leds_toggle').off().on("click", function() {
$('.led').toggle(); $('.led').toggle();
toggleClass('#leds_toggle', "btn-success", "btn-danger"); 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"); setClassByBool('#leds_toggle_live',ledStreamActive,"btn-success","btn-danger");
if ( ledStreamActive ) 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()); e = isJsonString($("#ledconfig").val());
if (e.length == 0) 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 var target = $(e.target).attr("href") // activated tab
if (target == "#menu_gencfg" && !ledsCustomCfgInitialized) 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(); requestServerConfig();
}); });

126
assets/webconfig/js/content_remote.js Normal file
View 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);
});