Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro...

47
UNIVERZA V LJUBLJANI PEDAGO ˇ SKA FAKULTETA Luka Taras Koroˇ sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016

Transcript of Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro...

Page 1: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

UNIVERZA V LJUBLJANIPEDAGOSKA FAKULTETA

Luka Taras Korosec

ANALIZA IN NADGRADNJA

APLIKACIJE ZA DELO Z GRAFI

DIPLOMSKO DELO

LJUBLJANA, 2016

Page 2: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.
Page 3: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

UNIVERZA V LJUBLJANI

PEDAGOSKA FAKULTETAUNIVERZITETNI STUDIJSKI PROGRAM 1. STOPNJE

DVOPREDMETNI UCITELJ

Luka Taras Korosec

Mentor: doc. dr. Primoz SparlSomentor: as. Matej Zapusek

ANALIZA IN NADGRADNJA

APLIKACIJE ZA DELO Z GRAFI

DIPLOMSKO DELO

LJUBLJANA, 2016

Page 4: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.
Page 5: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Povzetek

Ob svojem studiju na Pedagoski fakulteti Univerze v Ljubljani sem se ob obiskovanju predme-

tov Teorija grafov, Diskretna matematika in Racunalniska matematika spoznal s spletno ap-

likacijo z0diak za delo z grafi. Aplikacijo, ki vsebuje zajeten nabor funkcij, je v okviru svojega

diplomskega dela leta 2013 razvil Luka Jurkovic. Z njo lahko ustvarimo vizualno reprezentacijo

enostavnih neusmerjenih grafov in nato na prikazanem grafu uporabljamo razlicna orodja.

Tekom vecletne uporabe aplikacije sem spoznal, da ima le-ta dolocene pomanjkljivosti in da bi

bile dobrodosle kaksne dodatne funkcije, zato sem se odlocil, da v okviru svojega diplomskega dela

analiziram aplikacijo in njeno uporabnost ter jo nadgradim z novimi funkcijami in funkcionalnos-

tmi. Analizo uporabnosti aplikacije sem opravil s pomocjo anketnega vprasalnika in sicer med

studenti, ki so aplikacijo redno uporabljali pri svojem studiju. Glede na rezultate analize odgov-

orov ter tehnicno in algoritemsko zahtevnost implementacije, sem izluscil tiste funkcionalnosti, ki

sem jih lahko dodal v aplikacijo. Le-ta sedaj med drugim poleg obstojecih funkcionalnosti pod-

pira tudi izracun in prikaz ozine ter premera grafa, prikaz zaporedja stopenj grafa in funkcije, s

katerimi si lahko pomagamo pri iskanju Hamiltonovega cikla. V diplomskem delu je razlozeno

njihovo delovanje, na konkretnih primerih pa je prikazan tudi primer uporabe funkcij.

Kljucne besede: graf, aplikacija z0diak, manipulacija grafa, premer, ozina, Hamiltonov cikel

MSC klasifikacija (2010): 05C85, 05C62

Page 6: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Abstract

During my studies at the Faculty of Education, University of Ljubljana, I familiarized myself

with a web application for graph manipulation called z0diak while I was attending courses on

Graph Theory, Discrete Mathematics and Computer Mathematics. This application, which has

a substantial set of functionalities, was developed by Luka Jurkovic for his diploma thesis in

2013. With it we can create visual representations of simple undirected graphs and then use a

multitude of tools on the displayed graph.

In my years of using this application I realized that it has a few shortcomings and that I

would appreciate new additional features. That is why I decided to analyze the application

and its usability and upgrade it with new features and functionalities for my diploma thesis.

Using a questionnaire and with the help of students who used the application regularly in their

studies, the analysis of usefulness of the application has been carried out. According to the

results of the analysis of student responses as well as technical and algorithmic complexities

of the implementation, I discerned those features that could be added to the application with

a reasonable amount of effort and added them. Apart from the existing functionalities the

application now also supports the calculation and display of the girth and diameter of the graph,

calculation of the graph degree sequence and functions which can help in determining whether

a graph contains a Hamiltonian cycle or not. The thesis explains how these functions were

implemented and also presents a demonstration of their usage on specific examples.

Key words: graph, application z0diak, graph manipulation, girth, diameter, Hamiltonian cycle

MSC clasification (2010): 05C85, 05C62

Page 7: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Kazalo

Uvod 1

1 Opis aplikacije z0diak 3

1.1 Izgled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.1.1 Platno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.1.2 Meni in gumbi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.1.3 Okno za izpisovanje navodil in povratnih informacij . . . . . . . . . . . . 6

2 Zbiranje in analiza podatkov 8

2.1 Priprava raziskave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.2 Zbiranje in analiza podatkov . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2.1 Zbiranje podatkov . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2.2 Analiza podatkov . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.3 Izbira novih funkcionalnosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.1 Razveljavitev zadnje akcije . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.2 Izracun in prikaz ozine ter premera grafa . . . . . . . . . . . . . . . . . . 14

2.3.3 Izpis zaporedja stopenj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.3.4 Preverjanje zadostnih pogojev za obstoj Hamiltonovega cikla . . . . . . . 16

2.3.5 Izvoz slike grafa v slikovni obliki . . . . . . . . . . . . . . . . . . . . . . . 17

3 Razvoj novih funkcionalnosti 19

3.1 Podatkovna struktura aplikacije in dodajanje novih elementov na platno . . . . . 19

Page 8: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

3.1.1 Dodajanje novega vozlisca . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.1.2 Dodajanje nove povezave . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.2 Izpis zaporedja stopenj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.2.1 Algoritem za izracun zaporedja stopenj . . . . . . . . . . . . . . . . . . . 21

3.2.2 Implementacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.3 Izracun in prikaz ozine grafa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.3.1 Algoritem za izracun ozine grafa . . . . . . . . . . . . . . . . . . . . . . . 22

3.3.2 Implementacija algoritma za izracun ozine grafa . . . . . . . . . . . . . . 22

3.4 Izracun in prikaz premera grafa . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.4.1 Algoritem za izracun premera grafa . . . . . . . . . . . . . . . . . . . . . 23

3.4.2 Implementacija algoritma za izracun in prikaz premera grafa . . . . . . . 23

3.5 Preverjanje zadostnih pogojev za obstoj Hamiltonovega cikla . . . . . . . . . . . 25

3.5.1 Algoritem za preverjanje pogojev izreka Posa . . . . . . . . . . . . . . . . 25

3.5.2 Algoritem za preverjanje pogojev Diracovega izreka . . . . . . . . . . . . 26

3.5.3 Algoritem za preverjanje pogojev Orejevega izreka . . . . . . . . . . . . . 26

3.6 Izvoz grafa v slikovni obliki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.7 Ilustracija uporabe novih funkcionalnosti . . . . . . . . . . . . . . . . . . . . . . . 27

3.7.1 Iskanje grafa ki vsebuje Hamiltonov cikel, vendar ne zadosca pogojem

izreka Diraca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.7.2 Iskanje kletk s podano ozino in stopnjo grafa . . . . . . . . . . . . . . . . 28

3.7.3 Iskanje najvecjega grafa s podano stopnjo in premerom . . . . . . . . . . 30

Zakljucek 31

Page 9: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Slike

1.1 Logotip aplikacije z0diak. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 Aplikacija z0diak, kot izgleda takoj po zagonu. . . . . . . . . . . . . . . . . . . . 4

1.3 Poln graf na petih vozliscih na platnu znotraj aplikacije z0diak. . . . . . . . . . . 4

1.4 Meni in gumbi, ki se nahajajo ob levi strani platna. . . . . . . . . . . . . . . . . . 5

2.1 Primeri stirih manjsih kletk. Od leve proti desni: Petersenov graf, Heawoodov

graf, McGeejev graf in Tutte-Coxeterjev graf. . . . . . . . . . . . . . . . . . . . . 14

2.2 Dva neizomorfna grafa z istim zaporedjem stopenj (3, 2, 2, 2, 2, 1, 1, 1). . . . . . . 16

2.3 Graf, ki ne zadosca pogojem Diracovega in Orejevega izreka, izpolnjuje pa pogoje

izreka Posa ([13], str. 52). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.1 Slika grafa, ki je bila izvozena s pomocjo funkcije za izvoz grafa v slikovni obliki. 28

3.2 Graf, ki zadosca pogojem izrekov Posa in Oreja, ne pa tudi pogojem izreka Diraca. 28

3.3 Graf po tem ko smo 5-ciklu dodali dve vozlisci in ju povezali z dvema obstojecima

vozliscema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.4 Graf po tem ko smo vsakem izmed vozlisc 2, 3 in 4 dodali se po dva soseda. Z

rdeco je predstavljena ena izmed razdalj dolzine 4, ki predstavlja premer grafa. . 30

Page 10: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.
Page 11: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Uvod

Stevilo spletnih aplikacij je v zadnjih letih mocno naraslo. Ob vsakdanji rabi racunalnika

cedalje pogosteje uporabljamo spletne brskalnike in ob njihovi uporabi prezivimo veliko casa, pa

naj bo to zaradi dela ali zabave. Odlicen primer je Microsoftov urejevalnik besedila Word, ki so

ga najprej razvili kot program za operacijski sistem Windows, sedaj pa je ze na voljo na spletu

kot spletna aplikacija. Zato razumem odlocitev avtorja Luka Jurkovica, da je v okviru svojega

diplomskega dela [4] razvil spletno aplikacijo z0diak. Ob pisanju diplomskega dela je pridobil

novo znanje na tem podrocju, kar je bil eden izmed njegovih glavnih namenov razvoja aplikacije.

Zelel si je namrec pridobiti izkusnje z oznacevalnim jezikom HTML5 in pri tem ustvariti nekaj

uporabnega za njegove naslednike na Pedagoski fakulteti. Aplikacija z0diak je namrec namenjena

delu z grafi in je za uporabo brezplacna. Vsak student Pedagoske fakultete si jo lahko prenese na

svoj racunalnik in jo nato uporablja brez internetne povezave. Prav tako aplikacije ni potrebno

namestiti na osebni racunalnik. Vse kar je potrebno storiti je, da jo shranimo na trdi disk,

odpremo glavno stran in ze smo pripravljeni na delo z grafi.

Sam sem aplikacijo z0diak spoznal pri predmetu Teorija grafov, kjer smo jo uporabljali za

interaktivno vizualizacijo obravnavanih grafov. Med predavanji jo je profesor pogosto uporabljal,

da nam je hitro prikazal kaksen primer uporabe trenutno obravnavanih rezultatov na konkretnih

primerih grafov. Aplikacija z0diak je mnogim studentom pomagala pri ucenju in resevanju

domacih nalog, saj podpira stevilna orodja za delo z grafi, kot so izris pripadnikov podprtih

druzin grafov, razdaljne particije grafa in pomoc pri iskanju Hamiltonove poti oziroma cikla, ce

nastejem samo nekaj funkcij.

Glavni cilj tega diplomskega dela je analiza obstojecih orodij in funkcionalnosti aplikacije

z0diak in zasnova ter izdelava vec novih funkcionalnosti. Za njegovo razumevanje je potrebno

osnovno znanje racunalnistva in teorije grafov. Bralcu, ki bi zelel ponoviti osnovne pojme s

teh dveh podrocij, v branje predlagam diplomsko delo Luka Jurkovica [4], v katerem je postavil

temelje aplikacije, ki jo sedaj mi analiziramo in nadgrajujemo. Vsebuje tako osnove teorije grafov,

kot tudi osnove HTML5 in knjiznice Paper.js. V nadaljevanju se bomo drzali terminologije,

vpeljane v [4].

V 1. poglavju tega diplomskega dela na kratko opisemo delovanje aplikacije in njene glavne

funkcionalnosti. Tu se osredotocimo predvsem na plat aplikacije, ki je vidna koncnemu uporab-

niku. Namen poglavja je seznanitev z aplikacijo in njenimi funkcijami.

V 2. poglavju predstavimo nacin zbiranja podatkov o mnenju studentov glede aplikacije

z0diak, predstavimo odgovore studentov in jih statisticno analiziramo. Glede na izsledke raziskave

sem izbral par najbolj zazelenih funkcionalnosti s strani uporabnikov, t.j. studentov, in nekaj

tistih funkcij, za katere menim, da bi dobro dopolnjevale ostale dele programa. Vseh zazelenih

funkcionalnosti se seveda v casu, ki je na voljo za izvedbo diplomskega dela ne da razviti, zato se

1

Page 12: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

osredotocimo le na nekatere izmed njih. Opisali bomo teoreticno podlago za vsako obravnavano

funkcijo, naredili analizo moznosti implementacije v aplikacijo in jih nato, ce bo implementacija

izvedljiva, dodali v obstojeco resitev.

3. poglavje je namenjeno sami implementaciji izbranih novih funkcionalnosti. Tu predstavimo

algoritme, ki so potrebni za implementacijo dolocene funkcionalnsti. Nekateri algoritmi so seveda

bolj zahtevni kot drugi, zato nekaterim funkcijam posvetimo vec pozornosti kot drugim. Opisemo

tudi tezave, s katerimi sem se soocal, in prikazemo resitve za podane ali nastale probleme. Na

koncu tega poglavja si bomo ogledali vec primerov uporabe razvitih funkcionalnosti na konkretnih

problemih.

2

Page 13: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Poglavje 1

Opis aplikacije z0diak

Pri vsakem produktu ali spletni strani nam obicajno najprej padeta v oko ime in logotip. Ime

spletne aplikacije, ki jo bom analiziral, je z0diak. Avtor aplikacije v svojem diplomskem delu

navaja, da si je to ime izbral zato, ker zodiakalna znamenja na nek nacin izgledajo kot grafi [4].

Zvezde predstavljajo vozlisca v grafu, medtem ko povezave med zvezdami predstavljajo povezave

med vozlisci v grafu. Kot lahko vidite na sliki 1.1, sta tako ime, kot tudi logotip odlicno izbrana

glede na namen uporabe aplikacije in kazeta na izvirnost pri izdelavi aplikacije.

Slika 1.1: Logotip aplikacije z0diak.

1.1 Izgled

Na sliki 1.2 je prikazan izgled aplikacije takoj po zagonu. Vizualno in funkcijsko je razdeljena

na tri dele.

• Platno za izrisovanje grafov (siv pravokotnik, ki zavzema vecino prostora na ekranu).

• Meni in gumbi, z naborom funkcij za delo z grafi (zavzemajo levi del ekrana).

• Okno za izpisovanje navodil in povratnih informacij (vidno na spodnjem delu ekrana pod

platnom).

3

Page 14: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Slika 1.2: Aplikacija z0diak, kot izgleda takoj po zagonu.

Slika 1.3: Poln graf na petih vozliscih na platnu znotraj aplikacije z0diak.

1.1.1 Platno

Na sliki 1.3 se nahaja avtomatsko izrisan graf, kot je prikazan v aplikaciji. Opazimo lahko,

da so vozlisca ostevilcena s stevili od 1 do 5 in da so obarvana z enotno barvo. Vozliscem

lahko dodajamo povezave, a na polnem grafu tega ne moremo storiti, saj aplikacija ne podpira

veckratnih povezav med dvema vozliscema. Aplikacija prav tako ne podpira zank, to so povezave

vozlisca samega s seboj. Podprti so torej tako imenovani enostavni grafi. Lahko pa obstojeco

povezavo odstranimo s tiscanjem tipke dvigalke (angl. shift) in klikom na povezavo, ki jo zelimo

odstraniti (na enak nacin lahko odstranimo tudi vozlisca).

1.1.2 Meni in gumbi

Meni je del aplikacije, ki vsebuje gumbe, s katerimi lahko dostopamo do velike vecine funkcij

aplikacije. Poudariti je treba, da zgornje stiri moznosti v meniju vsebujejo tudi podmenije. Na

sliki 1.4 je prikazan izgled menija.

4

Page 15: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Slika 1.4: Meni in gumbi, ki se nahajajo ob levi strani platna.

Vse funkcije, ki se nahajajo v meniju, skupaj z njihovimi kratkimi opisi delovanja, nastete od

zgoraj navzdol glede na sliko 1.4, so:

• Nalozi/shrani graf

• Shrani graf: Trenutno prikazani graf na platnu shrani v tekstovno datoteko za kas-

nejso rabo.

• Nalozi graf: Iz podane tekstovne datoteke prebere podatke za izris shranjenega grafa

na platno.

• Osnovne druzine grafov

• Izrisi cikel: Izrise cikel dolzine, ki jo poda uporabnik.

• Izrisi cirkulant: Izrise cirkulant s parametri, ki jih poda uporabnik.

• Izrisi poln graf: Izrise poln graf na podanem stevilu vozlisc.

• Izrisi pot: Izrise pot podane dolzine.

• Izrisi GPG: Izrise posploseni Petersenov graf glede na podane parametre.

• Ostala orodja

• Dvodelnost: Orodje, ki nam pove, ali je trenutno izrisani graf dvodelen ali ne.

• Oznake (on/off): Kot je razvidno ze iz imena funkcije, skrije ali ponovno prikaze

oznake na vozliscih.

5

Page 16: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

• Premesaj: Nakljucno razporedi vozlisca po platnu (povezave med vozlisci ostanejo

nespremenjene).

• Priblizaj/odmakni pogled

• Priblizaj: Pribliza pogled na platno.

• Odmakni: Odmakne pogled od platna.

• Nova vozlisca: Orodje, s katerim dodajamo na platno nova vozlisca.

• Nove povezave: Orodje, s katerim dodajamo na platno nove povezave med vozlisci.

• Razdaljna particija: Izpise kardinalnosti tako imenovanih i-tih sosescin grafa glede na

izbrano vozlisce in jih tudi vizualno razporedi in prikaze na platnu.

• Avtomorfizem: S pomocjo tega orodja lahko ugotavljamo ali je dolocena vnesena preslikava

avtomorfizem tega grafa.

• Hamiltonova pot/cikel: Orodje, ki nam pove, ali tvorijo izbrane povezave Hamiltonovo pot

ali cikel.

• Barvanje grafa: S tem orodjem lahko enostavno barvamo vozlisca grafa. Orodje nam tudi

pove, ce smo nasli dobro barvanje vozlisc grafa.

• Izpisovanje (on/off): Vkljuci ali izkljuci dodatno izpisovanje pri uporabi naprednejsih

funkcij.

• Preimenuj vozlisca: Ob izbiri lahko vozlisce s klikom nanj preimenujemo.

• Pomoc: Odpre PDF dokument, v katerem je bolj podrobno opisano delovanje aplikacije in

njenih funkcij.

Ob kliku na katero izmed funkcij nam aplikacija v tekstovnem polju pod platnom izpise

navodila za uporabo te funkcije in pa tudi dolocene povratne informacije, ki so vezane na samo

funkcijo. Bolj podroben opis tega okna sledi v naslednjem podrazdelku.

1.1.3 Okno za izpisovanje navodil in povratnih informacij

Okno za izpisovanje navodil in povratnih informacij je glavni nacin, s katerim aplikacija komu-

nicira z uporabnikom. Seveda komunicira tudi na ostale nacine, kot je recimo obarvanje gumba

funkcije, ki je trenutno v uporabi, z rdeco barvo, ali pa obarvanje in oznacitev vozlisca grafa,

nad katerim je miska. Tudi pri funkciji barvanja grafa se vozlisce, nad katerim je kazalec miske,

ze v naprej obarva z izbrano barvo. Kljub temu pa je potrebno uporabniku povedati veliko vec,

kot mu lahko povemo z enostavnim barvanjem ali drugimi metodami. Zato se je avtor odlocil,

da bo implementiral tudi tekstovno polje, v katerem program izpisuje navodila in sporocila za

uporabnika ter rezultate izvedenih algoritmov.

Eden bolj ilustrativnih primerov sporocila uporabniku se prikaze ob kliku na gumb za barvanje

grafa. Sporocilo je sledece:

Vkljucili ste barvanje grafa. S pomocjo barvne palete lahko sedaj barvate vozlisca.

Kliknite za zeljeno barvo in lahko pricnete z barvanjem vozlisc!

Graf ni lih cikel ali poln graf. Po Brooksovem izreku je torej kromaticno stevilo grafa

manjse ali enako 3.

6

Page 17: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Kot vidimo, vsebuje sporocilo par kljucnih delov. Najprej nam aplikacija sporoci, da smo

uspesno vkljucili funkcijo barvanje grafa. To je povratna informacija na klik na gumb za barvanje

grafa. V racunalnistvu je koncept povratne informacije zelo pomemben [7]. Ce ne dobimo vsaj

kaksne povratne informacije, potem kot koncni uporabniki aplikacije ne moremo vedeti, kdaj

je aplikacija sprejela nas vnos in ga obravnava ter kdaj se je zgodilo nekaj nepricakovanega in

aplikacija vnosa enostavno ne more interpretirati. Brez povratne informacije bi se lahko zgodilo,

da bi mi cakali na racunalnik, racunalnik pa bi cakal na nas.

Naslednji del sporocila uporabniku so navodila za uporabo funkcije barvanja. Navodilo je

kratko, jedrnato in dovolj natancno, da si uporabnik osvezi spomin in zacne z delom. Ce uporab-

nik navodila ne razume in ne ve kako nadaljevati z delom, lahko v meniju na levi strani kadarkoli

klikne na gumb Pomoc in si prebere bolj natancna navodila za uporabo neke dolocene funkcije,

s katero ima tezave. Navodila se odprejo v novem zavihku, tako da ni bojazni, da bi zaradi tega

izgubili delo, ki smo ga do tedaj ze naredili.

Zadnji del sporocila se pokaze le, ko je to relevantno, torej v tem primeru samo takrat, ko graf

zadovolji pogojem Brooksovega izreka. Tu pa ne gre ne za povratno informacijo, ne za navodilo,

ampak za pogojno sporocilo, ki uporabniku (ce ne pozna Brooksovega izreka, ali pa je nanj le

pozabil) olajsa delo. Uporabnik tako spozna zgornjo mejo kromaticnega stevila grafa in se lahko

omeji na doloceno stevilo barv.

Aplikacija ob ustreznem barvanju grafa uporabniku to tudi sporoci s sporocilom: ,,Barvanje

grafa je ustrezno!”. Sporocilo se izpise le, ce smo ustrezno pobarvali vsa vozlisca, medtem ko

na vmesnih korakih uporabnik o njegovem napredku oziroma pravilnosti njegovega barvanja ni

obvescen. To moznost lahko vklopimo s klikom na gumb Izpisovanje (on/off). Takrat ob vsakem

na novo pobarvanem vozliscu dobimo sporocilo: ,,Barvanje ni ustrezno!”, ce barvanje (se) ni

ustrezno.

S tem zakljucujemo kratek opis aplikacije. Za bolj natancno seznanitev z uporabo aplikacije

si lahko bralec prebere diplomsko delo ,,Aplikacija za delo z grafi” [4], hkrati pa aplikacijo tudi

sam preizkusi.

7

Page 18: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Poglavje 2

Zbiranje in analiza podatkov

V tem poglavju bomo spoznali metodologijo zbiranja podatkov o uporabi programa med

studenti Pedagoske fakultete Univerze v Ljubljani, ki so uporabljali aplikacijo z0diak. Podatke

bomo analizirali in interpretirali.

2.1 Priprava raziskave

Z raziskavo zelimo ugotoviti, katere funkcionalnosti so studenti najvec uporabljali in katere

funkcionalnosti po njihovem mnenju aplikaciji manjkajo in bi si jih zeleli v novi razlicici. Z

mentorjevo pomocjo sem prisel tudi do nacina realizacije raziskave. Predlagal mi je, naj sestavim

kratko anketo in jo dam izpolniti studentom po enem izmed njegovih predavanj. Na ta nacin

so anketo izpolnili studenti, ki so aplikacijo z0diak zagotovo uporabljali vsaj dve studijski leti.

Omeniti velja tudi dejstvo, da so lahko ob izpolnjevanju vprasalnika za dodatna pojasnila vprasali

mene osebno.

V naslednjem koraku sem pripravil anketo. V ta namen sem se moral najprej temeljito

seznaniti z aplikacijo, spoznati katere funkcije vsebuje, kako se uporablja in katere funkcije se

meni osebno zdijo nedodelane ali manjkajoce. Zapiski iz predmeta Teorija grafov [13] so mi

bili v veliko pomoc, saj sem za vse grafovske primere in naloge poiskusal uporabiti z0diak in

funkcionalnosti, ki jih vsebuje. Ob tem sem si zapisoval, katere funkcije bi bile koristne in

uporabne, a jih aplikacija ne vsebuje. Na ta nacin sem dodobra spoznal delovanje aplikacije in

si izdelal seznam manjkajocih, a po mojem mnenju uporabnih funkcionalnosti.

Na koncu je bilo potrebno le se sestaviti anketo. Glede na namen raziskave sem se odlocil za

vprasanja o uporabnosti in pogostosti uporabe funkcij. Studente sem povprasal po njihovi oceni

uporabnosti in frekvenci uporabe funkcij, ki jih aplikacija trenutno ze vsebuje. Namen teh dveh

vprasanj je dobiti vpogled v nacin dela z aplikacijo s strani studentov.

Tretje vprasanje na anketi sprasuje po oceni zazelenosti implementacije funkcij, ki jih z0diak

trenutno se ne vsebuje. Tu sem nastel funkcije, ki sem jih ob podrobnem branju zapiskov v

aplikaciji pogresal, ali pa se mi je zdela moja zamisljena funkcionalnost se posebej uporabna.

Seznam predlaganih funkcionalnosti so lahko studentje po zelji dopolnili z njihovimi idejami, ki

jih niso nasli med ze nastetimi, saj sem jim dal moznost prostega vnosa njihovih idej.

8

Page 19: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Pri cetrtem vprasanju sem si pomagal s Perlmanovim vprasalnikom [11]. Nekatera vprasanja

iz njegovega originalnega vprasalnika sem izpustil ali poenostavil. V tem zadnjem vprasanju sem

studente spraseval po uporabnosti, enostavnosti uporabe in ucenja uporabe ter o zadovoljstvu

pri uporabi aplikacije. Gre za oceno celotne aplikacije in ne samo posameznih delov ali funkcij.

Na koncu vprasalnika so imeli studentje moznost, da v obliki prostega teksta sporocijo se

karkoli drugega, kar se jim je zdelo pomembno pri mojem delu.

Koncna razlicica anketnega vprasalnika je na voljo kot priloga k temu diplomskemu delu.

2.2 Zbiranje in analiza podatkov

2.2.1 Zbiranje podatkov

Anketo sem izvedel 21.1.2016 po koncu predavanj pri predmetu Raziskovalni pristop k algebri

in diskretni matematiki profesorja doc. dr. Primoza Sparla. Studentje, ki obiskujejo ta pred-

met na drugostopenjskem studijskem programu Poucevanje, so v prejsnjih letih obiskovali vec

predmetov, pri katerih so aplikacijo redno uporabljali, zato jo poznajo in jo znajo uporabljati.

Studente sem najprej nagovoril in jim povedal kaksen je namen moje raziskave, ter jih prosil, ce

lahko tisti, ki so aplikacijo uporabljali, izpolnijo kratko anketo. Izpolnilo jo je 26 studentov, a

sem eno anketo takoj odstranil iz nabora za analizo, ko mi je studentka ob oddaji priznala, da

aplikacije z0diak ni nikoli uporabljala. Analiziral sem torej 25 izpolnjenih anket.

2.2.2 Analiza podatkov

Zbrane ankete sem za lazjo analizo vnesel v razpredelnico na racunalniku, kjer sem potem

izvajal vso potrebno analizo. Za potrebe te raziskave nisem potreboval vec kot le povprecje

podanih odgovorov in pa standardni odklon, za vpogled v medsebojna odstopanja mnenj.

Vprasanji uporabnosti in pogostosti uporabe funkcij v aplikaciji z0diak

Prvi dve vprasanji se nanasata na isto mnozico funkcij, ki so jih morali studentje oceniti, tako

da bomo ti dve vprasanji obravnavali skupaj. Prvo vprasanje se glasi:

,,Kako ocenjujete uporabnost spodaj nastetih funkcij?”,

drugo pa:

,,Katere funkcije aplikacije ste najbolj uporabljali?”.

Studentje so morali vsako nasteto funkcionalnost oceniti z oceno od 1 do 5, pri cemer 1 oznacuje

najmanj, 5 pa najbolj uporabno ali uporabljano funkcijo. V tabeli 2.1 se nahajajo povprecja in

standardni odkloni ocen funkcij za obe vprasanji.

9

Page 20: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Zaporedna 1. vprasanje (uporabnost) 2. vprasanje (uporaba)st. funkcije Povprecje Std. odklon Povprecje Std. odklon

1 3,83 1,01 2,92 1,322 4,76 0,44 3,84 1,183 4,48 0,82 3,60 1,124 3,32 1,15 2,44 1,265 3,60 1,29 2,60 1,536 3,24 1,13 2,56 1,367 4,76 0,60 3,76 1,018 4,12 1,30 3,28 1,319 4,12 1,36 3,40 1,4210 3,92 1,26 3,44 0,5311 3,68 1,11 2,44 1,3312 4,28 1,14 3,88 1,05

Tabela 2.1: Povprecja in standardni odkloni ocen funkcij iz prvega in drugega vprasanja v anketi.

Glede na povprecja ocen iz vprasanja o uporabnosti funkcij lahko razberemo, da sta studentom

najbolj uporabni funkciji za izrisovanje pripadnikov podprtih druzin grafov in za izris razdaljne

particije grafa. Imeli sta namrec najvisjo povprecno vrednost (4,76) izmed vseh funkcij. Pri teh

dveh je bil tudi standardni odklon najnizji (0,44 in 0,60), kar pomeni, da so imeli studentje zelo

enotno mnenje o teh dveh funkcionalnostih. Sledi jima funkcija, ki ugotavlja dvodelnost grafa in

sicer ima povprecno vrednost 4,48 in relativno nizek standardni odklon 0,82.

Studentje so kot najmanj uporabno funkcijo ocenili priblizevanje in oddaljevanje pogleda

(povprecje 3,24 in standardni odklon 1,13). Tudi sam nisem veliko uporabljal te funkcionalnosti,

tako da me to ne cudi. Redko smo morali namrec delati s tako velikimi grafi, da jih ne bi mogli

licno prikazati na zaslonu brez oddaljevanja pogleda. Hkrati pa je privzeta velikost vozlisc in

povezav dovolj velika, da pri delu ne potrebujemo priblizevanja pogleda, ce delamo z grafi, ki

nimajo velikega stevila vozlisc.

Pri drugem vprasanju je bila pricakovano najbolje ocenjena funkcija za premikanje vozlisc

grafa (povprecje 3,88 in standardni odklon 1,05), sledi pa ji funkcija izrisovanja pripadnikov

podprtih druzin grafov (povprecje 3,84 in standardni odklon 1,18). Na tretjem mestu po uporabi

sledi izris razdaljne particije (povprecje 3,76 in standardni odklon 1,01). Kot lahko vidimo,

so se tu mnenja studentov bolj razlikovala kot pri prejsnjem vprasanju, razlika med najbolje

ocenjenima funkcijama pa je zanemarljiva.

Med najmanj uporabljanimi funkcijami sta funkciji, ki sta vezani na oznake vozlisc. Prva

je moznost vklopa/izklopa oznak vozlisc (povprecje 2,44 in standardni odklon 1,26), druga pa

je preimenovanje vozlisc (povprecje 2,44 in standardni odklon 1,33). Sklepam, da studentje

enostavno niso preimenovali oznak vozlisc, saj jim je bilo privzeto in avtomatsko poimenovanje

oznak z narascajocimi celimi stevili sprejemljivo dobro. Vklop in izklop oznak vozlisc kot kaze

prav tako nimata neke velike uporabne vrednosti, saj lahko oznake brez tezav ignoriramo in

nadaljujemo z delom. Dve izmed situacij, v katerih bi ta funkcija prisla prav, sta situacija ko

zelimo narediti sliko grafa za izvoz in pa situacija ko bi delali s tako velikim grafom, da bi oznake

zavzemale prepotreben prostor na platnu.

10

Page 21: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Vprasanje zazelenosti implementacije manjkajocih funkcionalnosti

Tretje vprasanje v anketi je bilo namenjeno ugotavljanju zazelenosti implementacije dolocenih

manjkajocih funkcionalnosti. Studentje so morali nastete funkcije oceniti s stevilom od 1 do 5,

pri cemer 1 oznacuje najmanj, 5 pa najbolj zazeleno funkcijo. Imeli so tudi moznost dopisati

svojo funkcionalnost, ce le-ta ni bila vsebovana v seznamu. Samo en/a student/ka je dodatno

zapisal/a, da si zeli moznost shranjevanja grafov v obliki slike, kar je zelo dober predlog in se

nanj ob zasnovi ankete sam nisem spomnil. Rezultati ankete so zbrani v tabeli 2.2.

Zap. st. funkcije Povprecje Std. odklon1 4,44 0,922 4,68 0,563 4,12 1,094 3,84 1,035 4,36 0,816 4,84 0,477 4,36 0,648 3,88 0,789 4,32 0,9910 4,40 0,9611 4,12 0,9712 4,00 1,0413 3,20 1,1514 3,58 1,2115 3,21 1,35

Tabela 2.2: Povprecja in standardni odkloni ocen zazelenosti implementacije novih funkcij pritretjem vprasanju v anketi.

Rezultati analize so pokazali, da je najbolj zazelena funkcija v applikaciji z0diak razveljavitev

(angl. undo) s povprecno oceno 4,84 in standardnim odklonom 0,47. Sam sem med delom z

aplikacijo veckrat instinktivno pritisnil kombinacijo tipk Ctrl + Z, ki v vecini aplikacij predstavlja

bliznjico za razveljavitev zadnje akcije, a se z0diak ni odzval, saj razveljavitve ne podpira. Tudi

ostali studentje so, glede na visoko povprecje ocen, naleteli na to tezavo in si zato sedaj zelijo

implementacije te funkcionalnosti.

Naslednja funkcija, ki po povprecni vrednosti ocen sledi razveljavitvi, je izracun in prikaz ozine

in premera grafa (povprecna vrednost 4,68 in standardni odklon 0,56). Tudi tu so imeli studentje

med seboj glede na standardni odklon kar podobno mnenje. Tretja najvisje uvrscena funkcional-

nost je izpis zaporedja stopenj (povprecna vrednost 4,44 in standardni odklon 0,92). Zdi se kar

malce nenavadno, da avtor aplikacije z0diak izpisa zaporedja stopenj grafa ni implementiral ze

sam, saj algoritem za izracun res ni zahteven.

Vprasanje uporabniske izkusnje

Zadnje (cetrto) vprasanje se nanasa na uporabnisko izkusnjo. Studentje so morali ocen-

iti uporabnost aplikacije, enostavnost uporabe, enostavnost ucenja uporabe in zadovoljstvo pri

uporabi aplikacije. Vsako izmed teh podrocij vsebuje nekaj trditev kot so ,,Je koristna”, ,,Lahko

jo uporabljam brez pisnih navodil” ali ,,Dela tako, kot si zelim, da deluje”. S stevilko od vkljucno

1 do 5 so morali studentje oceniti, v koliksni meri se strinjajo s trditvami, pri cimer 1 oznacuje

popolno nestrinjanje, 5 pa popolno strinjanje.

11

Page 22: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Zap. st. trditve Povprecna vrednost Std. odklonUporabnost aplikacije

1 3.88 0.882 3.80 1.043 4.64 0.494 3.52 0.965 4.16 1.036 3.36 1.19

Enostavnost uporabe1 4.16 1.112 3.56 1.193 3.96 1.104 3.56 0.965 2.92 1.35

Enostavnost ucenja uporabe1 4.28 1.062 4.04 1.023 4.24 0.97

Zadovoljstvo1 4.08 0.812 4.00 0.873 3.28 1.024 2.64 1.25

Tabela 2.3: Povprecja in standardni odkloni ocen trditev iz zadnjega vprasanja v anketi.

Poglejmo si najprej rezultate analize o uporabnosti aplikacije. Studentje se v najvecji meri

strinjajo, da je aplikacija koristna (povprecna vrednost 4,64 in standardni odklon 0,49). Kljub

koristnostni aplikacije vseeno menijo, da aplikacija ne izpolnjuje nujno vseh njihovih potreb, saj

ima ta trditev najnizjo povprecno vrednost 3,36 in najvisji standardni odklon 1,19, kar nakazuje

doloceno mero razprsenosti mnenja studentov.

V razdelku Enostavnost uporabe imamo najnizjo povprecno vrednost 2,92 in najvisji stan-

dardni odklon 1,35 pri trditvi ,,Ce naredim napako, jo lahko hitro odpravim”, kar nakazuje na

to, da je v aplikaciji res nujno potrebna funkcionalnost razveljavitve zadnje akcije. To je konsis-

tentno z odgovori pri tretjem vprasanju, kjer je bila najbolj zazelena funkcija ravno razveljavitev

zadnje akcije. Glede na povprecno vrednost prve trditve (povprecna vrednost 4,16 in standardni

odklon 1,11) studentje menijo, da je aplikacija enostavna za uporabo in zanjo ne potrebujejo

pisnih navodil (povprecna vrednost 3,96 in standardni odklon 1,10).

Studenti so dobro ocenili enostavnost ucenja uporabe, saj imajo vse tri trditve povprecno

oceno nad 4, standardni odklon pa vse okoli 1. Kljub temu pa so se studentje hitreje naucili

uporabljati aplikacijo, kot postali z njo spretni.

V zadnjem razdelku, ki se nanasa na zadovoljstvo, so studentje ocenili, da so z aplikacijo

zadovoljni in da je prijetna za uporabo (povprecni oceni 4,08 in 4,00, ter standardna odklona 0,81

in 0,87). Kljub temu pa menijo, da aplikacija za njihov studij ni kljucnega pomena (povprecna

vrednost 2,64 in standardni odklon 1,25).

12

Page 23: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

2.3 Izbira novih funkcionalnosti

V prejsnjem razdelku smo videli, katerih novih funkcionalnosti si zelijo studentje, ki so ap-

likacijo uporabljali dalj casa. Nas cilj je bil, da v aplikacijo, glede na izsledke ankete, dodamo

tri najbolj zazelene funkcije. V tem razdelku analiziramo moznost implementacije teh funkcij in

komentiramo moznost implementacije se kaksne dodatne funkcije, ki ni prisla v sam vrh zelja.

2.3.1 Razveljavitev zadnje akcije

Najbolj zazelena funkcionalnost je bila razveljavitev zadnje akcije. Dandanes skoraj vsaka ap-

likacija vsebuje nek sistem razveljavitve sprememb (poudariti je treba, da skoraj vse aplikacije,

ki omogocajo razveljavitev sprememb, omogocaju tudi preklic razveljavitve spremembe in povr-

nitev v stanje pred razveljavitvijo spremembe), ki jih delamo tekom dela z aplikacijo, pa naj bo to

razveljavitev brisanja besede ali pa razveljavitev potega copica v risarskih programih. Tako se zdi

ta funkcionalnost ze skoraj samoumevna in zato je razumljivo, da si jo studentje zelijo uporabljati

tudi v tej aplikaciji. Strinjam se, da bi ta funkcionalnost mocno poenostavila uporabo aplikacije,

saj moramo sedaj ob napaki v najslabsem primeru z delom zaceti od zacetka, v najboljsem pa

vsaj ponoviti par zadnjih akcij, ki smo jih izvedli.

Razvoja razveljavitve zadnje akcije bi se lahko lotili na dva nacina. Prvi je naceloma sila

preprost. Ustvarili bi povezan seznam, katerega elementi so stanja grafa na platnu. Vsako

vozlisce seznama ima kazalec na svojega predhodnika in naslednika. Ob vsaki spremembi na

platnu bi se na konec seznama dodalo nov element, ki bi vseboval trenutno vsebino platna (to

so vozlisca, povezave ter njihove lokacije, oznacbe vozlisc, barve, itd.). Ob razveljavitvi zadnje

akcije bi izbrisali vsebino platna, se pomaknili v povezanem seznamu na predhodnika trenutnega

elementa in izrisali graf. Ce bi si zeleli preklicati naso razveljavitev zadnje akcije, bi morali

postopek ponoviti v obratni smeri. S tem bi implementirali osnovno (cetudi relativno prostorsko

zahtevno) funkcionalnost razveljavitve zadnje akcije.

Drug nacin, ki je veliko bolj eleganten, pa je v programerskem svetu poznan kot ukazni vzorec

(angl. command pattern), ki je del zasnovnih vzorcev (angl. design patterns) v objektnem

programiranju ([3] in [12]). Vsako akcijo z vsemi potrebnimi informacijami, ki jo lahko sprozi

uporabnik, se nekako zapise v nek objekt in se ga poslje mehanizmu, ki skrbi za njihovo izvedbo.

Nabor moznih akcij je vnaprej dolocen (razlicne podprte funkcije), spreminjajo se samo podatki,

s katerimi dolocena akcija operira. Za implementacijo razveljavitve zadnje akcije potrebuje vsaka

funkcija metodo, s katero povrne stanje na stanje pred izvedbo akcije. Vse kar potem preostane

je to, da si zapomnimo izvedene akcije. V primeru, ko zeli uporabnik razveljaviti zadnjo akcijo,

pogledamo zadnjo izvedeno akcijo in poklicemo njeno metodo za povrnitev prvotnega stanja,

kazalec trenutno izvedene akcije pa v povezanem seznamu prestavimo za en clen nazaj. S tem

bi implementirali funkcionalnost razveljavitve zadnje akcije na eleganten in prostorsko manj

zahteven nacin.

Po pregledu programske kode, ki sestavlja aplikacijo, sem spoznal, da implementacija prve ali

druge moznosti ne pride v postev (oziroma bi bilo kaj takega zelo neprakticno in v nasprotju

z uveljavljenimi standardi v racunalnistvu), predvsem zato, ker avtor originalne aplikacije te

funkcionalnosti ob razvoju aplikacije ni predvidel. Posledica takega razvoja je koda, ki ne sledi

spremembam na platnu na nacin, smiselen za implementacijo razveljavitve zadnje akcije. Stanje

na platnu se hrani v vec spremenljivkah, ki so med seboj na prvi pogled neodvisne. Podrobnejsa

analiza je pokazala, da veliko stevilo globalnih spremenljivk v najslabsem primeru onemogoca,

13

Page 24: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

v najboljsem primeru pa zelo otezuje sledenje spremembam v delovanju programa. Ce bi zeleli

implementirati prvi algoritem za razveljavitev zadnjih akcij, bi zato morali ob vsaki spremembi

shraniti spremenljivke, ki so se spremenile. To bi pomenilo zelo natancno poglabljanje v samo

drobovje aplikacije in bi vzelo ogromno casa, saj iz kode na prvi pogled ni razvidno, katere spre-

menljivke so uporabljene samo v nekem delu programa in katere povsod. Drugi algoritem bi

prisel v postev v primeru, da bi avtor vgradil akcije v samostojne objekte ze od samega zacetka

razvoja aplikacije. Predelava programa bi v tem primeru pomenila popoln prepis aplikacije z

upostevanjem ukaznega vzorca pri razvoju aplikacije. Implementacija funkcionalnosti razveljav-

itve zadnje akcije zaradi nesorazmernosti potrebnega truda in rezultatom le-tega zato ne pride

v postev v okviru tega diplomskega dela. Vsekakor pa je to eden izmed pomembnejsih korakov

ob morebitni obsirnejsi predelavi aplikacije v prihodnosti.

2.3.2 Izracun in prikaz ozine ter premera grafa

Druga najbolj zazelena funkcionalnost je bila izracun in prikaz ozine ter premera grafa. Tu

gre pravzaprav za dve razlicni funkcionalnosti, zato ju bomo kot taki tudi obravnavali. Zacnimo

z ozino grafa.

Ozina grafa

Najprej definirajmo ozino enostavnega neusmerjenega grafa.

Definicija: Imejmo graf Γ = (V,E). Ozina grafa je tedaj definirana kot dolzina najkrajsega

cikla v Γ oziroma je definirana kot ∞, ce Γ ne vsebuje nobenega cikla.

Kot cikel tu smatramo sklenjen sprehod, ki se torej zacne in konca v istem vozliscu, sicer pa

ne obisce nobenega vozlisca dvakrat.

Pri ozini grafa se velikokrat omenja tudi kletke, se posebej kubicne. To so najmanjsi mozni

kubicni grafi (vsa vozlisca imajo stopnje 3) z dano ozino g. Takim grafom se rece tudi g-kletke.

Najbrz je najbolj znan Petersenov graf, ki je edinstvena 5-kletka (torej najmanjsi kubicni graf z

ozino 5). Heawood-ov graf je 6-kletka, McGee-jev graf 7-kletka in Tutte-Coxeter-jev graf 8-kletka

[10]. Predstavljeni so na sliki 2.1.

Slika 2.1: Primeri stirih manjsih kletk. Od leve proti desni: Petersenov graf, Heawoodov graf,McGeejev graf in Tutte-Coxeterjev graf.

Za izracun ozine grafa potrebujemo seznam vozlisc in povezav grafa. Le-te imamo v aplikaciji

14

Page 25: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

z0diak na voljo v objektu Graph. Pri implemetaciji te funkcionalnosti nas torej nic ne omejuje. V

svoji raziskavi sem nasel tudi dva algoritma za izracun ozine grafa, ki pa sta bolj podrobno opisana

v podrazdelku 3.3.1, kjer je tudi opisano, kako smo to funkcionalnost dejansko implementirali v

aplikacijo.

Premer grafa

Najprej definirajmo premer grafa. Ponovno se bomo omejili samo na enostavne neusmerjene

grafe.

Definicija: Premer enostavnega neusmerjenega grafa Γ = (V,E) je najdaljsa razdalja med

katerimkoli parom vozlisc v, u ∈ V .

Razdalja med dvema vozliscema grafa je stevilo povezav v najkrajsi poti, ki povezuje ti dve

vozlisci. Ce ne obstaja nobena pot, ki bi povezovala dani dve vozlisci grafa, potem je razdalja

med tema dvema vozliscema enaka ∞.

Tudi za izracun premera grafa zadosca seznam vozlisc in povezav. Prav tako potrebujemo

algoritem, s katerim bomo izmerili najkrajse poti med poljubnimi pari vozlisc grafa. Tak algo-

ritem poznamo pod imenom Dijkstrov algoritem [5], poglavje 4.4. Opis njegove uporabe za to

funkcionalnost je podan v podrazdelku 3.4.1.

2.3.3 Izpis zaporedja stopenj

Tretja najbolj zazelena funkcionalnost je izpis zaporedja stopenj. Gre za enostavno funkcijo,

ki pa nam lahko ob pogostem delu z aplikacijo olajsa delo. Tudi tu najprej podajmo definicijo

zaporedja stopenj.

Definicija: Zaporedje stopenj neusmerjenega grafa Γ = (V,E) je padajoce zaporedje stopenj

vozlisc grafa Γ, pri cemer je dolzina zaporedja enaka |V |.

Zaporedje stopenj je seveda neodvisno od izbrane reprezentacije grafa, zato imajo izomorfni

grafi isto zaporedje stopenj. Moramo pa biti pozorni, saj isto zaporedje stopenj se ne pomeni

nujno, da sta dva grafa izomorfna. Zaporedja stopenj grafa torej ne moremo uporabiti za iden-

tifikacijo tocno dolocenega grafa.

Kot zanimivost omenimo se tako imenovani problem zaporedja stopenj grafa. To je problem,

kjer zelimo za podano padajoce zaporedje naravnih stevil poiskati vsaj enega ali kar vse grafe, ki

imajo zaporedje stopenj enako podanemu zaporedju stevil. Podano zaporedje, za katerega lahko

najdemo vsaj en graf, ki ima tako zaporedje stopenj, imenujemo graficno. Nobeno padajoce

zaporedje naravnih stevil z liho vsoto, zaradi sodosti vsote stopenj vseh vozlisc v poljubnem grafu

(kar nam zagotavlja Lema o rokovanju [6]), ne ustreza nobenemu grafu in zato ni graficno [16].

Seveda pa niti vsako padajoce zaporedje naravnih stevil s sodo vsoto stopenj vozlisc ni graficno.

Tu omenimo, da obstaja preprost algoritem za ugotavljanje graficnosti zaporedja stopenj. Ce

je le-to graficno, lahko s preprostim algoritmom vsaj en tak graf tudi konstruiramo. Ta dva

algoritma bi bilo tako mozno implementirati v aplikacijo v morebitni nadaljnji posodobitvi.

Primer istega zaporedja stopenj za dva neizmorfna grafa je podan na sliki 2.2. Neizomorfnost

15

Page 26: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

lahko dokazemo na enostaven nacin. Pogledati moramo le sosede vozlisca stopnje 3. Hitro

opazimo, da ima vozlisce stopnje tri na zgornjem grafu dva soseda stopnje dva in le enega soseda

stopnje ena, medtem ko ima vozlisce stopnje tri na spodnjem grafu dva soseda stopnje ena in

enega soseda stopnje dva. Ker v vsakem grafu obstaja le eno vozlisce stopnje 3 in imata ti

dve vozlisci med sabo razlicne prej nastete lastnosti, sta grafa medseboj neizomorfna, saj se ne

ujemata v vseh njunih lastnostih.

Slika 2.2: Dva neizomorfna grafa z istim zaporedjem stopenj (3, 2, 2, 2, 2, 1, 1, 1).

Ceprav bi morali studentje brez tezav znati zapisati zaporedje stopenj poljubnega danega

grafa, so si vseeno zazeleli, da bi aplikacija z0diak vsebovala tudi to funkcionalnost. Najbrz zato,

ker je za vecje grafe zapis zaporedja stopenj dolgocasno delo, ki zahteva nekaj natancnosti, vseeno

pa je ujemanje zaporedja stopenj dveh grafov prvi potreben pogoj za njuno izomorfnost. Funkcijo

bomo zato implementirali v aplikacijo predvsem zaradi prirocnosti. Za izpis zaporedja stopenj

grafa ne potrebujemo zahtevnih algoritmov, le sprehod cez vsa vozlisca in urejanje dobljenega

seznama. Podroben opis algoritma se nahaja v podrazdelku 3.2.1.

2.3.4 Preverjanje zadostnih pogojev za obstoj Hamiltonovega cikla

Ta funkcija sicer ni bila v samem vrhu po zazelenosti, vendar pa se zdi, da bi lahko njena

implementacija v dolocenih primerih precej pripomogla pri preverjanu hamiltonskosti danega

grafa. Aplikacija namrec ze vsebuje funkcionalnost, s katero lahko uporabnik sam isce tak cikel.

Zato se zdi smiselno, da dodamo v aplikacijo tudi preverjanje pogojev izrekov Posa, Oreja in

Diraca, ki podajajo zadostne pogoje za obstoj Hamiltonovega cikla. Na ta nacin bi pomagali

studentom pri ugotavljanju, ali graf vsebuje tak cikel ali ne. Izmed vseh treh je najmocnejsi

izrek Posa in ze samo z njegovo implementacijo bi dobili najboljsi mozen odgovor na vprasanje

hamiltonskosti grafa [13]. Kljub temu sem se odlocil tudi za implementacijo funkcionalnosti

preverjanja pogojev izreka Oreja in Diraca, saj bodo lahko na ta nacin studentje na razlicnih

primerih ugotovili kako se izreki med seboj primerjajo po moci. Prav tako ju bodo lahko uporabili

za ucenje in vadbo. Zacnimo s izrekom Posa.

Izrek Posa: Naj bo Γ graf reda n ≥ 3, za katerega velja naslednje. Za vsak 1 ≤ k < (n− 1)/2

obstaja manj kot k vozlisc stopnje najvec k v Γ, ce pa je n liho stevilo, dodatno velja se, da v Γ

obstaja najvec (n− 1)/2 vozlisc stopnje najvec (n− 1)/2. Tedaj Γ premore Hamiltonov cikel.

16

Page 27: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Iz samega izreka ze lahko razberemo, da bomo problem lahko resili s sprehodom cez vse k in

hkrati tudi cez zaporedje stopenj grafa, kjer bomo steli stevilo vozlisc dolocene stopnje. Casovna

kompleksnost algoritma tako ne bo previsoka za implementacijo, saj bo najvec O(|V |log(|V |)),kjer je V mnozica vozlisc grafa. Vecina kompleksnosti izhaja iz funkcije za izracun zaporedja

stopenj saj vsebuje sortiranje. Taka kompleksnost nas za grafe, ki jih studentje vnasajo v pro-

gram, ne skrbi. Tezave ne bi nastopile niti v primeru, ce bi v aplikacijo vnesli graf, ki vsebuje

npr. 1000 vozlisc.

Diracov izrek: Naj bo Γ graf reda n ≥ 3, v katerem je poljubno vozlisce stopnje vsaj n/2.

Tedaj Γ premore Hamiltonov cikel.

Tudi pri Diracovem izreku vidimo, da ni algoritmicno zahteven in da ga bomo lahko imple-

mentirali kar z lastnim znanjem. Kompleksnost algoritma bo podobno kot prej O(|V |log(|V |)),saj potrebujemo za pregled samo en sprehod cez zaporedje stopenj grafa.

Orejev izrek: Naj bo Γ graf reda n ≥ 3, v katerem je vsota stopenj poljubnega para nesosednjih

vozlisc vsaj n. Tedaj Γ premore Hamiltonov cikel.

Izmed vseh treh izrekov, se zdi Orejev izrek se najtezji za implementacijo, saj bomo morali pre-

gledati vsak par nesosednjih vozlisc in preveriti vsoto njunih stopenj. Vseeno bil sem preprican,

da ne bo predstavljal vecjih tezav, zato sem se odlocil tudi za njegovo implementacijo v aplikacijo.

Izrek Posa je izmed vseh treh izrekov najmocnejsi, kar je dokazano v zapiskih [13], str. 53.

Diracov in Orejev izrek namrec sledita iz izreka Posa. Graf na sliki 2.3 izpolnjuje le pogoje

izreka Posa, ne zadosca pa pogojem Diracovega in Orejevega izreka, kar nakazuje na dejstvo, da

je Posev izrek res najmocnejsi.

Slika 2.3: Graf, ki ne zadosca pogojem Diracovega in Orejevega izreka, izpolnjuje pa pogojeizreka Posa ([13], str. 52).

2.3.5 Izvoz slike grafa v slikovni obliki

Ob pregledovanju podatkov, pridobljenih z anketo, sem med dodatnimi predlogi za funkcional-

nosti zasledil tudi predlog za izvoz grafa v slikovni obliki. Ob sestavljanju ankete na to funkcional-

nost nisem pomislil, zato sem bil nad predlogom prijetno presenecen.

Kar nekaj studentov uporablja aplikacijo z0diak za izdelavo slik grafov, ki jih potem uporabijo

v raznih seminarskih nalogah in diplomskih delih. Doslej je bil postopek shranjevanja slike

sledec. Najprej moramo v aplikaciji izdelati graf. Tu lahko uporabimo ze vgrajene grafe ali pa

ga ustvarimo rocno z dodajanjem vozlisc in povezav. Nato ustvarimo zaslonsko sliko celotnega

zaslona in jo shranimo. Taka zaslonska slika vsebuje tudi orodno vrsto, odprte zavihke in ostale

17

Page 28: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

elemente, ki jih seveda ne zelimo imeti v koncni sliki, zato moramo sliko obrezati, da nam na njej

ostane samo se graf. Sele nato lahko sliko shranimo in jo vstavimo v dokument. Slika, izdelana

na tak nacin, ima sivo ozadje (platno) in tako stilsko ne sodi v nekatere dokumente, ki imajo po

vecini belo podlago.

Proces je po nepotrebnem prevec zahteven in ce ne drugega za vecino studentov vsaj nadlezen.

Funkcija za izvoz bi bistveno olajsala zgoraj opisan proces, zato sem se odlocil, da implementiram

tudi to funkcionalnost.

Po kratkem raziskovanju na spletu sem spoznal, da je izvoz platna v slikovni obliki enostaven

in zanj ne potrebujemo kakega zahtevnega algoritma.

18

Page 29: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Poglavje 3

Razvoj novih funkcionalnosti

Preden predstavimo algoritme, s katerimi bomo v aplikacijo z0diak implementirali izbrane

nove funkcionalnosti, si najprej poglejmo osnovno podatkovno strukturo v kateri je zapisan graf

in vse njene lastnosti.

3.1 Podatkovna struktura aplikacije in dodajanje novih el-

ementov na platno

Aplikacija z0diak hrani graf v globalni spremenljivki Graph, ki je tipa Graph data structure.

Graph torej vsebuje tako tabelo vozlisc nodes in tabelo povezav lines.

1 function Graph_data_structure () { // struktura grafa

2 this.nodes = new Array();

3 this.lines = new Array();

4 }

5

6 function node() { // struktura vozlisca

7 this.construct = new Path.Circle ();

8 }

Delcek kode 3.1: Osnovna podatkovna struktura grafa v aplikaciji.

3.1.1 Dodajanje novega vozlisca

Ce zeli uporabnik grafu dodati novo vozlisce, z misko klikne na gumb Nova vozlisca in nato

klikne na poljubno mesto na platnu, kamor zeli postaviti vozlisce. Ob kliku na platno, se sprozi

dogodek (angl. event), ki v sebi nosi podatke kot so lokacija klika in podobno. Lokacijo do-

godka potem uporabimo v drugem koraku dodajanja vozlisca, saj ustvarimo nov krog z lokacijo

(event.point) in polmerom 12 enot (4. vrstica v delcku kode 3.2).

1 // Inicializiramo element

2 Graph.nodes[Graph.nodes.length] = new node();

3 // Definiramo lokacijo in velikost vozlisca

4 Graph.nodes[Graph.nodes.length - 1]. construct = new Path.Circle(event.point , 12);

5 // Vozliscu nastavimo barvo na modro

19

Page 30: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

6 Graph.nodes[Graph.nodes.length - 1]. construct.fillColor = "#00F";

7 // Vozliscu nastavimo mesanje barv

8 Graph.nodes[Graph.nodes.length - 1]. construct.blendMode = ’exclusion ’;

9 // Vozliscu dodamo funkcionalnost barvanja na rdeco ob premiku miske nad vozlisce

10 Graph.nodes[Graph.nodes.length - 1]. construct.attach(’mouseenter ’, function () {

11 this.fillColor = ’red’;

12 });

13 // Vozliscu dodamo funkcionalnost barvanja na modro ob premiku miske z vozlisca

14 Graph.nodes[Graph.nodes.length - 1]. construct.attach(’mouseleave ’, function () {

15 if (addingEdge == false || EdgeConstruction == false)

16 this.fillColor = ’blue’;

17 else if (setActive)

18 this.fillColor = ’blue’;

19 });

20 // Inicializiramo napis na vozliscu

21 Graph.nodes[Graph.nodes.length - 1]. construct.vertex = new PointText;

22 // Nastavimo barvo napisa na belo

23 Graph.nodes[Graph.nodes.length - 1]. construct.vertex.fillColor = ’white ’;

24 // Nastavimo oznako vozlisca

25 Graph.nodes[Graph.nodes.length - 1]. construct.vertex.content = content_input;

26 // Nastavimo polozaj napisa nad lokacijo vozlisca

27 Graph.nodes[Graph.nodes.length - 1]. construct.vertex.position = Graph.nodes[Graph.

nodes.length - 1]. construct.position;

28 // Ustvarimo prazno tabelo sosedov , saj je bilo vozlisce ravnokar ustvarjeno in se

nima sosedov

29 Graph.nodes[Graph.nodes.length - 1]. construct.neighbours = new Array();

Delcek kode 3.2: Delcek kode, ki doda v graf novo vozlisce na mesto miskinega klika na platnu.

Ob premikanju vozlisca s klikom nanj in vlecenjem, se v strukturi posodobi lokacija tega

vozlisca na platnu. Prav tako se morajo ob vlecenju posodobiti tudi vse povezave, ki imajo to

vozlisce za svoje krajisce.

3.1.2 Dodajanje nove povezave

Novo povezavo dodamo na platno tako, da najprej z misko kliknemo na levi strani na gumb

Nove povezave, nato pa kliknemo na prvo vozlisce, ter nato se na drugo vozlisce med katerima

zelimo ustvariti povezavo. Prvo vozlisce se shrani v spremenljivko startingPoint, drugo pa v

spremenljivko endPoint.

1 // Inicializiramo novo povezavo z zacetno in koncno lokacijo

2 Graph.lines[Graph.lines.length] = new Path.Line(startingPoint.position , endPoint.

position);

3 // Shranimo si zacetno vozlisce povezave

4 Graph.lines[Graph.lines.length - 1]. edgeStart = startingPoint;

5 // Shranimo si koncno vozlisce povezave

6 Graph.lines[Graph.lines.length - 1]. edgeEnd = endPoint;

7 // Nastavimo barvo povezave na crno

8 Graph.lines[Graph.lines.length - 1]. strokeColor = ’black ’;

9 // Nastavimo sirino povezave na 4

10 Graph.lines[Graph.lines.length - 1]. strokeWidth = 4;

11 });

Delcek kode 3.3: Delcek kode, ki doda v graf novo povezavo med izbranima vozliscema.

Vsako vozlisce zase v tabeli Graph.nodes[i].construct.neighbours, kjer je i zaporedno stevilo

nekega vozlisca, hrani svoje sosede. Ob dodajanju nove povezave se doda v tabelo sosedov prvega

vozlisca nov sosed z ukazom Graph.nodes[i].construct.neighbours.push(endPoint). Postopek je

treba ponoviti tudi za drugo vozlisce, le da tu dodamo element startingPoint.

20

Page 31: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

V naslednjih petih razdelkih se bomo lotili implementacije izbranih novih funkcionalnosti.

Opisali bomo tako algoritme, s katerimi bomo resili probleme, kot tudi kodo v programskem

jeziku JavaScript, ki je osnova aplikacije z0diak.

3.2 Izpis zaporedja stopenj

Za implementacijo je izmed zazelenih funkcionalnosti najlazji izpis zaporedja stopenj, zato se

ji posvetimo najprej.

3.2.1 Algoritem za izracun zaporedja stopenj

Algoritem za izracun zaporedja stopenj je relativno enostaven. Najprej se moramo sprehoditi

cez vsa vozlisca grafa in si zapomniti njihovo stevilo sosedov. Nato ta seznam uredimo v padajoce

zaporedje, ga locimo z vejicami in na vsaki strani obdamo z oklepaji. Tako dobimo zaporedje

stopenj grafa.

3.2.2 Implementacija

Implementacija zgornjega algoritma v programskem jeziku JavaScript, ki je potrebna za izpis

zaporedja stopenj, je precej preprosta, zato jo navajamo v celoti.

1 // Funkcija za izracun in prikaz zaporedja stopenj grafa

2 ZaporedjeStopenj = function (silent) {

3 if (Graph_loaded) {

4 // Inicializiramo tabelo , ki bo vsabova stopnje vozlisc

5 var zapoStopenj = new Array();

6 // Shranimo si stevilo sosedov posameznega vozlisca

7 for (var i = 0; i < Graph.nodes.length; i++) {

8 zapoStopenj.push(Graph.nodes[i]. construct.neighbours.length);

9 }

10 // Sortiramo seznam od najvecjega do najmanjsega elementa

11 zapoStopenj = zapoStopenj.sort(function (a, b) { return b - a; });

12 // Inicializiramo niz za prikaz uporabniku

13 var zaporedjeText = new String("");

14 // V niz nanizamo zaporedje stopenj , locena z vejicami

15 for (var i = 0; i < Graph.nodes.length; i++) {

16 if (zaporedjeText != "") {

17 zaporedjeText += ", ";

18 }

19 zaporedjeText += zapoStopenj[i];

20 }

21 // Prikazemo zaporedje stopenj uporabniku glede na parameter silent

22 if (silent === true) {

23 return zapoStopenj

24 }

25 else {

26 document.getElementById(’area’).value = "Zaporedje stopenj: (" +

zaporedjeText + ").";

27 }

28 }

29 }

Delcek kode 3.4: Implementacija algoritma za prikaz zaporedja stopenj grafa.

21

Page 32: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

3.3 Izracun in prikaz ozine grafa

Ena izmed funkcionalnosti, ki so jo studentje ocenili kot zelo zazeleno, je tudi izracun in prikaz

ozine grafa. Ta problem ni tako enostaven kot izracun in prikaz zaporedja stopenj grafa, kljub

temu pa ga z nekaj dela lahko uzenemo.

3.3.1 Algoritem za izracun ozine grafa

Nasel sem dva razlicna algoritma za iskanje najkrajsega cikla v grafu.

Prvi algoritem temelji na iskanju v sirino (angl. breadth-first search ali okrajsano BFS ).

To iskanje je implementirano z vrsto. Zacnemo v nekem vozliscu grafa Γ, dodamo njegove

sosede na konec v vrsto, vzamemo prvega iz vrste in postopek ponavljamo, dokler ne najdemo

iskanega vozlisca ali pa ne obiscemo vseh vozlisc grafa. Casovna zahtevnost takega algoritma je

O(|V |+ |E|), kjer je Γ = (V,E).

Pri uporabi iskanja v sirino pravzaprav iscemo vozlisce, do katerega smo od korena grafa (tj.

vozlisca, v katerem smo zaceli iskanje) prisli po dveh razlicnih poteh. Ce tako vozlisce obstaja,

potem smo nasli cikel. Dolzino cikla izracunamo tako, da sestejemo dolzini teh dveh poti, ki

povezujeta koren in najdeno vozlisce. Ce je dolzina najdenega cikla krajsa od do sedaj najdenih

ciklov, si jo zapomnimo in iskanje nadaljujemo, dokler nismo obiskali vseh vozlisc v grafu. Ce

iskanje ponovimo iz vseh vozlisc grafa Γ, smo si zagotovili, da smo nasli najkrajsi cikel in s tem

tudi ozino grafa. Casovna zahtevnost je tedaj enaka O(|V | · |E|) [9].

Drugi algoritem pa temelji na Dijkstrovem algoritmu iskanja najkrajse poti. Za vsako povezavo

e ∈ E, kjer Γ = (V,E), ustvarimo graf Γ′, ki je skorajda identicen grafu Γ, le da mu odvzamemo

povezavo e. Torej Γ′ = (V,E \ {e}). Nato s pomocjo Dijkstrovega algoritma poiscemo najkrajso

pot med vozlisci, ki ju je povezovala povezava e. Ce je ta pot krajsa od do sedaj najdene najkrajse

poti, potem si jo zapomnimo in nadaljujemo z iskanjem, dokler nismo prisli cez vse povezave v

Γ. Na koncu dolzini najkrajse najdene poti pristejemo 1 za dolzino povezave, ki smo jo odstranili

in tako dobimo ozino grafa.

3.3.2 Implementacija algoritma za izracun ozine grafa

Za implementacijo sem si izbral prvi algoritem, ki isce s pomocjo iskanja v sirino. Pseudo-

koda, povzeta po [9], se nahaja spodaj.

function OzinaGrafa(Γ)

ozina←∞for all v ∈ V (Γ) do

S ← ∅R← {v}Predhodnik(v)← null

Oddaljenost(v)← 0

while R 6= ∅ do

choose x ∈ R

S ← S ∪ {x}

22

Page 33: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

R← R \ {x}for all y ∈ Sosedi(x) \ {Predhodnik(x)} do

if y /∈ S then

Predhodnik(y)← x

Oddaljenost(y)← Oddaljenost(x) + 1

R← R ∪ {y}else

ozina← min{ozina,Oddaljenost(x) + Oddaljenost(y) + 1}end if

end for

end while

end for

return ozina

end function

Zgornji algoritem nam vrne stevilo, ki predstavlja ozino grafa. Velikokrat pa uporabnika

zanima tudi, kako najti vsaj en najkrajsi cikel v grafu. Zato bomo zgornjemu algoritmu dodali

se eno malenkost. Ko najdemo neko manjso ozino grafa, si v posebno strukturo (v tem primeru

kar tabelo), zapisemo katera so tista vozlisca, ki so nam dala trenutno najkrajsi cikel. Po tem, ko

se algoritem izvede do konca, imamo v posebni tabeli shranjena vozlisca najkrajsega cikla, zato

lahko usrezne povezave obarvamo z drugo barvo in tako uporabniku na vizualen nacin podamo

povratno informacijo o najkrajsem najdenem ciklu.

Kode zaradi njene obseznosti v samem diplomskem delu ne bom prikazal.

3.4 Izracun in prikaz premera grafa

3.4.1 Algoritem za izracun premera grafa

Algoritem za izracun premera grafa je sledec.

Za vsako vozlisce v grafu izvedemo Dijkstrov algoritem, ki nam izracuna razdalje od izhodiscnega

vozlisca do vseh ostalih vozlisc. Pregledamo razdalje in si zapomnimo najvecjo. Na koncu nam

da najdaljsa razdalja premer grafa. Vse kar se potrebujemo, je to, da obarvamo pripadajoco pot

in jo s tem prikazemo uporabniku.

Ceprav se zdi algoritem na prvi pogled enostaven, je implementacija vseeno netrivialna.

3.4.2 Implementacija algoritma za izracun in prikaz premera grafa

V aplikaciji z0diak je graf shranjen v posebni strukturi, ki vsebuje seznama vozlisca in povezav,

kot tudi njihove oznacbe, barve za prikaz, itd. Za izvedbo Dijkstrovega algoritma [15] pa potrebu-

jemo sosednostno matriko. Najprej moramo torej grafovsko strukturo preoblikovati v sosednostno

matriko danega grafa. Spodnji delcek kode 3.5 nam naredi ravno to.

1 // Stevilo vozlisc

2 var Vno = Graph.nodes.length;

23

Page 34: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

3 // Inicializiramo sosednostno matriko tako , da v vsaki celici vsebuje vrednost

neskoncno

4 var adjMatrix = new Array(Vno);

5 for (var i = 0; i < Vno; i++) {

6 adjMatrix[i] = new Array(Vno);

7 }

8 for (var i = 0; i < Vno; i++) {

9 for (var j = 0; j < Vno; j++) {

10 adjMatrix[i][j] = Infinity;

11 }

12 }

13

14 // Tu preslikamo grafovsko strukturo v sosednostno matriko

15 for (var i = 0; i < Graph.nodes.length; i++) { // Sprehodimo se cez vsa vozlisca

16 var node = Graph.nodes[i]. construct.vertex.content;

17 for (var ne = 0; ne < Graph.nodes[i]. construct.neighbours.length; ne++) { //

Sprehodimo se cez vse sosede tega vozlisca

18 var neighbour = Graph.nodes[i]. construct.neighbours[ne]. vertex.content;

19 for (var j = 0; j < Graph.nodes.length; j++) { // Sprehodimo se cez vsa

vozlisca , da poiscemo njegov indeks v nasi grafovski strukturi

20 var newNode = Graph.nodes[j]. construct.vertex.content;

21 if (newNode == neighbour) {

22 // Ker je graf neusmerjen , bo matrika sosednosti simetricna

23 adjMatrix[i][j] = 1;

24 adjMatrix[j][i] = 1;

25 break;

26 }

27 }

28 }

29 }

Delcek kode 3.5: Preoblikovanje strukture grafa v sosednostno matriko.

Sedaj, ko imamo sosednostno matriko, jo lahko brez tezav podajamo Dijkstrovemu algoritmu.

Za prikaz najdaljse razdalje uporabniku potrebujemo tudi objekt, v katerega bomo shranjevali

do sedaj najdeno najdaljso pot. V delcku kode 3.6 ustvarimo tak objekt in se nato sprehodimo

cez vsa vozlisca grafa, iz katerih potem s pomocjo Dijkstrovega algoritma poiscemo najkrajse

poti do vseh ostalih vozlisc grafa.

Ko dobimo najkrajse poti, se sprehodimo cez tabelo teh poti in poiscemo najdaljso, ter si

zapomnimo, kje se pot zacne in konca, koliksna je njena dolzina in kateri so vmesni cleni poti.

Vse te informacije bomo na koncu podali uporabniku.

1 // Objekt , ki bo vseboval podatke o najdaljsi najkrajsi poti

2 var longestShortestPath = {

3 length: 0,

4 start: 0,

5 end: 0,

6 paths: null

7 };

8 // Sprehodimo se cez vozlisca grafa

9 for (var i = 0; i < Graph.nodes.length; i++) {

10 // Uporabimo Dijsktrov algoritem , za iskanje najkrajsih poti do ostalih

vozlisc v grafu

11 var shortestPaths = shortestPath(adjMatrix , Graph.nodes.length , i);

12 // Sprehodimo se cez vse najkrajste poti in iscemo najdaljso

13 for (var j = 0; j < shortestPaths.pathLengths.length; j++) {

14 if (shortestPaths.pathLengths[j] > longestShortestPath.length) {

15 // Shranimo si vse podatke , da bomo lahko pot kasneje rekonstruirali

16 longestShortestPath.length = shortestPaths.pathLengths[j];

17 longestShortestPath.start = shortestPaths.startVertex;

18 longestShortestPath.end = j;

24

Page 35: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

19 longestShortestPath.paths = shortestPaths;

20 }

21 }

22 }

Delcek kode 3.6: Iskanje najdaljse najkrajse poti med dvema vozliscema v grafu.

Ko se algoritem zakljuci, dobimo dolzino najdaljse poti v grafu in tudi njene vmesne clene.

Vse, kar moramo storiti sedaj, je da to pot pobarvamo, dolzino pa izpisemo v tekstovno polje

pod platnom.

3.5 Preverjanje zadostnih pogojev za obstoj Hamiltonovega

cikla

Kot receno, je izmed vseh prej omenjenih izrekov za ugotavljanje hamiltonskosti grafa na-

jmocnejsi Posev izrek, kljub temu pa sem se odlocil implementirati tudi Diracov in Orejev izrek.

Za preverjanje zadostnih pogojev za obstoj Hamiltonovega cikla v grafu bomo ustvarili en gumb,

na katerega bodo vezane tri razlicne funkcije, izmed katerih prva preveri ali izrisani graf zadosca

pogojem izreka Posa, druga preveri izpolnjevanje pogojev Diracovega, tretja pa Orejevega izreka.

3.5.1 Algoritem za preverjanje pogojev izreka Posa

Izrek Posa je sestavljen iz dveh delov. Prvi del pregleda, ali graf zadosca pogoju, da za vsak

1 ≤ k < (n − 1)/2 obstaja najvec k − 1 vozlisc stopnje najvec k, kjer je n = |V |. To enostavno

resimo z eno zanko. Najprej povecujemo k od 1 pa do (n−2)/2. Za vsak k bomo nato pogledali v

zaporedje stopenj grafa in preverili koliko je vozlisc s stopnjo najvec k. Ce je takih vozlisc vsaj k,

potem graf ne zadosca prvemu pogoju. V delcku kode 3.7 je podana komentirana implementacija

tega algoritma.

1 // Pridobimo zaporedje stopenj (npr [3,2,1])

2 var zaporedjeStopenj = ZaporedjeStopenj(true);

3 // Ga obrnemo , tako da je najmanjse stevilo na zacetku (npr [1,2,3])

4 zaporedjeStopenj.reverse ();

5 // Spremenljivka v kateri hranimo stevilo vozlisc , katerih stopnja je najvec k

6 var steviloVozlisc = 0;

7 // Spremeljivka , ki nam na koncu algoritma pove ali graf zadosca osnovnemu pogoju

izreka

8 var zadostuje = true;

9 // Sprehodimo se cez vse k

10 for (var k = 1; k < (zaporedjeStopenj.length - 1) / 2; k++) {

11 // Ker imajo tabele tu nicelni indeks , od k odstejemo 1

12 // Ce najdemo kako tako vozlisce na k-tem mestu v tabeli , to pomeni da je vsaj

k vozlisc stopnje manj ali enako k

13 if (zaporedjeStopenj[k - 1] <= k) {

14 // Graf ne zadostuje osnovnemu pogoju

15 zadostuje = false;

16 break;

17 }

18 }

Delcek kode 3.7: Algoritem za preverbo osnovnega pogoja izreka Posa.

25

Page 36: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Drugi del moramo preveriti le pod pogojem, da je n = |V | liho stevilo. V tem primeru mora

veljati dodatni pogoj, da obstaja najvec (n − 1)/2 vozlisc stopnje najvec (n − 1)/2. Tukaj se

bomo sprehodili cez vsa vozlisca grafa in presteli tista, katerih stopnja je najvec (n − 1)/2. Ce

je takih vec kot (n − 1)/2, potem graf ne zadosca dodatnemu pogoju in posledicno ne zadosca

pogojem izreka Posa. Kode implementacije dodatnega pogoja za grafe lihega reda v diplomskem

delu ne bomo navajali.

3.5.2 Algoritem za preverjanje pogojev Diracovega izreka

Izmed vseh treh izrekov za zadostni pogoj obstoja Hamiltonovega cikla je Diracov algoritmicno

najmanj zahteven. Vse kar potrebujemo, da dokazemo neizpolnjevanje pogojev Diracovega izreka

je vsaj eno vozlisce, katerega stopnja je manjsa od polovice reda grafa. Tedaj graf ne ustreza

pogojem Diracovega izreka in lahko to sporocimo uporabniku. Ker nam funkcija za izracun

zaporedja stopenj le-te uredi po velikosti, je to povsem preprosto preveriti. Kode implementacije

zaradi trivialnosti ne bomo navajali.

3.5.3 Algoritem za preverjanje pogojev Orejevega izreka

Najvec tezav sem imel pri implementaciji preverjanja pogojev Orejevega izreka. Tu moramo

namrec pregledati vse pare nesosednih vozlisc, sesteti njuni stopnji in pogledati ali je vsota

manjsa od reda grafa Γ = (V,E). Ce najdemo tak par vozlisc, potem graf Γ ne zadosca pogojem

Orejevega izreka in lahko to sporocimo uporabniku.

Preoblikujmo zgornji opis postopka v dejanski algoritem. Najprej zelimo na eleganten nacin

pregledati vse pare vozlisc. To storimo z dvema zankama, ki gresta obe cez vsa vozlisca grafa.

Prva zanka si izbere neko vozlisce v, nato pa preko druge zanke poiscemo vsa nesosednja vozlisca

u, da lahko preverimo pogoj. Vendar pa bomo na ta nacin vsak par vozlisc primerjali dvakrat.

Prvic ko bomo izbrali vozlisce v in ga preverjali skupaj z vozliscem u, in drugic, ko bomo izbrali

vozlisce u in ga preverjali skupaj z vozliscem v. Da resimo ta problem, bomo uporabili dodatno

tabelo pregledanih vozlisc. Vanjo bomo shranjevali vozlisca v, izbrana v prvi zanki, ki smo jih

ze uporabili za preverjanje pogoja. V drugi zanki se bomo tako ob izbiri vozlisca u najprej

prepricali, da v 6= u, da u in v nista soseda in da tabela pregledanih vozlisc ne vsebuje vozlisca

u. Sele ce so vsi trije pogoji izpolnjeni, lahko preverimo ce trditev |u|+ |v| ≥ |V | drzi za ta par

vozlisc. Ce ta trditev drzi za vse pare vozlisc, ki jih s tem algoritmom najdemo, potem celoten

graf Γ ustreza pogojem Orejevega izreka in posledicno v njem obstaja Hamiltonov cikel.

V delcku kode 3.8 si lahko ogledate implementacijo zgoraj opisanega algoritma v programskem

jeziku JavaScript.

1 var pregledani = new Array();

2 var vozlisca = new Array ();

3 var sosedi = new Array();

4

5 // Napolnimo tabeli vozlisc in sosedov

6 for (var i = 0; i < Graph.nodes.length; i++) {

7 vozlisca.push(Graph.nodes[i]. construct.vertex.content);

8 sosedi[vozlisca[i]] = new Array();

9 for (var j = 0; j < Graph.nodes[i]. construct.neighbours.length; j++) {

10 sosedi[vozlisca[i]]. push(Graph.nodes[i]. construct.neighbours[j]. vertex.

content);

11 }

26

Page 37: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

12 }

13 document.getElementById(’area’).value = "Vsota poljubnega para nesosednjih vozlisc

mora biti vecja ali enaka stopnji grafa , teday graf premore Hamiltonov cikel

.\n";

14 var zadosca = true;

15 // Gremo cez vsa vozlisca grafa

16 for (var i = 0; i < vozlisca.length; i++) {

17 var A = vozlisca[i];

18 // In nato se enkrat cez vsa vozlisca grafa

19 for (var j = 0; j < vozlisca.length; j++) {

20 var B = vozlisca[j];

21 // Preverimo , da ne gre za isto vozlisce , da tocke B nismo ze pregledali

in da A in B nista sosednji vozlisci

22 if (A !== B && pregledani.indexOf(B) === -1 && sosedi[A]. indexOf(B) ===

-1) {

23 document.getElementById(’area’).value += "\nVozlisci " + A + " in " +

B + " imata vsoto stopenj";

24 // Ce vsota stopenj vozlisc A in B enaka ali vecja od stopnje grafa ,

potem graf ne zadosca pogojem Orejevega izreka

25 if (sosedi[A]. length + sosedi[B]. length < vozlisca.length) {

26 document.getElementById(’area’).value += " manjso od stopnje grafa

. NI OK!";

27 zadosca = false;

28 }

29 else {

30 document.getElementById(’area’).value += " vecjo ali enako stopnji

grafa. OK!";

31 }

32 }

33 }

34 // Shranimo si ze pregledana vozlisca

35 pregledani.push(A);

36 }

Delcek kode 3.8: Algoritem za preverbo pogoja Orejevega izreka.

3.6 Izvoz grafa v slikovni obliki

Shranjevanje platna v slikovno obliko ni algoritmicno zahteven proces, zato se v podrobnosti

implementacije ne bomo spuscali. Vse kar moramo namrec narediti, je uporabiti funkcijo za izvoz

platna v bitno sliko in nato to sliko shraniti na uporabnikov racunalnik. Na sliki 3.1 si lahko

ogledate cirkulant Circ(17, {3, 8}), kot smo ga z novo funkcijo izvozili v slikovni format PNG.

Ustvarjena slika ima prozorno ozadje, kar bo pripomoglo k temu, da bodo bodoce seminarske

naloge studentov izgledale se bolje.

3.7 Ilustracija uporabe novih funkcionalnosti

3.7.1 Iskanje grafa ki vsebuje Hamiltonov cikel, vendar ne zadosca

pogojem izreka Diraca

Kot smo ze omenili, je izrek Posa mocnejsi od Diracovega in Orejevega izreka. Prikazali smo

tudi graf, ki zadosca pogojem izreka Posa, ne pa tudi Diraca in Oreja. Poskusimo najti graf, ki

bo zadoscal le Posevemu in Orejevemu izreku, ne pa tudi Diracovemu. Ker tako Orejev, kot tudi

27

Page 38: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Slika 3.1: Slika grafa, ki je bila izvozena s pomocjo funkcije za izvoz grafa v slikovni obliki.

Diracov izrek sledita iz izreka Posa, se lahko osredotocimo le na ta dva izreka. Poiskati moramo

torej graf, ki bo imel vsoto poljubnih dveh nesosednjih vozlisc vsaj enako stopnji grafa n, hkrati

pa bo graf vseboval vsaj eno vozlisce stopnje manj od n/2.

Zacnimo z najmanjsim moznim grafom, ki lahko vsebuje hamiltonov cikel. To je 3-cikel. Ce

uporabimo funkcijo za prikaz veljavnosti izrekov vidimo, da graf izpolnjuje pogoje vseh treh

izrekov. Dodajmo se eno vozlisce in ga povezimo se z dvema vozliscema (graf ne more vsebovati

hamiltonovega cikla, ce vsebuje vozlisce stopnje 1). Ponovno vidimo, da graf zadosca vsem trem

izrekom. Dodajanje se ene povezave tega dejstva ne bo spremenilo, tako da dodajmo se eno

vozlisce. To vozlisce pa lahko z obstojecim grafom povezemo na vec nacinov. Ce zelimo, da

graf ne bo zadostoval pogojem Diracovega izreka, moramo obdrzati vsaj eno vozlisce stopnje

2, hkrati pa more biti vsota parov nesosednjih vozlisc, vsaj 5, da bo graf zadoscal pogojem

Orejevega izreka. Iz tega torej sledi, da novo dodano vozlisce povezemo z vozlisci stopnje 2,

3 in 3. Ce ponovno preverimo veljavnost pogojev Oreja, Diraca in Posa vidimo, da graf zares

zadostuje le izreku Oreja in Posa. Dobljeni graf je prikazan na sliki 3.2.

Slika 3.2: Graf, ki zadosca pogojem izrekov Posa in Oreja, ne pa tudi pogojem izreka Diraca.

3.7.2 Iskanje kletk s podano ozino in stopnjo grafa

Kot receno je kletka v teoriji grafov regularni graf, ki ima za dano ozino najmanjse mozno

stevilo vozlisc. Poskusimo poiskati nekaj grafov za manjse ozine o in stopnje s. Ker je ozina

28

Page 39: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

definirana kot dolzina najkrajsega cikla, moramo zaceti z o = 3 in stopnjo grafa s = 2. Za ta

dva parametra hitro najdemo graf, ki ustreza zahtevam. To je 3-cikel.

Povecajmo torej stopnjo grafa s na 3. Ker graf na treh vozliscih ne more vsebovati vozlisca s

stopnjo vecjo od 2, moramo dodati se eno vozlisce in ga povezati z vsemi tremi vozlisci v grafu.

Dobili smo kletko K4.

Povecajmo sedaj zeljeno ozino grafa o na 4. Ustvarimo 4-cikel in poskusimo dodati cim manj

vozlisc tako, da se ozina ne zmanjsa, graf pa postane kubicen. Ker so kubicni grafi vedno sodega

reda, stiri vozlisca pa so za ozino 4 premalo, hitro spoznamo, da moramo dodati se vsa dve

vozlisci. Edini smiselen nacin, na katerega lahko dodamo ti dve vozlisci v graf je, da ju povezemo

med seboj in nato se z dvema obstojecima vozliscema ustvarimo 4-cikel. Ozina grafa je se vedno

enaka 4, imamo pa sedaj 4 vozlisca stopnje 2 in le dve vozlisci zahtevane stopnje 3. Bralec bo

sam dodal dve povezavi v graf in se z gumbom Ozina grafa preprical, da z dodajanjem povezav

ni zmanjsal ozine grafa.

Malo pa se zalomi, ko povecamo zeljeno ozino grafa o na 5. Kot prej lahko najprej ustvarimo

5-cikel in zacnemo dodajati na platno vozlisca. Ker moramo vsem obstojecim vozliscem zvisati

stopnjo za 1, to pomeni, da moramo dodati vsaj dve vozlisci in ju povezati z grafom tako, da

ne zmanjsamo njegove ozine. Dobljeni graf z oznakami je za lazje sledenje prikazan na sliki 3.3.

Sedaj imamo le dve vozlisci stopnje 3, ostalim pa stopnje z dodatnimi povezavami ne moremo

povecati brez da bi zmanjsali ozino, torej moramo dodati vsaj se eno vozlisce. Odlocil sem se, da

ga povezem z vozliscema stevilka 4 in 7. Na ta nacin nismo pokvarili ozine grafa (kar lahko bralec

preveri z gumbom), smo pa povecali stopnjo dvema vozliscema. Ponovno smo primorani dodati

se eno vozlisce in ga povezati z enim izmed vozlisc stopnje 2. Sam sem se odlocil za povezavo z

vozliscem 5, brez skode za ozino grafa pa ga lahko povezemo le se z vozliscem 6. Zadnje novo

vozlisce sedaj ze pricakovano povezemo z vozliscem 2 ter vozliscema 8 in 9. Z uporabo orodja

Ozina grafa se prepricamo, da je ozina grafa se vedno enaka 5, z uporabo orodja Zaporedje stopenj

pa se hitro prepricamo, da so vse stopnje vozlisc enake 3. Nekateri bralci ste graf ze prepoznali,

za ostale pa naj omenim, da smo dobili posploseni Petersenov graf GP (5, 2), ki ima, poleg tega,

da je to edina 5-kletka, se kup lepih lastnosti. Seveda smo pri zgornjem iskanju 5-kletke malce

ugibali in nismo preverili vseh moznosti, a s pomocjo novih orodij v aplikaciji z0diak bi z nekaj

truda lahko zadevo izpeljali povsem sistematicno.

Slika 3.3: Graf po tem ko smo 5-ciklu dodali dve vozlisci in ju povezali z dvema obstojecimavozliscema.

29

Page 40: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

3.7.3 Iskanje najvecjega grafa s podano stopnjo in premerom

Tu iscemo najvecji mozen graf (v smislu stevila vozlisc), ki bo imel sano stopnjo s in premer

p. Obstaja zgornja meja stevila vozlisc, ki jih tak graf lahko vsebuje, imenovana Moorova meja.

Za s = 2 je ta meja enaka 2p− 1, medtem ko je za s > 2 enaka 1 + s (s−1)p−1s−2 [10]. Za poljubna

s in p poznamo torej zgornjo mejo stevila vozlisc, ki jih graf lahko vsebuje. Grafom, ki imajo

stevilo vozlisc enako Moorovi meji, recemo Moorovi grafi.

Graf s stopnjo s = 1 in premerom p = 1 ima dve med seboj povezani vozlisci. Grafu se brez

povecevanja stopnje grafa ne da dodati se kaksnega vozlisca.

Povecajmo si torej oba parametra za 1. Ker zelimo, da imajo vsa vozlisca stopnjo dva, se

lahko osredotocimo na cikle. 3-cikel ima premer enak 1, medtem ko ima 4 cikel ze premer dva in

tako zadosca pogojem, vendar pa nas zanima ce lahko dodamo v graf se kaksno vozlisce. 5-cikel

zadosca tako zeljeni stopnji kot tudi premeru. Ce zelimo tu dodati se kaksno vozlisce, ostane

stopnja grafa enaka, vendar pa se premer grafa poveca na 3 in tako ne ustreza vec nasim zeljam.

Poiscimo sedaj najvecji graf za s = 3 in p = 2. Dodajmo na platno 4 vozlisca. Eno izmed

vozlisc povezimo z vsemi ostalimi (vozlisce ima sedaj stopnjo 3 in ne sme dobiti se enega soseda).

Za vsako vozlisce stopnje 1 dodajmo se dve vozlisci in ju povezimo s temi vozlisci tako, da dobimo

4 vozlisca stopnje 3 in 6 vozlisc stopnje 1. Na sliki 3.4 je prikazan trenutni graf in oznake vozlisc.

Ce preverimo premer grafa, vidimo da je ta enak 4, torej ga moramo zmanjsati. Ob kliku na

gumb Premer grafa se nam poleg izpisa premera grafa na grafu obarva tudi ena izmed poti

dolzine 4 med dvema vozliscema. Ce povezemo ti dve vozlisci in ponovno kliknemo na gumb,

se nam obarva pot med drugima dvema vozliscema. Ta postopek nadaljujemo, dokler ni premer

grafa enak 2. Ce izracunamo Moorovo mejo za s = 3 in p = 2, dobimo stevilo 10 (toliko imamo

mi vozlisc v grafu), kar pomeni, da smo nasli graf, ki zadosca vsem pogojem problema, hkrati pa

mu ne moremo dodati se enega vozlisca, saj smo dosegli Moorovo mejo. Ce bi vozlisca dobljenega

Moorovega grafa malo preuredili, bi videli, da imamo na platnu zopet posploseni Petersenov graf

GP(5, 2) iz prejsnjega podrazdelka. Seveda smo tudi tukaj iskanje izvedli nekoliko nesistematicno,

ker pa smo nasli Moorov graf, smo lahko prepricani, da se dobljenega grafa ne da izboljsati.

Slika 3.4: Graf po tem ko smo vsakem izmed vozlisc 2, 3 in 4 dodali se po dva soseda. Z rdecoje predstavljena ena izmed razdalj dolzine 4, ki predstavlja premer grafa.

30

Page 41: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Zakljucek

V diplomskem delu smo analizirali in nadgradili delovanje spletne aplikacije za manipulacijo

grafov po imenu z0diak. Opisali smo glavne dele aplikacije in njene funkcionalnosti. Preden

smo se lahko lotili razvoja novih, smo se morali najprej z aplikacijo spoznati veliko bolje, kot

smo jo bili vajeni uporabljati za delo na fakulteti. Pregled in ponovna obravnava zapiskov s

predavanj sta nam omogocila, da smo aplikacijo analizirali z zornega kota koncnega uporabnika,

to je studenta. Ob tem smo si zapisovali ideje za nadgradnje in izboljsave. Le-teh je bilo kar

nekaj, vendar pa so studentje kljub nasemu temeljitemu premisleku vseeno nasli se dodatne

predloge. Z analizo smo prisli do idej, ki pa smo jih morali s pomocjo studentov ovrednotiti.

Sestavili smo anketo, v kateri so nam studentje podali svoje mnenje o moznih nadgradnjah in

njihovem izkustvu z aplikacijo. Dobili smo pomembne informacije, ki so nas vodile v izbiro

novih funkcionalnosti za implementacijo. Le-te smo morali pred zacetkom razvoja ovrednostiti

in oceniti njihovo kompleksnost ter potreben cas za njihov razvoj. Izbrali smo funkcionalnosti

za izpis zaporedja stopenj, izracun in prikaz ozine ter premera grafa, preverjanje pogojev izrekov

Posa, Diraca in Oreja ter izvoz grafa v slikovni obliki. Po tem, ko smo poiskali potrebne algoritme

za implementacijo, smo jih analizirali se z vidika casovne zahtevnosti, saj imajo tudi racunalniki

neke omejitve. Morali smo namrec misliti tudi na studente, ki ne delajo na tako zmogljivih

racunalnikih. Na sreco so bili vsi algoritmi casovno relativno nezahtevni, tako da smo jih lahko

brez tezav dodali v aplikacijo. Tu smo dobrsen casa porabili za seznanitev s strukturo programa

in podatkov v njem, preden smo nasli vse potrebno. Nazadnje smo funkcionalnosti razvili in

ilustrirali njihovo uporabo na vecih primerih.

Menim, da smo dosegeli vse zastavljene cilje, vendar pa se zavedam, da najbolj zeljene

funkcionalnosti, razveljavitve akcij, nismo uspeli implementirati v aplikacijo. Njen razvoj bi

pomenil temeljito prestrukturiranje aplikacije od temeljev navzgor. Zagotovo je ostalo se veliko

dela za nadaljni razvoj. Kljub temu pa sem mnenja, da bo aplikacija sedaj studentom lazja za

uporabo in hkrati tudi bolj uporabna.

31

Page 42: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Literatura

[1] Andersson, E., Greenspun P., Grumet A. (2006). Software Engineering for Internet Appli-

cations. The MIT Press.

[2] Crockford D. (2008). JavaScript: The Good Parts. Sebastopol, CA: O’Reilly Media, Inc.

[3] Gamma E., Helm R., Johnson R., Vlissides J. (1994). Design Patterns: Elements of Reusable

Object-Oriented Software. U.S.A: Addison-Wesley.

[4] Jurkovic, L. (2013). Aplikacija za delo z grafi. Diplomsko delo, Ljubljana: Univerza v Ljubl-

jani, Pedagoska fakulteta.

[5] Sedgewick R., Wayne K. (2011). Algorithms (4th edition). U.S.A: Addison-Wesley Profes-

sional.

[6] Wilson, Robin J., Watkins, John J. (1997). Uvod v teorijo grafov [prevedel Janez Zerovnik

; predelava slik Janja Mikus]. Ljubljana: Drustvo matematikov, fizikov in astronomov

Slovenije.

[7] Baxter L. (15. februar 2013). MECHANISM OF ACTION AND EFFECTS: Designing Great

Feedback Loops. Pridobljeno 5.8.2016, s https://www.smashingmagazine.com/2013/02/

designing-great-feedback-loops/

[8] David Eppstein. (25. november 2007). Two conjugate dessins d’enfants. Pridobljeno

4.6.2016, s https://en.wikipedia.org/wiki/File:Conjugate-dessins.svg

[9] Israel Institute of Technology. (31. december 2003). Computing the girth of a graph Pri-

dobljeno 4.6.2016, s http://webcourse.cs.technion.ac.il/234247/Winter2003-2004/

ho/WCFiles/Girth.pdf

[10] Miller M., Siran J. (original 5. december 2005, 2. edicija 16. maj 2013). Moore graphs and

beyond: A survey of the degree/diameter problem. Pridobljeno 25.8.2016, s http://www.

combinatorics.org/ojs/index.php/eljc/article/viewFile/DS14/pdf

[11] Perlman G. (Neznano). USE Questionnaire: Usefulness, Satisfaction, and Ease of use. Pri-

dobljeno 10.1.2016, s http://garyperlman.com/quest/quest.cgi?form=USE

[12] Razan P. (17. februar 2009). Multilevel Undo and Redo Implementation in C# - Part II (Us-

ing Command Pattern). Pridobljeno 5.8.2016, s http://www.codeproject.com/Articles/

33384/Multilevel-Undo-and-Redo-Implementation-in-Cshar

[13] Sparl, P. Zapiski iz predmeta Teorija grafov (za leto 2015). Vir spletna ucilnica Univerze v

Ljubljani, Pedagoska fakulteta.

[14] Weisstein, Eric W. (Neznano). Graph Diameter. Pridobljeno 7.6.2016, s http://mathworld.

wolfram.com/GraphDiameter.html

32

Page 43: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

[15] (Neznano). (21. oktober 2004). Dijkstra’s shortest path algorithm in JavaScript. Pridobljeno

5.6.2016, s http://mcc.id.au/2004/10/shortest-path-js.html

[16] (Neznano). (29. julij 2016). Degree (graph theory). Pridobljeno 5.8.2016, s https://en.

wikipedia.org/wiki/Degree_(graph_theory)

33

Page 44: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Pozdravljeni,

sem Luka Korošec, študent Pedagoške fakultete (Matematika – računalništvo), in pripravljam diplomsko

delo v katerem bom analiziral aplikacijo z0diak za delo z grafi. Namen raziskave je ugotoviti, kakšno je

mnenje študentov o uporabnosti aplikacije in katere dodatne funkcionalnosti bi si želeli v aplikaciji. Vaše

sodelovanje je za raziskavo ključno, saj mi bodo odgovori pomagali pri razvoju dodatnih funkcionalnosti

aplikacije z0diak za uporabo na Pedagoški fakulteti.

Anketa je anonimna, za izpolnjevanje pa boste potrebovali približno 10 minut časa. Zbrani podatki bodo

obravnavani strogo zaupno in analizirani na splošno (in nikakor na ravni odgovorov posameznika).

Za vaše sodelovanje se vam prijazno zahvaljujem.

Luka Korošec

Anketa o uporabi aplikacije z0diak

1. Kako ocenjujete uporabnost spodaj naštetih funkcij? Tukaj vas sprašujem po vašem mnenju o uporabnosti funkcij: katere funkcije so se vam zdele bolj

uporabne in katere so se vam zdele manj uporabne. Vsako funkcijo ocenite z oceno od 1 do 5, pri čimer

1 označuje najmanj, 5 pa najbolj uporabno funkcijo. Več funkcijam date lahko enako oceno.

Funkcija aplikacije Ocena uporabnosti

Shranjevanje in nalaganje grafa s pomočjo tekstovnih datotek

Izrisovanje pripadnikov podprtih družin grafov (cikli, cirkulanti, polni grafi, poti, GP)

Dvodelnost grafa (aplikacija pove ali je graf dvodelen ali ne)

Možnost vklopa/izklopa oznak vozlišč

Možnost naključne razporeditve vozlišč

Približevanje in oddaljevanje pogledat (zoom in/out)

Izris razdaljne particije

Pomoč pri iskanju avtomorfizma

Pomoč pri iskanju Hamiltonove poti/cikla

Barvanje vozlišč grafa

Preimenovanje vozlišč

Premikanje vozlišč grafa

2. Katere funkcije programa ste najbolj uporabljali? Tukaj vas sprašujem po pogostosti uporabe naštetih funkcij. Vsako funkcijo ocenite s številko od vključno

1 do 5, pri čimer 1 označuje najmanj, 5 pa najbolj uporabljano funkcijo. Več funkcij lahko ocenite z isto

oceno.

Funkcija aplikacije Ocena uporabljanja

Shranjevanje in nalaganje grafa s pomočjo tekstovnih datotek

Izrisovanje pripadnikov podprtih družin grafov (cikli, cirkulanti, polni grafi, poti, GP)

Dvodelnost grafa (aplikacija pove ali je graf dvodelen ali ne)

Page 45: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

Možnost vklopa/izklopa oznak vozlišč

Možnost naključne razporeditve vozlišč

Približevanje in oddaljevanje pogledat (zoom in/out)

Izris razdaljne particije

Pomoč pri iskanju avtomorfizma

Pomoč pri iskanju Hamiltonove poti/cikla

Barvanje vozlišč grafa

Preimenovanje vozlišč

Premikanje vozlišč grafa

3. Katere izmed spodnjih dodatnih funkcij v aplikaciji z0diak, bi bili po vašem mnenju

uporabni? V spodnji tabeli je naštetih nekaj funkcij, ki jih aplikacija z0diak trenutno ne vsebuje. S številko od

vključno 1 do 5 ocenite, katere dodatne funkcionalnosti bi si želeli uporabljati v novi verziji z0diaka, pri

čimer 1 označuje najmanj, 5 pa najbolj zaželeno funkcijo. Več funkcij lahko ocenite z isto oceno. Če imate

kakšne predloge, ki jih niste zasledili med spodaj naštetimi, jih prosim dopišite na konec in potem tudi

ocenite.

Funkcija Ocena zaželenosti implementacije

Izpis zaporedja stopenj

Izračun in prikaz ožine in premera grafa

Izračun in prikaz razdalje med dvema vozliščema

Preverjanje zadostnih pogojev za obstoj Hamiltonovega cikla (preko izreka Posa, Oreja in Diraca)

Preverjanje nekaterih zadostnih pogojev za (ne)izomorfnosti dveh grafov (pregled seznama možnih razhajanj med grafoma)

Razveljavitev zadnje akcije (undo)

Preverjanje nekaterih potrebnih pogojev za vozliščno tranzitivnost

Pomoč pri določanju kromatičnega števila grafa

Dodatne podprte družine grafov (na primer: hiperkocke, Hammingovi grafi, polni večdelni grafi, …)

Možnost ogleda in dela z dvema grafoma hkrati

Produkti grafov (kartezični, direktni, leksikografski produkt)

Izris grafa povezav trenutnega grafa

Prikaz maksimalnega polnega podgrafa

Delo s sosednostnimi matrikami grafa in izračun spektra grafa

Podpora za usmerjene grafe

Page 46: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

4. Uporabnost, enostavnost uporabe, enostavnost učenja uporabe in zadovoljstvo V prvem stolpcu spodnje tabele so napisane trditve, ki se nanašajo na aplikacijo z0diak. S številko od

vključno 1 do 5 ocenite, v kolikšni meri se strinjate s trditvami, pri čimer 1 označuje popolno

nestrinjanje, 5 pa popolno strinjanje. Več trditev lahko ocenite z isto oceno. Trditve so vsebinsko

razdeljene v štiri sklope, ki so označeni z odebeljeno pisavo.

Mera strinjanja

Uporabnost aplikacije

Pomaga mi biti bolj učinkovit/a.

Pomaga mi biti bolj produktiven/na.

Je koristna.

Pomaga mi pri doseganju lastnih ciljev.

Prihrani mi čas, ko jo uporabljam.

Izpolnjuje moje potrebe.

Enostavnost uporabe

Je enostavna za uporabo.

Je fleksibilna.

Lahko jo uporabljam brez pisnih navodil.

Ob uporabi ne opazim nobenih nedoslednosti.

Če naredim napako, jo lahko hitro odpravim.

Enostavnost učenja uporabe

Hitro sem se jo naučil/a uporabljati.

Hitro sem postal/a spreten/na z njo.

Z lahkoto sem si zapomnil/a, kako jo uporabljati.

Zadovoljstvo

Zadovoljen/na sem z aplikacijo.

Je prijetna za uporabo.

Dela tako, kot si želim, da deluje.

Delo brez nje si težko predstavljam.

Če ste pri uporabi aplikacije naleteli na kakšno težavo ali pa vas je pri delu kaj zmotilo, bi vas prosil da to

zapišete spodaj:

Prišli ste do konca ankete! Zahvaljujem se vam za vloženi čas in trud! Vaši odgovori

mi bodo v veliko pomoč pri nadaljnjem delu.

Page 47: Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE … · PEDAGO SKA FAKULTETA Luka Taras Koro sec ANALIZA IN NADGRADNJA APLIKACIJE ZA DELO Z GRAFI DIPLOMSKO DELO LJUBLJANA, 2016.

IZJAVA O AVTORSTVU DIPLOMSKEGA DELA

Spodaj podpisani Luka Taras Korosec izjavljam, da sem diplomsko delo napisal sam in da so

uporabljeni viri in literatura korektno navedeni.

Luka Taras Korosec

Ljubljana, september 2016