HomeControl: Local Mac control for iPhone

I tried out a tip recently for controlling a Mac via Mobile Safari on your iPhone, and it got me thinking, which is often dangerous. I put together this little web app today as a proof of concept (that got a little out of hand). It basically provides a full interface for volume control, application starting and stopping and many iTunes functions, including volume and EQ. All features provide interface feedback and update you with current info from your Mac.

Video preview

YouTube Link…

Setting up your web server

To run it, you need to run your local web server as your own user. This is, of course, a major security risk and completely inadvisable if your local web server is open to outsiders in any way. Mine’s not, so I didn’t put too much time into figuring out a more secure way to do this. If you have any clues in that area, let me know and I’ll post them.

To run your local web server as a different user, you need to edit /etc/apache2/httpd.conf. You’ll need to edit it as root, so use sudo to launch your text editor of choice (e.g. sudo vi /etc/apache2/httpd.conf). If you, like me, just use TextMate’s mate command, you’ll be prompted for a password when you save.

Locate the lines:

User _www
Group _www

Change them to:

User yourusername
Group staff

You’ll also need to enable PHP, if you haven’t already. If you haven’t, locate the line that starts with:

#LoadModule php5_module

Just remove the hashmark at the beginning (#) to turn PHP on.

Now, at the command line, type sudo apachectl graceful to restart the server under the new user. If everything is in place, you’ll be able to run HomeControl without a hitch now. Turn on Web Sharing in System Preferences > Sharing to keep the web server running through reboots and logouts.

Installing HomeControl

Just download the zip file at the end of this post and unzip it into your ~/Sites folder. If you prefer to have it elsewhere, or have a custom folder set up for Apache, it will run just fine in any folder, as long as you can access it from a web browser on the local network.

Next, point your web browser to the folder. If you put the ‘homecontrol’ folder directly in ~/Sites, you should be able to reach it at the url http://computer_name.local/~Username/homecontrol. You need to know the name of the computer it’s on (set in System Preferences > Sharing, at the top), and your username on that system, substituting each in the appropriate place in the url.

Once you’ve loaded the page and tested it out, use the “+” icon at the bottom of Mobile Safari’s web browser to add an icon to your home screen which will take you directly there in the future, and will run the app full-screen.

Customizing HomeControl

Since I know not everybody who wants to try this out is going to be ready to hack into the jQuery and PHP, I made quite a few bits of the app modifiable with simple HTML edits. If you’re comfortable with that, you can change the list of applications and add iTunes features quite easily.

Application launcher

• Locate the div with the id “apps”
• Find the unordered list (<ul>) inside of it
• Edit or copy and edit existing lines by changing only the name of the application in the first span
• Use the exact displayed name of the application you want to control, and HomeControl will pass it to the PHP exec function

iTunes functions

• Locate the div with the id “itunes”
• Find the unordered list inside of it with the id “itunescmd”
• Add new features by copying an existing line and changing the rel attribute and the text of the link
  • The rel attribute passes the actual iTunes AppleScript command, which will be appended to a ‘tell application "iTunes" to’ line and passed to osascript
  • The text of the link is the title which will appear in the menu

iTunes EQ Presets

• Locate the div with the id “ituneseq”
• Find the unordered list inside of it
• Edit the text of the links in the list with the exact title of the preset you want to control
• Add or remove list items as desired

Startup screen and icon

• Edit homecontrolicon.png in the homecontrol folder to customize the app’s icon on the homescreen.
• Edit hc_startup.png in the homecontrol folder to customize the startup screen.
• If you’ve installed the web app, delete the icon and reinstall from Mobile Safari to see the new images.

Advanced customization

If you’re handy with the jQuery, the PHP and the HTML, you can do a lot with the examples in the code. It’s very much a proof-of-concept, and intended to be a jumping point for more experimentation, so have at it.

The app currently uses the jQTouch library, but mostly for the CSS. It has very few dependencies on the API, so it should be a relatively trivial matter to switch to a different library. It does rely quite heavily on jQuery, though.

The main PHP/osascript calls are in functions.php. All functions are called using jQuery’s $.get function, which makes Ajax calls to the functions.php file in the background and receives updates on completion.

Have fun, hopefully my horrible waste of time will be someone else’s inspiration…

Download