frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2023-10-10 13:36:59 +02:00
Code Issues Releases Wiki Activity

Small Hue improvements (#235)

Browse Source 
* Small Hue Bridge improvements

* Small Lang fixing
This commit is contained in:
b1rdhous3 2016-09-11 22:20:57 +02:00 committed by redPanther
parent 0b8d41ed69
commit d097995a74
5 changed files with 60 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center; border-radius:2px; } background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center; border-radius:2px; }
.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center; .led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center;
vertical-align:middle; padding:4px; border-radius:2px;} vertical-align:middle; padding:4px; border-radius:2px;}
.led_num {display:none; position:relative; color:black; background-color: white; .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;} border-radius:2px; padding:1px; vertical-align:middle; text-align:center; font-size:0.8em;}
#leds_controls {white-space:nowrap; margin-top:500px;} #leds_controls {white-space:nowrap; margin-top:500px;}
</style> </style>
@ -53,42 +53,46 @@
<div id="ledDeviceOptions"> <div id="ledDeviceOptions">
<div id='editor_container'></div> <div id='editor_container'></div>
</div> </div>
<div id="huebridge" class="container-fluid" style="display:none"> <div id="huebridge" class="container-fluid" style="display:none">
<hr/> <hr/>
<div class="row"> <button data-toggle="collapse" class="btn btn-success" data-target="#huebridge_content">Hue Bridge Setup Helper</button>
<div id="huebridge_content" class="collapse">
<!-- <div class="col-lg-12"> --> <!-- <div class="col-lg-12"> -->
<!-- <h1 class="page-header" lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</h1> --> <!-- <h1 class="page-header" lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</h1> -->
With this Setup Helper you can get a new User for your Hue Bridge and you can see your Lights with the IDs for Hyperion Configuration.<br />
If you already have a working User you will see it below. But you can always create a new one as well. <br />
<b>Remember:</b> This is only a helper. You have to copy and paste them in your config above. <br/ >
<div class="col-lg-12" > <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="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> <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><br />
<div class="form-group"> <div class="form-group">
<label for="ip">Hue Bridge IP:</label> <label for="ip">Hue Bridge IP:</label>
<input type="text" class="form-control" id="ip"> <input type="text" class="form-control" id="ip">
<label for="user" lang="en" data-lang-token="hue_label_username">Hue Bridge Username:</label> <label for="user" lang="en" data-lang-token="hue_label_username">Hue Bridge Username:</label>
<input type="text" class="form-control" id="user" disabled> <input type="text" class="form-control" id="user" disabled>
<br /> <br />
<div id="hue_lights" class="row" />
<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> <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> --> </div>
</div>
</div> </div>
<hr />
<div id="hue_lights" class="row" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="menu_display" class="tab-pane fade" style="padding-top:10px"> <div id="menu_display" class="tab-pane fade" style="padding-top:10px">
<div class="container-fluid"> <div class="container-fluid">
<div id="leds_canvas"/> <div id="leds_canvas"/>
<div id="leds_controls"> <div id="leds_controls">
<button lang="en" type="button" class="btn btn-success" id="leds_toggle">toggle leds</button> <button lang="en" type="button" class="btn btn-success" id="leds_toggle">toggle leds</button>
<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_num">toggle led numbers</button> <button lang="en" type="button" class="btn btn-danger" id="leds_toggle_num">toggle led numbers</button>
@ -101,9 +105,9 @@
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="panel-group" id="accordion"> <div class="panel-group" id="accordion">
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
@ -122,8 +126,8 @@ led 0 position: top-left / top-right / bottom-left / bottom-right
</pre> </pre>
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
@ -144,10 +148,10 @@ start
</div> </div>
</div> </div>
</div> </div>
</div> <!-- accordion --> </div> <!-- accordion -->
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="panel panel-primary" style="margin-bottom:5px"> <div class="panel panel-primary" style="margin-bottom:5px">
<div class="panel-heading"> <div class="panel-heading">
@ -174,4 +178,3 @@ start
<script src="/js/content_leds.js"></script> <script src="/js/content_leds.js"></script>
<script src="/js/content_huebridge.js"></script> <script src="/js/content_huebridge.js"></script>

4
assets/webconfig/content/remote.html
View File

@ -1,5 +1,5 @@
<div class="container-fluid"> <div class="container-fluid">
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Remote Control</h1> <h1 class="page-header" lang="en" data-lang-token="main_menu_remotecontrol_token">Remote Control</h1>
</div> </div>
<div class="container"> <div class="container">
@ -14,7 +14,7 @@
<div id="cp2" class="colorpicker-component" style="width:auto;display:inline-block;white-space:nowrap;"> <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> <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>
<div lang="en" data-lang-token="remote_colors_label_color" style="display:inline-block;margin-left:50px;">effect: </div> <div lang="en" data-lang-token="remote_effects_label_effects" style="display:inline-block;margin-left:50px;">effect: </div>
<select id="effect_select" class="form-control" style="width:auto;display:inline-block"></select> <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> <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>

21
assets/webconfig/js/content_huebridge.js
View File

@ -1,9 +1,5 @@
$(document).ready( function() { $(document).ready( function() {
if($("#ip").val() != '' && $("#user").val() != '') {
get_hue_lights();
}
$("#create_user").on("click", function() { $("#create_user").on("click", function() {
var connectionRetries = 15; var connectionRetries = 15;
var data = {"devicetype":"hyperion#"+Date.now()}; var data = {"devicetype":"hyperion#"+Date.now()};
@ -32,6 +28,8 @@ $(document).ready( function() {
if (typeof r[0].success != 'undefined') { if (typeof r[0].success != 'undefined') {
$('#pairmodal').modal('hide'); $('#pairmodal').modal('hide');
$('#user').val(r[0].success.username); $('#user').val(r[0].success.username);
$( "#hue_lights" ).empty();
get_hue_lights(); get_hue_lights();
clearInterval(UserInterval); clearInterval(UserInterval);
} }
@ -51,19 +49,4 @@ function abortConnection(UserInterval){
$('#pairmodal').modal('hide'); $('#pairmodal').modal('hide');
} }
function get_hue_lights(){
$.ajax({
type: "GET",
url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
processData: false,
contentType: 'application/json',
success: function(r) {
for(var lightid in r){
//console.log(r[lightid].name);
$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
}
}
});
}
}); });

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

@ -96,16 +96,16 @@ $(document).ready(function() {
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$("#leds_custom_check").off().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)
showErrorDialog("Validation success", "Your config is valid!"); showErrorDialog("Validation success", "Your config is valid!");
else else
showErrorDialog("Validation failed!", e); showErrorDialog("Validation failed!", e);
}); });
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$("#leds_custom_save").off().on("click", function() { $("#leds_custom_save").off().on("click", function() {
}); });
$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) { $('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
@ -127,7 +127,7 @@ $(document).ready(function() {
$('#editor_container').off(); $('#editor_container').off();
$('#editor_container').html(""); $('#editor_container').html("");
var element = document.getElementById('editor_container'); var element = document.getElementById('editor_container');
var grabber_conf_editor = new JSONEditor(element,{ var grabber_conf_editor = new JSONEditor(element,{
theme: 'bootstrap3', theme: 'bootstrap3',
iconlib: "fontawesome4", iconlib: "fontawesome4",
@ -154,7 +154,7 @@ $(document).ready(function() {
values_general[key] = parsedConfJSON.device[key]; values_general[key] = parsedConfJSON.device[key];
}; };
grabber_conf_editor.getEditor("root.generalOptions").setValue( values_general ); grabber_conf_editor.getEditor("root.generalOptions").setValue( values_general );
if (isCurrentDevice) if (isCurrentDevice)
{ {
for(var key in parsedConfJSON.device){ for(var key in parsedConfJSON.device){
@ -163,23 +163,30 @@ $(document).ready(function() {
}; };
grabber_conf_editor.getEditor("root.specificOptions").setValue( values_specific ); grabber_conf_editor.getEditor("root.specificOptions").setValue( values_specific );
}; };
$('#editor_container .well').css("background-color","white"); $('#editor_container .well').css("background-color","white");
$('#editor_container .well').css("border","none"); $('#editor_container .well').css("border","none");
$('#editor_container .well').css("box-shadow","none"); $('#editor_container .well').css("box-shadow","none");
$('#editor_container .btn').addClass("btn-primary"); $('#editor_container .btn').addClass("btn-primary");
$('#editor_container h3').first().remove(); $('#editor_container h3').first().remove();
if ($(this).val() == "philipshue") if ($(this).val() == "philipshue")
{ {
$("#huebridge").show(); $("#huebridge").show();
$("#ip").attr('value', values_specific.output);
$("#user").attr('value', values_specific.username);
if($("#ip").val() != '' && $("#user").val() != '') {
get_hue_lights();
}
} }
else else
{ {
$("#huebridge").hide(); $("#huebridge").hide();
} }
}); });
requestServerConfig(); requestServerConfig();
}); });

15
assets/webconfig/js/hyperion.js
View File

@ -197,3 +197,18 @@ function requestWriteConfig(config, create, overwrite)
var overwrite = (typeof overwrite !== 'undefined') ? overwrite : false; var overwrite = (typeof overwrite !== 'undefined') ? overwrite : false;
websocket.send('{"command":"config","subcommand":"setconfig", "tan":'+wsTan+', "config":'+JSON.stringify(config)+',"create":'+create+', "overwrite":'+overwrite+'}'); websocket.send('{"command":"config","subcommand":"setconfig", "tan":'+wsTan+', "config":'+JSON.stringify(config)+',"create":'+create+', "overwrite":'+overwrite+'}');
} }
function get_hue_lights(){
$.ajax({
type: "GET",
url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
processData: false,
contentType: 'application/json',
success: function(r) {
for(var lightid in r){
//console.log(r[lightid].name);
$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
}
}
});
}