mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00: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
@@ -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);
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user