Visualizer

 

Uvod

Visulizer je vizuelna komponenta ExGERM projekta. Služi za grafičko prikazivanje i menjanje grafova na krajnje jednostavan i intuitivan način. Poseduje tzv. Force-based algoritam pomoću kojeg automatski raspoređuje čvorove grafa i tako olakšava rad korisniku. Tu je i Navigator u gornjem desnom uglu sa svim potrebnim opcijama za pregledanje prikazanog grafa.

Sve što je potrebno za rad kroz ovu komponentu nalazi se na glavnom toolbar-u ili u Edit meniju. Ovaj, pomalo minimalistički prilaz, je iskorišćen iz razloga što se sva funkcionalnost može postići na taj način, bez dodatnih pop-up menija, izbornih lista, nepotrebnih prozora...

Stanja u koja se može uvesti visualizer:

·         Default stanje (stanje selekcije)

·         Stanje dodavanja čvorova

·         Stanje povezivanja čvorova neusmerenim vezama

·         Stanje povezivanja čvorova usmerenim vezama

·         Stanje brisanja veza i čvorova

 

Neophodni dodaci:

·         Dodavanje novog praznog grafa

·         Informacije o trenutno prikazanom (pod)grafu

·         Uklanjanje iscrtavanja rezultata komponenti koje se bave pretragom

·         Podešavanje uvećanja i pomeranja radne površine za što optimalniji prikaz svih nodova (ako je moguće)

 

Korisnikov rad u određenom stanju komponente se vrši isključivo mišem (ili drugim pokazivačkim uređajem).

 

Korišćenje Visualizer-a

Default stanje DefState.JPG

Ovo je osnovno stanje komponente. Kroz njega je moguće pomeranje i selekcija čvorova iz korišćenje levog klika miša. Desni klik miša zaustavlja automatsku vizuelizaciju. Srednjim klikom se vrši pomeranje radne površine. Točkićem miše se skroluje gore-dole, uz utisnuto Shift dugme levo-desno, a uz utisnuto Ctrl dugme se vrši zumiranje. Dvoklik na čvor ili vezu otvoriće odgovarajući dijalog sa opcijama kliknutog elementa.

Korišćenje srednjeg klika i točkića su isti u svim stanjima komponente. Desni klik u svim ostalim stanjima dovodi komponentu u Default stanje.

Stanje dodavanja čvorova (Add new node) AddState.JPG

Kroz ovo stanje je moguće dodavati nove čvorove koji će biti pozicionirani na mestu ispod kliknutog miša. Svaki ovako napravljen čvor dobija generisano ime „Node <broj>“.

Stanja dodavanja novih usmerenih i neusmerenih veza (Add new edge) edgeState.JPG (Add new directed edge) diredgeState.JPG

Kroz ovo stanje je moguće dodavati nove usmerene i neusmerene veze između čvorova. Klikom na jedan čvor označava se početak veze, a klikom na drugi (ili na isti) kraj veze.

Primer korišćenja:

ex1.JPG

Stanje brisanja (Eraser) eraserState.JPG

Iskorišćen je princip gumice za brisanje. Držite levi klik miša i vucite – sve što se nađe ispod pokazivača, biće obrisano!

Najoptimalniji prikaz grafa (BestFit)

Klikom na ovu akciju, visualizer će pokušati da pomeri i skalira radnu površinu tako da obuhvati i prikaže što veći broj čvorova.

Opcije prikazanog grafa (Graph properties) prps.JPG

Otvara dijalog sa svim atribudima trenutno prikazanog (pod)grafa.

Uklanjanje markera pretrage (Remove serach markers) clr.JPG

Klikom na ovu akciju se uklanjaju narandžasti markeri koji označavaju rezultat pretrage koju je odradila neka druga komponenta.

Nov prazan graf (New graph...) newGr.JPG

Klikom na akciju dodaje se i prikazuje nov prazan graf. Ime grafa biće zatraženo kroz drijlog prozor.

 

Force-based algoritam i animacija

Poznato je da je prikazivanje grafa veoma naporan i nezahvalan posao. Ovo se može ostaviti korisniku, ali sa sve većim brojem čvorova i veza raste i napor i besmislenost celog posla. Postoje razni načini i algoritmi koji pokušavaju i uspevaju da reše ovaj problem i na zadovoljavajuć način rasporede i prikažu grafove.

Mi smo se odlučili za Force-based algoritam. Princip ovog algoritma je da prolazi kroz sve čvorove grafa računajući rezultujuće sile kojima, na trenutni čvor, deluju ostali čvorovi i veze grafa. Za čvorove su vezane odboje sile – obrnuta gravitacija (gospodine Njutn, izvinite...), a veze predstavljaju opruge čije sile se računaju po Hukovom zakonu.

Ovaj algoritm se izvršava u pozadini, a iscrtava na svakih 40ms, što stvara osećaj animiranog, „uživo“ raspoređivanja. Važno je napomenuti da se selektovani čvorovi izuzimju iz algoritma, što daje korisniku mogućnost da „pomogne“ raspoređivanju, premeštajući čvorove po želji.

Force-based algoritam je relativno lak za implementaciju, ali nije pogodan za velike grafove. Idealan je za nekoliko desetina čvorova sa po 3-4 veze na svakom čvoru.

Napomena: Svaki algoritam bi trebao nekada da se zaustaviti. Zaustavljanje force-based tipa algoritma je moguće sračunavanjem ukupne „energije“ sistema i njenom minimizacijom. Problem je što ovaj algoritam često nalazi lokalni minimum energije i ne zauszavlja se kada bi trebalo. Zbog toga se Tim 2 nije puno trudio oko zaustavljanja algoritma, što ponekad dovodi do „drmajnja“ čvorova.

U zamenu za to, zaustavljanje je omogućeno korisniku na najjednstavniji mogući način – desnim klikom miša u Default stanju, pozadinski algoritam će stati, a nastaviće na pomeranje nekog od čvorova. Ako korisnik nije siguran da šta se događa u pozadini sa njegovim grafom, u gornjem desnom uglu iznad navigatora, uvek toji jedna od oznakada koja saopštava trenutno stanje:

visON.JPG <--- automatska vizuelizacije je uključena

visOFF.JPG <--- automatska vizuelizacije je isključena

Kako je to izgledalo u ranoj fazi implementacije, možete pogledati ovde: http://www.youtube.com/watch?v=P5oXql2aqYU.

Primeri:

Generisana mreža truglova parametra 7, korišćenjem komponente GraphGenarator:

fba_generated.JPG

Izgled grafa posle automatskog raspoređivanja:

fba_visualized.JPG

 

Visualizator i GraphTree

Ove dve komponente su u tesnoj vezi i veoma dobro sarađuju. Visualizator stalno osluškuje šta se događa na Drvetu (ako je ta komponenta aktivna) i reaguje u odgovarajućem smislu. Najbolji vizuelni doživljaj ExGERM projekta se postiže ako ove dve komponente rade istovremeno.

Kliktanje po Drvetu

·         Dvoklik na graf ili podgraf - otvara graf u visualizeru

·         Klik na čvor - animirano centrira taj čvor na sredinu prikaza visualizera (ako je odgovarajući graf prikazan)

·         Klik na „Properties...“ grafa – otvara taj graf i daje dijalog

·         Klik na „Properties...“ čvora - otvara njegov graf (ako već nije otvoren), centrira se na taj čvor i otvara dijalog

 

Visualizator i Console

Moguće je prikazati graf i kroz konzolu. Visualizator ima svoju komandu „show“ kojom se prikazuje tekući graf ili podgraf u konzoli.

Primer:

show.JPG

Nakon komande show, biće prikazan aktivni konzolin graf, „test“.

 

Visualizator i Persistance

Persistance komponenta brine o zapisivanju i otvaranju grafova. Ako je neki graf promenjen i nije zapisan, Persistance komponenta će to objaviti na svoj način, a Visualizer će prikazati sličicu u gornjem desnom uglu, iznad Navigatora: notSaved.JPG

 

Visualizator i Seach algoritmi

U ExGERM softverskom rešenju moguće je dodati proizvoljan broj algoitama za pretragu grafova. Svaki od njih može da se obrati Visualizeru za prikaz svojih rezultata.

Primer:

Rezultat pretrage „depht first search“ od 1. do 19. Čvora u primeru grafa iz sekcije o force-based algoritmima.

searchRez.JPG