hyperion.ng/assets/webconfig/content/huebridge.html

<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="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>
					<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>
					</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">
		<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>
		</div>
		<div class="modal-footer">
		</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>