mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
Initial Hue Bridge support & Small changes (#177)
* 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:
parent
ab832c88f3
commit
75fd7ed8ba
@ -6,6 +6,7 @@
|
|||||||
<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
BIN
assets/webconfig/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
113
assets/webconfig/huebridge.html
Normal file
113
assets/webconfig/huebridge.html
Normal 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>
|
@ -9,7 +9,7 @@
|
|||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
|
|
||||||
|
|
||||||
<title>Hyperion</title>
|
<title>Hyperion - WebUI</title>
|
||||||
|
|
||||||
|
|
||||||
<!-- jQuery -->
|
<!-- jQuery -->
|
||||||
@ -51,6 +51,7 @@
|
|||||||
|
|
||||||
<!-- 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 -->
|
||||||
@ -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 -->
|
||||||
|
|
||||||
@ -280,6 +283,9 @@
|
|||||||
<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>
|
||||||
|
<li>
|
||||||
|
<a class="inactive" href="#" id="load_huebridge"><i class="fa fa-cog fa-fw"></i> Hue Bridge</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
@ -296,6 +302,7 @@
|
|||||||
<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 -->
|
||||||
@ -370,14 +377,19 @@
|
|||||||
$("#load_effects").on("click", function() {
|
$("#load_effects").on("click", function() {
|
||||||
$("#page-wrapper").load("effects.html");
|
$("#page-wrapper").load("effects.html");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$("#load_huebridge").on("click", function() {
|
||||||
|
$("#page-wrapper").load("huebridge.html");
|
||||||
|
});
|
||||||
|
|
||||||
$("#load_support").on("click", function() {
|
$("#load_support").on("click", function() {
|
||||||
$("#page-wrapper").load("support.html");
|
$("#page-wrapper").load("support.html");
|
||||||
});
|
});
|
||||||
$("#load_confKodi").on("click", function() {
|
|
||||||
$("#page-wrapper").load("confKodi.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
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
<!--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>
|
@ -1,16 +1,19 @@
|
|||||||
{
|
{
|
||||||
"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", ""],
|
||||||
|
@ -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>
|
||||||
@ -35,6 +35,7 @@
|
|||||||
$(function() {
|
$(function() {
|
||||||
$('#cp2').colorpicker({
|
$('#cp2').colorpicker({
|
||||||
format: 'rgb',
|
format: 'rgb',
|
||||||
|
|
||||||
colorSelectors: {'default': '#777777',
|
colorSelectors: {'default': '#777777',
|
||||||
'primary': '#337ab7',
|
'primary': '#337ab7',
|
||||||
'success': '#5cb85c',
|
'success': '#5cb85c',
|
||||||
|
Loading…
Reference in New Issue
Block a user