1. MULTIMEDIA 2009-2010 1/15
iPhone toepassing
Groep 10
Blog http://visualizationvisionaries.wordpress.com
Stijn van der Wielen, Master in de toegepaste informatica
Sam Decrock, 2e jaar Master in de ingenieurswetenschappen: computerwetenschappen
Wouter Strauven, 2e jaar Master in de informatica
Abstract— Dit is het verslag voor opgave 3 van multimedia, van groep 10. Wij hebben een iPhone-toepassing uitgewerkt voor
het visualiseren van gelijkaardige artiesten met behulp van een graaf. De belangrijkste uitdaging was voor ons het
implementeren van de SpringGraph. We leren uit dit project dat JavaScript best krachtig is. We zijn er in geslaagd om onze
Java code voor de SpringGraph te porten naar JavaScript. Gebruik makend van css, html en php hebben we deze SpringGraph
in een goed functionerende iPhone webtoepassing kunnen integreren.
Ingediend op: 23 November (Plaats het verslag, in Word en/of PDF op je groepsblog.)
—————————— ——————————
1 I DEE
Onze groep heeft een webtoepassing voor de iPhone gemaakt die net zoals bij onze Android-toepassing gebruik
maakt van een SpringGraph om gelijkaardige groepen te visualiseren. Het belangrijkste verschil met de Android-toepas-
sing bestaat uit de mogelijkheid om door de graaf te navigeren. Wanneer de gebruiker op een knooppunt klikt wordt de
graaf aangepast. Dit houdt in dat de groepen gelijkaardig aan de geselecteerde groep zullen worden getoond.
We hadden bij het ontwikkelen van de Android toepassing al aan deze aanpassing gedacht. Toen hadden we echter
niet meer de tijd om dit te implementeren. Nadat we tijdens de les een demo van onze toepassing toonden kregen we
ook als feedback dat het beter zou zijn om een manier te voorzien om door de graaf te kunnen navigeren. Het is voor de
gebruiker uiteraard veel aangenamer op deze manier de relevante artiesten op te zoeken van artiesten die reeds op de
graaf zijn weergegeven. In onze Android-toepassing was het vereist iedere keer de naam van de artiest in het zoekveld
in te geven, er was geen navigatie door de graaf mogelijk.
Helaas exploiteren we niet echt het mobiele aspect van de iPhone. We hebben onze webtoepassing wél specifiek voor
de iPhone versie van Safari geschreven. Hiervoor hebben we gebruik gemaakt van het iPhone User Interface Frame-
work8. Met dit framework is het vrij eenvoudig om je webtoepassing zo te maken dat deze geschikt is voor de mobiele
browser van de iPhone.
We hebben net zoals voor de Android zelf een SpringGraph geschreven. We vonden geen goede bestaande imple-
mentatie hiervan die geschikt was voor een webtoepassing op de iPhone (gebruik makend van JavaScript). We hebben
ook overwogen om onze SpringGraph dynamischer uit te breiden. We bedoelen hier mee dat het mogelijk zou zijn om
de graaf uit te breiden door een bepaalde knoop te selecteren. In onze huidige implementatie wordt een nieuwe graaf
opgebouwd met de geselecteerde knoop als vertrekpunt. Om dit goed te verwezelijken zou het echter mogelijk moeten
zijn om slechts een deel van de graaf te bekijken op het scherm, en dan gebruik makend van gestures door de hele graaf
te navigeren.
We vinden het goed dat we er in geslaagd zijn met JavaScript een SpringGraph te schrijven die ons toelaat hetzelfde
te doen als bij onze Android toepassing. We hebben echter niet zoveel met het mobiele aspect van de iPhone gedaan. Het
zou ook beter geweest zijn moesten we nog wat meer informatie in onze toepassing geïntegreerd hebben (naast de gra-
fieken voor populairste albums en liedjes). Onze toepassing is ook maar matig interactief. Het was beter geweest als
men gebruik makend van gestures extra handelingen op de graaf zou kunnen doen. We denken hierbij concreet aan het
kunnen inzoomen op een bepaald stuk van de graaf.
2. MULTIMEDIA 2009-2010 2/15
2 S TORYBOARD
Het storyboard (Figuur 1) wijkt af van dat van de Android-toepassing in de manier waarop er door de graaf kan worden
genavigeerd. In onze Android-toepassing was hier geen ondersteuning voor. In ons huidige storyboard kan u zien hoe
klikken op het knooppunt van Radiohead als gevolg heeft dat u de graaf met gelijkaardige artiesten voor Radiohead te
zien krijgt. In ons vorig storyboard ging men naar de detailweergave (met grafieken) door op de knoop te klikken. In deze
versie gebeurd dat door op het label met de artiestnaam te klikken.
Zoals reeds in het vorige onderdeel van dit verslag werd aangehaald, hadden we deze manier van navigatie door de graaf
reeds bij onze Android-toepassing overwogen. We hebben het nu toegevoegd omdat we de toepassing een stuk beter en
gemakkelijker in gebruik vinden na toevoegen van deze functie. Omdat er nu twee acties mogelijk zijn op de graaf (graaf
opbouwen voor bepaalde artiest en weergeven detailinfo) in plaats van één mogelijkheid hebben we een manier moeten
zoeken om deze twee acties te toe laten. We hebben er voor gekozen om het scherm met de detailinfo te verkrijgen door op
het label te klikken.
Het verloop gaat als volgt:
1. De gebruiker geeft de naam van een artiest in. De SpringGraph met gelijkaardige artiesten wordt getoond.
2. De gebruiker selecteert een knoop van een artiest. De SpringGraph met gelijkaardige artiesten voor die artiest
wordt getoond.
3. De gebruiker klikt op het label van een artiest. Een menu met verwijzingen naar de grafiek met albuminformatie
en de grafiek met informatie over de populairste liedjes wordt getoond.
4. De gebruiker kiest er voor om informatie over de populairste albums te bekijken. Een grafiek met de populairste
albums wordt getoond.
We hebben niet echt alternatieve storyboards overwogen. Het storyboard komt sterk overeen met dit van de Android-toe-
passing. We hebben enkel overwogen om toe te laten dat de graaf uitgebreid wordt (i.p.v. opnieuw opgebouwd met de
aangeklikte artiest als vertrekpunt).
5. MULTIMEDIA 2009-2010 5/15
Onze webapplicatie bestaat uit één enkele HTML-pagina (index.html) die gebruik maakt van enkele externe libraries en
php-pagina’s (zie Figuur 1). Onze webapplactie maakt gebruik van het iUI framework zoals ons voorgesteld werd tijdens
de les. Hierdoor geven we onze webapplicatie een look & feel gelijkaardig aan die van native IPhone applicaties.
De applicatie wordt opgestart door index.html op te roepen. Deze toont een visualisatie van gelijkaardige artiesten. Om
ook op dit platform gebruik te maken van een SpringGraph hebben we de Physics library8 uit ons vorig project omgezet
naar JavaScript en hiermee zelf een SpringGraph geïmplementeerd.
Het inladen van de SpringGraph gebeurd zodra de gebruiker een naam van een artiest opgeeft in het zoekveld en zijn in-
voer bevestigd. Voor het ophalen van de artiesten spreken we de Last.fm API8 aan. Dit gebeurd via een php-pagina die de
API aanspreekt en de data terug geeft. Om een structuur te brengen in het ophalen van last.fm data maken we gebruik van
aparte php bestanden. Iedere pagina haalt specifieke data op zoals bijvoorbeeld “getSimilarArtists.php” alle gelijkaardige
artiesten van een opgegeven artiest ophaalt en teruggeeft.
De data van de Last.fm API verkrijgen we, gebruik makend van een php package voor de last.fm API, als objecten maar
om sneller data uit te wisselen met de rest van ons project geeft iedere php-pagina een JSON object terug. Doorheen ons
project maken we gebruik van jQuery8. Dit is een JavaScript Library die web ontwikkeling vereenvoudigt door ondermeer
Ajax interacties, event handling, … aan te bieden. Binnen ons project hebben we jQuery gebruikt om requests te maken
naar php-pagina’s en de data hiervan op te vangen.
Net zoals in het vorige project is het mogelijk om meer details op te vragen van een artiest, die vervolgens gevisualiseerd
worden. Voor de visualisatie van de informatie maken we gebruik van Raphaël Javascrip Library8. We hebben de Google
Visualization API8 overwogen maar deze had één groot nadeel, dat de creatie van de visualisatie online gebeurd en zo
voor meer data verkeer zorgt.
Bijna alle handelingen binnen de web applicatie worden verwerkt in index.html. Hierdoor is de functionaliteit nogal ge-
groepeerd in dit bestand. Het zou beter zijn mocht het opbouwen van de SpringGraph in een apart JavaScript bestand ge-
beuren zodat deze hergebruikt kan worden en omdat dan ook de code dan overzichtelijker zou zijn.
4 IMPLEMENTATIE
Dit onderdeel kan opgedeeld worden in 4 stukken:
• De SpringGraph (JavaScript)
• De Pie Chart voor het weergeven van album en liedjesinformatie (JavaScript)
• Aanspreken van de Last.fm API (PHP)
• De gebruikersinterface waar bovenstaande zaken samengebracht worden gebruik makend van het iUI Frame-
work (HTML, JavaScript, AJAX)
4.1 SpringGraph
Zoals bij de Android opdracht hebben we er ook hier voor gekozen om de SpringGraph zelf te implementeren. Dit omdat
we geen goed functionerende bestaande SpringGraph vonden die we in ons project konden gebruiken. De toen gebruikte
physics-library8 was volledig in Java geschreven.
We hebben eerst overwogen om de Google Web Toolkit (GWT)8 te gebruiken. Het voordeel hiervan is dat het mogelijk is
om webapplicaties in Java te schrijven. Het nadeel hiervan is dat we GWT zouden moeten leren en dat we dan ook alles in
GWT hadden moeten programmeren. Dit zou een serieuze inspanning hebben betekend en aangezien we reeds vertrouwd
waren met JavaScript hebben we verkozen om het daarmee te proberen realizeren.
We hebben de Java physics-library vertaald naar JavaScript. Hiervoor hebben we alles uit de library gehaald wat niet be-
nodigd was voor de werking van de SpringGraph. De oorpronkelijke physics-library bevatte 10 klassen. De gestripte ver-
sie amper 5. Bij het omzetten van Java-klassen naar JavaScript-klassen werd er rekening gehouden met de volgende zaken:
• JavaScript heeft geen typering. Alle variabelen gaan vooraf met het keywoord var
• JavaScript wordt niet gecompiled, alle fouten komen dus at run-time tevoorschijn
• Er is geen support voor method overloading. Iedere methode moet een unieke naam hebben. Als de developer dit
vergeet en toch twee methodes met dezelfde naam gebruikt, dan wordt de laatste gebruikt.
6. MULTIMEDIA 2009-2010 6/15
• Net als bij constructoren in Java kunnen er bij het aanmaken van een object in JavaScript parameters worden mee-
gegeven. Meerdere constructoren zijn in JavaScript echter niet mogelijk.
• Er is geen JavaScript geen mogelijkheid om toegang tot methodes te beperken. Alles is public.
• Alle object methoden en properties moeten expliciet aangesproken worden met this. Er is geen impliciete this
zoals in Java.
Om JavaScript te debuggen hebben we gebruik gemaakt van FireBug8, een add-on voor Firefox waarmee je JavaScript kan
debuggen.
Figuur 3 toont een overzicht van de geconverteerde physics-library en zelfgeschreven SpringGraph-klasse
Figuur 3: physics-library(wit) & SpringGraph-klasse
De zelfgeschreven SpringGraph-klasse spreekt de physics-objecten aan. Op deze manier moet onze toepassing enkel ge-
bruik maken van de SpringGraph klasse.
We overlopen de belangrijkste methodes:
addNode(gf_node)
• voegt een grafische node (een HTML element, gf_node) toe aan de spring graph
• voegt een fysische node (een Particle) toe aan het particle-systeem
• geeft die Particle terug.
connectNode(particleP, particleQ, length)
• verbindt twee particles in het particle-systeem
reset()
• alle grafische en fysische objecten worden gewist.
draw()
• alle verbindingslijnen tussen nodes worden getekend
• alle nodes worden verplaatst naar de juiste positie
• een tick-opdracht naar het particle-systeem zorgt ervoor dat bij de volgende aanroep van draw() de nodes ver-
plaatst zijn.
drawLine(Ax, Ay, Bx, By)
• tekent een lijn van punt(Ax, Ay) naar punt(Bx, By)
Lijnen tekenen in JavaScript
7. MULTIMEDIA 2009-2010 7/15
We hebben nodes eenvoudigweg voorgesteld door bollen (PNG-afbeeldingen) die geplaatst worden in de methode
SpringGraph.draw(). Lijnen tekenen in JavaScript bleek echter niet zo eenvoudig te zijn.
Eerst hebben we gewerkt met de jsgraphics-library van Walter Zorn8. nHiermee is het mogelijk om rechthoeken, ovalen en
lijnen te tekenen met JavaScript. Aangezien er geen directe manier is om pixels te tekenen, maakt deze gebruik van het
DIV-element in HTML. Een pixel wordt dan voorgesteld door een DIV-element van 1 op 1 pixel. Het voordeel hiervan is
dat je gemakkelijk lijnen kunt tekenen. Het nadeel is dat het voor animatie te traag gaat. Het leverde geen vloeiende ani-
matie op.
Een tweede techniek, bedacht door Mathieu 'P01' Henri8, om lijnen te tekenen, maakt gebruik van voorgetekende lijnen.
Een reeks van afbeeldingen wordt vooraf getekend:
Door deze afbeeldingen te schalen in breedte en in hoogte, is het mogelijk om lijnen in alle richtingen als het ware te gene-
reren:
orgineel geschaalde varianten
Deze, veel ingenieuzere, techniek zorgde wél voor een vloeiend beeld tijdens de spring graph animatie. Een nadeel is hier
dat, door de vervorming, de lijnen er niet altijd even mooi uitzien.
4.2 Pie charts
De Pie Chart is maar één voorbeeld van wat mogelijk is met de Raphaël-library8. De Raphaël-library, geschreven door
Dmitry Baranovskiy, is een library om gemakkelijker met vectorafbeeldingen te werken. Op de site staan een aantal voor-
beelden van wat er allemaal mee mogelijk is, waaronder ook een de Pie Chart waar wij gebruik van maken8 (ZieFiguur 4).
Voor de pie charts in onze toepassing hebben we de code grotendeels overgenomen. We hebben enkel de pie-klasse wat
aangepast zodat we de warden van de grafiek vanuit JavaScript konden aanpassen.
8. MULTIMEDIA 2009-2010 8/15
Figuur 4: voorbeeld Pie Chart
4.3 Last.fm API
In onze applicatie worden alle gegevens van Last.fm8 gehaald. We vonden hiervoor een uitgebreide php API geschreven
door Mat Oakes8. De API bevat uitgebreide documentatie en heel wat voorbeeldcode. Gebruik makend van deze php API
was het voor ons gemakkelijk om de last.fm API aan te spreken.
Voor de informatie benodigd voor onze applicatie te verkrijgen hebben we de volgende Last.fm API methodes gebruikt:
Artist.getSimilar
• gegeven de naam van een artiest, haalt deze de gelijkaardige artiesten op van die artiest en ook informatie over
hoe gelijkaardig deze is ten opzichte van de opgegeven.
Artist.getTopAlbums
• haalt de top albums van een gegeven artiest op
Artist.getTopTracks
• haalt de top tracks van een gegeven artiest op
De eerste methode is nodig voor het tekenen van de SpringGraph en wordt aangeroepen in het bestand get_similar_ar-
tists.php. De laatste twee zijn nodig voor tekenen van de twee taartdiagramma’s en worden aangeroepen in
get_top_albums_and_tracks.php. Beide php-scripts bevatten zelfgeschreven code gebaseerd op de bijgeleverde voorbeeldco-
de (bijgeleverd met de last.fm php package).
In beide gevallen wordt de opgehaalde data geëncodeerd in een JSON object (zie Figuur 5) waarna het door JavaScript in
onze hoofdapplicatie kan uitgelezen worden (zie verder).
9. MULTIMEDIA 2009-2010 9/15
Figuur 5: JSON object met gelijkaardige artiesten aan Muse
4.4 De user-interface
De user-interface is de plaats waar alles samenkomt. De code/markup hiervoor bevindt zich in het index.html bestand. De
layout wordt bepaald door het iUI Framework8. Dit is niet meer dan een JavaScript- en css-libary die de look-and-feel van
de Iphone nabootst.
We doorlopen hier de werking van de code aan de hand van het gebruik van de applicatie:
1. beginscherm 2. ingeven van een artiest
10. MULTIMEDIA 2009-2010 10/15
3. keuzemenu met top albums & top tracks 4. taartgrafiek met top albums
5. taartgrafiek met top tracks 6. mogelijkheid om door te klikken
1 & 2: beginscherm en ingeven van een artiest
Het beginscherm bevat enkel een zoekveld. Wanneer de gebruiker een artiest invoerd (en bevestigd) wordt de functie lo-
adSpringGraph() aangeroepen. In die functie wordt aan de hand van de ingevoerde artiest een AJAX request naar het eer-
der besproken php bestand get_similar_artists.php gemaakt. Deze spreekt de Last.fm API aan en geeft de gelijkaardige ar-
tiesten terug in een JSON object (zie Figuur 5). Het JSON object is leesbaar in JavaScript en met die data worden grafische
html elementen (DIV’s) aangemaakt. Deze worden doorgegeven aan het SpringGraph object. Hierna wordt in een loop-
functie de methode SpringGraph.draw() aangeroepen waardoor de spring graph gaat bewegen.
11. MULTIMEDIA 2009-2010 11/15
3, 4 & 5: keuzemenu met top albums & top tracks
Wanneer de SpringGraph zichtbaar is, is het mogelijk om op de naam van een artiest te drukken. Dit zorgt terug voor een
AJAX request naar het bestand get_top_albums_and_tracks.php. Deze geeft twee arrays terug, respectievelijk met de top al-
bums en de top tracks. Hier worden twee pie chart objecten aangemaakt en de gebruiker krijgt het panel met de keuze tus-
sen Top Albums & Top Tracks te zien.
6: mogelijkheid om door te klikken
Vanuit een SpringGraph is het ook mogelijk om door te klikken naar andere artiesten. Door op de knoop van een artiest te
klikken, wordt een nieuwe SpringGraph met die artiest als middelpunt geladen.
4.5 Belangrijkste moeilijkheden
Werking van het iUI Framework
Het iUI Framework heeft een aparte manier van navigeren. Zo wordt er gewerkt met zogenaamde panels en moet een keu-
zemenu geïmplementeerd worden als een lijst:
<ul id="artistinfo" title="Artist Info: ">
<li><a href="#Topalbums">Top Albums</a></li>
<li><a href="#Toptracks">Top Tracks</a></li>
</ul>
<div id="Topalbums" title="Top Albums">
<h2 id="topalbums_title">Top Albums: </h2>
<div id="pie_topalbums_holder"></div>
</div>
Een link naar nieuw panel is geen hyperlink naar een nieuwe pagina, maar een HTML Anchor. De naam van die tag moet
overeenkomen met de id van een HTML element (zie vetgedrukte code).
Vanuit JavaScript naar zo’n panel te navigeren doe je als volgt:
location.href="#_artistinfo";
Waarbij artistinfo de id van een panel is.
AJAX
Het is mogelijk om zelf vanuit pure JavaScript een AJAX Call te doen. Dit is een beetje omslachtig, want de code varieert
van browser tot browser. De JQuery-library biedt hierbij een grote hulp en neemt dit voor zijn rekening. We hebben deze
gebruikt om onze twee AJAX Calls uit te voeren.
$.getJSON("get_similar_artists.php?name="+mainArtistName, function(json) {
//code
});
Als bijkomende functionaliteit verwerkt deze ook het JSON object.
Animatie in JavaScript
Zoals eerder vermeld moet de methode SpringGraph.draw() aangeroepen worden om de SpringGraph te laten bewegen.
12. MULTIMEDIA 2009-2010 12/15
Telkens deze methode aangeroepen wordt gaat de spring graph één stapje vooruit.
JavaScript beidt 2 methodes voor het gebruik van animatie:
• window.setTimeout(javascript_code, xx): javascript_code wordt na xx miliseconden uitgevoerd
• window.setInterval(javascript_code, xx): javascript_code wordt iedere xx miliseconden uitgevoerd
Er werd gekozen voor het laatste, om op deze manier de animatie ook te kunnen stoppen.
Het probleem hiermee was dat die functie niet vanuit een object kan opgeroepen worden. Het was mooi geweest mocht
deze verwerkt zitten in de SpringGraph-klasse. Maar éénmaal hij daar aangeroepen wordt verliest hij zijn scope. Hiermee
bedoelen we dat de methode niet meer weet in welk object hij zit.
De animatie moest dus vanuit de hoofdcode aangroepen worden. Dit is de JavaScript code die zich in het HTML bestand
index.html bevindt:
var doStart = true;
function start(){
doStart = true;
draw();
}
function stop(){
doStart = false;
}
function draw(){
springGraph.draw();
if (doStart == true)
window.setTimeout(draw, 20);
}
4.6 Aanpassingen aan het storyboard of ontwerp
We hebben geen aanpassingen aan ons storyboard of het ontwerp gedaan. Alles wat we met Android gedaan hebben, heb-
ben we ook met JavaScript/PHP/css/HTML kunnen doen.
5 R ESULTAAT
We zijn er in geslaagd onze Android toepassing om te zetten in een webtoepassing voor de iPhone. Hiervoor hebben we
onze zelf geïmplementeerde SpringGraph van Java naar JavaScript omgezet. We vinden dat deze SpringGraph ook op de
iPhone goed functioneert. Door navigatie binnen de graaf toe te laten hebben we onze toepassing nog wat verbeterd. Er
zijn nog uitbreidingen mogelijk die de interactiviteit van de graaf zou verhogen. We hadden bijvoorbeeld nog gebruik
kunnen maken van touch-gestures.
We zijn van mening dat de detailweergave met grafieken vrij goed geslaagd is. De JavaScript library die we hier voor ge-
bruiken maakt het mogelijk eenvoudig visueel zeer aantrekkelijke grafieken voor gebruik op het Internet te genereren. We
vinden dat de toepassing nog wat beter zou zijn geweest als we nog wat meer informatie in onze detailweergave geïnte-
greerd hadden. We zijn erg tevreden dat we gebruik gemaakt hebben van de iUI library, deze zorgt er voor dat onze toe -
passing er goed uitziet (en ook consistent is met de iPhone layout).
We hebben onze toepassing gedeeltelijk gebaseerd op de SpringGraph. We hebben uiteraard ook een aantal andere visua-
lisaties met behulp van grafen bekeken.
We hebben onze toepassing ook op de “echte” iPhone uitgeprobeerd. De toepassing werkt goed en reageert vlot op ge-
bruikersinvoer. Het is vrij eenvoudig om met de vinger de knopen en de labels selecteren voor respectievelijk verder door
de graaf te navigeren en detailinformatie weer te geven. Er is wel één verschil dat we opmerken. Wanneer je op de compu-
ter met je muis over het taartdiagram gaat zie je de labels verschijnen. Bij de iPhone moet je op de verschillende taartstuk-
13. MULTIMEDIA 2009-2010 13/15
ken klikken om de labels te doen verschijnen.
6 O VER I PHONE
We hebben gebruik gemaakt van php, html, JavaScript en css om onze webtoepassing voor de iPhone te ontwikkelen. Dit
was voor ons een voordeel, we waren reeds vertrouwd met deze talen. Ook bij ontwikkeling voor de Android waren we
reeds vertrouwd met Java maar daarbij hebben we nog moeten leren werken met activities. Er zijn uiteraard ook een aan-
tal specifieke zaken waarin webtoepassingen voor de iPhone afwijken van klassieke webtoepassingen. Wanneer je een
echte webapp voor de iPhone wilt maken, moet je er voor zorgen dat deze tot zijn recht komt op het kleine scherm. We
hebben gebruik gemaakt van iUI. We vinden dit een zeer goed framework om websites voor de iPhone te ontwikkelen.
Het zorgt er voor dat je je kan focussen op de inhoud en dat je zelf minder energie moet steken in de opmaak.
We vinden het ergens spijtig dat de iPhone er voor gezorgd heeft dat de standaardisatie op gebied van browsers een stuk
teniet is gedaan. Men gaat nu websites specifiek voor de browser van de iPhone ontwikkelen, het zou beter zijn moest er
ook hier aan standaardisatie worden gedaan.
Er is de laatste tijd vrij veel te doen rond het evaluatieproces van Apple voor iPhone apps. Zeer veel iphoneontwikkelaars
raken hierdoor gefrustreerd. Wanneer mogelijk kan het daardoor beter zijn webtoepassingen te maken in plaats van native
apps.
De iPhone is volgens ons erg geschikt om mee op het Internet te gaan. We vinden deze dus ook geschikt om webtoepassin-
gen voor te ontwikkelen. De iPhone is volgens ons vooral geschikt voor toepassingen waarbij de constraints opgelegd
door de hardware geen probleem vormen. Het scherm is zo een beperking. Het spreekt ook voor zich dat de iPhone niet
zo geschikt is om grote hoeveelheden tekst in te voeren. Het grote succes van de app store toont aan dat mensen graag de
functionaliteit van hun iPhone uitbreiden met nieuwe toepassingen (die niet door Apple worden ontwikkeld).
7 E XTRA
Verslag, video & code:
http://visualizationvisionaries.wordpress.com/2009/11/23/iphone-applicatie-verslag-video-code/
of
http://tinyurl.com/y8d47j8
14. MULTIMEDIA 2009-2010 14/15
8 B ESLUIT
We hebben ervaring opgedaan in ontwikkeling van een webtoepassing voor de iPhone. We waren reeds vertrouwd met
webdevelopment. Hierdoor hield deze opdracht weinig verrassingen voor ons in. We vinden het vrij eenvoudig om een
webtoepassing geschikt te maken voor de iPhone. Dit is grotendeels aan het iUI framework te danken dat op eenvoudige
wijze toelaat webtoepassingen in de iPhone layout te maken. Indien er geen nood is aan de functionaliteit die enkel voor
native apps ter beschikking wordt gesteld, is een webapp een goed alternatief. Er is ook vrij veel informatie te vinden on-
line over ontwikkelen voor de iPhone. Het is duidelijk dat de iPhone een populairder ontwikkelingsplatform is dan An-
droid.
We vinden het goed dat we er in geslaagd zijn onze SpringGraph te porten. Onze JavaScript SpringGraph werkt erg goed
op de iPhone en onze toepassing is eenvoudig te bedienen. We denken dat onze toepassing er goed uitziet. Ook de ge-
bruikte grafieken komen tot hun recht op de iPhone.
We beseffen dat we de functionaliteit van onze graaf nog hadden kunnen uitbreiden, onder meer door het toevoegen van
meer interactiviteit, gebruik makend van de touch gestures. We hadden ook nog wat meer informatie aan onze detailweer-
gave kunnen toevoegen (eventueel van andere API’s als last.fm).
We hebben een goed werkende webtoepassing gemaakt met opnieuw een mooie eigen implementatie van SpringGraph.
We zijn er in geslaagd informatie op een geschikte en visueel aantrekkelijke manier op de iPhone te visualiseren.
REFERENCES
[1] Jeffrey Traer Bernstein, TRAER.PHYSICS 3.0,, http://www.cs.princeton.edu/~traer/physics/
[2] Matt Oakes, http://apps.sourceforge.net/mediawiki/phplastfmapi/
[3] jQuery: The Write Less, Do More, JavaScript Library, http://jquery.com
[4] Raphael 1.2.1 - JavaScript Vector Library, http://raphaeljs.com
[5] Google Visualization API, http://code.google.com/intl/nl-NL/apis/visualization/
[6] Google Web Toolkit (GWT), http://code.google.com/intl/nl/webtoolkit/
[7] FireBug[ref:http://getfirebug.com
[8] JS Graphics Library, http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
[9] Mathieu 'P01' Henri, Drawing Lines in Javascript, http://www.p01.org/releases/Drawing_lines_in_JavaScript/
[10] Pie Chart Example, http://raphaeljs.com/pie.html
[11] Last.fm, http://www.last.fm
[12] iUI Framework, http://code.google.com/p/iui/
A PPENDIX 1
Wouter Strauven Sam Decrock Stijn van der Wielen Totaal
Storyboard 1 0 1 2
Ontwerp 2 0 2 4
Implementatie 15 20 20 55
Verslag schrijven 6 8 4 18
Lessen 8 8 8 24
Totaal 32 36 35 104
15. 1 rapporteer zowel de tijd in als buiten de sessies op vrijdag; kleinere granulariteit dan 1 u is niet nodig!
