Universiteit Gent Faculteit Ingenieurswetenschappen
Vakgroep Elektronica en Informatiesystemen Voorzitter: prof. dr. ir. J. Van Campenhout
Druplot: interactief genereren van grafieken in Drupal door Sylvie Detournay
Promotor: prof. dr. ir. K. De Bosschere Begeleider: ir. Sean Rul
Afstudeerwerk ingediend tot het behalen van de academische graad van Master in de toegepaste informatica Academiejaar 2006–2007
Dankwoord Vooreerst wil ik mijn promotor, Prof. dr. ir. Koen De Bosschere, bedanken voor de hulp die hij mij geboden heeft. Dankzij wie ik voortaan de opgedane kennis gedurende dit studiejaar concreet kan toepassen. Speciale dank aan mijn thesisbegeleider ir. Sean Rul voor de suggesties voor het realiseren van dit werk en ook voor het nalezen en verbetering van deze scriptie. Daarnaast wil ik ook nog alle mensen bedanken die mij rechtstreeks of onrechtstreeks geholpen hebben om deze scriptie te maken.
Toelating tot bruikleen De auteur geeft de toelating dit afstudeerwerk voor consultatie beschikbaar te stellen en delen van het afstudeerwerk te kopi¨eren voor persoonlijk gebruik. Elk ander gebruik valt onder de beperkingen van het auteursrecht, in het bijzonder met betrekking tot de verplichting de bron uitdrukkelijk te vermelden bij het aanhalen van de resultaten van dit afstudeerwerk.
Sylvie Detournay, 6 september 2007
Druplot: interactief genereren van grafieken in Drupal door Sylvie Detournay Afstudeerwerk ingediend tot het behalen van de academische graad van Master in de toegepaste informatica Academiejaar 2006–2007 Promotor: prof. dr. ir. K. De Bosschere Thesisbegeleider: ir. Sean Rul Faculteit Ingenieurswetenschappen Universiteit Gent Vakgroep: Elektronica en Informatiesystemen Voorzitter: prof. dr. ir. J. Van Campenhout Samenvatting Het doel van dit werk is een eenvoudige oplossing te brengen om grafieken vanuit databestanden te generen. Hiervoor werd een website met behulp van de drupal software gecre¨eerd. Aan de serverkant van deze website, wordt het programma gnuplot om grafieken te tekenen gebruikt. Deze website stelt twee methoden voor de aanmaak van grafieken voor: een geavanceerde methode voor de gebruikers die gnuplot kunnen gebruiken en een andere stap per stap methode die geen enkele voorkennis vereist. In de twee eerste hoofdstukken zullen het programma drupal en de gnuplot software uitgelegd worden. Vervolgens zullen de twee laatste hoofdstukken aan de bouw en het gebruik van de website besteed worden.
Trefwoorden: drupal, gnuplot, php, mysql, CMS
Inhoudsopgave Inleiding
1
1 Drupal: een content management system
3
1.1
Algemene werking van drupal . . . . . . . . . . . . . . . . . . . . . . . .
3
1.2
Ontwikkelen met drupal . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
1.2.1
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
1.2.2
Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
2 Gnuplot een programma om grafieken te generen
6
2.1
Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
2.2
Voorbeeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3 Druplot module
10
3.1
Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
3.2
Formulieren en modes . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
3.2.1
Advanced mode . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
3.2.2
Step by step mode . . . . . . . . . . . . . . . . . . . . . . . . . .
13
3.3
Resultaat, wijzigingen en verwijderen . . . . . . . . . . . . . . . . . . . .
18
3.4
Opslaan naar de databank . . . . . . . . . . . . . . . . . . . . . . . . . .
20
3.4.1
Step by step mode . . . . . . . . . . . . . . . . . . . . . . . . . .
22
De gnuplot functie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
3.5
4 Druplot node type 4.1
28
Druplot node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
Conclusie
32
Bibliografie
33
i
Lijst van tabellen 3.1
Tabel Druplot01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
3.2
Tabel druplotFiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
3.3
Tabel druplotSbSproperties . . . . . . . . . . . . . . . . . . . . . . . . .
23
3.4
Tabel druplotStepbyStep . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
ii
Lijst van figuren 2.1
Voorbeeld van een grafiek die met gnuplot wordt gebouwd. . . . . . . .
8
2.2
Voorbeeld van een grafiek die met gnuplot wordt gebouwd. . . . . . . .
9
3.1
formulier voor “advanced mode” . . . . . . . . . . . . . . . . . . . . . .
12
3.2
formulier van de step by step methode: stap 0 . . . . . . . . . . . . . . .
13
3.3
formulier van de step by step methode: stap 1 . . . . . . . . . . . . . . .
14
3.4
formulier van de step by step methode: stap 2 . . . . . . . . . . . . . . .
16
3.5
formulier van de step by step: Step i (i > 2) . . . . . . . . . . . . . . . .
17
3.6
formulier van de step by step: wijzig een stap . . . . . . . . . . . . . . .
18
3.7
“result” pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
3.8
druplot block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
3.9
Voorbeeld van een mogelijke toestand van de tabellen. . . . . . . . . . .
25
4.1
Formulier om een druplot “node” te maken. . . . . . . . . . . . . . . . .
29
4.2
View mode van een druplot “node”. . . . . . . . . . . . . . . . . . . . .
31
iii
Inleiding In de wetenschappelijke wereld, dienen wij vaak resultaten vanuit een data bestand af te beelden. Wij moeten dan programma’s zoals gnuplot gebruiken die in een console mode worden gebruikt. Een goede kennis van die programma’s is dan nuttig om mooie grafieken te kunnen bouwen. Dit werk heeft het doel de opbouw van grafieken vanaf data bestanden te vergemakkelijken via een grafische web interface. En om vervolgens die grafieken te kunnen gebruiken om artikelen op de website te kunnen opstellen.
Wij zullen twee methoden voorstellen om grafieken te schetsen. Een eerste methode, “Advanced mode” genaamd, zal bestemd zijn voor de ervaren gebruikers die een goede kennis van gnuplot hebben en die de instructies voor gnuplot goed kennen. Met deze methode, zal de gebruiker zelf zijn gnuplot instructies moeten invoeren. De andere methode van bouw is de “Step by Step” methode, hierbij zal de gebruiker stap per stap in de bouw van zijn grafiek worden gevolgd met behulp van formulieren. Hij zal geen enkele kennis van het programma gnuplot nodig hebben.
De website die voor deze scriptie wordt ontwikkeld wordt druplot genoemd en bevindt zich op het volgende adres: http://trappist.elis.ugent.be/˜sdtourna. Deze het wordt met behulp van Content Management System drupal gebouwd dat in het eerste hoofdstuk van deze scriptie zal worden uitgelegd. Deze website gebruikt eveneens het programma gnuplot in de achtergrond voor de bouw van grafieken. Een korte beschrijving van dit programma zal in het tweede hoofdstuk gegeven worden.
In het derde hoofdstuk, zullen wij de werking van de druplot website bestuderen en zullen het gebruik omstandig uitleggen. Ten slotte in het vierde en laatste hoofdstuk, zullen wij verklaren hoe een artikel met een druplot grafiek kan worden geschreven.
Alle broncode die voor deze scriptie werd ontwikkeld is beschikbaar op het volgende 1
adres http://trappist/˜sdtourna/?q=broncode.
2
Hoofdstuk 1
Drupal: een content management system Een CMS, “Content Management System”, is een webgebaseerd softwarepakket [10] dat gebruikt wordt om een website te ontwikkelen en dynamisch te updaten. Het laat verschillende personen toe om op hetzelfde artikel, project of document te werken. Een CMS maakt het mogelijk om op een eenvoudige manier artikelen of documenten toe te voegen, te wijzigen of te verwijderen.
Drupal [1] is een CMS dat een zeer groot aantal modules bezit om de publicaties, de organisatie en de toegangsrechten van een gemeenschap van gebruikers te beheren. De tekst en de andere soorten inhoud worden opgeslagen in een databank. Die informatie wordt dynamisch afgehaald, samengesteld, en voorgesteld aan een gebruiker via een Web-browser wanneer hij een pagina opvraagt.
1.1
Algemene werking van drupal
De artikelen of documenten in Drupal worden in individuele “nodes” opgeslagen. Voor sommige types van “nodes” is het mogelijk om commentaren aan een “node” (de commentaren zelf worden niet beschouwd als knopen) toe te voegen. De standaard lay-out van Drupal, bestaat uit drie kolommen. De centrumkolom wordt bedoeld als “Kolom van de inhoud”. Het toont typisch samenvattingen van de onlangs geposte “nodes”. Als er op een samenvatting van een “node” wordt geklikt, wordt de volledige inhoud
3
van de “node” met eventueel de commentaren in de centrumkolom getoond.
De linker en rechter kolommen bevatten typisch “blokken” met verwante informatie. De blokken bevatten vaak verbindingen voor het navigeren naar andere “nodes”. Voor nieuwe installaties worden het login blok en een navigatieblok dat een menu van beschikbare acties bevat eerst getoond. Verschillende menupunten kunnen in het navigatieblok worden getoond afhankelijk van de rechten van de gebruikers. De verschillende blokken kunnen al dan niet getoond worden afhankelijk van wat de gebruiker doet en welke rechten hij heeft.
1.2
Ontwikkelen met drupal
Drupal werkt op een web server [14] die PHP scripts kan uitvoeren. Drupal gebruikt de webtaal php en een databankserver die php ondersteunt [13] voor het opslaan van de gegevens. De twee belangrijkste concepten van drupal zijn de modules en de ”nodes”die in de volgende paragrafen worden verklaard.
1.2.1
Modules
Drupal is een modulair systeem dat flexibiliteit, aanpassingsvermogen, en continu¨ıteit verstrekt en die de ontwikkelaars toelaat hun eigen website aan te passen. Een module is een eenvoudig bestand dat een reeks routines bevat die in PHP worden geschreven. Wanneer gebruikt, wordt de modulecode volledig binnen de context van de website uitgevoerd. De module kan tot bijna alle functies en tot alle variabelen en structuren van het hoofdprogramma toegang hebben. Een module is niet echt verschillend van een klassiek PHP bestand: het is meer een begrip dat automatisch tot goede designprincipes en een goed ontwikkelingsmodel leidt. Het modulaire aspect sluit beter aan bij het open-source ontwikkelingsmodel, zodat verschillende mensen tegelijkertijd in parallel kunnen werken.
In drupal kunnen nieuwe eigenschappen worden uitgevoerd als modules. Extra modules kunnen worden ontwikkeld en toegevoegd aan de website. De modules kunnen door de administrator worden geactiveerd en beheerd. Een module kan nieuwe “node” types cre¨eren, nieuwe menupunten toevoegen in het navigatieblok, nieuwe blokken vormen, 4
nieuwe functionaliteiten toevoegen enz.
1.2.2
Nodes
Het basis bouwblok van Drupal is een “node”. Het woord “node” betekent niet dat het een deel van ´e´en of ander netwerk is. Integendeel, een “node” moet als `e`en stuk worden bekeken. Die “node” wordt door een lid of de administrator van de website toegevoegd. Een “node” kan deel van een forum, een blog, een boek, enz zijn. Er kunnen ook gemakkelijk nieuwe “node” types worden ontwikkeld. Elke “node” heeft een type, dat als “Content Type” wordt bedoeld. Het heeft een “Node ID”, een titel, een lichaam, een bouwdatum, ook een auteur en sommige andere eigenschappen. Het wordt samen met alle andere “nodes” in ´e´en grote tabel van de databank opgeslagen.
De leden van de website hebben ook hun eigen tabel, en sommige van hen zijn auteurs van “nodes”. Zo hebben de “nodes” relaties met die tabel. Om die relaties te vinden, wordt de databank ondervraagd met behulp van SQL.
Elke “node” kan ook een onbeperkt aantal commentaren hebben. De commentaren worden opgeslagen in een afzonderlijke tabel.
Hoe de inhoud op het scherm daarna bekeken wordt, gebeurt door een Thema verwerker, die verwerker zal de gegevens vanuit de databank halen en op het scherm zetten. De Thema verwerker is niet hetzelfde als een Thema die de lay-out van de website specificeert. De Thema verwerker is een complexe reeks functies en scripts die code interpreteert, de databank ondervraagt en de stijl van de inhoud produceert. Die verwerker maakt van de dynamisch inhoud een output in HTML.
De Thema verwerker maakt het gemakkelijk om modules te ontwikkelen. Bv, voor het schrijven van HTML formulieren moet de ontwikkelaar zich geen zorgen maken over de opmaak van de pagina van het formulier maar alleen over de functionaliteit.
Drupal is een open source content management system en kan via de offici¨ele website drupal.org [1] worden afgehaald.
5
Hoofdstuk 2
Gnuplot een programma om grafieken te generen 2.1
Inleiding
Gnuplot [2] is een programma dat grafieken van numerieke functies in twee of drie dimensies kan produceren. Het programma werkt op veel computers en besturingssystemen. Daarnaast is het mogelijk om grafieken naar het scherm te verzenden of in bestanden weg te schrijven. Grafieken kunnen onder verschillende formaten (svg, eps, gif, png, tex, enz) gegenereerd worden zodat het mogelijk is om grafieken eenvoudig in uw documenten te integreren. De interface is eenvoudig, het is een console waarin men de instructies intikt (“plot sin (x)” bijvoorbeeld).
Gnuplot maakt het mogelijk om een groot aantal wiskundige functies te tekenen vanaf parametrische vergelijkingen in twee of drie dimensies. Het is eveneens mogelijk om functies te tekenen van een databestand, het is deze functionaliteit die ons in dit werk interesseert. Het is eveneens mogelijk om een massa eigenschappen voor de grafieken te in te stellen zoals de kleur van de functies, de labels van de assen, de titels, de legende, enz. Al deze opties zijn als commandolijnen in te voeren. Gnuplot maakt het ook mogelijk om een bestand met daarin een aantal commando’s voor het tekenen van de functie uit te voeren.
6
2.2
Voorbeeld
Wij gaan nu het gebruik van gnuplot verduidelijken met behulp van een voorbeeld [3]. Wij nemen als voorbeeld de bouw van een grafiek vanaf een databestand. Beschouw vogend data bestand test.dat:
#
X
Y1
Y2
Y3
-1.0000
0.0000
0.0000
1.0000
-0.9000
0.5700
1.1769
0.7150
-0.8000
1.0800
1.4400
0.4600
-0.7000
1.5300
1.4997
0.2350
-0.6000
1.9200
1.4400
0.0400
-0.5000
2.2500
1.2990
-0.1250
-0.4000
2.5200
1.0998
-0.2600
-0.3000
2.7300
0.8585
-0.3650
-0.2000
2.8800
0.5879
-0.4400
-0.1000
2.9700
0.2985
-0.4850
0.0000
3.0000
-0.0000
-0.5000
0.1000
2.9700
-0.2985
-0.4850
0.2000
2.8800
-0.5879
-0.4400
0.3000
2.7300
-0.8585
-0.3650
0.4000
2.5200
-1.0998
-0.2600
0.5000
2.2500
-1.2990
-0.1250
0.6000
1.9200
-1.4400
0.0400
0.7000
1.5300
-1.4997
0.2350
0.8000
1.0800
-1.4400
0.4600
0.9000
0.5700
-1.1769
0.7150
1.0000
0.0000
-0.0000
1.0000
Merk op dat de kolommen van gegevens door witte ruimtes of door tabulaties worden gescheiden. De lijnen die met het karakter # beginnen worden als commentaarlijnen beschouwd en worden niet dus door gnuplot behandeld.
Met het commando dat hieronder volgt, zullen we een grafiek vanaf de gegevens van het data bestand, test.dat, plotten. gnuplot> plot "test.dat" using 1:2 with lines,\ "test.dat" using 1:3 with lines,\ "test.dat" using 1:4 with lines 7
Met dit commando, hebben we drie functies opgebouwd. De drie functies hebben dezelfde X-waarde die gerepresenteerd wordt in de eerste kolom, kolom X, van het data bestand test.dat. De Y-waarden voor de drie functies zijn de drie laatste kolommen van het bestand, respectievelijk Y1 Y2 en Y3. Om een functie te plotten, wordt het sleutelwoord plot met de naam van het bestand tussen haakjes gebruikt en om de kolom van de gegevens te specifi¨eren, wordt het sleutelwoord using gebruikt. Het resultaat van dit voorbeeld wordt in Figuur 2.1 voorgesteld.
Figuur 2.1: Voorbeeld van een grafiek die met gnuplot wordt gebouwd. Het is mogelijk de grafiek (Figuur 2.1) met het commando replot in drie commando’s te bouwen. Verder, is het ook mogelijk om opties voor de titels, labels, legend, enz toe te voegen. We zullen dezelfde figuur tekenen als in Figuur 2.1 maar dit maal met meer versiering. Het stukje code volgt hieronder: gnuplot> plot "test.dat" using 1:2 title "1" with lines; replot "test.dat" using 1:4 title "2" with fsteps lc rgb "magenta"; replot "test.dat" using 1:3 title "3" with boxes lc rgb "dark-blue"; set title "test"; set xlabel "xlab"; set ylabel "ylab"; 8
set key inside; set key width 1; set key b l box; In de drie eerste rijen, wordt het sleutelwoord title gebruikt om de titel van de functie te bepalen, with om de stijl van de tekening te specifi¨eren en lc rgb om de kleur te kiezen. De vierde rij bevat de instructies om de titel van de grafiek en de labels van de assen te bepalen. In de laatste rij, worden de eigenschappen van de legende gespecifieerd. Het resultaat van die commando’s wordt in Figuur 2.2 voorgesteld.
Figuur 2.2: Voorbeeld van een grafiek die met gnuplot wordt gebouwd.
Gnuplot heeft nog veel andere mogelijkheden maar in dit werk zullen we enkel de werking met een data bestand bestuderen. Gnuplot is copyrighted maar vrij beschikbaar, voor meer informatie zie http://www.gnuplot.info/.
9
Hoofdstuk 3
Druplot module Druplot is een drupal-website die grafieken genereert op basis van een databestand door de gebruiker gespecifieerd. Die website maakt gebruik van drupal, een content management system (CM S). Om de gewenste functionaliteit te realiseren, werd een drupal-module (druplot01 genoemd) geschreven die gnuplot als backend gebruikt. Daarvoor moet gnuplot op de server ge¨ınstalleerd zijn. De druplot-module heeft als bedoeling grafieken te construeren en die beelden op de server op te slaan. Met deze module kunnen de gebruikers ook de verschillende grafieken bekijken, verwijderen of wijzigen op een eenvoudige manier. Dan wordt een tweede module geschreven, de druplot node-type-module, die het toelaat artikelen met de gegenereerde grafieken op de website te posten. In dit hoofdstuk, zullen we de verwerking van de eerste module uitleggen en in het volgende hoofdstuk, zullen we uitleggen hoe de node-type-module de druplot-module gebruikt en hoe deze kan gebruikt worden voor het schrijven van artikelen met een grafiek. We beginnen nu met de algemene werking van de druplotmodule te verklaren. Daarna zullen we de verschillende delen van deze module uitvoerig beschrijven.
3.1
Inleiding
Met de druplot-module, druplot01, wordt de gebruiker eerst verzocht verschillende formulieren in te vullen om een grafiek te genereren. Deze gegevens worden door de module naar de database geschreven en dan worden ze in een volledig gnuplot commando vertaald. Dit gnuplot commando wordt dan aan gnuplot door een pijp (via het php-commando ”popen”) doorgegeven en een svg-bestand van de figuur wordt door 10
het grafische programma gegenereerd. Het svg-bestand is op de server opgeslagen en wordt daarna in een webpagina getoond. Vanaf deze stap, kan de gebruiker zijn grafiek wijzigen of verwijderen met behulp van formulieren.
De module werkt in vier algemene fasen: • verzamelen van de inputs die door de gebruiker worden verstrekt via de verschillende formulieren, • opslaan van die gegevens op een aangepaste wijze in de database, • opbouw van een volledig gnuplot commando op basis van deze gegevens en verwerking van dit commando door het gnuplot programma, • opslaan van het svg-bestand op de server en afbeelden van die grafiek. In de volgende sectie, zullen we de eerste van de vier stappen uitleggen. De andere fasen zullen verder worden besproken.
3.2
Formulieren en modes
Er bestaan twee verschillende manieren om een grafiek met druplot te genereren: een voor een geavanceerde gebruiker en een andere iterative methode die op een eenvoudige manier de gebruiker helpt om zijn grafiek te plotten. De eerste is “advanced” genoemd en de tweede is de “Step by Step” methode die de nodige informatie stap per stap verzamelt met behulp van formulieren.
3.2.1
Advanced mode
De “Advanced mode” is, zoals zijn naam het aangeeft, bestemt voor geavanceerde gebruikers. In deze mode, bestaat er maar ´e´en formulier om een grafiek te genereren. Dit formulier bevat vier velden : • een upload bestand veld, • een tekstveld voor de titel van de grafiek, • een tekstveld om het plot commando in te tikken, 11
Figuur 3.1: formulier voor “advanced mode” • en een tekstveld om andere commando’s in te voeren. Er zijn twee velden die door de gebruiker verplicht moeten ingevuld worden, namelijk het veld voor het databestand en dat voor het plotcommando. In het eerste veld, moet de gebruiker bladeren om zijn bestand te uploaden. In het derde veld, moet de gebruiker een correct gnuplot commando intikken. Dit commando moet beginnen met een plot en moet ook de naam van het upload bestand bevatten. De syntax van dit commando wordt niet door de module gecontroleerd omdat we veronderstellen dat de gebruiker een geavanceerde gebruiker is en dus weet wat hij doet. In het laaste veld, kan de gebruiker extra commando’s uitvoeren, bijvoorbeeld, set commando’s : set grid, enz. Die commando’s worden ook niet nagekeken voor dezelfde reden als bij het vorige veld. Door de vele mogelijkheden van gnuplot was het niet mogelijk die instructies te controleren. Na de uitvoering van die velden, zal de gebruiker een grafiek verkrijgen. Het formulier is voorgesteld in Figuur 3.1 en het resultaat in de volgende sectie op Figuur 3.7 op pagina 19.
We gaan nu, in de volgende sectie, de formulieren van de tweede methode bestuderen. 12
3.2.2
Step by step mode
De gebruiker heeft geen voorkenis van gnuplot nodig om met deze methode een grafiek te genereren. De gnuplot instructies zijn helemaal door de module aangemaakt met behulp van specifieke gegevens die aan de gebruiker met de formulieren worden gevraagd. Met zo een methode is de kans op fouten minder groot. De step by step mode werkt in verschillende fasen die elk hun eigen formulier hebben. De gebruiker moet eerst drie formulieren invullen om een eerste representatie van zijn grafiek of een deel ervan te verkrijgen. Daarna kan hij doorgaan met zijn werk, ofwel zijn grafiek verder uitbreiden (dat wil zeggen een functie toevoegen), ofwel de grafiek wijzigen. Nu zullen we die stappen verklaren.
Step 0: Specify the data file for your graph In het eerste formulier moet de gebruiker gewoon zijn data bestand uploaden met behulp van een browser. Deze stap is te vergelijken met het eerste veld van de “advanced” mode. De Figuur 3.2 toont die stap 0.
Figuur 3.2: formulier van de step by step methode: stap 0
Stap 1: stel de algemene eigenschappen van de grafiek in Deze stap is niet verplicht, de gebruiker mag gewoon doorgaan zonder dit formulier in te vullen. Dan zullen de standaardeigenschappen van gnuplot worden gebruikt. Dit formulier, zoals gerepresenteerd in Figuur 3.3, bevat drie delen: • Title, labels, tics, ...
13
Figuur 3.3: formulier van de step by step methode: stap 1
14
In het eerste veld, kan de gebruiker de titel van de grafiek specifieren. De volgende velden zijn beschikbaar voor de eigenschappen van de assen (labels, tics, logscale) te bepalen. De tics zijn de markeringen die op de assen worden aangeduid, de gebruiker kan ervan het begin en het einde specifieren en ook het increment (de spatie tussen twee marks). Tenslotte, kan de gebruiker ook een grid laten plotten dat is getekend in overeenstemming met de eigenschappen van de tics. • Legend properties : Er zijn vier mogelijkheden voor de legende: on om die laten plotten, off om die te verwijderen, de default mode om met de standaardeigenschappen te plotten en de custom mode om met zijn eigen speficaties te plotten. Als de gebruiker de custom mode kiest, wordt hij verwacht de volgende velden in te vullen: eerst moet hij kiezen voor een inside legende, binnen de grafiek of een outside legende die zal naast de grafiek geplot worden. Naast deze keuze, kan hij specif¨ıeren waar de legende precies moet zitten. Er zijn verschillende mogelijkheden om die legende te plaatsen, voor de inside mode bestaan volgende opties : top/left
top/center
top/right
center/left
center
center/right
bottom/left
bottom/center
bottom/right
en voor de outside mode : left/top
center/top
right/top
top/left
top/right
center/left
center/right
bottom/left
bottom/right left/bottom
center/bottom
right/bottom
De gebruiker kan ook een kader rond de legende laten tekenen. • More : in dit laaste veld, kan de gebruiker andere opties specifieren, die instructies worden niet door de module gecontroleerd voor dezelfde reden die in de vorige sectie (“advanced mode”) werd gegeven.
15
Step 2: plot a first function Dit is een van de belangrijkste stappen. In deze stap zal de gebruiker de eerste functie die hij wil plotten specifieren aan de hand van het data bestand. De representatie van die stap is voorgesteld in Figuur 3.4. In het eerste veld, title, kan de gebruiker de naam van zijn eerste functie specifieren, de default waarde is 1.
Figuur 3.4: formulier van de step by step methode: stap 2
De tweede lijn van velden wordt gebruikt om de functie te bepalen. Eerst moet de gebruiker een kolom voor de x-waarden uit het data bestand kiezen via het select veld, of kan hij ook een functie van deze kolom gebruiken. Om dit te realiseren moet hij het tekstveld dat naast het kolomveld staat gebruiken, in dit veld is de kolom gesymboliseerd door een C. De twee volgende velden hebben dezelfde betekenis maar zijn bestemd voor de y-waarden. De default waarden voor die velden zijn de twee eerste kolommen van het databestand, de eerste voor de x-waarden en de tweede voor de y-waarden. De laatste drie select-velden zijn beschikbaar om de grafische stijl van de functie te specifieren: de stijl van het teken, de kleur van de lijn en de stijl van de punten als men een stippellijn kiest.
16
Step i: add a function (i > 2) Na het successvol doorlopen van de eerste drie stappen, krijgt de gebruiker een eerste preview van zijn grafiek waarin de eerste functie (specifieerd in stap 2) geplot is. Onder dit beeld, zijn er drie formulieren, gerepresenteerd op Figuur 3.6. Met het eerste formulier, “Step i: add a function”, kan de gebruiker verder werken met zijn data bestand en meerdere functies bouwen. Dit formulier is identiek met dat van Stap 2. Het tweede formulier, Modify: the general propreties of the graph”, is hetzelfde formulier als dat van Stap 1. De gebruiker kan met dit formulier de eigenschapen van de grafiek aanpassen.
Figuur 3.5: formulier van de step by step: Step i (i > 2)
Het laaste formulier heeft als bedoeling de al geplotte functies te wijzigen of te verwijderen. Met dit formulier, kan de gebruiker een van de al geplote functies selecteren met het select veld, dan moet hij bevestigen of hij die functie wil wijzigen of verwijderen. Als hij voor het wijzigen van een functie heeft gekozen, krijgt hij een nieuw formulier analoog aan dat van Stap 2, getoond in Figuur 3.6.
17
Figuur 3.6: formulier van de step by step: wijzig een stap
3.3
Resultaat, wijzigingen en verwijderen
Voor de advanced mode, na het invullen van het formulier (beshreven in de vorige sectie) krijgt de gebruiker het resultaat van zijn opdracht in een webpagina, de “result” pagina, zoals voorgesteld op Figuur 3.7. Deze pagina bevat twee “tabs”: “update” en “delete”. De “delete”-tab is om de grafiek te verwijderen, na de druk op die knop, moet de gebruiker nogmaals deze bewerking bevestigen. De “update”-tab brengt de gebruiker naar een pagina die een tekst veld bevat waarin het volledige gnuplot commando geschreven staat, de gebruiker kan dit commando verbeteren of wijzigen.
Met de “step by step mode” krijgt de gebruiker al een resultaat pagina vanaf stap 3 zelfs als de grafiek nog niet helemaal volledig is geplot. Die pagina lijkt op die van Figuur 3.7 maar onder de grafiek staan de drie formulieren van Figuur 3.5 en bevat twee andere tabs: “New” om een nieuwe grafiek aan te maken en een “Delete” tab om de grafiek te verwijderen.
Vanaf het moment dat de gebruiker zijn “result” pagina krijgt wordt hiervan een link gemaakt in een druplot blok. Het druplot-blok is een blok dat verwijzigen bevat naar een “result” pagina van alle grafieken van de gebruiker. Deze “result” pagina is hetzelfde als die van de “advanced” mode op Figuur 3.7 behalve dat, in het geval van een grafiek die met de “step by step” mode wordt gebouwd, de “update” tab verwijst naar de pagina beschreven in de vorige paragraaf (dus van stap i 3.5). Dit blok is voorgesteld in Figuur 3.8. Met dit blok kan de gebruiker gemakkelijk al zijn grafieken beheren. 18
Figuur 3.7: “result” pagina
19
Figuur 3.8: druplot block In de volgende sectie, zullen we zien hoe de gegevens die door de gebruiker aan de druplot-module aangegeven werden in databank zijn opgeslagen.
3.4
Opslaan naar de databank
Om de grafieken later te kunnen beheren en gebruiken, bv in een artikel (zie het volgende hoofdstuk), slaat de druplot-module een aantal gegevens over die beelden op in de databank. De druplot-module bevat verschillende tabellen die automatisch worden opgebouwd tijdens de installatie van de module. Ze zijn opgeslagen in de databank van drupal zelf.
De druplot-module is gebaseerd op twee algemene tabellen druplot01 en druplotFiles die onafhankelijk van de constructiemode zijn. Die twee tabellen worden in de volgende paragrafen uitgelegd. druplot01 Druplot01 is de hoofdtabel van de druplot-module, voor elke grafiek correspondeert een unieke record (of rij) van deze tabel. Een schema is ervan voorgesteld in de Tabel 3.1. De attributen worden als volgt vastgesteld: • id_order is de primaire sleutel [11] en dus de unieke referentie naar een bepaald record en de corresponderende grafiek. Dit attribuut wordt in het hele programma door de druplot-module als hoofdreferentie voor de grafieken gebruikt. • title is ook een referentie om een grafiek te herkennen maar dit keer voor de gebruiker. Ze wordt bv gebruikt in het druplot blok om naar de grafiek te verwijzen. 20
Field
Type
id_order
int(10)
title
varchar(32)
dru_mode
varchar(32)
commandoStr
text
fres
varchar(128)
id_user_com
int(10)
Tabel 3.1: Tabel Druplot01 • dru_mode is de mode, ofwel “advanced” ofwel “step by step”, waarmee de grafiek wordt opgebouwd (zie sectie 3.2 in verband met de formulieren). • commandoStr bevat ofwel, voor de “advanced mode”, het volledige gnuplot commando ofwel, voor de “step by step” mode, de extra set commando‘s (zie “more” text veld in de formulier op Figuur 3.3). • fres is de naam van het svg bestand van de grafiek. Deze naam is uniek en om cacheproblemen te vermijden wordt de bestandsnaam bij iedere wijziging van de grafiek veranderd. Die naam wordt op de volgende manier gevormd: willekeurignummer _result.svg. Dit bestand is in de “files” map van drupal opgeslagen. • id_user_com is een vreemde sleutel [11] die verwijst naar de user tabel van drupal. Deze tabel wordt aan elke nieuw instelling van een grafiek aangevuld. Dit wil zeggen telkens als de gebruiker ofwel het “advanced” mode formulier heeft ingevuld en doorgestuurd ofwel voor de tweede stap in de “step by step” mode. Telkens als de grafiek wordt aangepast wordt het tegelijkertijd de correspondeerde record aangepast.
druplotFiles De volgende tabel is de druplotFiles die informatie bevat over de databestanden. Voor elke grafiek correspondeert een databestand en dus een rij van deze tabel. Het schema van deze tabel wordt hieronder (Tabel 3.2) beschreven:
21
Field
Type
id_file
int(10)
filename
varchar(32)
nbCol
int(10)
id_oid
int(10)
Tabel 3.2: Tabel druplotFiles
waar de attributen de volgende betekenis hebben: • id_file is de primaire sleutel van de tabel, het is gebruikt om de naam van de data die op de server zal gebruik worden te bepalen. • filename is de echte naam van het databestand voordat het op de server is geupload. Dus de naam van het bestand op de computer van de gebruiker. • nbCol is het aantal kolommen dat het bestand bevat, dit attribuut wordt bv door de druplot-module gebruikt om het select veld in de formulier van stap 2 te bepalen (zie Figuur 3.4). • id_oid is een vreemde sleutel die verwijst naar een rij van de druplot01 tabel en dus naar de corresponderende grafiek van het data bestand. De data bestanden zijn door de gebruikers geupload met behulp van een formulier (zie sectie 3.2 van deze formulieren). Het data bestand is eerst door drupal in een tijdelijke map opgeslagen. Voor het wegschrijven naar de server, wordt eerst een unieke bestandsnaam toegekend. Deze wordt op de volgende manier gevormd: id_file _ filename. Dan wordt het bestand met die naam op de server in de “files” map van drupal opgeslagen. Die naam is als titel gebruikt en in de druplot01 tabel gebruiker (zie vorige paragraaf).
3.4.1
Step by step mode
Het wijzigen van een gnuplot grafiek is vaak moeilijk en soms niet mogelijk. Daarom zjin de commando’s in verschillende delen opgeslagen om op een eenvoudige manier het volledige plotcommando te wijzigen. Voor alle wijzigingen wordt er een nieuwe grafiek gebouwd met een nieuw gnuplot commando.
22
Field
Type
id_pr
int(10)
ord_id
int(10)
title
varchar(128)
xlabel
varchar(32)
xlog
varchar(64)
xtic
varchar(64)
ylabel
varchar(32)
ylog
varchar(64)
ytic
varchar(64)
grid
varchar(64)
legend
varchar(32)
in_out
varchar(32)
position
varchar(32)
box
varchar(32)
Tabel 3.3: Tabel druplotSbSproperties Er zijn twee tabellen voorzien voor het beheren van de “Step by Step” methode. Een, druplotSbSproperties genoemd, voor de eigenschappen van een grafiek te onthouden en een tweede, druplotStepbyStep genoemd, om de functies van een grafiek te bouwen en te beheren.
druplotSbSproperties Het schema van de druplotSbSproperties tabel is voorgesteld in Tabel 3.3, waar de attributen corresponderen met de velden van het formulier van stap 1 (zie Figuur 3.3). De attributen zijn op de volgende manier bepaald: • id_pr is de primaire sleutel. • ord_id is de vreemde sleutel die verwijst naar de rij van de corresponderende grafiek in de druplot01 tabel. • title, xlabel, xlog, enz zijn de attributen waarin de velden van het formulier van Figuur 3.3 (behalve het “more” veld) zijn opgeslagen.
23
Field
Type
id_sbs
int(10)
ord_id
int(10)
step
int(10)
title
varchar(32)
line_type
varchar(32)
line_color
varchar(32)
point_type
int(10)
col_using
varchar(128)
col_using
varchar(128)
Tabel 3.4: Tabel druplotStepbyStep druplotStepbyStep De tweede tabel bevat al de informatie in verband met de functies van de grafieken. Een lijn van deze tabel representeert een functie van een grafiek. Het schema van deze tabel wordt in Tabel 3.4 voorgesteld, waar de attributen op de volgende manier bepaald worden: • id_sbs is de primaire sleutel van het tabel. • ord_id is een vreemde sleutel die verwijst naar de rij van de corresponderende grafiek in de druplot01 tabel. • step is de nummer van de stap wanneer de functie wordt gebouwd, een functie wordt toegekend door ord_id de grafiek waartoe hij behoort en step. • title, line_type, enz zijn de attributen waarin de velden van het formulier in verband met de functies en dus de van de stap i, i > 1, (zie figuur 3.3 of 3.6) zijn opgeslagen. Aan een grafiek, dus een rij van de druplot01 tabel, correspondeert een of meer rijen van de druplotStepbyStep tabel, die de functies van deze grafiek beschrijven. Elke keer dat een nieuwe functie toegevoegd wordt (zie stap i, i ≥ 2, op figuur 3.4), wordt een record voor deze stap in het druplotStepbyStep tabel geplaatst. Bijvoorbeeld, beschouwen we Figuur 3.9, voor de eerste grafiek (eerste rij van het druplot01 tabel), worden in het begin twee functies opgebouwd (de twee eerste rijen van druplotStepbyStep tabel). Later, wordt deze grafiek door de gebruiker gewijzigd en een nieuwe functie wordt toegevoegd (achtste rij van de druplotStepbyStep 24
tabel).
druplotStepbyStep druplot01
........................
Figuur 3.9: Voorbeeld van een mogelijke toestand van de tabellen. Als de gebruiker een functie wil wijzigen met behulp van het formulier op Figuur 3.6, gaat de module de gegevens van de corresponderende stap halen en in het formulier tonen zodat de gebruiker gemakkelijk zijn grafiek kan wijzigen.
3.5
De gnuplot functie
De gnuplot functie krijgt als enige parameter het attribuut id_order van de grafiek die hij zal moeten genereren. Met deze informatie, gaat de gnuplot functie alle gegevens over deze grafiek in de verschillende tabellen halen die in de vorige sectie werden uitgelegd. Om dit te verwezenlijken, gebruikt het programma het attribuut id_order, de vreemde sleutels van de tabellen of de primaire sleutel voor tabel druplot01.
Eerst wordt de naam van het resultaat bestand bepaald en in de druplot01 tabel opgeslagen. De grafiek zal in een svg bestand, in de default map van druplot, worden beschermd.
Het programma zal dan een lange string vormen die door gnuplot zal worden uitgevoerd. Deze string zal altijd beginnen met het commando: 25
"cd \"".file_directory_path()."/\"; \n"; waar file_directory_path() de default map is van drupal waarin de uploaded bestanden zijn opgeslagen. Deze instructie is nodig om gnuplot in de goede map te plaatsen zodat hij de databestanden kan gebruiken en de grafiek kan opslaan. Het symbool \n volgt alle instructies die aan gnuplot worden gegeven. Dit correspondeert met een “enter” en als er door gnuplot een fout in een instructie wordt ontdekt, wordt deze instructie weggelaten en alle andere instructies worden gewoon uitgevoerd.
De lange string eindigt altijd met de volgende instructie: "set term svg; \n set output \"".$res."\"; \n replot; \n " waar $res is de naam van het resultaatbestand. Die instructie zet het formaat (”svg”) van het resultaatbestand en bepaalt het outputbestand voor gnuplot.
Tussen die vorige instructies worden de instructies voor de opbouw van de grafiek ingevoegd. Die gegevens zijn op verschillende manieren opgeslagen afhankelijk van de methode: ofwel de “advanced mode” ofwel de “step by step” mode. Die informatie krijgt het gnuplotfunctie door het attribuut dru_mode van de druplot01 tabel.
Als het voor een “advanced” mode is dan zal het programma de instructies die de gebruiker heeft gegeven uitvoeren.
Die instructies bevinden zich in het attribuut
commandoStr in druplot01 tabel.
Als de grafiek met een “step by step” mode moet worden geconstrueed, zal de gnuplot functie de instructies opbouwen vanaf de gegevens die in de databank liggen. De gnuplot functie zal eerst de rijen van het druplotStepbyStep tabel die aan de grafiek behoren n per n doorlopen. Voor elke functie of stap, zal het programma een instructie vormen met de informatie van de corresponderende rij. Ten slotte, zal het programma ook een instructie opbouwen voor de eigenschappen van de grafiek die in een rij van de druplotSbSpropreties tabel zijn opgeslagen. Al die instructies worden aan de grote commandostring toegevoegd.
Ten slotte, wanneer het volledige commando in de lange string werd opgeslagen, wordt deze lange instructie via het php-commando “popen” aan gnuplot doorgestuurd. Die instructies worden op de volgende manier uitgevoerd: 26
$gnuplot = popen(variable_get(’gnuplot’,’gnuplot’),’w’); fputs($gnuplot,$cmd); pclose($gnuplot); waar $cmd de lange instructie bevat.
De grafieken zijn eerst voor de eerste “result” pagina gebouwd, na stap 2 voor de “step by step” methode en na het invullen van het eerste formulier voor de “advanced” mode (zie sectie 3.3). Dan voor alle wijzigen, worden de grafieken van het begin opnieuw gebouwd.
Die grafieken kunnen later in artikelen gebruikt worden. Wij gaan deze functionaliteit in de volgende hoofdstuk bestuderen.
27
Hoofdstuk 4
Druplot node type In het eerste hoofdstuk, hebben we de notie van “node” in drupal bekeken. Nu zullen we de “node” type voor druplot verklaren. Dit “node” type werkt op basis van een module. Met dit “node” type, kunnen de gebruikers artikelen of nodes vormen met een grafiek die met de druplot module wordt opgebouwd (zie vorige hoofdstuk).
4.1
Druplot node
Om een inhoud te kunnen invoeren in drupal, moet de schrijver lid van de website zijn. Een lid heeft toegang naar het drupal navigatieblok; dit blok bevindt zich in de linkse kolom van de pagina en heeft als titel de naam van de gebruiker. Om een druplot node te maken, moet de gebruiker op het onderwerp druplot node in het menu create content van het navigatie blok klikken. Die link brengt de gebruiker naar een formulier in Figuur 4.1 wordt voorgesteld.
In dat formulier, wordt de gebruiker verplicht de twee eerste velden in te vullen: de titel van de node en de grafiek voor dit artikel. Met het select veld, kan de gebruiker n van de grafieken kiezen die hij met de druplotmodule heeft aangemaakt. Als hij zijn grafiek nog niet heeft opgebouwd, kan hij de knop create a graph die zich onder het selectveld bevindt gebruiken. Die knop brengt de gebruiker naar het eerste formulier van de step by step methode.
De volgende velden zijn niet verplicht, in de eerste van die velden, in de body, kan de gebruiker een artikel in verband met zijn grafiek schrijven. De velden die daarop 28
Figuur 4.1: Formulier om een druplot “node” te maken.
29
volgen zijn de gewone velden voor de drupal “nodes”. We zullen sommige van die velden hieronder beschreven: • Input format : Deze eerste optie wordt gebruikt om het formaat te kiezen waarin het artikel (de body) zal geschreven worden. Er zijn drie formaten: Filtered HTML, PHP code, en Full HTML. De eerste maakt het mogelijk om het artikel in HTML te schrijven, maar met bepaalde beperkingen, dat wil zeggen dat sommige HTML tags niet kunnen gebruikt worden. • Menu settings : Deze opties worden gebruikt om een link voor het artikel in een van de menus van de website toe te voegen. • Publishing options : Met de optie Published zal het artikel op het website kunnen worden bekeken. Met Promoted to front page zal er een link en een samenvatting van het artikel op de home pagina worden gepubliceerd. De optie Sticky at top of lists zal bepalen of het artikel al dan niet bovenaan de lijst van alle artikelen zal staan. Als Create new revision wordt gekozen, zal het voor alle wijzigingen van het artikel, een nieuw artikel worden gecre¨eerd. Na het invullen van het formulier, kan de gebruiker zijn node bekijken, dan is de node in de zogenaamde “view” tab. De “view” mode wordt in Figuur 4.2 voorgesteld. Met de edit tab, krijgt de gebruiker hetzelfde formulier als in Figuur 4.1 om het artikel te kunnen wijzigen.
30
Figuur 4.2: View mode van een druplot “node”.
31
Conclusie Wij hebben, in dit werk, een website voor het aanmaaken van grafieken vanaf data bestanden gebouwd. Hiertoe werd het CMS drupal die in het eerste hoofdstuk werd bestudeerd en het programma gnuplot die in hoofdstuk twee werd besproken gebruikt.
Met de methode step by step die in hoofdstuk drie werd uitgelegd, is het mogelijk om op een gemakkelijke wijze grafieken te cre¨eren. Met deze methode wordt de gebruiker voor de bouw van zijn grafiek stap voor stap geholpen. Men heeft geen enkele voorkennis van gnuplot nodig, het is voldoende om hem de instructies die op het scherm worden gegeven te volgen. Deze methode maakt het mogelijk om op een gecontroleerde manier verschillende opties te selecteren, zoals gezien in hoofdstuk drie. De gebruiker moet hierbij niet bekommeren over de syntax waardoor de kans op fouten tot een minimum beperkt wordt.
Er bestaat ook een tweede manier om met druplot grafieken te bouwen: de “advanced” mode. Deze methode is bestemd voor de geavanceerde gebruikers, dat wil zeggen zij die een goede kennis van het programma en dus van de gnuplot instructies hebben. Met deze methode is het eveneens mogelijk om de volledige functionaliteit van gnuplot te gebruiken. De instructies worden door de gebruiker ingevoerd en dus alle commando’s van gnuplot zijn beschikbaar. Aangezien er veel commando’s in gnuplot bestaan, zijn die niet allemaal via de step by step methode beschikbaar. Niettemin is het mogelijk om extra instructies in het more veld van de step by step methode toe te voegen (zie formulier Figuur 3.3). Maar door de vele mogelijkheden van gnuplot is het prachtisch niet haalbaar om die instructies te controleren.
32
Bibliografie [1] http://www.drupal.org/. [2] http://www.gnuplot.info/. [3] http://t16web.lanl.gov/Kawano/gnuplot/index-e.html. [4] http://www.php.net/. [5] http://www.mysql.com/. [6] http://www.w3schools.com/. [7] http://www.developpez.com/. [8] http://trappist.elis.ugent.be/˜ sdtourna/?q=broncode, (source code of druplot). [9] http://trappist.elis.ugent.be/˜ sdtourna (druplot). [10] Peter De Neve and Rick Van de Walle. Internettoepassingen. Syllabus, Multim´edia Lab, Universiteit Gent, 2006-2007. [11] Guy De Tr´e. Principes van databanken. Pearson Education Benelux, Amsterdam, 2007. [12] Jean Engels. Php 5. Eyrolles, 2004. [13] Jay Greenspan and Brad Bulger. MySQL/PHP Database Applicaties. ACADEMIC PRESS, 2001. [14] James F. Kurose and Keith Ross. Computer networking. Pearson Addison Wesley, 2005.
33
