Execute Widgets with Change in Screen Orientation

The iPod Touch and iPhone have an accelerometer that adjusts the screen orientation (among other things). You can tap into the orientation and execute widgets depending on the orientation of the device by using a simple HTML file with some Javascript. Put an HTML file on a web server that you can get to on your iPod Touch or iPhone.

Part of the Apple Web Kit is the command “onorientationchange”. We will use that to detect the orientation change and call a script called “updateOrientation()”.

Add the following command to the BODY tag:

onorientationchange="updateOrientation();"

Place the following function in the HEAD of the document and call certain widgets at the specific orientation angles of 0°, -90°, and 90°. You can call any type of widget adjusting the position of a servo, controlling a digital output, or setting the state of an X10 widget.

function updateOrientation(){
switch(window.orientation){
case 0: widgetExecute("Upright Widget ID");
break;
case -90: widgetExecute("Right Widget ID");
break;
case 90: widgetExecute("Left Widget ID");
break;
}
}

Place the widgets referenced in the BODY of the document.

UPDATE:

The full iTurn web app is on the Wiki:

http://www.iobridge.net/wiki/projects/iturn

Comments

  1. Joe says:

    Lynn,

    I picked up a book on javascript last week and have begun learning javascript/html but can’t figure out how to implement the orientation function on my iphone. I’m having trouble figuring out where to put everything in the html code and perhaps if I could see a fully coded page I might be able to figure it out from there. Any help would be greatly appreciated! FYI, I have a couple of ioBridges plus all the add-on boards and am playing with interfacing with my BASIC stamps – lots of fun!!

    Thanks,

    Joe

  2. Jonathan says:

    Ditto. I’d really appreciate that too, just to get me started. Would you be able to share the whole HTML file? cheers!

Speak Your Mind

*