Hello Hypers!!
I'm building a little controller to turn on LED lights when buttons are pushed in a Hype app.
It sends a XMLHttpRequest to an Arduino board using an IP Address.
What I'd like to do is have a field on an admin page where you can enter the IP address of the ethernet shield, click the Start button, and it updates all the js functions with the inputed IP. The value would need to saved to local storage so the app could be restarted and wouldn't "forget" the IP.
Example:
The input
<input type="text" id="ipAddress" style="width:150px; height:20px; text-align:center; font-size:14px" value="ENTER IP ADDRESS">
The magic
// get the value from the input field
var x = document.getElementById("ipAddress").value;
// save the value to local storage
The result
// call the value from local storage and insert it in the function
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://192.168.1.2/led1/on", true);
xhr.send();
As always, any help is greatly appreciated.
Here's an outline of the app.
Many thanks.
// Get the IP address from the input field Ex: 192.168.1.2
var ipAddress = hypeDocument.getElementById("ipAddress").value;
// Save the IP address to local storage
localStorage.setItem("ipAddress", ipAddress);
console.log("This is the IP address:" + ipAddress);
The result
// Get the IP address from local storage
var ipAddress = localStorage.getItem("ipAddress");
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://" + ipAddress + "/led1/on", true);
xhr.send();
Still have some testing to do with the communication portion.
Looks like you are heading in the right direction.
You may also be able to save yourself some coding repetition with a single function like so.
var LED_ID = element.id
//== List of Leds, Key is the button IDS, values are Led names
var ledObject = {
"turnOnLED1": "led1",
"turnOnLED2": "led2",
"turnOnLED3": "led3",
"turnOnLED4": "led4",
"turnOnLED5": "led5",
"turnOnLED6": "led6"
}
/*
Iterrate through all objects in the ledObject arrary.
Find the matching key to the ID of the button in the ledObject arrary and the value.
If we find a match then turn that led on else turn it off.
Using a similar function to turn all on would be just a straight iterration.
On or Off could be done also using some sort of condition matching and values.
*/
for (var key in ledObject) {
if (ledObject.hasOwnProperty(key))
if (ledObject[key] == ledObject[LED_ID]){
//console.log( "http://" + ipAddress + "/" + ledObject[key] + "/on")
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://" + ipAddress + "/" + ledObject[key] + "/on", true);
xhr.send();
} else {
//console.log( "http://" + ipAddress + "/" + ledObject[key] + "/off")
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://" + ipAddress + "/" + ledObject[key] + "/on", true);
xhr.send();
}
}
Also you probably want to have some sort of check that the ip address exist and is not null before you try and send it.
// Get the IP address from local storage
var ipAddress = localStorage.getItem("ipAddress");
if (ipAddress != null){
console.log("This is the IP address:" + ipAddress);
} else {
console.log("No IP address:" );
}
I have an Arduino starter kit "The Most Complete Starter Kit MEGA 2560 Project" that at some point very soon I will be looking learn about Ardurino and doing a similar project so would be interested in your setup... you can PM me so as not to pollute the thread if you are happy to share.