Welcome, if this is your first time here, check out the full tutorial on controlling your home using the iPhone and x10. If you already have set up an x10 interface using your home PC, Apache and PHP, then read on for an easy PHP and AJAX breakdown of the code that drives the interface.

After many hours of playing around with the Activehome Pro CM15a interface and re-writing the code that makes it work on the web about 100 times, I have come up with a very simple few bits of code that anyone, running the CM15a with PHP, and Apache installed on their computer, can use to turn a device, or series of devices on or off with X10 and an iPhone or iTouch, or any web browser, or using the NIntendo Wii (which I do sometimes for shits and giggles). My main goal was to create a simple on/off button that worked without a page refresh. That required AJAX. Here is the simplest breakdown I have been able to come up with for all the necessary code. I am not going to post any CSS files this time but I will post my latest version, CSS and all, here soon!

The HTML:

<a name=”a1 on” id=”a1″ onclick=”lightUp(this.name)”>Turn A1 On/Off</a>
<div id=”response”></div>

The JavaScript:

var xmlHttp
function lightUp(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert (”Browser does not support HTTP Request”)
return
}
var url=”test.php”
url=url+”?q=”+str
url=url+”&sid=”+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open(”GET”,url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”)
{
var result= xmlHttp.responseText;
document.getElementById(’a1′).name = result;
var temp = new Array();
temp = result.split(’ ‘);
if (temp[1]==’off’){
document.getElementById(’response’).innerHTML = “you turned a1 0ff”;
}
else {
if (temp[1]==’on’){
document.getElementById(’response’).innerHTML = “you turned a1 0n”;
}
}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}

The PHP (test.php):

$q=$_GET[”q”];
$send = “ahcmd.exe sendplc”;
if ($q==’a1 on’){
exec(”$send $q”);
echo “a1 off”;
}
else {
exec(”$send a1 off”);
echo “a1 on”;
}

That’s it. Pretty simple huh? If you come up with anything that you would like to share please comment here.

We have upgraded version 1.1 with a re-vamp of the AJAX form submit. Goodbye jQuery (for now). I was able to get all the same functionality (and more) out of a smaller script that required no additional JavaScript library to be available for it to work. Now, when a light is turned on/off, the form is posted with AJAX and then the appropriate style of light icon is pulled up and replaces its opposite. The script I made for this purpose is a bit repetitive and therefore bigger than I think it needs to be, but it works so I am happy with that for now. If anyone can suggest a better way to code this please let me know.

Another change in this version is the addition of a MySQL database to hold the status of the lights. This allowed me to combine the on and off buttons on all the lamps and pull in the current status of the lights when the page is first loaded (the rest is handled by the above mentioned script). It was fairly simple to set up the database and with a few tweaks to the PHP.ini file, I was up and running.

We are going to be starting a similar project with the same interface but a Basic Stamp and Parallax PINK server as the base so stay tuned for that. Until then, if you would like you can download the iPhone Home Controller v1.2 PHP, JavaScript and HTML files using the link in the sidebar to the right. Don’t forget that you will also need the iUI.js file found here. Peace!

Here is version 1.1 of the Home Controller project. In addition and revision to what I posted in “Control Your Home With Your iPhone“, I have incorporated the JavaScript and some of the CSS from the iPhone User Interface, aka iUI, project. The iUI gives some of the look and functionality, mainly the sliding panel navigation, of the iPhone’s internal apps to a webpage or webapp for the iTouch and iPhone.
Other than that I have decided to go with Safari’s native submit button style and simply changed the background colors to suit. The light interface now also includes a dim and brighten option for all light modules that support it.

• HTML - some of the markup changed from the first project because of how the iUI works but everything is still forms and input buttons. The one other difference is that I am using the “bright” function now so lights can be turned up as well as down:

  You can view the HTML file here.

• CSS - the new CSS file incorporates some of my original coding and some plucked from the iUI.

  View the complete CSS file here.

• PHP - the markup has not changed since version 1. I am still wishing that I could get the ActiveHome SDK software’s “queryplc” function to poll devices and return on/off and dim status.
• JavaScript - as I stated above I have used the iUI to achieve a interface that is more like the rest of the iPhone’s native applications. I didn’t change anything in the iUI script save for changing the slide rate from 20 to 90. With 20 as the slide rate my interface was quite clunky.

That’s it for now. The next update will be soon, once I get my doors to unlock with the system. And then on to the TV! I promise there will be a video demo soon. You can download the files for this version in the sidebar to the right. Peace!

Project 1
Welcome. In this project we are going to set up a home automation scheme using x10 automation hardware and a Safari/iPhone/iTouch optimized web interface controller. The cost of this project is minimal, the only monetary input was for the x10 modules ($10 and up depending on what you buy), the ActiveHome Pro USB interface (CM15A - $50), and the not so minimal cost of the iPhone/iTouch (note: this project will serve a web page to any computer but the interface design is specific for the iPhone/iTouch). I bought a simple $100 kit that included the USB module, a lamp dimming module, an appliance module and an RF light socket module among several other parts. The little kit was enough for my tests since I was new to x10 and what it could do. Now the good part about all of this is the rest of this is 100% free outside of your cost in time. Here’s what you need to do it:

The Hardware and Software

• ActiveHome Pro USB interface CM15A
• The ActiveHome Pro SDK and Software: the software (that comes with the USB module) includes an .exe file that allows communication to the USB module allowing developers to create interfaces in C++, VB, JavaScript, PERL and in my case PHP. The SDK includes the ActiveHome Scripting Interface document which goes through the various types of commands that can be sent/received through the interface.
• PHP and Apache: in order to have a web page (accessible anywhere) as the control interface you need a server that has the USB module plugged into it. Since I am familiar with PHP I decided to go with an Apache install on my home PC to host my interface. Important: if you are installing Apache and PHP for this project use Apache 2.0 not 2.2. The latest version of PHP will work fine. Here is the tutorial I used for install. If you are opening your computer up to the internet like this please make sure you do it securely, and search around for ways to do this. Here is one of many tip lists out there.
• At least one x10 module set to any address you choose.
• iPhone/iTouch or any device that can view web pages

The Code - Please note that my mark-up is based on my basic understandings of PHP and JavaScript as well as the ActiveHome Scripting Interface. Please feel free to school me on better ways to accomplish what I have done here. Also, if anyone else is working on this or a similar project please comment below and share what you have done!

• HTML - for this project, all that is needed to trigger an event is a form submit so the HTML markup is quite simple:

  Turn A1 On
  <form method=”post” action=”"><input name=”input” value=”a1 on” type=”hidden” /><input name=”onein” value=”1″ type=”hidden” /><input type=”submit” /></form>
  Turn A1 On and Dim A2 to 50%
  <form method=”post” action=”"><input name=”input” value=”a1 on” type=”hidden” /><input name=”input2″ value=”a2 dim 50″ type=”hidden” /><input name=”2in” value=”1″ type=”hidden” /><input type=”submit” /></form>

  View the example HTML file here.

• CSS - of course you can skin your project however you like it but I will share what I did using the Apple iPhone Developer Center’s tips as a basis. I also incorporate YUI’s “reset.css” into all of my projects so it is included here as well.

  View the complete CSS file here.

• PHP - I am not a PHP guru, so luckily the markup is pretty simple to get codes transmitted (if anyone has any suggestions or tips to make this better please let us know):

  One Input
  if (isset($_POST[’onein’])){
  $cmdstring = $_POST[’input’];
  exec(”ahcmd.exe sendplc $cmdstring”);
  }
  Two Inputs with 10 second pause between events
  if (isset($_POST[’2in’])){
  $cmdstring = $_POST[’input’];
  $cmdstring2 = $_POST[’input2′];
  exec(”ahcmd.exe sendplc $cmdstring”);
  sleep(10);
  exec(”ahcmd.exe sendplc $cmdstring2″);
  }

  As you can see the code uses PHP’s exec() command to push the data that was input from the HTML form. The “sendplc” part is one of the commands that is included in the ActiveHome Scripting Interface. The other available codes are: sendrf - for sending x10 codes via RF, and queryplc - which is supposed to query the on/dim state of any given x10 module (unfortunately I cannot get this one to work and it seems it is broken according to the support forums - if anyone has any ideas on how to get this to work let me know as I would like the interface to be a bit more dynamic by visually representing which lights are on and off)

• JavaScript - for this project I used the jQuery scripting library in order to submit data without a page refresh. jQuery’s AJAX form plugin worked great!

So that is pretty much all you need to know to get this done at your house. Please feel free to ask questions and make comments. I’ll add to this page as the project progresses and stay tuned for a video demo coming in the near future…
Peace!

Here we will be featuring several different home automation projects we have created especially for the iPhone and iPod Touch interface. Our first feature will be based on x10 and ActiveHome Pro technology. The interface for our project(s) is designed to work with and look good on Safari’s iPhone/iTouch platform. Ok, sure, it’s just a web page, but how can we resist the temptation to control our homes from our favorite little gadget? Stay Tuned.