Univerzitet u Banjoj Luci

Elektrotehnički fakultet

Katedra za opštu elektrotehniku

Multimedijalni sistemi

Izvještaj projektnog zadatka na temu "Interaktivno učenje"

Članovi grupe:

Andrej Šimić 48/06

Marko Jamedžija 47/06

1. Uvod. Koncept aplikacije.

U cilju rješavanja postavljenog zadatka, naša grupa se odlučila da obradi poglavlje 8.1,

odnosno oblast “Digitalna slika”. Odlučili smo se za obradu tri nastavne cjeline: “Osnovni

pojmovi i definicije”, “Kolor modeli”, te “Algoritmi za obradu slike”. U skladu sa brojem

podoblasti, rješili smo da će se naša multimedijalna prezentacija sastojati iz tri djela

(predstavljajući svaku od ovih cjelina). Svaki dio sadrži određen broj lekcija, koje zahvaljujući

visokom nivou interaktivnosti omogućavaju korisniku da na jednostavan i zanimljiv način dođe

do željenih saznanja. Pored ovoga, značajno je izdvojiti i postojanje kviza, kao i video tutorijala

koji vizuelno prikazuju neke od algoritama koji su obrađivani.

Kako bi aplikacija korektno radila, potrebno je u korjenski direktorijum (u kom se nalazi

sam “.dir” fajl) uključiti fajlove koji sadrže korištene resurse (folder “Resources”, koji je dat u

prilogu). Sam folder sadrži resurse korištene prilikom razvoja, koji su organizovani u zavisnosti

od broja poglavlja u kome su korišteni (npr. neki fajl korišten u prvom poglavlju se nalazi u

“Resouces\1”). Pored ovih, tu su i folderi koji sadrže resurse djeljene u čitavoj aplikaciji (folder

“Resouces\0” , i “Resouces\VIDEO”).

Napomena: Ukoliko prilikom pokretanja programa, Direktor pita za pojedine fajlove, potrebno ih je učitati iz Foldera Resources. Iskreno se nadamo da nećete imati potrebu da pretražujete naše resurse u potrazi za traženim fajlovima.

2. Navigacija kroz program

Nakon otvaranja programa za interaktivno učenje,pojavljuje se prva prezentacija, kao na Slici

1,lijevo. Kao što vidite, imate ponuđene 3 opcije, i-learning, Video tutorijali i Kviz. Prva opcija,pod

nazivom i-learning odnosi se na interaktivno učenje, što je bio cilj ovog projekta. Klikom na tu

opciju/dugme, dobija se nešto drugačiji meni, sa dodatnim opcijama izbora tačno određene

oblasti (Slika 1,desno).

Slika 1

U crvenom pravougaoniku označenim sa brojem 1 na Slici 2,dole, je prikazana navigaciona linija

koja je podijeljena na 3 dijela,tj. poglavlja. Trenutno,aktivno poglavlje je označeno crnom bojom.

Ukoliko korisnik klikne na jedno od preostala dva poglavlja u navigacionoj liniji, otvara se

početna lekcija tog poglavlja i ono postaje aktivno (crno). Lijevo od navigacione linije nalazi se

dugme "Početna stranica", a desno od navigacione linije dugme "Kviz", koje je moguće

pokrenuti iz bilo koje lekcije. Dugmići za navigaciju, Prethodna lekcija i Sljedeća lekcija, kojima

se korisnik/student služi da bi prešao na prethodnu i sljedeću lekciju, respektivno, su prikazani

u crvenom pravouganiku sa brojem 2 (Slika 2 nema prikazano dugme za prethodnu lekciju jer je

to nemoguće, dok su na Slici 3 prikazana oba dugmića). Ovim pristupom smo obezbijedili

korisniku ovog programa slobodno kretanje između, kako susjednih lekcija, tako i onih

udaljenih,tj. otvaranje drugog poglavlja početne strane u svakom trenutku učenja.

Slika 2

Sa lijeve strane svake prezentacije programa prikazan je tekst lekcije, koji je nadopunjen

materijalima koji pomažu korisniku da kroz interakciju bolje razumije lekciju koja se prikazuje.

U tu svrhu su dodana kratka uputstva koja govore korisniku šta treba da radi. Pogledajte crveni

pravougaonik sa brojem 3 radi ilustracije. Takođe, dosta lekcija sadrži dodatne dugmiće, kao u

pravougaoniku broj 4,Slika 2, koji ili prikazuju sadržaj na drugačiji način ili vas vode na drugu

stranicu sa dodatnim prikazima. U drugom slučaju, postoji dugmić za vraćanje na polaznu

stranu.

Slika 3

Ukoliko za neku lekciju postoji video materijal (obično je to video upustvo kako se lekcija radi u programu Matlab) onda se u gornjem desnom uglu ispod navigacione linije pojavi dugme "Video tutorijal" kao na Slici 4. Za puštanje videa potrebno je koristiti kontrole plejera prikazanog na Slici 5 ispod. Same kontrole su intuitivne i nećemo ih posebno objašnjavati.

Slika4

Slika 5

Sada ćemo pokazati kako pojedine lekcije izgledaju, njihove ''storyroards'' , od čega su sačinjene lekcije i šta se dešava u pozadini pojedinih elemenata (sprajtova). Detaljnija objašnjenja pojedinih Lingo skriptova su u sklopu samih skriptova u programu. 1.1 Percepcija slike

Prelaskom kursora miša preko pojedinih pojmova vezanih za ljudsko oko pojavljuje se objašnjenje datog pojma. Tu aktivnost obezbjeđuje skript skriptOko koji prvo iz tekst fajla OkoInfo.txt učita sve pojmove i njihove definicije, a potom pronađe određenu liniju čiji tekst se poklapa sa tekstom sprajta preko kojeg smo prešli i potom ispiše sljedeću liniju(objašnjenje). Kada pojam nije "fokusiran" tekst se briše (Slika 6)

Slika 6

1.2 Kontrast Klikom na dugme 1, poziva se script 82 i dobijaju se 3 kvadrata iste boje, a klikom na dugme 2 poziva se script 83 koji dodaje još 3 kvadrata različitog nivoa sive boje (Slika 7).

Slika 7

1.3 Pojmovi I definicije vezane za sliku I Za sliku Lene vezana su 2 skripta. Prelaskom preko slike, poziva se skript 87 koji zavisno od lokacije miša na slici prikazuje X i Y koordinate i komponente boje. Klikom na dugme Ilustracija procesa digitalizacije pokreće se skript 94 koji pokreće novu animaciju, gdje se klikom na sliku Lene pokreće skript 89 koji sa slike uzima piksele i crta ih na mreži nacrtanoj desno. Ukoliko se kursor miša ukloni, pikseli sa mreže se brišu. Skript 96 vezan je za dugme Prva Animacija koja nas vraća na početak lekcije o kojoj je riječ (Slika 8)

Slika 8

1.4 Pojmovi i definicije vezane za sliku II Pritisak na dugme Odmjeravanje i dugme Kvantizacija pokreću skript ove 112 i 113 respektivno, i time dodaju animaciju na postojeću sliku. Klikom na dugme Dodjeljivanje nivoa sivila slici otvara se novi ekran,na kojem se može zadati putanja do slike i broj nivoa sivila,te se na klikom na dugme ok prikazuje obrađena slika. Za ovu aktivnost zadužen je skript 210 (koji provjerava da li su unešene prave vrijednosti,te podešava veličinu slike u zavisnosti od njene veličine). Dugme Nazad nas vraća na lekciju (Slika 9).

Slika 9

1.5 Strukture podataka kod digitalne slike Pritiskom na dugmiće 1,2,3 prikazuju se 3 različite slike,za 3 različita tipa slike. Skriptovi koji su korišteni : 122,121,120 (Slika 10).

Slika 10

2.1 Color modeli

Klikom na dugmiće S,L,M (skriptovi 148,149,150) korisnik može da vidi dijelove talasnih dužina, pojedinačno, i sve zajedno (klikom na dugme Sve, skript 150). Pogledajte Sliku 11.

Slika 11

2.2 CIE RGB i CIE XYZ kolor modeli Klik na dugme RGBXYZ poziva se skript 180 koji prikazuje slike,translaciju sa jednog modela na drugi; na slike je primjenjen skript Fade In Out. Dugme Prikaz RGB komponenti

slike (skript 179) daje korisniku dalji izbor dugmića za prikaz RGB komponenti jedne slike (skriptovi 161,162,163).

Slika 12

2.3 CMYK kolor model Dugmići C,M,Y,K omogućavaju korisniku da vidi samo te odgovarajuće komponente slike (skriptovi 195,196,197,198). Pogledajte sliku 13.

Slika 13

3.1 Operacije nad histogramom

Klikom na dugmad Tamna slika,Svijetla slika,Sa losim kontrastom, Sa dobrim kontrastom (skriptovi bTamnaClick, bSvijetlaClick, bSaLosimClick, bSaDobrimClick) program prikazuje odgovarajuću sliku i njen histogram. Klik na dugme Video tutorijali vodi na poseban ekran, gdje je moguće pustiti video (skript 369). Pogledajte sliku ispod.

Slika 14

3.2 Promjena kontrasta Klikom na svaku od slika korisnik može da vidi odgovarajući histogram i gama koje je korišteno prilikom podešavanja kontrasta (skriptovi camClick1,camClick2,camClick3). Dugme Video tutorijali vodi na video plejer sa tutorijalima (Slika 15).

Slika 15

3.3 Negativ slike Prelaskom preko slika, korisnik može da vidi histogram originalne slike i histogram inverzne slike (skriptovi pictLenaEnter,pictLenaInvEnter,koji pozivaju mouseEnter event i prikazuju histogram). Ukoliko se ne prikazuje histogram, desno od slika se vidi Matlab kod za dobijanje histograma (Slika 16).

Slika 16

3.4 Filtriranje u prostornom domenu U ovoj lekciji, korisnik ima tu mogućnost da prelaskom preko slike u donjem lijevom uglu prikaže sliku uvećanu (scriptSlikaKonvolucije). Na početku ove lekcije u desnom dijelu ekrana prikazana je originalna slika Lene sa šumom. Korisnik ima tu mogućnost da primjeni pojedine filtre pritiskom na dugme: Median filtar, filter 1, filter 2, filter 3, a pozivaju se skriptovi : scriptFilterMedian, scriptFilter1, scriptFilter2, scriptFilter3 koji prikazuju obrađene slike. Dugmići Dodatak 1 i Dodatak 2 prikazuju nove ekrane. Dok na stranici ''3.4 -Filtriranje u prostornom domenu - dodatak I'' korisnik može vidjeti kako se izvršava

operacija dekompozicije na bitkse ravni i maskiranje u Matlabu,zajedno sa izlazima tih operacija, na stranici ''3.4 - Filtriranje u prostornom domenu - dodatak 2'' korisnik je u mogućnosti da vidi kako izgledaju još neke operacije primjenljive na sliku; klikom na dugmiće s lijeve strane slike, umjesto originalne slike se pojavljuje obrađena slika (skriptovi scriptLenaUblazena, scriptLenaIzostrena,scriptLenaGradije ), a objašnjenja kako se izvršava obrada slike na taj način je objašnjeno video tutorijalom. Dugme Video tutorijal je dostupno sa ovog ekrana (Slika 17).

Slika 17

3.5 Filtriranje u frekvencijskom domenu

U dnu ovog ekrana prikazana je šema algoritma filtriranja u frekvencijskom, kojoj smo dodali interaktivnost sa korisnikom,gdje se klikom na strelicu započinje sa prikazivanjem šeme (prikazivanje prvog kvadratića,prvi korak u algoritmu),te se nakon toga prilikom klikanja na kvadratiće šeme na sredini ekrana prikazuje izlaz tog koraka algoritma. U sekciji sa video tutorijalima je dodan video koji objašnjava postupak u Matlabu. Skriptovi scriptDFT,scriptH[],scriptIDFT,scriptRight4 su skriptovi koji prikazuju odgovarajuće slike i sljedeći korak algoritma (Slika 18).

Slika 18

3.6 Izdvajanje ivica U ovoj lekciji korisnik(student) može da nauči nešto više o izdvajanju ivica, pri čemu mu je dat naočigled nevidljiv primjer,te da na ''licu mjesta'' može da vidi izdvojene ivice na primjeru slike ''Lena''. Naime,prelaskom preko pomenute slike, prikazuje se slika Lene sa izdvojenim ivicama. Slika je dobijena u Matlabu, primjenom Sobelovog gradijenta, a za mouseEnter event je zadužen scriptLenaOriginalEnter skript (Slika 19)

Slika 19

3. Tipovi medija korišteni u projektu

Mediji koje smo koristili u ovom projektu su tekst, slika, audio i video materijal koji smo sami snimili.