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: enhance led config (#224)

Browse Source 
* split content and js
tune leds config

* implement connection lost page

* split js/html in huebridge

* add js action for connection lost
This commit is contained in:
redPanther
2016-09-06 10:14:54 +02:00
committed by GitHub
parent ffafe7e306
commit a6d12611a8
11 changed files with 588 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/webconfig/content/connection_lost.html Normal file
View File

@@ -0,0 +1,16 @@
<div id="wrapper">
<div class="container-fluid">
connection lost: <a href="/">reconnect</a>
</div>
</div>
<script>
function connectionLostAction()
{
// demo code to see if this works
$("#wrapper").css("margin","auto");
$("#wrapper").css("background-color","#BBBBBB");
}
</script>

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

@@ -1,119 +1,44 @@
<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="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>
<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>
<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 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-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>
<center>
<span id="connectionTime"></span><br />
<img src="/img/hyperion/ring-alt.svg">
<center>
</div>
<div class="modal-footer">
<div class="modal-footer" />
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready( function() {
if($("#ip").val() != '' && $("#user").val() != '') {
get_hue_lights();
}
$("#create_user").on("click", function() {
var connectionRetries = 15;
var data = {"devicetype":"hyperion#"+Date.now()};
var UserInterval = setInterval(function(){
$.ajax({
type: "POST",
url: 'http://'+$("#ip").val()+'/api',
processData: false,
timeout: 1000,
contentType: 'application/json',
data: JSON.stringify(data),
success: function(r) {
connectionRetries--;
$("#connectionTime").html(connectionRetries);
if(connectionRetries == 0) {
abortConnection(UserInterval);
}
else{
$("#abortConnection").hide();
$('#pairmodal').modal('show');
$("#ip_alert").hide();
if (typeof r[0].error != 'undefined') {
console.log("link not pressed");
}
if (typeof r[0].success != 'undefined') {
$('#pairmodal').modal('hide');
$('#user').val(r[0].success.username);
get_hue_lights();
clearInterval(UserInterval);
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#ip_alert").show();
clearInterval(UserInterval);
}
});
},1000);
});
function abortConnection(UserInterval){
clearInterval(UserInterval);
$("#abortConnection").show();
$('#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 />');
}
}
});
}
});
</script>
<script src="/js/content_huebridge.js"></script>

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

@@ -8,118 +8,50 @@
#leds_controls {white-space:nowrap; margin-top:530px;}
</style>
<div class="container-fluid">
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Led Configuration</h1>
<!-- <div class="introd">
<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
</div>-->
<div id="leds_canvas"/>
<ul id="leds_cfg_nav" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu_display">Display LEDs</a></li>
<li><a data-toggle="tab" href="#menu_gencfg">Generate Config</a></li>
<li><a data-toggle="tab" href="#menu_customcfg">Custom Config</a></li>
</ul>
<div class="tab-content">
<div id="menu_display" class="tab-pane fade in active">
<div class="container-fluid">
<div id="leds_canvas"/>
<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-danger" id="leds_toggle_num">toggle led numbers</button>
<button lang="en" type="button" class="btn btn-success" id="leds_toggle_live">toggle live leds</button>
<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-danger" id="leds_toggle_num">toggle led numbers</button>
<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_live">toggle live leds</button>
</div>
</div>
</div>
</div>
<script>
<div id="menu_gencfg" class="tab-pane fade">
<h3>coming soon</h3>
<p>led config generator ...</p>
</div>
function updateLedColors()
{
if($("#leds_canvas").length > 0 && ledStreamActive)
{
requestLedColorsStart();
}
else
{
ledStreamActivate(false);
}
}
<div id="menu_customcfg" class="tab-pane fade">
<p>
<div class="form-group">
<div style="margin-bottom:5px">
<button lang="en" type="button" class="btn btn-success" id="leds_custom_check">check config</button>
<button lang="en" type="button" class="btn btn-success" id="leds_custom_save">save config</button>
</div>
<textarea rows="20" id="ledconfig" style="width:90%"></textarea>
</div>
</p>
</div>
function ledStreamActivate(enable)
{
$(hyperion).off("cron", updateLedColors );
if ( enable && ! ledStreamActive )
{
$(hyperion).on("cron", updateLedColors );
}
</div> <!-- tab content -->
ledStreamActive=enable;
}
$(document).ready(function() {
$(hyperion).on("cmd-ledcolors",function(event){
ledColors = (event.response.result);
for(var idx=0; idx<ledColors.length; idx++)
{
led = ledColors[idx]
$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
}
});
<script src="/js/content_leds.js"></script>
$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
ledColors = (event.response.result);
for(var idx=0; idx<ledColors.length; idx++)
{
led = ledColors[idx]
$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
}
});
$(hyperion).on("cmd-config-getconfig",function(event){
parsedConfJSON = event.response.result;
leds = parsedConfJSON.leds;
canvas_height = $('#leds_canvas').innerHeight();
canvas_width = $('#leds_canvas').innerWidth();
leds_html = "";
for(var idx=0; idx<leds.length; idx++)
{
led = leds[idx];
led_id='led_'+led.index;
bgcolor = "background-color:hsl("+(idx*360/leds.length)+",100%,50%);";
pos = "left:"+(led.hscan.minimum * canvas_width)+"px;"+
"top:"+(led.vscan.minimum * canvas_height)+"px;"+
"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+led.index+'"><span id="'+led_id+'_num" class="led_num">'+led.index+'</span></div>';
}
$('#leds_canvas').html(leds_html);
$('#led_0').css("border","2px dotted red");
ledStreamActivate(true)
});
$('#leds_toggle_num').on("click", function() {
$('.led_num').toggle();
toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
});
$('#leds_toggle').on("click", function() {
$('.led').toggle();
toggleClass('#leds_toggle', "btn-success", "btn-danger");
});
$('#leds_toggle_live').on("click", function() {
setClassByBool('#leds_toggle_live',ledStreamActive,"btn-success","btn-danger");
if ( ledStreamActive )
{
ledStreamActivate(false);
led_count = $(".led").length;
for(var idx=0; idx<led_count; idx++)
{
$('#led_'+idx).css("background-color","hsl("+(idx*360/led_count)+",100%,50%)");
}
}
else
{
ledStreamActivate(true);
}
});
requestServerConfig();
});
</script>