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

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
Show Stats 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>

68
assets/webconfig/css/jquery-linedtextarea.css Normal file
View File

@ -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;
}

93
assets/webconfig/index.html
View File

@ -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>

69
assets/webconfig/js/content_huebridge.js Normal file
View File

@ -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 />');
}
}
});
}
});

65
assets/webconfig/js/content_index.js Normal file
View File

@ -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');
});
});

130
assets/webconfig/js/content_leds.js Normal file
View File

@ -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();
});

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

@ -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}');
}

126
assets/webconfig/js/lib/jquery-linedtextarea.js vendored Normal file
View File

@ -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);

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

@ -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 "";
}