Skip to content

Commit

Permalink
Update config page with external js file, update screenshots.
Browse files Browse the repository at this point in the history
  • Loading branch information
carlosperate committed Jun 5, 2015
1 parent ba1af86 commit 89d4b4a
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 138 deletions.
144 changes: 6 additions & 138 deletions config/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<!-- Compiled and minified Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<title>QuickHue Configuration</title>
<style media="screen" type="text/css">
body {
Expand Down Expand Up @@ -90,11 +90,10 @@ <h5>Hue Bridge<br>Configuration Settings</h5>
<label for="HUE_LIGHT_ID">Hue Light ID number</label>
</div>
<div class="input-field col s12">
If you have a preferred Hue Bridge username you'd like to use, insert it below (<a href="http://www.developers.meethue.com/documentation/getting-started#step_3">Instructions to manually create a user</a>).<br>
Otherwise, click on the button to register this application into your Hue System.
If you have a preferred Hue Bridge username insert it below. Either way, press the button to register this app into your Hue System.
</div>
<div class="input-field col s12" style="text-align: center">
<a class="waves-effect waves-light btn purple" onclick="HueRegistration()">Register QuickHue</a><p>&nbsp;</p>
<a class="waves-effect waves-light btn purple" onclick="HueRegistration()">Register QuickHue</a><br>&nbsp;
</div>
<div class="input-field col s12">
<i class="mdi-action-account-circle prefix"></i>
Expand Down Expand Up @@ -122,154 +121,23 @@ <h4 >Hue Config</h4>
<div class="progress purple lighten-4"><div class="indeterminate purple"></div></div>
</div>
<p id="ip_correct" class="green-text text-darken-2">Bridge IP correct</p>
<p><strong>Please press the button on the Hue Bridge.</strong></p>
<p>This application needs to be registered into the Hue Bridge to work.<br>This only has to be done once.</p>
<p id="registered_already" class="green-text text-darken-2">User was already registered</p>
<p id="register_ok" class="green-text text-darken-2">Successfully registered</p>
<div id="registering">
<p class="red-text text-darken-2">Trying to register</p>
<div class="progress purple lighten-4"><div class="indeterminate purple"></div></div>
<strong>Please press the button on the Hue Bridge.</strong>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>
</div>
</div>

<!-- Import jQuery and Materialize JS -->
<!-- Import jQuery, Materialize, and Quick Hue Config JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

<!-- Javascript to submit the settings into the PebbleJS kit -->
<script>
// Converts all the form data into a JSON string
function jsonifyForm() {
var jsonForm = JSON.stringify($("#config_form").serializeArray());
console.log(jsonForm);
return jsonForm;
}

// On page load and listener and fill the form with url data
$(document).ready(function() {
// Prepare the button click listeners
$("#cancel_button").click(function() {
console.log("Cancel");
document.location = "pebblejs://close";
});
$("#submit_button").click(function() {
console.log("Submit");
document.location = "pebblejs://close#" + encodeURIComponent(jsonifyForm());
});
// Load the pre-filled data from PebbleKit JS
if (window.location.search) {
var jsonFormData = $.parseJSON(decodeURIComponent(window.location.search.substring(1)));
for(key in jsonFormData) {
$("#"+[key]).val(jsonFormData[key]);
}
}
// Initialise materialize modal
$(".modal-trigger").leanModal();
});

// Check and register the username inserted in the HUE_BRIDGE_USER field
function HueRegistration() {
// First check that the Bridge IP has been entered
var ip = $("#HUE_BRIDGE_IP").val();
if (!ip) {
alert("Please insert the HUE bridge IP into the form first.");
return;
}
// Prepare and launch modal
$("#ip_checking").show();
$("#ip_correct").hide();
$("#registering").hide();
$("#registered_already").hide();
$("#register_ok").hide();
$("#register_modal").openModal({in_duration: 0});

// Check if IP belongs to bridge, freaking materialize needs timeout
setTimeout(function() {
if (!checkBridgeIpCorrectness(ip)) {
alert("The IP in the form is not the correct Hue Bridge IP.");
$("#register_modal").closeModal();
return;
}
$("#ip_checking").hide();
$("#ip_correct").show();
// Check if username is already set in form
$("#registering").show();
var setSuccessfulUsername = function(newUsername) {
$("#registering").hide();
$("#register_ok").show();
$("#HUE_BRIDGE_USER").val(newUsername);
$("#HUE_BRIDGE_USER_label").addClass("active");
}
var username = $("#HUE_BRIDGE_USER").val();
if (username) {
// Check if user already registered, register if not
if (checkBridgeUserExistance(ip, username)) {
$("#registering").hide();
$("#registered_already").show();
} else {
registerBridgeUser(ip, username, setSuccessfulUsername);
}
} else {
registerBridgeUser(ip, null, setSuccessfulUsername);
}
}, (100));
}

// Synchronous function to check if IP belongs to Hue Bridge
function checkBridgeIpCorrectness(ip) {
var correctIp = false;
$.ajax({
url: "http://" + ip + "/api/",
async: false,
}).done(function(data) { correctIp = true; });
return correctIp;
}

// Synchronous function to check if user already exists in Hue Bridge
function checkBridgeUserExistance(ip, username) {
var userExists = false;
$.ajax({
url: "http://" + ip + "/api/" + username + "/",
async: false
}).done(function(data) {
if (data.config !== undefined) {
userExists = true;
}
});
return userExists;
}

// Register a username as part of the QuickHue app into the bridge
function registerBridgeUser(ip, username, successCallback) {
var processResponse = function(data) {
if (data[0].success !== undefined) {
if (typeof(successCallback) === typeof(Function)) {
successCallback(data[0].success.username);
}
} else if (data[0].error !== undefined &&
(data[0].error.type == 101)) {
// Waiting for button in bridge to be pressed Recursive call
// for as long as the modal is open
console.log("Press the sync button in the Hue Bridge.");
registerBridgeUser(ip, username, successCallback);
}
};

var apiUrl = "http://" + ip + "/api/";
//var createUserJsonObj = {"devicetype": "QuickHue"};
var createUserJsonObj = '{"devicetype": "QuickHue"}';
if (username) {
//createUserJsonObj.username = username;
createUserJsonObj = '{"devicetype": "QuickHue", "username": "' + username +'"}';
$.post(apiUrl, createUserJsonObj, processResponse, "json");
} else {
$.post(apiUrl, createUserJsonObj, processResponse, "json");
}
}
</script>
<script src="quickhueconfig.js"></script>
</body>
</html>
120 changes: 120 additions & 0 deletions config/quickhueconfig.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
// Converts all the form data into a JSON string
function jsonifyForm() {
return JSON.stringify($("#config_form").serializeArray());
}

// On page load and listener and fill the form with URL data
$(document).ready(function() {
// Prepare the button click listeners
$("#cancel_button").click(function() {
document.location = "pebblejs://close";
});
$("#submit_button").click(function() {
document.location = "pebblejs://close#" + encodeURIComponent(jsonifyForm());
});
// Load the pre-filled data from PebbleKit JS
if (window.location.search) {
var jsonFormData = $.parseJSON(
decodeURIComponent(window.location.search.substring(1)));
for (key in jsonFormData) {
$("#"+[key]).val(jsonFormData[key]);
}
}
});

// Register new or set username inserted in the HUE_BRIDGE_USER field
function HueRegistration() {
// First check that the Bridge IP has been entered
var ip = $("#HUE_BRIDGE_IP").val();
if (!ip) {
alert("Please insert the HUE bridge IP into the form first.");
return;
}
// Prepare and launch modal
$("#ip_checking").show();
$("#ip_correct").hide();
$("#registering").hide();
$("#registered_already").hide();
$("#register_ok").hide();
$("#register_modal").openModal({in_duration: 0});
// Check if IP belongs to bridge, freaking materialize needs timeout
setTimeout(function() {
if (!checkBridgeIpCorrectness(ip)) {
alert("The IP in the form is not the correct Hue Bridge IP.");
$("#register_modal").closeModal();
return;
}
$("#ip_checking").hide();
$("#ip_correct").show();
$("#registering").show();
// Callback function to indicate registration success
var setSuccessfulUsername = function(newUsername) {
$("#registering").hide();
$("#register_ok").show();
$("#HUE_BRIDGE_USER").val(newUsername);
$("#HUE_BRIDGE_USER_label").addClass("active");
}
var username = $("#HUE_BRIDGE_USER").val();
if (username) {
if (checkBridgeUserExistance(ip, username)) {
$("#registering").hide();
$("#registered_already").show();
} else {
registerBridgeUser(ip, username, setSuccessfulUsername);
}
} else {
registerBridgeUser(ip, null, setSuccessfulUsername);
}
}, (100));
}

// Synchronous function to check if IP belongs to Hue Bridge
function checkBridgeIpCorrectness(ip) {
var correctIp = false;
$.ajax({
url: "http://" + ip + "/api/",
async: false,
}).done(function(data) { correctIp = true; });
return correctIp;
}

// Synchronous function to check if user already exists in Hue Bridge
function checkBridgeUserExistance(ip, username) {
var userExists = false;
$.ajax({
url: "http://" + ip + "/api/" + username + "/",
async: false
}).done(function(data) {
if (data.config !== undefined) {
userExists = true;
}
});
return userExists;
}

// Register a username as part of the QuickHue app into the bridge
function registerBridgeUser(ip, username, successCallback) {
var processResponse = function(data) {
if (data[0].success !== undefined) {
if (typeof(successCallback) === typeof(Function)) {
successCallback(data[0].success.username);
}
} else if (data[0].error !== undefined && (data[0].error.type == 101)) {
// Keep recursion waiting for button in bridge to be pressed
console.log("Press the sync button in the Hue Bridge.");
registerBridgeUser(ip, username, successCallback);
} else {
alert("Unexpected error registering user into Bridge:\n" +
JSON.stringify(data));
}
};
var apiUrl = "http://" + ip + "/api/";
if (username) {
var createUserJsonStr = '{"devicetype": "QuickHue",' +
' "username": "' + username +'"}';
$.post(apiUrl, createUserJsonStr, processResponse, "json");
} else {
var createUserJsonStr = '{"devicetype": "QuickHue"}';
$.post(apiUrl, createUserJsonStr, processResponse, "json");
}
}
Binary file modified screenshots/screenshot_config_1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/screenshot_config_1_small.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 89d4b4a

Please sign in to comment.