2016-08-31 17:19:41 +02:00
<!DOCTYPE html>
2016-08-13 20:05:01 +02:00
< html lang = "en" >
2016-06-12 22:27:24 +02:00
< head >
2016-08-13 20:05:01 +02:00
2016-09-03 15:54:33 +02:00
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "" >
2016-08-13 20:05:01 +02:00
2016-09-03 15:54:33 +02:00
< title > Hyperion - WebUI< / title >
2016-08-15 13:51:41 +02:00
2016-08-20 16:36:01 +02:00
<!-- jQuery -->
2016-09-03 15:54:33 +02:00
< script src = "js/lib/jquery.min.js" > < / script >
2016-08-23 19:42:16 +02:00
2016-09-03 15:54:33 +02:00
< script src = "js/hyperion.js" > < / script >
< script src = "js/ui_utils.js" > < / script >
2016-08-20 16:36:01 +02:00
2016-08-23 19:42:16 +02:00
<!-- Colorpicker -->
2016-09-03 15:54:33 +02:00
< script src = "js/lib/bootstrap-colorpicker.min.js" > < / script >
< link href = "css/bootstrap-colorpicker.min.css" rel = "stylesheet" >
2016-08-23 19:42:16 +02:00
2016-08-20 16:36:01 +02:00
<!-- Bootstrap Switch -->
2016-09-03 15:54:33 +02:00
< script src = "js/lib/bootstrap-switch.min.js" > < / script >
< link href = "css/bootstrap-switch.min.css" rel = "stylesheet" >
2016-08-13 20:05:01 +02:00
2016-08-18 21:14:50 +02:00
<!-- JSONForm -->
2016-09-03 15:54:33 +02:00
<!-- <script src="js/lib/underscore.js"></script>
< script src = "js/lib/jsonform.js" > < / script > -->
2016-09-03 19:51:30 +02:00
< script src = "js/lib/jsoneditor.js" > < / script >
2016-08-30 23:49:21 +02:00
2016-08-13 20:05:01 +02:00
<!-- Language Support -->
2016-08-23 19:42:16 +02:00
< script src = "js/lib/jquery-lang.js" charset = "utf-8" type = "text/javascript" > < / script >
< script src = "js/lib/js.cookie.js" > < / script >
2016-08-15 13:51:41 +02:00
2016-08-13 20:05:01 +02:00
< script type = "text/javascript" >
// Create language switcher instance
var lang = new Lang();
lang.dynamic('de', 'lang/de.json');
lang.init({
defaultLang: 'en',
cookie: {
name: 'langCookie',
expiry: 365,
path: '/'
},
allowCookieOverride: true
});
< / script >
2016-08-15 13:51:41 +02:00
2016-08-13 20:05:01 +02:00
2016-09-03 15:54:33 +02:00
<!-- Bootstrap Core CSS -->
< link href = "css/bootstrap.css" rel = "stylesheet" >
2016-08-15 13:51:41 +02:00
2016-08-13 20:05:01 +02:00
<!-- Flags -->
< link href = "css/flag-icon.min.css" rel = "stylesheet" >
2016-09-03 15:54:33 +02:00
<!-- MetisMenu CSS -->
< link href = "css/metisMenu.css" rel = "stylesheet" >
2016-08-13 20:05:01 +02:00
2016-09-03 15:54:33 +02:00
<!-- Custom CSS -->
< link href = "css/sb-admin-2.css" rel = "stylesheet" >
2016-08-15 13:51:41 +02:00
2016-08-13 22:01:07 +02:00
< link href = "css/hyperion.css" rel = "stylesheet" >
2016-08-15 13:51:41 +02:00
2016-09-03 15:54:33 +02:00
<!-- Custom Fonts -->
< link href = "css/font-awesome.min.css" rel = "stylesheet" type = "text/css" >
2016-08-13 20:05:01 +02:00
2016-09-03 15:54:33 +02:00
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
< script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" > < / script >
< script src = "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" > < / script >
<![endif]-->
2016-08-13 20:05:01 +02:00
2016-06-12 22:27:24 +02:00
< / head >
2016-08-13 20:05:01 +02:00
2016-06-12 22:27:24 +02:00
< body >
2016-08-13 20:05:01 +02:00
2016-09-03 15:54:33 +02:00
< div id = "wrapper" >
<!-- Navigation -->
< nav class = "navbar navbar-default navbar-static-top" role = "navigation" style = "margin-bottom: 0" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "/" > < img src = "img/hyperion/hyperionlogo.png" alt = "Redefine ambient light!" > < / a >
< / div >
<!-- /.navbar - header -->
< ul class = "nav navbar-top-links navbar-right" >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" >
< i class = "fa fa-globe fa-fw" > < / i > < i class = "fa fa-caret-down" > < / i >
< / a >
< ul class = "dropdown-menu dropdown-language" >
< li >
< a href = "#lang-en" onclick = "window.lang.change('en'); return false;" > < span lang = "en" class = "flag-icon flag-icon-gb" data-lang-token = "general_speech_en" >   English< / span > < / a >
< / li >
< li class = "divider" > < / li >
< li >
< a href = "#lang-de" onclick = "window.lang.change('de'); return false;" > < span lang = "en" class = "flag-icon flag-icon-de" data-lang-token = "general_speech_de" >   German< / span > < / a >
< / li >
2016-08-13 20:05:01 +02:00
< / ul >
2016-09-03 15:54:33 +02:00
<!-- /.dropdown - language -->
< / li >
<!-- /.dropdown -->
< / li >
<!-- /.dropdown -->
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" >
< i class = "fa fa-bell fa-fw" > < / i > < i class = "fa fa-caret-down" > < / i >
< / a >
< ul class = "dropdown-menu dropdown-alerts" >
< li >
< a href = "#" >
< div >
< i class = "fa fa-comment fa-fw" > < / i > New Comment
< span class = "pull-right text-muted small" > 4 minutes ago< / span >
2016-08-14 21:19:12 +02:00
< / div >
2016-09-03 15:54:33 +02:00
< / a >
< / li >
< li class = "divider" > < / li >
< li >
< a href = "#" >
< div >
< i class = "fa fa-twitter fa-fw" > < / i > 3 New Followers
< span class = "pull-right text-muted small" > 12 minutes ago< / span >
2016-08-16 00:20:31 +02:00
< / div >
2016-09-03 15:54:33 +02:00
< / a >
< / li >
< li class = "divider" > < / li >
< li >
< a href = "#" >
< div >
< i class = "fa fa-envelope fa-fw" > < / i > Message Sent
< span class = "pull-right text-muted small" > 4 minutes ago< / span >
2016-08-14 21:19:12 +02:00
< / div >
2016-09-03 15:54:33 +02:00
< / a >
< / li >
< li class = "divider" > < / li >
< li >
< a href = "#" >
< div >
< i class = "fa fa-tasks fa-fw" > < / i > New Task
< span class = "pull-right text-muted small" > 4 minutes ago< / span >
< / div >
< / a >
< / li >
< li class = "divider" > < / li >
< li >
< a href = "#" >
< div >
< i class = "fa fa-upload fa-fw" > < / i > Server Rebooted
< span class = "pull-right text-muted small" > 4 minutes ago< / span >
< / div >
< / a >
< / li >
< li class = "divider" > < / li >
< li >
< a class = "text-center" href = "#" >
< strong > See All Alerts< / strong >
< i class = "fa fa-angle-right" > < / i >
< / a >
< / li >
< / ul >
<!-- /.dropdown - alerts -->
< / li >
<!-- /.dropdown -->
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" >
< i class = "fa fa-user fa-fw" > < / i > < i class = "fa fa-caret-down" > < / i >
< / a >
< ul class = "dropdown-menu dropdown-user" >
< li > < a href = "#" > < i class = "fa fa-user fa-fw" > < / i > User Profile< / a >
< / li >
< li > < a href = "#" > < i class = "fa fa-gear fa-fw" > < / i > Settings< / a >
< / li >
< li class = "divider" > < / li >
< li > < a href = "login.html" > < i class = "fa fa-sign-out fa-fw" > < / i > Logout< / a >
< / li >
< / ul >
<!-- /.dropdown - user -->
< / li >
<!-- /.dropdown -->
< / ul >
<!-- /.navbar - top - left -->
< div class = "navbar-default sidebar" role = "navigation" >
< div class = "sidebar-nav navbar-collapse" >
< ul class = "nav" id = "side-menu" >
< li > < a class = "active" id = "load_dashboard" > < i class = "fa fa-dashboard fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_dashboard_token" > Dashboard< / span > < / a > < / li >
< li >
< a class = "inactive" > < i class = "fa fa-cog fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_configuration_token" > Configuration< / span > < span class = "fa arrow" > < / span > < / a >
< 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_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 >
< li >
< a class = "inactive" href = "#" > < i class = "fa fa-lightbulb-o fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_remotecontrol_token" > Remote Control< / span > < span class = "fa arrow" > < / span > < / a >
< ul class = "nav nav-second-level" >
< li > < a class = "inactive" id = "load_lighttest" > < i class = "fa fa-lightbulb-o fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_colors_token" > Colors< / span > < / a > < / li >
< li > < a class = "inactive" id = "load_effects" > < i class = "fa fa-certificate fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_effects_token" > Effects< / span > < / a > < / li >
< li > < a class = "inactive" id = "load_components" > < i class = "fa fa-list fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_component_token" > Components< / span > < / a > < / li >
< li > < a class = "inactive" id = "load_input_selection" > < i class = "fa fa-random fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_input_selection_token" > Input Selection< / span > < / a > < / li >
< / ul >
< / li >
< li > < a class = "inactive" id = "load_support" > < i class = "fa fa-info fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_support_token" > Support< / span > < / a > < / li >
< li >
< a class = "inactive" > < i class = "fa fa-cog fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_system_token" > System< / span > < span class = "fa arrow" > < / span > < / a >
< ul class = "nav nav-second-level" >
< li > < a class = "inactive" id = "load_update" > < i class = "fa fa-download fa-fw" > < / i > < span lang = "en" data-lang-token = "main_menu_update_token" > Update< / span > < / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
<!-- /.sidebar - collapse -->
< / div >
<!-- /.navbar - static - side -->
< / nav >
<!-- Page Content -->
< div id = "page-wrapper" / >
< / div >
<!-- /#wrapper -->
< div id = "error_dialog" class = "modal fade" role = "dialog" >
< div class = "modal-dialog" >
<!-- Modal content -->
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" > × < / button >
< h4 class = "modal-title" / >
< / div >
< div class = "modal-body" / >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-primary" data-dismiss = "modal" > Okay!< / button >
2016-08-30 23:25:27 +02:00
< / div >
2016-09-03 15:54:33 +02:00
< / div >
< / div >
<!-- Bootstrap Core JavaScript -->
< script src = "js/lib/bootstrap.min.js" > < / script >
<!-- Metis Menu Plugin JavaScript -->
< script src = "js/lib/metisMenu.min.js" > < / script >
<!-- Custom Theme JavaScript -->
< script src = "js/lib/sb-admin-2.js" > < / script >
2016-08-13 20:05:01 +02:00
< script >
$(document).ready( function() {
2016-09-03 15:54:33 +02:00
initWebSocket();
bindNavToContent("#load_dashboard","dashboard",true);
bindNavToContent("#load_lighttest","lighttest");
bindNavToContent("#load_effects","effects");
bindNavToContent("#load_components","remote_components");
bindNavToContent("#load_input_selection","input_selection");
bindNavToContent("#load_huebridge","huebridge");
bindNavToContent("#load_support","support");
bindNavToContent("#load_confKodi","kodiconf");
bindNavToContent("#load_update","update");
bindNavToContent("#load_confGeneral","generalconf");
//Change all Checkboxes to Switches
$("[type='checkbox']").bootstrapSwitch();
2016-09-03 19:51:30 +02:00
2016-09-03 15:54:33 +02:00
$(hyperion).on("open",function(event){
requestServerInfo();
2016-08-13 20:05:01 +02:00
});
2016-08-30 23:49:21 +02:00
2016-09-03 15:54:33 +02:00
$(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
2016-09-03 19:51:30 +02:00
2016-09-03 15:54:33 +02:00
$(hyperion).on("error",function(event){
$('#error_dialog .modal-title').html("error");
$('#error_dialog .modal-body').html(event.reason);
$('#error_dialog').modal('show');
2016-08-13 20:05:01 +02:00
});
2016-09-03 15:54:33 +02:00
});
$(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');
2016-08-13 20:05:01 +02:00
});
2016-09-03 15:54:33 +02:00
});
2016-08-13 20:05:01 +02:00
< / script >
2016-06-12 22:27:24 +02:00
< / body >
2016-08-13 20:05:01 +02:00
< / html >
