Today we are gonna take a look at how we can control your Windows or Mac with the Ipod touch.
Because I just bought the ipod I don’t want to start jailbreaking it. So we first take a look at the possibilities of a web application.
The ipod touch supports most of the funcions of the safari browser. Unfortunately this means it doesn’t support flash.
Apple has a small developer website for ipod and iphone web applications. We need to get access to these files, so you need to register for free and get a Apple ID. ( if you don’t already have one).
see: http://developer.apple.com/iphone/devcenter/
But what now?
First we explain the theory of what we would like to accomplish.
Of course there will be better and stable solutions but today we are gonna choose the quick and dirty way! 
The idea is to browse (on your iPhone) to a (local) website interface (the web application), through this web interface we will set and save a variables to a XML file. This XML file is stored on a server or a local server. On this server there will be a small application made with Adobe director (because it supports Mac and PC), which will frequently read the XML file. Optionally you can of course make your own application with C++ or something…
When this little application notices a change (to the XML file) it will ‘do something’. You can really make a function for whatever you want. To keep it simple we are launching some Adobe applications remotely. (See the image above). After processing the request we need to clear the XML file, to allow input of new commands.
Look at this image for a general idea:
So as you guys might be expecting, here’s the ’shoppinglist’:
- Download the Safari browser ( we need this for testing, firefox doesn’t support some css tags)
- Setup a local (test) server with for instance something like Wamp or Mamp
- Adobe director 2004 mx (including the xmlparser and File IO Xtra)
- A wireless connection ( otherwise whats the point..)
First things first
Install the Wamp or Mamp server and check if you have the proper access to connect from the ipod.
For more information and installation FAQ’s look here. The address you want to connect with will be similar to ours, which is http://10.0.0.150
Safari
Make sure you are installing the latest updates of Safari 3.0
NOW get started!
To make a proper website (web application) for the ipod you need to look at the documentation and code samples on the apple website.
There are basically only a few small differences:
- doctype and metadata (see the example below)
- some css formating tags
Put the following code into your localhost /www folder and call it index.php
<?php
$inputValue= $_POST['inputValue'];
$myFile = "XmlFile.xml";
$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = "<action>{$inputValue}</action>";
if ($inputValue== ""){
fwrite($fh, "<action>No Input Value</action>");
fclose($fh);
}
else{
fwrite($fh, $stringData);
fclose($fh);
}
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <title>iPhone Design Patterns-Rounded Rectangle</title> <link rel = "stylesheet" href="cssfile.css" mce_href="cssfile.css" /> </head> <body> <!--Put your headings outside the <ul> tags --> <!-- hidden form value --> <form action="<?php $self ?>" method="post" name="prog1"> <input type="hidden" name="inputValue" value="photoshop" /> </form>
<!-- Each <ul></ul> pairing represents a group of related options --> <ul> <!-- The secondary class is used for secondary text (text that is less important) --> <li><img class="img" src="/ps.jpg" mce_src="/ps.jpg" alt="" /> <a href="#" mce_href="#" onclick="javascript:document.prog1.submit()">Photoshop<span class="showArrow secondaryWLink">Start</span></a></li><!-- The secondaryWLink class is used for secondary text that is a link --> </ul> <!-- use output for debuggin <?php echo "De waarde is veranderd in: ". $waarde . "."; ?> -->
</body> </html>
Put the following CSS in a file called “cssfile.css” and place it in the same folder.
We modified the samples of the apple website to make the above webapplication. You can modify it as much as you want, but keep in mind that the ipod / iphone tags are indicated with -webkit-
body
{
margin: 0;
padding: 0;
-webkit-text-size-adjust:none; /* Turn off font resizing */
}
ul
{
font-size:17px; /* All text content is 20 pixels */ font-family: Helvetica; font-weight:bold; color: rgb(76,86,108); /* Set each label color */
margin: 0; /* The list fills the whole iPhone/ ipod screen */ padding: 0;
width: 320px; /* Each cell is 320 pixels wide */ background-color: white; }
li
{
list-style-type: none;
border-top-width:1px; /* Add a line at the top of every cell */ border-top-color:rgb(217,217,217); border-top-style:solid;
padding-top:11px; padding-right:10px; padding-bottom:19px; padding-left:10px;
height:19px; /* The total cell height includes the padding-top, padding-bottom, border and height values: 10+14+1+19=44 pixels */ line-height:19px; /* Ensure that the height of the cell includes the line at the top of the cell */ }
li:first-child
{
border-top:0; /* Remove the line above the first item of the list */
}
a /* Handle the click/tap highlight. Fills the entire cell with the iPhone grey background when tapped */
{
display: block; /* Set the href to be a block rather than inline */
/* The padding properties adjust the text content within the href block */ padding-top: -0px; padding-right: 8px; padding-bottom: 12px; padding-left: 60px;
/* The margin properties adjust the size of the href block */ margin-top: -18px; margin-right: -8px; margin-bottom: -10px; margin-left: -8px;
text-decoration: none; color: black; }
.img{
width:50px; /* resize the thumbnail adobe application image */
margin-top: -11px;
margin-bottom: -15px;
margin-left: -10px;
}
.secondaryWLink /* Used for secondary text that is a link */
{
font-size:15px;
font-weight:normal;
float:right;
margin-right:10px;
color: #324F85; /* sets the color of the link */ line-height:20px; /* Vertically center text on the row */ }
.showArrow /* Add an arrow button to a link */
{
margin-right:10px;
padding-right:16px; /* Distance between the arrow button and a text */
background-image: url(images/chevron.png); background-repeat: no-repeat; background-position: right; }
XML file
Rename a notepad txt file to: XmlFile.xml and put it into the same localhost www folder as you previously did. The XML file needs to contain the following structure:
<action>none</action>
Making the application (listener) in Director:
again if you are not totally following the code, you can donwload all the example files.
So far the basic html codes are mostly self explaining. In director we need to do some more thinking. Although it’s not too hard.
First we need to add the extra Xmlparser and the FileIO by clicking on the menu item; modify -> movie -> Xtra’s then we need to make a script and call the Xml Parser Xtra to get director to understand the XML file.
property pXMLObj global gNameAuthor
on enterframe me clearCache
_global.pXMLObj = new (xtra "XMLParser")
_global.pXMLObj.parseURL ("C:\wamp\www\XmlFile.xml")
end
To read the XML properly we need to add the following lines to a new frame. What this basically does;
- It first reads the XML file
- When the reading is done, it looks at the tag <action>
- The value it gets is the .child[1].child[1]
- basically the child of the xml file, contains a tag (<action>) this child contains a value.
- We initially set to this to “none”.
- The final step is to change ”none” to a visible text in the movie and to the same value.
Now we can see whats the new value is! 
property pXMLObj global gNameAuthor
on endSprite me _global.pXMLObj = 0 end
on exitframe me
if _global.pXMLObj.doneParsing () then
gNameAuthor = _global.pXMLObj.makeList ()
xmltag = _global.pXMLObj.child[1].child[1].text
member("text").text = string(xmltag)
else
go the frame
end if
end
In another script we check te value of every frame for it’s text value. With function: WriteOutXMLFiles we are overwriting the XML file (locally). If we don’t do this the movie will be opening the application every second!
So don’t forget to reset the value properly. In this final part we use the FileIo extra to write out and create the XML file. Of course there are some other ways to do this, we won’t discuss this for now.
on enterframe me
if member("text").text = "photoshop" then
open "C:\Program Files\Adobe\Adobe Photoshop CS3\Photoshop.exe"
-- change the xml value
WriteOutXMLFiles
-- change the textmember value to a different value
member("text").text = "photoshop started"
end if
end
global myFile
on WriteOutXMLFiles if objectP(myFile) then set myFile = 0 --Delete the instance if it already exists myFile = new(xtra "fileio") -- Create an instance of FileIO openFile (myFile, "C:\wamp\www\XmlFile.xml.xml",0)--Open the file with R/W access delete(myFile) --deletes the file createFile (myFile, "C:\wamp\www\XmlFile.xml.xml") --creates the file again openFile(myFile,"C:\wamp\www\XmlFile.xml.xml",0) --Open the file with R/W access
-- the xml data mySaveString ="<action>Application Started</action>" writeString(myFile,mySaveString) --writes text to the file
closeFile(myFile) -- Close the file myFile = 0 -- Dispose of the instance
end
Download
You can download the files used to make this sample application (as previewed in the top image).
This is basically all the code that is needed to remotely open a program with your iPod Touch.
Like we said before this is just a simple and quick approach. There are so many possibilities! For example try to control the windows media player, or build and control your own programs with C++ or Director. We can also easely integrate this with our earlier project, Albumflow so keep looking at our website labcoding.com for new updates!
August 22nd, 2008
1 Comment at "How to control a PC or Mac with the iPhone / Ipod Touch"
[...] / Ipod touch controlling remote itunes and winamp (windows)Building PHP4 (RPM) on CentOS 5How to control a PC or Mac with the iPhone / Ipod TouchA pesky BHO: cfgmgr3.dllPound (Reverse Proxy) with Exchange 2007 (or Exchange 2003) Jan [...]
Comment Now!