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>

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