webui: enhance led config (#224)
* 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
GitHub
parent
ffafe7e306
commit
a6d12611a8
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
* jQuery Lined Textarea Plugin
|
||||
* http://alan.blog-city.com/jquerylinedtextarea.htm
|
||||
*
|
||||
* Copyright (c) 2010 Alan Williamson
|
||||
*
|
||||
* Released under the MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Usage:
|
||||
* Displays a line number count column to the left of the textarea
|
||||
*
|
||||
* Class up your textarea with a given class, or target it directly
|
||||
* with JQuery Selectors
|
||||
*
|
||||
* $(".lined").linedtextarea({
|
||||
* selectedLine: 10,
|
||||
* selectedClass: 'lineselect'
|
||||
* });
|
||||
*
|
||||
*/
|
||||
|
||||
.linedwrap {
|
||||
border: 1px solid #c0c0c0;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.linedtextarea {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.linedtextarea textarea, .linedwrap .codelines .lineno {
|
||||
font-size: 10pt;
|
||||
font-family: monospace;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.linedtextarea textarea {
|
||||
padding-right:0.3em;
|
||||
padding-top:0.3em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.linedwrap .lines {
|
||||
margin-top: 0px;
|
||||
width: 50px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #c0c0c0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.linedwrap .codelines {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.linedwrap .codelines .lineno {
|
||||
color:#AAAAAA;
|
||||
padding-right: 0.5em;
|
||||
padding-top: 0.0em;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.linedwrap .codelines .lineselect {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -8,26 +8,28 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
|
||||
|
||||
<title>Hyperion - WebUI</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<!-- jQuery -->
|
||||
<script src="js/lib/jquery.min.js"></script>
|
||||
|
||||
<!-- Hyperion -->
|
||||
<script src="js/hyperion.js"></script>
|
||||
<script src="js/ui_utils.js"></script>
|
||||
|
||||
<!-- Colorpicker -->
|
||||
<!-- textarea -->
|
||||
<script src="js/lib/jquery-linedtextarea.js"></script>
|
||||
<link href="css/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
|
||||
|
||||
<!-- Colorpicker -->
|
||||
<script src="js/lib/bootstrap-colorpicker.min.js"></script>
|
||||
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap Switch -->
|
||||
<!-- Bootstrap Switch -->
|
||||
<script src="js/lib/bootstrap-switch.min.js"></script>
|
||||
<link href="css/bootstrap-switch.min.css" rel="stylesheet">
|
||||
|
||||
<!-- JSONForm -->
|
||||
<!--<script src="js/lib/underscore.js"></script>
|
||||
<script src="js/lib/jsonform.js"></script>-->
|
||||
<!-- JSONForm -->
|
||||
<script src="js/lib/jsoneditor.js"></script>
|
||||
|
||||
<!--Language Support -->
|
||||
|
|
@ -202,7 +204,7 @@
|
|||
<ul class="nav nav-second-level">
|
||||
<li> <a class="inactive" id="load_confGeneral"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_general_conf_token">General</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 Watch</span></a> </li>
|
||||
<li> <a class="inactive" id="load_confLeds"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LEDs</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">LEDs</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>
|
||||
|
|
@ -235,6 +237,8 @@
|
|||
</div>
|
||||
<!-- /#wrapper -->
|
||||
|
||||
<div id="container_connection_lost" style="display:none" />
|
||||
|
||||
<div id="error_dialog" class="modal fade" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<!-- Modal content-->
|
||||
|
|
@ -251,80 +255,15 @@
|
|||
</div>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="js/lib/bootstrap.min.js"></script>
|
||||
<script src="/js/lib/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Metis Menu Plugin JavaScript -->
|
||||
<script src="js/lib/metisMenu.min.js"></script>
|
||||
<script src="/js/lib/metisMenu.min.js"></script>
|
||||
|
||||
<!-- Custom Theme JavaScript -->
|
||||
<script src="js/lib/sb-admin-2.js"></script>
|
||||
<script>
|
||||
$(document).ready( function() {
|
||||
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_huebridge","huebridge",false);
|
||||
bindNavToContent("#load_support","support",false);
|
||||
bindNavToContent("#load_confKodi","kodiconf",false);
|
||||
bindNavToContent("#load_update","update",false);
|
||||
bindNavToContent("#load_confGeneral","generalconf",false);
|
||||
bindNavToContent("#load_confLeds","leds",false);
|
||||
<script src="/js/lib/sb-admin-2.js"></script>
|
||||
|
||||
//Change all Checkboxes to Switches
|
||||
$("[type='checkbox']").bootstrapSwitch();
|
||||
|
||||
$(hyperion).on("open",function(event){
|
||||
requestServerInfo();
|
||||
});
|
||||
|
||||
$(hyperion).on("cmd-serverinfo",function(event){
|
||||
parsedServerInfoJSON = event.response;
|
||||
currentVersion = parsedServerInfoJSON.info.hyperion[0].version;
|
||||
cleanCurrentVersion = currentVersion.replace(/\./g, '');
|
||||
// get active led device
|
||||
var leddevice = parsedServerInfoJSON.info.ledDevices.active;
|
||||
$('#dash_leddevice').html(leddevice);
|
||||
// get host
|
||||
var hostname = parsedServerInfoJSON.info.hostname;
|
||||
$('#dash_systeminfo').html(hostname+':'+hyperionport);
|
||||
|
||||
$.get( "https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/version.json", function( data ) {
|
||||
parsedUpdateJSON = JSON.parse(data);
|
||||
latestVersion = parsedUpdateJSON[0].versionnr;
|
||||
cleanLatestVersion = latestVersion.replace(/\./g, '');
|
||||
|
||||
$('#currentversion').html(' V'+currentVersion);
|
||||
$('#latestversion').html(' V'+latestVersion);
|
||||
|
||||
if ( cleanCurrentVersion < cleanLatestVersion )
|
||||
{
|
||||
$('#versioninforesult').html('<div lang="en" data-lang-token="dashboard_message_infobox_updatewarning" style="margin:0px;" class="alert alert-warning">A newer version of Hyperion is available!</div>');
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#versioninforesult').html('<div lang="en" data-lang-token="dashboard_message_infobox_updatesuccess" style="margin:0px;" class="alert alert-success">You run the latest version of Hyperion.</div>');
|
||||
}
|
||||
});
|
||||
}); // end cmd-serverinfo
|
||||
|
||||
$(hyperion).on("error",function(event){
|
||||
$('#error_dialog .modal-title').html("error");
|
||||
$('#error_dialog .modal-body').html(event.reason);
|
||||
$('#error_dialog').modal('show');
|
||||
});
|
||||
});
|
||||
|
||||
$(function(){
|
||||
var sidebar = $('#side-menu'); // cache sidebar to a variable for performance
|
||||
sidebar.delegate('a.inactive','click',function(){
|
||||
sidebar.find('.active').toggleClass('active inactive');
|
||||
$(this).toggleClass('active inactive');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="/js/content_index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
$(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 />');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
$(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_huebridge","huebridge",false);
|
||||
bindNavToContent("#load_support","support",false);
|
||||
bindNavToContent("#load_confKodi","kodiconf",false);
|
||||
bindNavToContent("#load_update","update",false);
|
||||
bindNavToContent("#load_confGeneral","generalconf",false);
|
||||
bindNavToContent("#load_confLeds","leds",false);
|
||||
|
||||
//Change all Checkboxes to Switches
|
||||
$("[type='checkbox']").bootstrapSwitch();
|
||||
|
||||
$(hyperion).on("open",function(event){
|
||||
requestServerInfo();
|
||||
});
|
||||
|
||||
$(hyperion).on("cmd-serverinfo",function(event){
|
||||
parsedServerInfoJSON = event.response;
|
||||
currentVersion = parsedServerInfoJSON.info.hyperion[0].version;
|
||||
cleanCurrentVersion = currentVersion.replace(/\./g, '');
|
||||
// get active led device
|
||||
var leddevice = parsedServerInfoJSON.info.ledDevices.active;
|
||||
$('#dash_leddevice').html(leddevice);
|
||||
// get host
|
||||
var hostname = parsedServerInfoJSON.info.hostname;
|
||||
$('#dash_systeminfo').html(hostname+':'+hyperionport);
|
||||
|
||||
$.get( "https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/version.json", function( data ) {
|
||||
parsedUpdateJSON = JSON.parse(data);
|
||||
latestVersion = parsedUpdateJSON[0].versionnr;
|
||||
cleanLatestVersion = latestVersion.replace(/\./g, '');
|
||||
|
||||
$('#currentversion').html(' V'+currentVersion);
|
||||
$('#latestversion').html(' V'+latestVersion);
|
||||
|
||||
if ( cleanCurrentVersion < cleanLatestVersion )
|
||||
{
|
||||
$('#versioninforesult').html('<div lang="en" data-lang-token="dashboard_message_infobox_updatewarning" style="margin:0px;" class="alert alert-warning">A newer version of Hyperion is available!</div>');
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#versioninforesult').html('<div lang="en" data-lang-token="dashboard_message_infobox_updatesuccess" style="margin:0px;" class="alert alert-success">You run the latest version of Hyperion.</div>');
|
||||
}
|
||||
});
|
||||
}); // end cmd-serverinfo
|
||||
|
||||
$(hyperion).on("error",function(event){
|
||||
showErrorDialog("error", event.reason);
|
||||
});
|
||||
});
|
||||
|
||||
$(function(){
|
||||
var sidebar = $('#side-menu'); // cache sidebar to a variable for performance
|
||||
sidebar.delegate('a.inactive','click',function(){
|
||||
sidebar.find('.active').toggleClass('active inactive');
|
||||
$(this).toggleClass('active inactive');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
|
||||
var ledsCustomCfgInitialized = false;
|
||||
|
||||
function updateLedColors()
|
||||
{
|
||||
if($("#leds_canvas").length > 0 && ledStreamActive)
|
||||
{
|
||||
requestLedColorsStart();
|
||||
}
|
||||
else
|
||||
{
|
||||
ledStreamActivate(false);
|
||||
}
|
||||
}
|
||||
|
||||
function ledStreamActivate(enable)
|
||||
{
|
||||
$(hyperion).off("cron", updateLedColors );
|
||||
if ( enable && ! ledStreamActive )
|
||||
{
|
||||
$(hyperion).on("cron", updateLedColors );
|
||||
}
|
||||
|
||||
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+")");
|
||||
}
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$(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;
|
||||
$("#ledconfig").text(JSON.stringify(leds, null, "\t"));
|
||||
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(false);
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$('#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);
|
||||
}
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$("#leds_custom_check").on("click", function() {
|
||||
e = isJsonString($("#ledconfig").val());
|
||||
if (e.length == 0)
|
||||
showErrorDialog("Validation success", "Your config is valid!");
|
||||
else
|
||||
showErrorDialog("Validation failed!", e);
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$("#leds_custom_save").on("click", function() {
|
||||
|
||||
});
|
||||
|
||||
$('#leds_cfg_nav a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
var target = $(e.target).attr("href") // activated tab
|
||||
if (target == "#menu_customcfg" && !ledsCustomCfgInitialized)
|
||||
{
|
||||
ledsCustomCfgInitialized = true;
|
||||
$("#ledconfig").linedtextarea();
|
||||
}
|
||||
});
|
||||
|
||||
requestServerConfig();
|
||||
});
|
||||
|
||||
|
|
@ -36,11 +36,20 @@ var hyperion = {};
|
|||
var wsTan = 1;
|
||||
var cronId = 0;
|
||||
var ledStreamActive=false;
|
||||
|
||||
var watchdog = true;
|
||||
|
||||
//
|
||||
function cron()
|
||||
{
|
||||
if ( ! watchdog )
|
||||
{
|
||||
var interval_id = window.setInterval("", 9999); // Get a reference to the last
|
||||
for (var i = 1; i < interval_id; i++)
|
||||
window.clearInterval(i);
|
||||
$("body").html($("#container_connection_lost").html());
|
||||
connectionLostAction();
|
||||
}
|
||||
|
||||
requestServerInfo();
|
||||
$(hyperion).trigger({type:"cron"});
|
||||
}
|
||||
|
|
@ -58,6 +67,10 @@ function initWebSocket()
|
|||
|
||||
websocket.onopen = function (event) {
|
||||
$(hyperion).trigger({type:"open"});
|
||||
|
||||
$(hyperion).on("cmd-serverinfo", function(event) {
|
||||
watchdog = true;
|
||||
});
|
||||
cronId = window.setInterval(cron,2000);
|
||||
};
|
||||
|
||||
|
|
@ -123,10 +136,14 @@ function initWebSocket()
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// -----------------------------------------------------------
|
||||
// wrapped server commands
|
||||
|
||||
// also used for watchdog
|
||||
function requestServerInfo() {
|
||||
watchdog = false;
|
||||
websocket.send('{"command":"serverinfo", "tan":'+wsTan+'}');
|
||||
}
|
||||
|
||||
|
|
@ -142,6 +159,10 @@ function requestLedColorsStart() {
|
|||
websocket.send('{"command":"ledcolors", "tan":'+wsTan+',"subcommand":"ledstream_start"}');
|
||||
}
|
||||
|
||||
function requestLedColorsStop() {
|
||||
websocket.send('{"command":"ledcolors", "tan":'+wsTan+',"subcommand":"ledstream_stop"}');
|
||||
}
|
||||
|
||||
function requestPriorityClear() {
|
||||
websocket.send('{"command":"clear", "tan":'+wsTan+', "priority":1}');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
* jQuery Lined Textarea Plugin
|
||||
* http://alan.blog-city.com/jquerylinedtextarea.htm
|
||||
*
|
||||
* Copyright (c) 2010 Alan Williamson
|
||||
*
|
||||
* Version:
|
||||
* $Id: jquery-linedtextarea.js 464 2010-01-08 10:36:33Z alan $
|
||||
*
|
||||
* Released under the MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Usage:
|
||||
* Displays a line number count column to the left of the textarea
|
||||
*
|
||||
* Class up your textarea with a given class, or target it directly
|
||||
* with JQuery Selectors
|
||||
*
|
||||
* $(".lined").linedtextarea({
|
||||
* selectedLine: 10,
|
||||
* selectedClass: 'lineselect'
|
||||
* });
|
||||
*
|
||||
* History:
|
||||
* - 2010.01.08: Fixed a Google Chrome layout problem
|
||||
* - 2010.01.07: Refactored code for speed/readability; Fixed horizontal sizing
|
||||
* - 2010.01.06: Initial Release
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
$.fn.linedtextarea = function(options) {
|
||||
|
||||
// Get the Options
|
||||
var opts = $.extend({}, $.fn.linedtextarea.defaults, options);
|
||||
|
||||
|
||||
/*
|
||||
* Helper function to make sure the line numbers are always
|
||||
* kept up to the current system
|
||||
*/
|
||||
var fillOutLines = function(codeLines, h, lineNo){
|
||||
while ( (codeLines.height() - h ) <= 0 ){
|
||||
if ( lineNo == opts.selectedLine )
|
||||
codeLines.append("<div class='lineno lineselect'>" + lineNo + "</div>");
|
||||
else
|
||||
codeLines.append("<div class='lineno'>" + lineNo + "</div>");
|
||||
|
||||
lineNo++;
|
||||
}
|
||||
return lineNo;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Iterate through each of the elements are to be applied to
|
||||
*/
|
||||
return this.each(function() {
|
||||
var lineNo = 1;
|
||||
var textarea = $(this);
|
||||
|
||||
/* Turn off the wrapping of as we don't want to screw up the line numbers */
|
||||
textarea.attr("wrap", "off");
|
||||
textarea.css({resize:'none'});
|
||||
var originalTextAreaWidth = textarea.outerWidth();
|
||||
|
||||
/* Wrap the text area in the elements we need */
|
||||
textarea.wrap("<div class='linedtextarea'></div>");
|
||||
var linedTextAreaDiv = textarea.parent().wrap("<div class='linedwrap' style='width:" + originalTextAreaWidth + "px'></div>");
|
||||
var linedWrapDiv = linedTextAreaDiv.parent();
|
||||
|
||||
linedWrapDiv.prepend("<div class='lines' style='width:50px'></div>");
|
||||
|
||||
var linesDiv = linedWrapDiv.find(".lines");
|
||||
linesDiv.height( textarea.height() + 6 );
|
||||
|
||||
|
||||
/* Draw the number bar; filling it out where necessary */
|
||||
linesDiv.append( "<div class='codelines'></div>" );
|
||||
var codeLinesDiv = linesDiv.find(".codelines");
|
||||
lineNo = fillOutLines( codeLinesDiv, linesDiv.height(), 1 );
|
||||
|
||||
/* Move the textarea to the selected line */
|
||||
if ( opts.selectedLine != -1 && !isNaN(opts.selectedLine) ){
|
||||
var fontSize = parseInt( textarea.height() / (lineNo-2) );
|
||||
var position = parseInt( fontSize * opts.selectedLine ) - (textarea.height()/2);
|
||||
textarea[0].scrollTop = position;
|
||||
}
|
||||
|
||||
|
||||
/* Set the width */
|
||||
var sidebarWidth = linesDiv.outerWidth();
|
||||
var paddingHorizontal = parseInt( linedWrapDiv.css("border-left-width") ) + parseInt( linedWrapDiv.css("border-right-width") ) + parseInt( linedWrapDiv.css("padding-left") ) + parseInt( linedWrapDiv.css("padding-right") );
|
||||
var linedWrapDivNewWidth = originalTextAreaWidth - paddingHorizontal;
|
||||
var textareaNewWidth = originalTextAreaWidth - sidebarWidth - paddingHorizontal - 20;
|
||||
|
||||
textarea.width( textareaNewWidth );
|
||||
linedWrapDiv.width( linedWrapDivNewWidth );
|
||||
|
||||
|
||||
|
||||
/* React to the scroll event */
|
||||
textarea.scroll( function(tn){
|
||||
var domTextArea = $(this)[0];
|
||||
var scrollTop = domTextArea.scrollTop;
|
||||
var clientHeight = domTextArea.clientHeight;
|
||||
codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
|
||||
lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
|
||||
});
|
||||
|
||||
|
||||
/* Should the textarea get resized outside of our control */
|
||||
textarea.resize( function(tn){
|
||||
var domTextArea = $(this)[0];
|
||||
linesDiv.height( domTextArea.clientHeight + 6 );
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
// default options
|
||||
$.fn.linedtextarea.defaults = {
|
||||
selectedLine: -1,
|
||||
selectedClass: 'lineselect'
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -11,6 +11,12 @@ function bindNavToContent(containerId, fileName, loadNow)
|
|||
}
|
||||
}
|
||||
|
||||
function loadContentTo(containerId, fileName)
|
||||
{
|
||||
$(containerId).load("/content/"+fileName+".html");
|
||||
}
|
||||
|
||||
|
||||
|
||||
function toggleClass(obj,class1,class2)
|
||||
{
|
||||
|
|
@ -41,3 +47,18 @@ function setClassByBool(obj,enable,class1,class2)
|
|||
}
|
||||
}
|
||||
|
||||
function showErrorDialog(header,message)
|
||||
{
|
||||
$('#error_dialog .modal-title').html(header);
|
||||
$('#error_dialog .modal-body').html(message);
|
||||
$('#error_dialog').modal('show');
|
||||
}
|
||||
|
||||
function isJsonString(str) {
|
||||
try {
|
||||
JSON.parse(str);
|
||||
} catch (e) {
|
||||
return e;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue