iTurn – Servo Widget Control

Overview

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. Once loaded, iTurn allows you to execute ioBridge widgets relative to the screen orientation of the iPhone or iPod Touch.

Widgets

iTurn can execute and access any of the ioBridge widgets. Fixed and variable position servo widgets are the ones used to move a servo. For assistance on how to access your widgets with JavaScript, visit the JavaScript Widget Control API.

Access to Web App

You will need access to the iTurn web app from your iPhone or iTouch. The easiest way is to upload the web app to a web server and bookmark the URL.

If you do not have a web server, you can access the file using a web email client through Safari. You will need a web-based email account from Gmail or Hotmail.

All you do is send your web application (.html) as an email attachment. Open the email from Safari and open the attached HTML file. It opens up like a normal HTML file from a webserver.

If you use Gmail on the iPhone (Safari version), you can “Add to Home Screen” an attached file. So, open the attachment and press + and add it to your home screen. If you are Signed into Gmail it will take you right to the attachment. If you are signed out, it will ask for your username and password and then Gmail takes you directly to the attachment.

Full iTurn Web Application

Save this code as a file with ”.html” as the extension and load it up on the iPhone. If everything goes to plan, as you turn the iPhone your widgets will execute as you have scripted.

<html>
<head>
 
<title>iTurn Web App - [ioBridge.com]</title>
 
<script type="text/javascript">
 
        window.onload = function initialLoad(){
                updateOrientation();
        }
 
        function updateOrientation(){
	switch(window.orientation){
		case 0: widgetExecute("ukT8VqvxTrNR");
		break;
 
		case -90: widgetExecute("qhWRgPA6LV1C");
		break;
 
		case 90: widgetExecute("DLh1gVLPapbL");
		break;
	}
}
 
</script> 
 
</head>
 
<body onorientationchange="updateOrientation();">
 
<h1>iTurn</h1>
 
<div id="ioWidgets" style="display:none;">
<script type="text/javascript">document.write(unescape("%3Cscript src='" + "http://www.iobridge.com/widgets/io.js?qhWRgPA6LV1C' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">document.write(unescape("%3Cscript src='" + "http://www.iobridge.com/widgets/io.js?ukT8VqvxTrNR' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">document.write(unescape("%3Cscript src='" + "http://www.iobridge.com/widgets/io.js?DLh1gVLPapbL' type='text/javascript'%3E%3C/script%3E"));</script>
</div>
 
 
</body>
</html>

Projects