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

Initial Hue Bridge support & Small changes (#177)

Browse Source 
* Initial WebUI with sample functions

* Changed folder structure

* Light Reset Button and Translation fixing in Links

* Indentation fixed

* Reorganized menu and new function for setting effects

* Styling fix

* WebUI Initial Philips Hue support

* Encoding, refactoring etc

* Filename changes

* Typo fix

* Translation cleanup & adding

* Added Favicon

* Edited title
This commit is contained in:
b1rdhous3 2016-08-15 13:51:41 +02:00 committed by brindosch
parent ab832c88f3
commit 75fd7ed8ba
7 changed files with 196 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/webconfig/effects.html
View File

@ -5,7 +5,8 @@
<div class="col-lg-12" id="buttondiv"> <div class="col-lg-12" id="buttondiv">
<button type="button" class="btn btn-danger" id="effect_stop"><i class="fa fa-stop"></i></button><span lang="en" data-lang-token="buttoneffectstoptoken"> Stop Effect</span><br /> <button type="button" class="btn btn-danger" id="effect_stop"><i class="fa fa-stop"></i></button><span lang="en" data-lang-token="buttoneffectstoptoken"> Stop Effect</span><br />
</div> </div>
</div> </div>
</div>
</div> </div>
<script> <script>

BIN
assets/webconfig/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

113
assets/webconfig/huebridge.html Normal file
View File

@ -0,0 +1,113 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">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>
<div class="form-group">
<label for="ip">IP:</label>
<input type="text" class="form-control" id="ip">
<label for="user" lang="en">Username:</label>
<input type="text" class="form-control" id="user" disabled>
<br />
<button type="button" class="btn btn-success" id="create_user_first"> <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>
<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">
<span lang="en" data-lang-token="hue_press_link_modal">Press link button on the Hue Bridge now and confirm with the "Pair" button.</span> <br /><br />
<span id="link_not_pressed" style="display:none; color: red" lang="en" data-lang-token="hue_press_link_modal_failure">Please press link button on your Hue Bridge.</span>
<center>
<button type="button" class="btn btn-success" id="create_user_second"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_pair"> Pair</span>
</center>
</div>
</div>
</div>
<script>
$(document).ready( function() {
if($("#ip").val() != '' && $("#user").val() != '') {
get_hue_lights();
}
$("#create_user_first").on("click", function() {
var data = {"devicetype":"hyperion#"+Date.now()};
$.ajax({
type: "POST",
url: 'http://'+$("#ip").val()+'/api',
processData: false,
timeout: 1000,
contentType: 'application/json',
data: JSON.stringify(data),
success: function(r) {
$("#ip_alert").hide();
if (typeof r[0].error != 'undefined') {
if (r[0].error.description == "link button not pressed"){
$('#pairmodal').modal('show')
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#ip_alert").show();
}
});
});
$("#create_user_second").on("click", function() {
var data = {"devicetype":"my_hue_app#iphone pet2er"};
$.ajax({
type: "POST",
url: 'http://'+$("#ip").val()+'/api',
processData: false,
contentType: 'application/json',
data: JSON.stringify(data),
success: function(r) {
if (typeof r[0].error != 'undefined') {
$("#link_not_pressed").show();
}
if (typeof r[0].success != 'undefined') {
$('#pairmodal').modal('hide');
$('#user').val(r[0].success.username);
$("#link_not_pressed").hide();
get_hue_lights();
}
}
});
});
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>

96
assets/webconfig/index.html
View File

@ -9,40 +9,40 @@
<meta name="description" content=""> <meta name="description" content="">
<title>Hyperion</title> <title>Hyperion - WebUI</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
<!--Language Support --> <!--Language Support -->
<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script> <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
<script src="js/js.cookie.js"></script> <script src="js/js.cookie.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// Create language switcher instance // Create language switcher instance
var lang = new Lang(); var lang = new Lang();
lang.dynamic('de', 'lang/de.json'); lang.dynamic('de', 'lang/de.json');
lang.init({ lang.init({
defaultLang: 'en', defaultLang: 'en',
cookie: { cookie: {
name: 'langCookie', name: 'langCookie',
expiry: 365, expiry: 365,
path: '/' path: '/'
}, },
allowCookieOverride: true allowCookieOverride: true
}); });
</script> </script>
<!-- Bootstrap Core CSS --> <!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Flags --> <!-- Flags -->
<link href="css/flag-icon.min.css" rel="stylesheet"> <link href="css/flag-icon.min.css" rel="stylesheet">
@ -51,8 +51,9 @@
<!-- Custom CSS --> <!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet"> <link href="css/sb-admin-2.css" rel="stylesheet">
<link href="css/hyperion.css" rel="stylesheet"> <link href="css/hyperion.css" rel="stylesheet">
<!-- Custom Fonts --> <!-- Custom Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
@ -78,7 +79,9 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="index.html"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!"></a> <a class="navbar-brand" href="index.html"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!"></a>
</div> </div>
<!-- /.navbar-header --> <!-- /.navbar-header -->
@ -274,28 +277,32 @@
<li> <li>
<a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a> <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a>
</li> </li>
<li> <li>
<a class="inactive" href="#"><i class="fa fa-cog fa-fw"></i>Configuration<span class="fa arrow"></span></a> <a class="inactive" href="#"><i class="fa fa-cog fa-fw"></i>Configuration<span class="fa arrow"></span></a>
<ul class="nav nav-second-level"> <ul class="nav nav-second-level">
<li> <li>
<a class="inactive" href="#" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i>Kodi Watch</a> <a class="inactive" href="#" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i>Kodi Watch</a>
</li> </li>
</ul>
</li>
<li>
<a class="inactive" href="#"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menuremotecontroltoken">Remote Control</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <li>
<a class="inactive" href="#" id="load_lighttest"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menulighttesttoken">Light test</span></a> <a class="inactive" href="#" id="load_huebridge"><i class="fa fa-cog fa-fw"></i> Hue Bridge</a>
</li> </li>
</ul>
</li>
<li>
<a class="inactive" href="#"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menuremotecontroltoken">Remote Control</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <li>
<a class="inactive" href="#" id="load_effects"><i class="fa fa-certificate fa-fw"></i><span lang="en" data-lang-token="menueffectstoken">Effects</span></a> <a class="inactive" href="#" id="load_lighttest"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menulighttesttoken">Light test</span></a>
</li> </li>
</ul> <li>
</li> <a class="inactive" href="#" id="load_effects"><i class="fa fa-certificate fa-fw"></i><span lang="en" data-lang-token="menueffectstoken">Effects</span></a>
<li> </li>
</ul>
</li>
<li>
<a class="inactive" href="#" id="load_support"><i class="fa fa-info fa-fw"></i>Support</a> <a class="inactive" href="#" id="load_support"><i class="fa fa-info fa-fw"></i>Support</a>
</li> </li>
</ul> </ul>
</div> </div>
<!-- /.sidebar-collapse --> <!-- /.sidebar-collapse -->
@ -337,7 +344,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- /.col-lg-12 --> <!-- /.col-lg-12 -->
</div> </div>
@ -349,8 +356,8 @@
</div> </div>
<!-- /#wrapper --> <!-- /#wrapper -->
<!-- Bootstrap Core JavaScript --> <!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
@ -364,20 +371,25 @@
$(document).ready( function() { $(document).ready( function() {
$("#load_lighttest").on("click", function() { $("#load_lighttest").on("click", function() {
$("#page-wrapper").load("lighttest.html"); $("#page-wrapper").load("lighttest.html");
}); });
$("#load_effects").on("click", function() {
$("#page-wrapper").load("effects.html");
});
$("#load_support").on("click", function() {
$("#page-wrapper").load("support.html");
});
$("#load_confKodi").on("click", function() {
$("#page-wrapper").load("confKodi.html");
});
});
$("#load_effects").on("click", function() {
$("#page-wrapper").load("effects.html");
});
$("#load_huebridge").on("click", function() {
$("#page-wrapper").load("huebridge.html");
});
$("#load_support").on("click", function() {
$("#page-wrapper").load("support.html");
});
$("#load_confKodi").on("click", function() {
$("#page-wrapper").load("kodiconf.html");
});
});
$(function(){ $(function(){
var sidebar = $('#side-menu'); // cache sidebar to a variable for performance var sidebar = $('#side-menu'); // cache sidebar to a variable for performance

12
assets/webconfig/confKodi.html → assets/webconfig/kodiconf.html
View File

@ -3,7 +3,7 @@
<div class="col-lg-12"> <div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i>Kodi Watch</h1> <h1 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i>Kodi Watch</h1>
<div class="col-lg-12"> <div class="col-lg-12">
<div class="introd"> <div class="introd">
<h4>The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4> <h4>The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4>
</div> </div>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
@ -11,14 +11,14 @@
<strong>HINT 2:</strong> If you just use a USB-Grabber you could enable the Kodi Watch for this separately at the USB-Grabber page. <strong>HINT 2:</strong> If you just use a USB-Grabber you could enable the Kodi Watch for this separately at the USB-Grabber page.
</div> </div>
</div> </div>
<div class="col-lg-7"> <div class="col-lg-7">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<!--Form example start--> <!--Form example start-->
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-group"> <div class="form-group">
<label class="control-label col-xs-10" for="SetEnableKodiCheck">Aktiviere die Überwachung für Kodi:</label> <label class="control-label col-xs-10" for="SetEnableKodiCheck">Aktiviere die Überwachung für Kodi:</label>
<div class="col-xs-2"> <div class="col-xs-2">
<div class="checkbox checkbox-success"> <div class="checkbox checkbox-success">
<input type="checkbox" id="SetEnableKodiCheck"> <input type="checkbox" id="SetEnableKodiCheck">
@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label col-xs-6" for="SetKodiMenu">LEDs an im Menü:</label> <label class="control-label col-xs-6" for="SetKodiMenu">LEDs an im Menü:</label>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="checkbox checkbox-primary"> <div class="checkbox checkbox-primary">
<label> <label>
@ -105,7 +105,7 @@
</div> </div>
</div> </div>
<!--form example end --> <!--form example end -->
</div> </div>
</div> </div>
</div> </div>
@ -134,4 +134,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

13
assets/webconfig/lang/de.json
View File

@ -1,19 +1,22 @@
{ {
"token": { "token": {
"I am translated":"Ich bin übersetzt.",
"tokentest":"Ich bin ein Token Test",
"English":"Englisch", "English":"Englisch",
"German":"Deutsch", "German":"Deutsch",
"lighttesttoken":"Farbe: ", "lighttesttoken":"Farbe: ",
"Light test":"Lichttest",
"menulighttesttoken":"Lichttest", "menulighttesttoken":"Lichttest",
"buttoncolorresettoken":"Farbe zurücksetzen", "buttoncolorresettoken":"Farbe zurücksetzen",
"menueffectstoken":"Effekte", "menueffectstoken":"Effekte",
"buttoneffectstoptoken":"Stoppe Effekte", "buttoneffectstoptoken":"Stoppe Effekte",
"menuremotecontroltoken":"Fernbedienung" "menuremotecontroltoken":"Fernbedienung",
"hue_failure_ip_token":"Bitte überprüfe deine IP Adresse.",
"Username:":"Benutzername:",
"hue_button_create_user_token":"Benutzer anlegen",
"hue_press_link_modal":"Link Taste auf der Hue Bridge drücken und mit Button bestätigen.",
"hue_press_link_modal_failure":"Bitte drücke die Link Taste auf deiner Hue Bridge.",
"hue_button_pair":"Verbinden"
}, },
"regex": [ "regex": [
["^Something at start of text", ""], ["^Something at start of text", ""],
["This will be case insensitive", "i", ""] ["This will be case insensitive", "i", ""]
] ]
} }

25
assets/webconfig/lighttest.html
View File

@ -4,7 +4,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h1 class="page-header" lang="en">Light test</h1> <h1 class="page-header" lang="en" data-lang-token="menulighttesttoken">Light test</h1>
<div class="col-lg-1"> <div class="col-lg-1">
<span lang="en" data-lang-token="lighttesttoken">Color: </span> <span lang="en" data-lang-token="lighttesttoken">Color: </span>
</div> </div>
@ -24,17 +24,18 @@
<script> <script>
var webSocket = new WebSocket('ws://'+document.location.hostname+':19444'); var webSocket = new WebSocket('ws://'+document.location.hostname+':19444');
webSocket.onerror = function(event) { webSocket.onerror = function(event) {
alert(event.data); alert(event.data);
}; };
webSocket.onopen = function(event) { webSocket.onopen = function(event) {
$(function() { $(function() {
$('#cp2').colorpicker({ $('#cp2').colorpicker({
format: 'rgb', format: 'rgb',
colorSelectors: {'default': '#777777', colorSelectors: {'default': '#777777',
'primary': '#337ab7', 'primary': '#337ab7',
'success': '#5cb85c', 'success': '#5cb85c',
@ -53,24 +54,24 @@
}, },
alpha: { alpha: {
maxTop: 200 maxTop: 200
}, },
} }
}); });
$('#cp2').colorpicker().on('changeColor', function(e) { $('#cp2').colorpicker().on('changeColor', function(e) {
//console.log(e.color.toRGB()); //console.log(e.color.toRGB());
webSocket.send('{"command":"color", "color":['+e.color.toRGB().r+','+e.color.toRGB().g+','+e.color.toRGB().b+'], "priority":1}'); webSocket.send('{"command":"color", "color":['+e.color.toRGB().r+','+e.color.toRGB().g+','+e.color.toRGB().b+'], "priority":1}');
}); });
}); });
$("#reset_color").on("click", function() { $("#reset_color").on("click", function() {
webSocket.send('{"command":"clear", "priority":1}'); webSocket.send('{"command":"clear", "priority":1}');
}); });
}; };
webSocket.onmessage = function(event){ webSocket.onmessage = function(event){
console.log(event.data); console.log(event.data);
} }
</script> </script>