Een User Interface voor Twilight

Informatica — Universiteit van Amsterdam

Bachelor Informatica

Een User Interface voor Twilight

Robin van Rijn

15 augustus 2014

Begeleider: Dr. Robert G. Belleman (UvA)

2

Samenvatting Twilight is een applicatie voor de interactieve visuele analyse van grafen ontwikkeld door de Universiteit van Amsterdam en SURFsara. Het programma heeft een beperkte user interface, waardoor niet alle functies zomaar bruikbaar zijn. Het programma heeft bij uitvoering op een (multi-)touchscreen een toetsenbord nodig. Vaak is er ook een ervaren gebruiker nodig, omdat werken met Twilight niet vanzelfsprekend is. Het onderzoek in deze scriptie zal zich richten op het verbeteren van de user interface van Twilight, om het programma gebruikersvriendelijker en toegankelijker te maken. Dit onderzoek heeft voor een groot deel te maken met mens-computer interactie en zal meer raken met informatiekunde dan informatica.

3

Inhoudsopgave

1 Introductie 1.1 Twilight . . . . . . . . 1.2 Twilight user interface 1.3 Werking Twilight . . . 1.4 Over dit onderzoek . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

6 6 7 7 8

2 User interface toolkits 2.1 Huidige interface . . . . . . . . . 2.2 Twilight functies en commando’s 2.3 Mogelijke toolkits . . . . . . . . . 2.3.1 Kivy (Python) . . . . . . 2.3.2 AntTweakBar (C/C++) . 2.3.3 libRocket (C++) . . . . . 2.3.4 Qt (C++) . . . . . . . . . 2.4 Implementatie van toolkit . . . . 2.4.1 Kivy (Python) . . . . . . 2.4.2 AntTweakBar (C/C++) .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

9 9 9 9 10 11 11 11 12 12 12

3 Implementatie 3.1 Ontwerpkeuzes . . . . . . . . . . . . 3.2 Ontwerp . . . . . . . . . . . . . . . . 3.2.1 Mogelijkheden AntTweakBar 3.2.2 TUIO ondersteuning . . . . . 3.2.3 AntTweakBar functies . . . . 3.2.4 Menu layout . . . . . . . . . 3.2.5 Werking menu . . . . . . . . 3.2.6 Positie en zichtbaarheid menu 3.2.7 Indeling menu . . . . . . . . 3.2.8 Grootte menu items . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

13 13 14 14 14 15 15 15 15 16 16

4 Resultaten & Test 4.1 Nieuwe user interface . . . . . . . . . 4.2 Resultaten implementatie . . . . . . 4.2.1 TUIO ondersteuning . . . . . 4.2.2 Werking menu . . . . . . . . 4.2.3 Positie en zichtbaarheid menu 4.2.4 Overige resultaten . . . . . . 4.3 Experimenten . . . . . . . . . . . . . 4.3.1 Experiment 1 . . . . . . . . . 4.3.2 Experiment 2 . . . . . . . . . 4.3.3 Kwalitatieve vergelijking . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

17 17 19 19 19 19 19 19 20 21 21

. . . .

. . . .

. . . .

. . . .

. . . .

4

5 Conclusie 5.1 Conclusie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2 Toekomstig onderzoek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22 22 22

A Functies in Twilight A.1 Globale commando’s of interactie met meerdere grafen . . . . . . . . . . . . . . . A.2 Interactie met enkele graaf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A.3 Interactie op niveau van knopen . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24 24 25 26

B AntTweakBar implementatie

27

C Implementatie C.1 Twilight functies in AntTweakBar . . . . . . . . . . . . . . . . . . . . . . . . . .

28 28

5

HOOFDSTUK 1

Introductie 1.1 Twilight Twilight is een cross-platform interactief programma voor de visualisatie van grafen en netwerken [1]. De focus van Twilight ligt op de interactie met en het navigeren door grote datasets. Deze datasets bevatten bijvoorbeeld data over sociale interactie, de verspreiding van ziektes of criminaliteit in een stad. Een voorbeeld hiervan zijn de onderzoeken van prof. dr. Peter M.A. Sloot over de werking van criminele netwerken 1 . Twilight wordt vooral gebruikt door onderzoekers om bij onderzoek verkregen data te visualiseren. Figuur 1.1a laat een graaf in Twilight in de cirkel layout zien, de standaardlayout die in Twilight wordt gebruikt voor elke graaf die is ingeladen. Figuur 1.1b laat dezelfde graaf zien na toepassing van het Fruchtermann-Reingold algoritme.

(a) Standaard cirkel layout.

(b) Dezelfde graaf na iteratie met het FruchtermanReingold algoritme.

Figuur 1.1: Een graaf met 800+ knopen en 20.000+ kanten gevisualiseerd in Twilight. Vooral bij grote grafen met veel knopen en/of kanten is het moeilijk om structuren en patronen te detecteren. Wiskundige analytische methoden ontbreken vaak of zijn beperkt in hun mogelijkheden om grote grafen te analyseren. In dergelijke gevallen kan een grafische representatie van de graaf helpen bij de visuele analyse. De uitdaging is dan een geschikte layout (of “embedding” zoals het in de wiskunde wordt genoemd) te vinden die de graaf op een duidelijke en inzichtelijke manier representeert. Daarnaast zit er een toegevoegde waarde in intu¨ıtieve interactiemechanismen die de eindgebruiker in staat stellen een graaf op allerlei wijzen te exploreren. Vooral de multi-touch interactie om door een graaf te exploreren is in Twilight van belang. Twilight biedt een aantal layout algoritmen en een scala aan interactiemogelijkheden om grafen interactief visueel te analyseren. 1 http://www.wetenschap24.nl/programmas/labyrint/labyrint-tv/2013/februari/De-kapper-van-Disney. html

6

Op het moment heeft Twilight nog een ervaren “piloot” nodig om de applicatie te besturen. Niet alle functies van Twilight zijn terug te vinden in de menu’s. De functies die hier niet in staan, zijn toetsaanslagen of combinaties van toetsenbord- en muisinvoer. Een volledig overzicht van de in Twilight beschikbare commando’s is te vinden in bijlage A.

1.2 Twilight user interface Het uitgangspunt bij het ontwerpen van Twilight was om zo veel mogelijk schermruimte voor de weergave van de grafen te gebruiken. Tijdens de ontwikkeling van Twilight waren er geen user interface toolkits die multi-touch interactie ondersteunden. Ook namen de op dat moment beschikbare toolkits altijd een vast deel van het scherm in beslag. Om deze redenen is ervoor gekozen een eigen menu te ontwerpen. Twilight werkt op dit moment met twee aparte menu’s. Het onderste menu, zoals te zien in figuur 4.6a, is vooral gericht op de graaf in zijn geheel. In dit menu kan de gebruiker grafen en algoritmen selecteren, door de layout itereren aan de hand van een algoritme en de weergave van de labels van de knopen en kanten veranderen. Het menu aan de rechterkant, figuur 4.6b, is vooral gericht op de knopen. Vanuit dit menu kunnen bijvoorbeeld paden tussen knopen worden geaccentueerd.

(a) Onderste Twilight menu.

(b) Rechter Twilight menu.

Figuur 1.2: Twilight menu’s. Buiten de knoppen in de interface, kan er op andere manieren met Twilight worden ge¨ınteracteerd. Gebruikers kunnen met een toetsenbord, muis of combinatie van deze twee ook functies aanroepen. Sommige van deze functies zijn alleen beschikbaar via deze maner interactie en dus niet terug te vinden in een van de menu’s.

1.3 Werking Twilight Het is voor dit onderzoek van belang om de werking van Twilight te begrijpen. Twilight is een complex wiskundig programma dat gebruikt maakt van meerdere programmeertalen en bibliotheken. De structuur van Twilight is als volgt:

7

• Grafen – igraph2 wordt gebruikt voor het berekenen van de layout van een graaf. – OpenGL3 wordt gebruikt voor het renderen van een graaf. OpenGL is geoptimaliseerd in drivers, waardoor het renderen zeer snel kan worden uitgevoerd. • Menu – Het huidige menu is ge¨ımplementeerd aan de hand van C routines. – Deze routines bouwen OpenGL widgets. – Deze widgets hebben Python bindings. • Invoer – Muis- en toetsenbordinvoer wordt afgehandeld door SDL4 . – TUIO5 wordt gebruikt voor het verwerken van multi-touch invoer.

1.4 Over dit onderzoek Deze scriptie zal zich richten op het verbeteren van de user interface van Twilight. De huidige interface is rudimentair en laat een hoop mogelijkheden voor verbetering. Momenteel zijn niet alle functies te bereiken via een zichtbaar menu, waardoor een gebruiker via de handleiding moet opzoeken hoe een functie aangeroepen kan worden. Dit is niet goed voor de toegankelijkheid van het programma. Ook is Twilight voor leken lastig te doorgronden en kost het relatief veel tijd om het programma onder de knie te krijgen. De focus van dit onderzoek zal liggen op het zichtbare deel van de interface. De hoofdvraag hier is: “Hoe kan de user interface van Twilight verbeterd worden?”. Omdat dit een relatief brede en onduidelijke vraag is zijn er een aantal doelstellingen voor de nieuwe interface, te weten: 1. De interface mag de huidige opzet van Twilight, het besteden van zoveel mogelijk pixels aan Twilight zelf, niet in de weg staan. 2. De interface moet momenteel functies die moeilijk (of zelfs niet) toegankelijk zijn toegankelijk maken. 3. De interface moet te integreren zijn met Twilight. Dit houdt in dat de widgets in OpenGL getekend moeten worden en moeten worden ge¨ımplementeerd in Python en/of C. 4. De interface moet bruikbaar zijn op een multi-touch platform, dus TUIO ondersteunen. 5. De interface moet de huidige cross-platform mogelijkheden van Twilight niet beperken. 6. De interface moet door leken te gebruiken zijn. De touch interactie in Twilight zou ook een goed onderwerp voor een onderzoek zijn. Echter draait Twilight niet alleen maar in (multi-)touch omgevingen, waardoor het waardevoller is om te zorgen dat eerst de user interface op orde is. Het zal in de relatief korte tijd beschikbaar voor deze scriptie niet haalbaar zijn om hier ook onderzoek naar te doen.

2 igraph is een gratis, open-source collectie van netwerk analyse tools met nadruk op effici¨ entie, draagbaarheid en gebruiksgemak. http://igraph.org/redirect.html 3 OpenGL is een cross-language, multi-platform API voor het renderen van 2D en 3D graphics. http://www. opengl.org/ 4 SDL is een cross-platform ontwikkel bibliotheek gebruikt voor low level toegang tot bijvoorbeeld muis en toetsenbord input. https://www.libsdl.org/ 5 TUIO is een open framework dat een algemeen protocol en API definieert voor multi-touch interfaces. http://www.tuio.org/

8

HOOFDSTUK 2

User interface toolkits 2.1 Huidige interface De huidige interface van Twilight is een menu op basis van simpele blokken getekend met OpenGL. Het menu ondersteunt commando’s en submenus, maar geen sliders en checkboxes e.d. Menu afhandeling vindt plaats aan de hand van callbacks. Het menu wordt door een Python script beschreven en kan hierdoor per installatie verschillen. De user interface kan zelfs dynamisch, tijdens het draaien van het programma, veranderen.

2.2 Twilight functies en commando’s Om te beginnen is een inventarisatie gemaakt van alle functies in Twilight. Deze functies vallen onder te verdelen in drie subcategorie¨en: 1. Globale commando’s of interactie met meerdere grafen (bijlage A.1) 2. Interactie met de complete graaf (bijlage A.2) 3. Interactie op het niveau van knopen (bijlage A.3) Deze verdeling zal helpen bij het indelen van de nieuwe user interface omdat niet-gerelateerde functies hiermee van elkaar gescheiden worden. Een overzicht van de verdeling van alle in Twilight aanwezige functies is te vinden in bijlage A. Naast de categorie waar de functie in valt, heeft een functie ook een functieklasse. Deze functieklasse bepaalt op wat voor manier de interactie met de functie plaatsvindt. Deze functieklassen zijn: A Aan/uit (boolean) B Selectie uit een lijst (drop down met strings) C Numerieke eigenschappen (integer/float) D Onmiddellijke uitvoer (callback) Hieruit blijkt dat het nieuwe menu ondersteuning moet bieden voor booleans, drop down lijsten, integer en float variabelen en callbacks.

2.3 Mogelijke toolkits De huidige grafische user interface (GUI) van Twilight laat, zoals in sectie 1.4 beschreven, ruimte voor verbetering. Om de bestaande problemen op te lossen zal een GUI toolkit worden ge¨ımplementeerd. Het voordeel van het implementeren van een toolkit is dat de tijd die aan 9

de user interface moet worden besteed significant omlaag gaat. Ook is het met een goede toolkit triviaal om functies toe te voegen en/of om aanpassingen te maken in het menu. Aan de hand van de doelstellingen voor de nieuwe user interface, is bepaald dat de toolkit aan de volgende eisen moet voldoen: 1. Dynamisch: Het menu moet niet teveel ruimte in beslag nemen en moet geminimaliseerd kunnen worden. Hierdoor kan de gebruiker het volledige scherm gebruiken voor het visualiseren van zijn data. 2. Toegankelijkheid: Het nieuwe menu moet alle functies van Twilight kunnen weergeven zonder al te veel ruimte in te nemen. Het huidige menu laat niet alle functies zien, maar neemt wel relatief veel ruimte in beslag. 3. Integratie: De toolkit moet te integreren zijn in Twilight. Dit houdt in dat deze met OpenGL moet werken en in Python of C++ ge¨ımplementeerd kan worden. 4. Multi-touch: Twilight is ontwikkeld als multi-touch applicatie. De nieuwe interface moet dus ondersteuning bieden voor het in Twilight gebruikte TUIO protocol. 5. Cross-platform: De toolkit moet cross-platform zijn om Twilight zo toegankelijk mogelijk te houden. 6. Eenvoudig: Het nieuwe menu moet door “leken” te gebruiken zijn. Het huidige menu vergt ervaring met Twilight, wat een drempel vormt voor het gebruik van de applicatie. Uitgaande van bovenstaande eisen zijn en de eerder genoemde klassen functies in Twilight er vier toolkits die in aanmerking komen. Deze toolkits zijn: Kivy[2], AntTweakBar[3], libRocket[4] en Qt[5]. In onderstaande tabel worden de toolkits getoetst op de opgestelde eisen: Eis: Dynamisch Toegankelijkheid Integratie Multi-touch Cross-platform Eenvoudig

Kivy X

AntTweakBar

libRocket

Qt

X

X X

X

2.3.1 Kivy (Python) 1. Dynamisch: Het is met Kivy niet triviaal om menu’s te kunnen verbergen. Wel kunnen menu’s naar wens worden verschoven. 2. Toegankelijkheid: Het ontwerp van een menu staat in Kivy relatief vrij. Hierdoor is het geen probleem om alle functies van Twilight in ´e´en of meerdere menu’s te plaatsen. 3. Integratie: Kivy werkt met OpenGL en Python. Dit is compatibel met Twilight. 4. Multi-touch: Kivy biedt ondersteuning voor de TUIO events die Twilight genereert aan de hand van motion en touch events. Ook kunnen de SDL events voor muis- en toetsenbord invoer worden gebruikt door Kivy. 5. Cross-platform: Kivy werkt op Linux, Windows, OS X en mobiele apparaten. Het vormt dus geen belemmering voor de cross-platform eigenschap van Twilight. 6. Eenvoudig: Aangezien het menu vrij te ontwerpen is, kan het zodanig worden ge¨ımplementeerd dat het voor leken te begrijpen is. Kivy maakt gebruik van zijn eigen “tussenliggende” ontwerptaal om de interface te beschrijven. Een groot voordeel hiervan is de scheiding tussen applicatie en interface. Mede hierdoor is Kivy een zeer goede optie. 10

2.3.2 AntTweakBar (C/C++) 1. Dynamisch: Het menu van AntTweakBar kan naar wens geopend en gesloten worden. 2. Toegankelijkheid: Het menu is van rechthoekige vorm en kan naar wens worden gevuld met variabelen gebruikt in de code. Ook kunnen callback functies worden gebruikt. Hiermee is mogelijk om alle functies in Twilight in het menu te implementeren. 3. Integratie: De toolkit werkt met OpenGL en C++. Het is compatibel met Twilight. 4. Multi-touch: AntTweakBar biedt ondersteuning voor SDL. SDL handelt alle muis- en toetsenbordinvoer van Twilight af. Voor TUIO biedt het echter geen ondersteuning. Hiervoor moet een eigen oplossing worden ge¨ımplementeerd. 5. Cross-platform: AntTweakBar kan worden ge¨ıntegreerd in de code van Twilight. 6. Eenvoudig: Het menu ziet er standaard en simpel uit. Met een logische indeling is het voor nieuwe gebruikers eenvoudig te doorgronden en gebruiken. Als een event niet door AntTweakBar wordt afgehandeld zal het worden doorgegeven aan SDL. Als AntTweakBar er wel iets mee doet, zal SDL het event niet krijgen. Wanneer een ATB object zich boven een Twilight object bevindt zal het ATB object dus “voorrang” krijgen, dit is een logische manier van werken. Het nadeel van AntTweakBar is dat de gebruiker over de ATB bibliotheek moet beschikken. Deze kan echter met Twilight worden meegeleverd. Dit is nu ook al het geval met bijvoorbeeld de igraph bibliotheek. Alles bij elkaar genomen is ATB een geschikte tweede keuze.

2.3.3 libRocket (C++) 1. Dynamisch: Het menu van libRocket kan naar wens worden geopend en gesloten. 2. Toegankelijkheid: Het menu kan vrij worden ontworpen, hierdoor kunnen alle functies van Twilight in het menu worden geplaatst. 3. Integratie: libRocket werkt met OpenGL en C++, dit is compatibel met Twilight. 4. Multi-touch: libRocket biedt geen ingebouwde ondersteuning voor TUIO events. Hier zal dus een eigen oplossing voor moeten worden ontwikkeld. 5. Cross-platform: libRocket moet gebouwd worden met een andere compiler dan Twilight. Hierdoor gaat de drempel voor het gebruik van Twilight omhoog en zal de applicatie minder goed cross-platform te gebruiken zijn. 6. Eenvoudig: Het menu kan vrij ontworpen worden. Een groot voordeel is dat libRocket is gebaseerd op HTML en CSS standaarden. Hierdoor kan er dus volgens deze web standaarden worden ontworpen. Helaas is het niet triviaal om libRocket cross-platform te gebruiken, waardoor de toolkit geen optie is.

2.3.4 Qt (C++) 1. Dynamisch: Het is met Qt mogelijk om Twilight te draaien binnen een door Qt beheerde OpenGL omgeving. Daarbuiten is er ook de mogelijkheid om in de al bestaande OpenGL viewport een menu te implementeren aan de van QGLwidgets.[6] 2. Toegankelijkheid: Het ontwerp van een menu staat ook met Qt relatief vrij. Hierdoor is het geen probleem om alle functies van Twilight in ´e´en of meerdere menu’s onder te verdelen. 3. Integratie: Qt werkt met OpenGL en C++, dit is compatibel met Twilight. 11

4. Multi-touch: Er is een Qt TUIO interface in ontwikkeling, deze is echter nog niet publiekelijk beschikbaar 1 . Er zijn meerdere voorbeelden van plug-ins te vinden, maar er is geen offici¨ele ondersteuning voor TUIO vanuit Qt. 5. Cross-platform: Qt is volledig cross-platform. 6. Eenvoudig: Het menu kan vrij ontworpen worden. Een voordeel van Qt is dat het een bekende library is. Hierdoor is er een grote kans dat eventuele problemen vergelijkbaar zijn met problemen die door andere ontwikkelaars al zijn opgelost.

2.4 Implementatie van toolkit Vanwege het eenvoudige behoud van het cross-platform element en de duidelijke afbakening tussen applicatie en interface is gekozen om Kivy te implementeren.

2.4.1 Kivy (Python) Kivy maakt gebruikt van een eigen OpenGL viewport om objecten te renderen, Twilight doet dit ook. Het is mogelijk om Twilight binnen een Kivy venster te laten werken, echter draait Twilight op dat moment over Kivy heen. Het is niet gelukt om de twee applicaties samen te laten werken. Als gevolg hiervan zal input niet vanuit Twilight naar Kivy verzonden en komen objecten getekend door Kivy achter de Twilight applicatie. Uit bovenstaande is te concluderen dat Kivy geen optie meer is. Vervolgens is gekozen voor het implementeren van de tweede keuze, AntTweakBar.

2.4.2 AntTweakBar (C/C++) In bijlage B is te vinden hoe AntTweakBar aan Twilight kan worden toegevoegd. ATB maakt gebruik van de viewport van het programma waarin het gebruikt wordt, waardoor problemen als bij Kivy niet voorkomen. Zodra ATB draait ligt dit als een laag over Twilight heen. Invoer events zullen eerst door ATB worden gecontroleerd, waarna ze eventueel nog worden doorgestuurd naar Twilight. Een muisklik wordt bijvoorbeeld eerst door ATB gecontroleerd. Als deze muisklik niet op een ATB menu was, zal de muisklik alsnog worden doorgegeven aan Twilight. Events die bij Twilight terecht komen worden afgehandeld zoals al het geval was.

1 QtTUIO,

een Qt TUIO interface. http://qtuio.sirbabyface.net/

12

HOOFDSTUK 3

Implementatie 3.1 Ontwerpkeuzes De functies van Twilight zijn, zoals in hoofdstuk 2 uitgelegd, op te splitsen in drie subcategorie¨en. Gebruikmakend van de ontwerpregels en principes van Larry L. Constantine [7] wordt een deel van de user interface vastgelegd. De onderstaande ontwerp principes hebben betrekking op de user interface: 1. Zichtbaarheid & structuur: De onderdelen die op een moment niet nodig zijn moeten verborgen zijn. Hierbij komt de opdeling van de functies goed van pas. Aan elkaar gerelateerde functies worden bij elkaar geplaatst. 2. Feedback & hergebruik: Onderdelen van het menu werken met drop down menu’s of switches, deze moeten live kunnen worden aangepast zodat de gebruiker ziet in welke staat de applicatie op dat moment is. De menu’s moeten in uiterlijk en qua gebruik op elkaar lijken, zodat de gebruiker niet voor elk menu opnieuw moet uitvinden hoe het werkt. 3. Simpliciteit: Elke functie moet met maximaal 1 muisklik zichtbaar worden. Hierdoor blijft het programma te doorgronden. Het is niet bevorderlijk als de gebruiker eerst drie menu’s door moet voordat hij zijn functie kan vinden. Ook moeten verwante functies binnen een categorie zo dicht mogelijk bij elkaar geplaatst worden. De ontwerpregels hieronder hebben zowel betrekking op Twilight zelf als op de user interface: 1. Toegang: De mogelijkheden van het systeem moeten lijken op de mogelijkheden van andere systemen in hetzelfde domein. Functies moeten overeen komen, maar ook de manier waarop deze functies aangeroepen worden mag niet teveel verschillen van de in het domein geldende norm. 2. Doeltreffendheid: Het systeem moet niet zo veel “hulp” bieden dat het voor een ervaren gebruiker omslachtig te gebruiken wordt. 3. Progressie: Het systeem moet de gebruiker vooruitgang in kennis kunnen bieden. Dit is grotendeels onafhankelijk van de user interface. 4. Ondersteuning: Het systeem moet de gebruiker helpen zijn onderzoek sneller en/of effici¨enter uit te voeren. Een degelijke user interface is hierbij van groot belang. 5. Context: Het systeem moet passen bij zijn omgeving. In het geval van Twilight houdt dit in dat het zowel op een “normaal” scherm als op een (multi-)touch scherm moet kunnen werken. Ook moet het cross-platform zijn. 13

3.2 Ontwerp 3.2.1 Mogelijkheden AntTweakBar Met AntTweakBar is het mogelijk om een TweakBar te implementeren, dit is een menu zoals te zien in figuur 3.1. Dit figuur geeft een voorbeeld van de mogelijkheden van de TweakBar. ATB biedt de mogelijkheid om meerdere TweakBars te implementeren, maar heeft ook de mogelijkheid om opties op te splitsen in subgroepen. Deze groepen kunnen naar wens geopend en gesloten worden, zodat het overzicht behouden blijft. Als de TweakBar wordt geminimaliseerd zal er linksonder in het scherm een klein icoon zichtbaar worden. Als de gebruiker hierop drukt wordt de TweakBar weer zichtbaar. Het dynamische menu zorgt ervoor dat de gebruiker zijn scherm zo effici¨ent mogelijk en naar eigen wens kan indelen.

Figuur 3.1: Een overzicht van de mogelijkheden van AntTweakBar.

3.2.2 TUIO ondersteuning Twilight (multi-)touch events zijn TUIO events. AntTweakBar kan met meerdere bibliotheken voor invoer werken, helaas is TUIO er hier niet een van. AntTweakBar biedt wel ondersteuning voor SDL, hetgeen in Twilight al wordt gebruikt voor het afhandelen van toetsenbord- en muis14

invoer. De door Twilight gegenereerde TUIO events zullen dus moeten worden geconverteerd naar SDL events, zodat AntTweakBar deze events kan afhandelen. Deze eis is te vinden in de doelstellingen voor dit onderzoek in sectie 1.4

3.2.3 AntTweakBar functies Er worden, overeenkomend met de klassen functies in Twilight opgesomd in sectie 2.2, een aantal functionaliteiten ge¨ıntroduceerd in het menu. Deze functionaliteiten zijn: A Boolean switch: Eenvoudig aan/uit veld. Bijvoorbeeld om de labels van knopen aan en uit te zetten. B Drop down menu: Bijvoorbeeld voor het selecteren van de actieve graaf, actieve selectiemodus of een edgelabel. C Integer/float veld: Dit veld wordt bijvoorbeeld gebruikt voor het instellen van de grootte van de knopen. D Button: Voor een functie die direct wordt uitgevoerd. Een voorbeeld hiervan is het nemen van een screenshot. In bijlage C is te vinden hoe deze functionaliteiten precies worden ge¨ımplementeerd. Al deze functies worden herhaaldelijk gebruikt, zodat de eindgebruiker niet bij elk menu-item opnieuw moet nadenken over het gebruik en de werking hiervan. Dit is in lijn met het hergebruik principe uit sectie 1.4.

3.2.4 Menu layout Er wordt gekozen voor het gebruik van een enkele TweakBar per functiecategorie, in plaats van een TweakBar voor elke afzonderlijke graaf. Deze keuze is gemaakt om het programma zo overzichtelijk mogelijk te houden. Als elke graaf zijn eigen TweakBar zou krijgen zouden de TweakBars een groot deel van het scherm vullen ´en wordt het voor de gebruiker lastig om te bepalen welk menu werkt voor welke graaf. Dit zou de toegankelijkheid, simpliciteit en effectiviteit van Twilight niet ten goede komen. Ook zou dit de huidige opzet van Twilight, zoals te lezen in sectie 1.4 in de weg staan. Wel zijn dus alle functies opgesplitst en in afzonderlijke menu’s ondergebracht. Als de gebruiker op een moment alleen wil interacteren met de graaf in zijn geheel, kunnen de ongebruikte menu’s worden gesloten. Ook hoeven gebruikers hierdoor minder te zoeken naar functies, omdat zij meteen in het goede menu kunnen kijken en niet de complete lijst met functies door hoeven te werken. Dit komt overeen met de zichtbaarheid en structuur principes uit 3.1.

3.2.5 Werking menu Overeenkomend met het feedback principe uit sectie 3.1 kan het menu live worden aangepast. De menu items zijn gekoppeld aan een variabele. Deze variabele bevat de waarde voor het specifieke menu item van de actieve graaf. Een voorbeeld: de variabele iterate is een boolean. Als deze in het menu op waar wordt gezet, zal de iterate variabele van de op dat moment geselecteerde graaf ook waar worden. Hierdoor zal de geselecteerde graaf gaan itereren. Wanneer de gebruiker de actieve graaf verandert naar een graaf die niet aan het itereren is zal iterate veranderen naar f alse en gaat de hiervoor geselecteerde graaf gewoon door itereren.

3.2.6 Positie en zichtbaarheid menu Het is voor de gebruiker mogelijk om het menu te minimaliseren. Dit heeft als voordeel dat het menu van het beeld verdwijnt waardoor de gebruiker enkel nog de graaf ziet. Hierdoor kan de gebruiker een ander zicht op de graaf krijgen. Het deel van de graaf dat normaliter achter het menu verborgen gaat is op dat moment namelijk (beter) zichtbaar. 15

Vanzelfsprekend is er ook de optie om het menu te verplaatsen. Als de gebruiker het menu wel nodig heeft, maar de linkerkant van het scherm tegelijkertijd wilt gebruiken voor de graaf, kan het menu op elke willekeurige andere plek op het scherm worden geplaatst. Bovenstaande redenatie volgt uit het zichtbaarheid principe uit 3.1 en uit de eisen te vinden in sectie 1.4.

3.2.7 Indeling menu Aan de hand van de regels en principes uit sectie 1.4 zal het nieuwe Twilight menu worden onderverdeeld in drie aparte menu’s: “Global”, “Graph” en “Node” (Nederlands: “Globaal”, “Graaf” en “Knoop”). Op deze manier kunnen de onderdelen die op een bepaald moment niet nodig zijn worden verborgen door de gebruiker. Verder zullen logischerwijs alle samenhangende functies weer bij elkaar worden geplaatst. Een voorbeeld hiervan is het aan/uit zetten van de labels van knopen, met daaronder de knop om een ander label te laten zien.

3.2.8 Grootte menu items Bij touch interactie komen de aan touch scherm inherente fouten voor. Deze fouten ontstaan doordat een gebruiker net niet op de juiste plaats het scherm aanraakt. Met een touch scherm zal een gebruiker niet de precisie hebben die hij/zij met een muis heeft. De standaard grootte van de menu items geeft te weinig ruimte voor deze aan een touch scherm inherente fouten. De AntTweakBar bibliotheek zal aangepast moeten worden en worden gehercompileerd om de menu items een grotere marge voor fouten te geven.

16

HOOFDSTUK 4

Resultaten & Test 4.1 Nieuwe user interface In figuren 4.1, 4.2 en 4.3 is te zien hoe het nieuwe menu in Twilight eruit ziet. In 4.4 is Twilight in zijn geheel te zien met het nieuwe menu. Als de gebruiker het menu sluit, zullen enkel de geopende grafen nog zichtbaar zijn. In het nieuwe menu zijn alle functies uit het oude menu terug te vinden, aangevuld met de functies die w´el in Twilight zaten maar niet beschikbaar waren in de user interface. Het grootste voordeel hiervan is dat de eerder genoemde “piloot” niet meer nodig is om het programma te besturen. Twilight is dus toegankelijker geworden doordat alle functies nu zichtbaar zijn. Ook kan Twilight nu zonder een toetsenbord worden gebruikt op een touchscreen.

Figuur 4.1: Het menu met de globale opties. 17

Figuur 4.2: Het menu met de opties voor individuele grafen.

Figuur 4.3: Het menu met opties voor de knopen.

Figuur 4.4: Twilight met het nieuwe menu. 18

4.2 Resultaten implementatie In deze sectie zal worden gekeken naar het resultaat van de onderdelen uit sectie 3.2.

4.2.1 TUIO ondersteuning De TUIO ondersteuning werkt niet naar behoren. Op het moment is het zo dat dat een 2D TUIO cursor1 wordt omgezet naar een custom SDL event. Dit custom SDL event wordt in AntTweakBar afgehandeld als een muisklik. Door deze oplossing wordt bij de eerste aanraking van de gebruiker een functie geselecteerd. Als de gebruiker deze functie nog een keer aanraakt, zal deze worden uitgevoerd. Echter veranderen er op dat moment ook andere, niet geselecteerde variabelen op een niet-deterministische manier.

4.2.2 Werking menu Er is hier nog sprake van een probleem. Een aantal menu items verandert soms tegelijkertijd van waarde. Als de gebruiker bijvoorbeeld “iterate” van true naar f alse zet, gaat “show node labels” ook van true naar f alse, terwijl de achterliggende variabele niet wordt aangepast. Het gaat hier dus om een foutieve weergave van de variabele. Het lijkt erop dat dit probleem ergens in de code van AntTweakBar zelf ontstaat. Het is echter nog niet gelukt om de precieze bron van deze fout te vinden en hiermee de fout op te lossen.

4.2.3 Positie en zichtbaarheid menu In een desktopomgeving, dus wanneer de gebruiker een muis gebruikt, is het menu zoals in sectie 3.2.6 bedacht naar wens te minimaliseren en verplaatsen. Het menu kan op een (multi-)touch tafel echter niet worden verplaatst. Dit werkt niet omdat het bij deze sleepbeweging horende TUIO event niet is omgezet naar de bijbehorende SDL events (mouseDown, drag, mouseUp).

4.2.4 Overige resultaten • Twilight functies: De in subsectie 3.2.3 genoemde functionaliteiten zijn toegevoegd aan Twilight. Alle waarden worden live aangepast, in lijn met het feedback principe uit sectie 1.4. • Menu layout en indeling: Er zijn drie afzonderlijke TweakBars ge¨ımplementeerd, een voor elke functiecategorie. De TweakBars zijn zo ingericht dat bij elkaar behorende functies dicht bij elkaar staan. • Grootte menu items: De grootte van de menu items is iets meer dan verdubbeld. Er is nu een ruime marge waardoor de kans op een fout van de gebruiker een stuk kleiner is geworden.

4.3 Experimenten Er zijn twee experimenten gedaan met zes personen zonder ervaring met Twilight. Deze experimenten meten hoe de interfaces werken voor “leken” en hoe de effectiviteit is voor een meer ervaren gebruiker. De personen uit de testgroep waren mannen tussen de 20 en 25 jaar oud met HBO/WO niveau. Bij beide experimenten is de tijd opgenomen met een stopwatch. Het eerste experiment is gedaan zonder dat de meewerkende personen het programma en/of de user interface vooraf hadden gezien. Dit is zo gedaan om te testen hoe beide user interfaces werken voor “leken”. De verwachting bij dit experiment is dat de nieuwe user interface voor gebruikers zonder ervaring beter zal werken, voornamelijk omdat hier alle functies in de interface terug zijn te vinden. 1 Een 2D TUIO cursor is een enkele aanraking. Er zijn ook TUIO objecten, deze beschrijven interactie met bewegingen en/of meerdere contactpunten.

19

Bij het tweede experiment werden gebruikers in staat gesteld om te oefenen met Twilight. Hierdoor kan dit experiment weergeven wat de effectiviteit van de nieuwe interface is, tegenover de effectiviteit van de oude interface. De verwachting bij dit experiment is dat de tijden van beide user interfaces relatief gelijk zullen zijn. Deze verwachting is er omdat er van uit wordt gegaan dat het voor een ervaren gebruiker niet erg is als een functie niet terug te vinden is in de interface, hij zal door zijn ervaring met het programma weten hoe deze functie aangeroepen moet worden.

4.3.1 Experiment 1 Bij het eerste experiment werden gebruikers gevraagd tien verschillende functies te vinden, zowel in de oude als in de nieuwe interface. De gebruikers zochten allen dezelfde tien functies in dezelfde volgorde. Een deel van de functies is in de oude user interface niet terug te vinden, deze moesten worden opgezocht in de tabellen van bijlage A. De tijd liep hierbij vanaf het starten van het programma tot aan het vinden van de laatste functie. Elke gebruiker heeft dit experiment een keer per interface uitgevoerd, bij herhaling zou de gebruiker immers geen “leek” meer zijn. In onderstaande tabel en grafieken is in minuten (mm:ss) weergegeven hoe lang de gebruikers bezig zijn geweest met het eerste experiment: Oude user in- Gemiddelde Nieuwe user Gemiddelde terface oude interface interface nieuwe interface Persoon 1 3:00 0:30 0:53 0:05 Persoon 2 1:54 0:11 1:12 0:07 Persoon 3 1:54 0:11 1:39 0:10 Persoon 4 1:59 0:12 1:03 0:06 Persoon 5 1:50 0:11 1:20 0:08 Persoon 6 2:12 0:13 1:40 0:10 Totaal 12:49 0:13 7:47 0:08

(b) Procentuele tijd voor experiment 2.

(a) Absolute tijd voor experiment 1.

Figuur 4.5: Grafische weergave van het eerste experiment. Waar bij de oude user interface de gemiddelde tijd per functie 13 seconden is, is de gemiddelde tijd per functie bij de nieuwe interface 8 seconden. De trend die wordt waargenomen is dat de nieuwe user interface sneller werkt voor de personen die hebben meegewerkt aan dit experiment. Vaak zijn gebruikers ongeveer 60% van de tijd bezig met de oude interface, tegenover 40% van de tijd met de nieuwe interface. Er kan niet geconcludeerd worden dat de nieuwe user interface van Twilight voor iedereen beter zal werken. Wel kan de voorzichtige conclusie worden getrokken dat de nieuwe interface voor personen binnen de parameters van de testgroep (man, 20-25 jaar, HBO/WO niveau) beter lijkt te werken.

20

4.3.2 Experiment 2 In het tweede experiment werden gebruikers in staat gesteld om te oefenen met Twilight, een vijftal functies in het bijzonder. Dit oefenen werd door alle gebruikers gedaan met dezelfde functies op dezelfde graaf. De uitgevoerde functies zijn: • Node label aanzetten • Node label selecteren • Vooraf bepaalde node selecteren • Algoritme selecteren • Screenshot maken Als de gebruiker na vier maal oefenen deze functies zelfstandig kon uitvoeren, moest hij deze opnieuw uitvoeren op een andere graaf. De tijd werd bijgehouden vanaf het starten van het programma tot aan het uitvoeren van de laatste functie. In onderstaande tabel en grafieken is in minuten (mm:ss) weergegeven hoe lang de gebruikers bezig zijn geweest met het tweede experiment: Oude user interface Nieuwe user interface Persoon 1 0:22 0:19 Persoon 2 0:19 0:17 Persoon 3 0:13 0:22 Persoon 4 0:15 0:11 Persoon 5 0:20 0:21 Persoon 6 0:20 0:14

(b) Procentuele tijd voor experiment 2.

(a) Absolute tijd voor experiment 2.

Figuur 4.6: Grafische weergave van het tweede experiment. Als de twee uitschieters in figuur 4.6a tegen elkaar worden weggestreept lijkt de nieuwe interface voor de groep personen die meewerkten aan dit experiment net iets effectiever te zijn. Echter zijn deze resultaten zo weinig verschillend, dat er een grotere groep personen nodig zou zijn om tot een goede conclusie te komen. Voor nu wordt daarom geconcludeerd dat de nieuwe en de oude user interface voor een meer ervaren gebruiker ongeveer even effectief werken.

4.3.3 Kwalitatieve vergelijking Tijdens dit experiment is er ook gelet op wat er werd gezegd door gebruikers. Ook is achteraf gevraagd wat zij wat de beide interfaces vonden. Dit zonder dat zij kennis hadden van welke interface de nieuwe interface was. Er klonken bij gebruik van de nieuwe user interface opmerkingen als “Dit is overzichtelijker”, “Dit werkt makkelijker” en “Dit is leesbaarder”. De nieuwe interface werd over het algemeen als een stuk gebruiksvriendelijker gezien.

21

HOOFDSTUK 5

Conclusie 5.1 Conclusie Aan de hand van de hoofdvraag en doelstellingen geformuleerd in hoofdstuk 1 kunnen de volgende conclusies worden getrokken: 1. Dynamisch: Het nieuwe menu kan naar wens worden geopend en gesloten. Menu items die op een moment niet nodig zijn kunnen worden verborgen, hierdoor blijft het menu overzichtelijk. In een (multi-)touch omgeving is het niet mogelijk om het menu te verplaatsen. 2. Toegankelijkheid: Alle functies van Twilight zijn terug te vinden in het menu, dit was met de oude interface niet het geval. Hierdoor is Twilight makkelijker te gebruiken en is de drempel voor het gebruik ervan lager. 3. Integratie: Het nieuwe menu is ge¨ıntegreerd in de code van Twilight. De gebruiker zal moeten beschikken over de AntTweakBar bibliotheek. Deze kan, net als igraph, worden meegeleverd bij de Twilight installatie. 4. Multi-touch: Er is geen goede TUIO ondersteuning. 5. Cross-platform: AntTweakBar is beschikbaar voor meerdere besturingssystemen. Ook zijn er pre-built binaries beschikbaar. Hierdoor vormt het geen belemmering voor het cross-platform element van Twilight. 6. Eenvoudig: Op basis van de test uitgevoerd onder “leken” kan aangenomen worden dat de drempel voor het gebruik van Twilight minder hoog is geworden. De “piloot” die tot nog toe nodig was lijkt niet meer nodig te zijn. Getoetst op deze punten is vast te stellen dat de user interface van Twilight als gevolg van dit onderzoek in positieve zin is veranderd. Op desktops zou de nieuwe interface al gebruikt kunnen worden, voor (multi-)touch schermen is echter eerst nog onderzoek naar de TUIO ondersteuning nodig.

5.2 Toekomstig onderzoek Er zijn een aantal onderwerpen die voor toekomstig onderzoek de moeite waard kunnen zijn: • Problemen met AntTweakBar: Zoals aangegeven bij de resultaten werkt het menu nog niet perfect. Het probleem ligt naar alle waarschijnlijkheid bij ATB. Het oplossen van dit probleem maakt het gebruik van Twilight minder verwarrend. • Multi-touch interactie: De multi-touch interactie in Twilight werkt deels als in andere programma’s. Echter zijn er verschillende selectie modi beschikbaar omdat niet alle functies 22

binnen een modus vielen te passen bij het ontwerp van Twilight. Een onderzoek naar multitouch interactie, om deze verschillende modi samen te brengen in een enkele modus, zou het gebruik van Twilight ten goede komen. Daarbuiten is het ook waardevol om te zorgen dat TUIO events gebruikt kunnen worden in de nieuwe interface. Als dit werkt kan de nieuwe interface zowel op desktops als op (multi-)touch schermen worden gebruikt.

23

BIJLAGE A

Functies in Twilight De tabellen in bijlage A bevatten alle in Twilight bestaande functies, opgesplitst zoals aangegeven in sectie 2.2. Bij deze functies staat aangegeven hoe deze met muis- en toetsenbord kunnen worden uitgevoerd, of deze beschikbaar zijn in de user interface en in welke functieklasse, zoals beschreven in sectie 2.2, de functie valt.

A.1 Globale commando’s of interactie met meerdere grafen Twilight bevat een aantal globale commando’s. Onderstaande commando’s hebben met name invloed op hoe de applicatie eruit ziet en welke graaf en/of knoop er actief is. Functie Auto-zoom Zoom extent Quit Change selected graphs Toggle graph active state Make a single graph active Disabling arrows Toggle use of line smoothing when drawing edges Reset edge alpha and linewidth Save screenshot Increasing node size Increasing edge alpha Increasing edge width Node manipulation

Node information

Select nodes within outline Cycle through selection modes Clear node selection

Huidig commando Z Home Escape 1, 2, .., 9 Shift + 1, 2, .., 9 Ctrl + 1, 2, .., 9 T Shift + L

Beschikbaar in menu

Functieklasse

Ja Nee Ja Ja Ja Ja Nee Nee

A D B A A

Ctrl + R Shift + S Alt + mouse left/right Ctrl + mouse left/right Ctrl + mouse up/down Right mouse button/Change view mode to “select” Right mouse button/Change view mode to “select” Ctrl + right mouse button + drag S Ctrl + S

Nee Nee Nee

D D C

Nee

C

Nee

C

Ja, via “touch mode”

B

Ja, via “touch mode”

B

Ja, via “touch mode”

B

Ja, selecteren in submenu Ja, via “selection”

B B

24

A.2 Interactie met enkele graaf De commando’s in onderstaande tabel hebben invloed op (het gedrag van) een enkele graaf. Functie Show component analysis Add graph components as new graphs Circle layout (fixed time iteration) Reingold-Tilford tree layout (fixed time iteration) Requires that a root node has been selected with RMB. Reingold-Tilford circular layout (fixed time iteration) Requires that a root node has been selected with RMB. Toggle edge direction Degree distribution Toggle edge label visibility Next edge label Previous edge label Fruchterman-Reingold layout (keeps iterating) Make layout of currently selected graph follow another graph’s layout Stop selected graph’s following of a layout Graphopt layout (keeps iterating) Toggle layout iteration Toggle node label visibility Next node label Previous node label Toggle node position pinning Random layout (fixed time iteration) Reset selected graph’s transformation Translate selected graph

Huidig commando Shift + A Ctrl + Shift + A

Beschikbaar in menu

Functieklasse

Ja Nee

A D

C

Ja

B

Ctrl + C

Ja

B

Shift + C

Ja

B

D Shift + D E Ctrl + E Ctrl + Shift + E F

Ja Ja Ja, selecteren in submenu Ja, selecteren in submenu Ja, selecteren in submenu Ja

B A A B B B

Ctrl + F + 1, 2, .., 9

Ja

B

Ctrl + F + 0

??

A

G

Ja

B

I N Ctrl + N Ctrl + Shift + N Ctrl + P R

Ja Ja, selecteren in submenu Ja, selecteren in submenu Ja, selecteren in submenu Ja Ja

A A B B A B

X

Werkt niet?

-

Shift + left mouse button

Ja (“Move pinned”)

A

25

A.3 Interactie op niveau van knopen De commando’s in onderstaande tabel tabel tonen de interactie op het niveau van individuele of groepen knopen. Functie Toggle drawing of selected/connected/path nodes and edges only Highlight incoming/outgoing edges for selected node(s) Find and highlight a path between two selected nodes Delete adjacent edges of selected nodes Selecting a node

Huidig mando H

com-

Beschikbaar in menu

Functieklasse

Ja

A

L

Ja

A

P

Ja

A

Delete

Werkt niet

-

Right mouse button/Change view mode to “select”

Ja, via “sel mode”

B

26

BIJLAGE B

AntTweakBar implementatie Na het downloaden van een pre-compiled versie van AntTweakBar (ATB) was er de uitdaging van het linken met Twilight. Omdat Twilight cross-platform is werkt het onder Windows met CMake en MinGW. Vooral CMake is allesbehalve triviaal. Na het toevoegen van ATB aan de CMakeLists file en het aanpassen van de instellingen in CMake (toevoegen van de lib en include dir van ATB) zelf is het gelukt om Twilight te compileren met link naar ATB. Zie hieronder de code die is toegevoegd aan de CMakeLists file in de root map van Twilight: # ATB IF (WIN32) SET(ATB BASE DIR ” ${CMAKE SOURCE DIR}/ windows /AntTweakBar” ) SET(ATB INCLUDE PATH ” ${ATB BASE DIR}/ i n c l u d e ” ) SET(ATB LIBRARY PATH ” $ {ATB BASE DIR}/ l i b ” ) ENDIF ( ) INCLUDE DIRECTORIES( ${ATB INCLUDE PATH} ) LINK DIRECTORIES( $ {ATB LIBRARY PATH} ) SET(CMAKE REQUIRED INCLUDES ${ATB INCLUDE PATH} ) Na het linken met ATB kunnen in Twilight de volgende regels worden toegevoegd: #i n c l u d e ”AntTweakBar . h” TwBar ∗ mainBar = TwNewBar( ” Main ” ) ; TwWindowSize ( s c r e e n w i d t h , s c r e e n h e i g h t ) ; TwDefine ( ” Main l a b e l =’Main TweakBar ’ r e f r e s h =0.5 p o s i t i o n = ’16 1 6 ’ s i z e = ’260 3 2 0 ’ a l p h a =0”); Dit geeft de gebruiker een standaard menu interface en stelt de venstergrootte van ATB gelijk aan die van Twilight. Op dit moment ligt ATB dus over Twilight heen en zal het input events die op zijn eigen onderdelen terecht komen niet doorsturen naar Twilight.

27

BIJLAGE C

Implementatie C.1 Twilight functies in AntTweakBar In de oude user interface van Twilight was slechts een beperkt aantal functies zichtbaar. In de nieuwe interface moeten alle functies van Twilight zichtbaar worden. De functies zijn op te splitsen in een aantal subgroepen: • Aan/uit (boolean) • Selectie uit een lijst (drop down met strings) • Numerieke eigenschappen (integer) • Onmiddellijke uitvoer (callback) Al deze groepen functies worden op hun eigen manier toegepast in Twilight. Hieronder een beschrijving voor elk type functie.

Aan/uit functies Aan/uit functies kunnen beschreven worden door middel van een boolean met de waarde waar of onwaar. TwAddVarRW( mainBar , ” I t e r a t e ” , TW TYPE BOOL32, &i t e r a t e l a y o u t , ” t r u e =’On’ f a l s e =’ Off ’ key =’ i ’ group =’Graph ’ ” ) ; Hier wordt er een read/write (RW) variabele toegevoegd aan de TweakBar (mainBar). Het label van deze variabele is “Iterate”, het is een boolean gekoppeld aan de hiervoor gedefinieerde boolean iterate layout. Vervolgens kunnen er nog zelf gespecificeerde waardes worden gegeven die worden weergegeven als de boolean true of false is. Ook kan bepaald worden in welke groep het menu-item zit en welke knop op het toetsenbord eventueel als snelkoppeling gebruikt kan worden. Omwille van het gebruiksgemak zijn deze toetsen niet veranderd ten opzichte van eerdere versies van Twilight.

Selectie uit een lijst Selectie uit een vooraf vastgestelde lijst vindt plaats aan de hand van een drop down menu met mogelijke waarden. TwAddVarRW( mainBar , ” Algorithm ” , a l g o r i t h m s , &mode , ” key =’ f ’ group =’Graph ’ ” ) ; In bovenstaand geval in algorithms een zelf aangemaakt type, beschreven door de volgende code: 28

TwEnumVal algorithmEnum [ ] = {

{ { { { { { {

mode mode mode mode mode mode mode

= = = = = = =

0, 1, 2, 3, 4, 5, 6,

” Graphopt ” } , ” Fruchterman−R e i n g o l d ” } , ”Random” } , ” C i r c l e ”} , ”Kamada−Kawai ” } , ” Reingold T i l f o r d ”} , ” Reingold T i l f o r d c i r c u l a r ”} ,

}; TwType a l g o r i t h m s = TwDefineEnum ( ” Algorithm ” , algorithmEnum , 7 ) ; De mogelijke opties zijn verbonden aan de integer mode, die de gekozen waarde representeert.

Numerieke eigenschappen Selectie uit een variabele lijst wordt gedaan door te scrollen met een integer. De inhoud van de lijst bevat (meestal) geen strings met namen van de optie, dus is het scrollen aan de hand van een integer (1, 2, 3, ...) een goede manier om deze lijsten te representeren. Een voorbeeld hiervan is het label dat een knoop op dat moment heeft: TwAddVarRW( mainBar , ”Edge l a b e l ” , TW TYPE INT32 , &c u r r e n t n o d e l a b e l , ”min=0 group =’Graph ’ ” ) ; Er zijn twee verschillen ten opzichte van de eerste categorie. Het eerste verschil is het type dat wordt gebruikt, een integer tegenover een boolean. Het tweede verschil is de mogelijkheid om minimum en maximum waarden in te voeren. Vanzelfsprekend is de minimumwaarde altijd nul. De maximumwaarde is variabel en kan niet op deze manier worden meegegeven aan het menu. Bij elke (poging tot) ophoging van de variabele wordt gekeken of deze niet het maximum voor de huidige graaf overschrijdt.

Onmiddellijke uivoer Functies als het maken van een screenshot of het leegmaken van de selectie vinden plaats aan de hand van buttons die callback functies aanroepen. TwAddButton ( mainBar , ” S c r e e n s h o t ” , s c r ee n s ho t C B , NULL, ” group =’ Global ’ ” ) ; Hier wordt de knop dus niet verbonden met een variabele, maar aan een vooraf vastgestelde functie. De aangeroepen functie bevat de volgende code: v o i d TW CALL s c r e e n s h o t C B ( v o i d ∗ c l i e n t D a t a ) { save screenshot this frame = true ; }

29

Bibliografie [1] Robert Belleman, http://www.bsc.es/sites/default/files/public/mare_nostrum/ visualization2011-belleman.pdf [2] http://kivy.org/#home, Mei 2014 [3] http://anttweakbar.sourceforge.net/doc/, Mei 2014 [4] http://librocket.com/, Mei 2014 [5] http://qt-project.org/, Juni 2014 [6] http://doc.qt.digia.com/qq/qq26-openglcanvas.html, Juli 2014 [7] Larry L. Constantine, “What Do Users Want?” Windows Tech Journal, 4 (12): 30-39, December 1995. http://www.foruse.com/articles/whatusers.pdf

30