In de volgende handleiding leggen we uit hoe men de computer kan bedienen met de iPod Touch of iPhone. We nemen als voorbeeld het besturen van de applicaties: iTunes en Winamp. We maken gebruik van de huidige ‘build in’ browser. Hiervoor hoeven we de iPod dus niet aan te passen ofwel de zo geheten Jailbreak is niet nodig.

Om de kosten zo laag mogelijk en de oplossing eenvoudg te houden maken we gebruik van gratis plugins.

Voordat we beginnen maken we een boodschappen lijst:

• Adobe director
• Local webserver Wamp
• Director shell xtra (free)
• Itunes control trough command line (free)
• Winamp control trough command line (free)

We maken gebruik van verschillende extra plugins, als iTunes control trough command line. Dit is een eenvoudige oplossing om iTunes te bedienen. Uiteraard kan dit mogelijk efficienter en zonder extra plugin, bijvoorbeeld door direct een windows bericht (zie volgende alinea) te versturen. Echter de techniek hiervoor zou buiten dit artikel vallen.

Er zijn verschillende methode om een programma aan te sturen. We zullen hier niet alle mogelijkheden bespreken, maar slechts kijken naar twee methodes. Deze methodes zijn programma’s aan te sturen via het (automatisch) verzenden van toetsenbord commando’s of via windows ‘berichten’. Omdat we ons nu richten op Windows kiezen we voor de stabiele(re) methode; function sendmessage(). Een dergelijk systeem voor de mac is te vinden als “remote buddy”

De theorie:

De sendmessage() functie wordt verzonden door een zogeheten Xtra genaamd: buddy api. Een Xtra is een klein hulp programma voor Adobe Director.

we kijken nu naar de sendmessage theorie, hoe we hier eenvoudig gebruik van kunnen maken bekijken we later in dit artikel.

De sendmessage omschrijving van windows;

LRESULT SendMessage(

HWND hWnd,

UINT Msg,

WPARAM wParam,

LPARAM lParam

);

Parameters

hWnd

[in]

Handle to the window whose window procedure will receive the message. If this parameter is HWND_BROADCAST, the message is sent to all top-level windows in the system, including disabled or invisible unowned windows, overlapped windows, and pop-up windows; but the message is not sent to child windows.

Microsoft Windows Vista and later. Message sending is subject to User Interface Privilege Isolation (UIPI). The thread of a process can send messages only to message queues of threads in processes of lesser or equal integrity level.

Msg

[in] Specifies the message to be sent.

wParam

[in] Specifies additional message-specific information.

lParam

[in] Specifies additional message-specific information.

Natuurlijk kunnen we deze functie direct gaan gebruiken in C++ programma’s. Echter vinden wij deze code wat verwarrend. Voor de functies staan namelijk een reeks codenummers:

- Previous track button = 40044
- Next track button = 40048
- Play button = 40045
- Pause/Unpause button = 40046
- Stop button = 40047

Gelukkig zijn er daarom een aantal makkelijk te gebruiken plugins! Met deze plugins kunnen we door een simpele functie te geven de codes verzenden.

Een voorbeeld code hiervan is:

- start itunes and play: itch -p
- start winamp and play WAcommand.exe /play

Dit maakt het voor ons straks makkelijker een actie te schrijven in director.

Voordat we verder gaan wordt het nu tijd dat we de programma’s installeren:

Allereerst dien je natuurlijk director te hebben geinstalleerd.

Ten tweede installeren we de genoemde twee hulp programma’s als:

Shell xtra

We maken gebruik van de Shell extra om command line functies aan te roepen:
download: http://staff.dasdeck.de/valentin/xtras/shell/win/

Of direct: http://staff.dasdeck.de/valentin/xtras/shell/win/v12.zip

iTunes control trough command line

http://code.google.com/p/itunes-control/

(een keer installeren)

Winamp control trough command line
http://www.flippet.org/wacommand.html

(Zet straks dit programma direct in dezelfde map, waar je straks je director programma in opslaat).

De code!

Alle voorbeeld bestanden zijn te downloaden in het zip bestand. Echter leggen we onderstaand de code uit, zodat men deze zelf kan aanpassen..

Theorie van de code opbouw. Op de ipod gaan we naar een php pagina. Waarin we een xml / text bestand weg schrijven op een (locale) server. De xml file bevat een bepaalde variabele. Vervolgens maken we een programma dat constant de variabele in het xml / text bestand controleerd. Wanneer het programma dat een variable tegen komt welke het herkend, zal er een actie volgen. Bijvoorbeeld “start winamp”..

De iPod webapplicatie

Voordat we verder gaan is het natuurlijk wel vereist dat er een wireless verbinding is. Anders kunnen we geen website op de iPod tonen.

Allereerst beginnen we met het opzetten van de Wamp server en het controleren of er een juiste verbinding is vanaf de iPod.

De installatie van Wamp spreekt voor zicht. We hoeven hier geen aanpassingen in te brengen, de standaard instellingen voldoen prima.

Wanneer de wamp server draaid zal er een klein (snelheidsmeter) icoon in de taakbalk te zien zijn. Klik hierop en ga naar de localhost. Dit is de pagina in de WWW folder, bijvoorbeeld: c:/wamp/WWW

Hier kunnen we straks onze site inzetten.

Om de localhost vanaf de ipod te bekijken gaan we naar de webbrowser op de ipod en toetsen we het adres van de locale computer in. Bijvoorbeeld: http://10.0.0.150
Dit adres kan afwijkend zijn.

Safari
Om websites te kunnen ontwikkelen voor de ipod dienen we safari te installeren. Firefox of IE zal de websites niet hetzelfde tonen als de iPod.

De voorwaarden en sample code voor het designen van de ipod websites kun je vinden op de pagina: http://developer.apple.com/iphone/devcenter/

Globaal zijn er een paar kleine verschillen:

• doctype and metadata (see voorbeeld beneden)
• css tags

Plaats de volgende code in de localhost WWW folder en hernoem het naar 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>

Plaats de volgende CSS code in dezelfde folder en hernoem het naar “cssfile.css”

We hebben de sample code van de apple pagina als uitgangspunt gebruikt. Je kunt deze css code zo veel aanpassen als je wilt, echter houd er rekening mee dat ipod specifieke tags worden aangegeven met –webkit- deze werken dus niet in Firefox of IE!

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

Hernoem een txt bestand naar XmlFile.xml en plaats deze in dezelfde localhost WWW folder. Het Xml bestand bevat de volgende tekst.

<action>none</action>

Het programma welke controleerd op de variabele maken we met behulp van director.

Director:

Vergeet allereerst niet het Xtra bestrand .x32 in de map program files -> macromedia -> director -> configure -> Xtra te zetten. In director dien je deze Xtra nog aan je programma toe te voegen. Ga naar: modify -> movie -> Xtra’s en voeg de Xtra toe aan de lijst.

Voeg het volgende script toe aan het eerste frame:

_global.pShell = new (xtra “shell”)

on enterframe me
clearCache

_global.pXMLObj = new (xtra “XMLParser”)
_global.pShell = new (xtra “shell”)
_global.pXMLObj.parseURL (”C:\wamp\www\XmlFile2.xml”)

end

Om het xml bestand goed te kunnen lezen moeten we de volgende opbouw aanhouden.

• Lees de xml file

• Klaar met lezen, dan zoek de tag <action>

• Zoek de waarde (the .child[1].child[1]), normaliter de child van de xml file is de eerste tag ofwel <action> de tweede child geeft de waarde, het woord tussen de tags.

• We beginnen met de waarde none (<action>none</none>)

• De laatste stap is de waarde te veranderen naar een gewenste actie..

Met moviescript krijgt de volgende code.

on enterframe me

– itunes vars

if member(”text”).text = “itunes” then

shell_cmd(”itch -p”, RETURN)

WriteOutXMLFiles

member(”text”).text = “itunes started”

end if
end

Dit stukje code defineerd alleerst de Xtra (plugin) en scant het bestand: XmlFile2.xml op een variabele. Als de variabele ofwel de tekst is: “itunes” verzend dan : itch –p. itch-p wordt nu verzonden als command. Dit command wordt herkend door de extra plugin iTunes control trough command line welke we eerder hebben geinstalleerd.

Vervolgends dienen we met de functie WriteOutXMLFiles het xml bestand te overschrijven naar een neutrale variabele, dit omdat anders anders elke frame het programma opnieuw wordt geopend.

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

Voor verschillende commando’s kunnen we simpelweg de code itch-p veranderen.

Zie hieronder een lijst met functies:

playback controls:

-p, –play-pause If currently paused, begin playing. If currently playing, pause playback.
–pause Pause playback.
–play Play the current track.
-s, –stop Stop playback.
-n, –next-track Go to the next track.
-N, –previous-track Go to the previous track.
-m, –mute Mute the audio.
-M, –unmute Unmute the audio.-v, –volume number Set the volume to X percentage points.
–volume-down [number] Decrease the volume by X percentage points (default 10).
–volume-up [number] Increase the volume by X percentage points (default 10).

Zie voor meer itunes codes:

http://code.google.com/p/itunes-control/

Zie voor meer winamp codes:

http://www.flippet.org/wacommand-commands.html

In ons voorbeeld zien we de volgende commando’s terug voor iTunes en Winamp:

- start
- play / pause
- stop
- next
- previous
- volume Up
- volume Down
- quit

Download hier de voorbeeld bestanden:

files_ipod_tunes_winamp.zip

Met dit voorbeeld kun u iTunes of Winamp bedienen vanaf uw iPod. U kunt deze code uitbereiden of aanpassen naar wens. Verander de gebruikersinterface of voeg functies toe voor uw eigen programma’s.