SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET
Sveučilišni preddiplomski studij računarstva

Završni rad
WEB APLIKACIJA ZA IZRAČUN PARAMETARA L-MREŽE
ZA TRANSFORMACIJU IMPEDANCIJE

Rijeka, rujan 2015 Moreno Mušković

0069057751
 SVEUČILIŠTE U RIJECI
TEHNIČKI FAKULTET
Sveučilišni preddiplomski studij računarstva

Završni rad
WEB APLIKACIJA ZA IZRAČUN PARAMETARA L-MREŽE
ZA TRANSFORMACIJU IMPEDANCIJE
Mentor: izv. prof. dr. sc. Miroslav Joler

Rijeka, rujan 2015 Moreno Mušković

0069057751
 IZJAVA O SAMOSTALNOM RADU

Sukladno članku 9. stavak 1. Pravilnika o završnom radu, završnom ispitu i završetku

preddiplomskih sveučilišnih studija izjavljujem da je ovaj završni rad rezultat mojeg
samostalnog rada, uz preporuke mentora.

Rijeka, rujan 2015. ________________

Moreno Mušković
SADRŽAJ

1. UVOD ................................................................................................................................ 1

2. L-MREŽA ZA TRANSFORMACIJU IMPEDANCIJE .................................................... 2

2.1 Analitičko rješenje ....................................................................................................... 2

2.1.1 Rješenje za RL > Z0 .............................................................................................. 3

2.1.2 Rješenje za RL < Z0 .............................................................................................. 4

2.2 Koeficijent refleksije ................................................................................................... 5

2.3 Smith-ov dijagram ....................................................................................................... 5

3. KORIŠTENE TEHNOLOGIJE.......................................................................................... 9

3.1 HTML ........................................................................................................................ 10

3.1.1 HTML5............................................................................................................... 11

3.2 CSS ............................................................................................................................ 13

3.3 JavaScript................................................................................................................... 16

4. WEB APLIKACIJA ......................................................................................................... 19

4.1 Početno sučelje .......................................................................................................... 19

4.1.1 Validacija ........................................................................................................... 21

4.1.2 Funkcije save() i load() ...................................................................................... 21

4.2 Izračun parametara L-mreže ...................................................................................... 23

4.2.1 Funkcija unutarKruga() ..................................................................................... 23

4.2.2 Funkcija izvanKruga()........................................................................................ 24

4.3 Ispis rješenja .............................................................................................................. 24

4.4 Grafički prikaz koeficijenta refleksije ....................................................................... 25

4.5 Širina frekvencijskog pojasa ...................................................................................... 29

4.5.1 Prikaz rubnih frekvencija na grafu ..................................................................... 31

5. KORIŠTENJE APLIKACIJE .......................................................................................... 33

5.1 Prvi primjer ................................................................................................................ 33

 5.2 Drugi primjer ............................................................................................................. 35

5.3 Treći primjer .............................................................................................................. 35

6. ZAKLJUČAK .................................................................................................................. 37

LITERATURA ......................................................................................................................... 38

POPIS OZNAKA I KRATICA ................................................................................................ 40

1. UVOD

U ovom radu biti će prikazana tehnika izračuna parametara L-prilagodne mreže za

transformaciju impedancije. Prilagodba impedancije je svakodnevni problem u radio-
frekvencijskom (RF) inženjerstvu te je prilagodba L-mrežom jedna od najjednostavnijih
metoda za prilagodbu manjih impedancija izvora na veće impedancije tereta [1].

Glavni problem koji će biti detaljno opisan i analiziran u ovome radu je izrada
pripadajuće web aplikacije koja će omogućiti izračun parametara mreže te izračun širine
frekvencijskog pojasa (engl. bandwidth) na temelju čega se može odrediti koje je od dva
dobivena rješenja bolje. Također, aplikacija grafički prikazuje apsolutnu vrijednost koeficijenta
refleksije Γ za oba rješenja.

Iako aplikacije nije namijenjena velikom broju ljudi smatram da će uvelike pomoći osobama
koji se bave radio-komunikacijama te srodnim strukama.. Ručni izračun parametara zahtjeva
puno vremena te solidno znanje matematike i elektrotehnike. Implementirana aplikacija je vrlo
jednostavna za korištenje te će uvelike olakšati posao svima kojima je potrebna prilagodba
impedancije L-mrežom. Aplikacija također može pomoći u nastavi na pojedinim kolegijima
kao što su Radiokomunikacije te mnogi drugi.

U drugom poglavlju detaljno je opisan problem prilagodbe impedancije na kojem se

temelji cijela aplikacija.

Kroz treće poglavlje nabrojane su te opisane sve tehnologije izrade, principi rada svake
te njihova kompatibilnost sa pojedinim Internet preglednicima. Također, opisan je i njihov
razvitak kroz povijest od samih početaka do modernih aplikacija koje danas poznajemo.

Četvrto poglavlje se temelji na objašnjenju postupaka izrade web aplikacije korištenjem

navedenih tehnologija.

U petom poglavlju prikazano je samo korištenje aplikacije.

1
2. L-MREŽA ZA TRANSFORMACIJU IMPEDANCIJE

Osnovna primjena L-mreže je transformacija impedancije u RF strujnim krugovima

(engl. circuit), odašiljačima (engl. transmitters) i prijemnicima (engl. receivers). Koriste se za
prilagodbu ulazne impedancije sa impedancijom tereta na izlazu. Najčešće se primjenjuju u
pojačalima te antenama. Ukratko, sve što sadrži RF strujni krug kandidat je za primjenu ove
metoda [2]. Mana ove tehnike je ograničenje na veće električke sklopove.

L-mreže koriste 2 reaktivna elementa za prilagodbu proizvoljne impedancije tereta ZL

na ulaznu impedanciju Z0 te su moguće dvije konfiguracije mreže. Reaktivni elementi mogu
biti ili kapaciteti ili induktiviteti, ovisno o impedanciji tereta. Iz navedenog proizlazi da postoji
osam mogućih kombinacija rješenja.

2.1 Analitičko rješenje

Impedancija tereta ZL jednaka je:

𝒁𝑳 = 𝑹𝑳 + 𝒋𝑿𝑳 ( 2.1 )
gdje je:

RL realni dio impedancije tereta

XL imaginarni dio impedancije tereta

Konfiguracija mreže ovisi o odnosu između RL i Z0. Ako je RL > Z0 konfiguracija je (a)
na Slici 2.1. Ukoliko je RL < Z0 konfiguracija je (b) na Slici 2.1.

Slika 2. 1: Dvije moguće konfiguracije mreže [3]

2
Za obje konfiguracije potrebno je izračunati X i B.

2.1.1 Rješenje za RL > Z0

Impedanciju koju se vidi gledajući u prilagodnu mrežu mora biti jednaka Z0 koji se
računa prema izrazu ( 2.2 )[3]:

𝟏 ( 2.2 )
𝒁𝟎 = 𝒋𝑿 +
𝟏
𝒋𝑩 +
(𝑹𝑳 + 𝒋𝑿𝑳 )

gdje je:

RL realni dio impedancije tereta

XL imaginarni dio impedancije tereta

Preuređivanjem i razdvajanjem na realni i imaginarni dio dobiju se dvije jednadžbe s

nepoznanicama X i B:

𝑩(𝑿𝑹𝑳 − 𝑿𝑳 𝒁𝟎 ) = 𝑹𝑳 − 𝒁𝟎 ( 2. 3 )

𝑿(𝟏 − 𝑩𝑿𝑳 ) = 𝑩𝒁𝟎 𝑹𝑳 − 𝑿𝑳 ( 2. 4 )

Rješavanjem (2.3) za X i supstitucijom u (2.5) dobije se kvadratna jednadžba po B, čije rješenje

glasi:

𝑿𝑳 ± √𝑹𝑳 ⁄𝒁𝑳 √𝑹𝟐𝑳 + 𝑿𝟐𝑳 − 𝒁𝟎 𝑹𝑳

𝑩= ( 2. 5 )
𝑹𝟐𝑳 + 𝑿𝟐𝑳

Serijska se reaktancija potom može odrediti kao:

𝟏 𝑿𝑳 𝒁𝟎 𝒁𝟎 ( 2. 6 )
𝑿= + −
𝑩 𝑹𝑳 𝑩𝑹𝑳

Iz formula (2.5) i (2.6) proizlazi da su za X i B moguća dva rješenja te su oba fizički izvediva
po sljedećim pravilima:

3
  X > 0 daje induktivitet, X < 0 kapacitet
 B > 0 daje kapacitet, B < 0 induktivitet

Nakon izračunatih parametara X i B potrebno je odrediti točan iznos induktiviteta L i

kapaciteta C. Ako su X ili B pozitivni računaju se prema izrazu (2.7) odnosno (2.8). Ukoliko
su negativni računaju se prema izrazu (2.9) odnosno (2.10).

𝑿 (2.7)
𝑳=
𝝎
𝑩 (2.8)
𝑪=
𝝎
𝟏 (2.9)
𝑳=
𝝎𝑩
𝟏 ( 2 . 10 )
𝑪=
𝝎𝑿
gdje je:

ω = 2πf kružna frekvencija

2.1.2 Rješenje za RL < Z0

Admintanciju koja se vidi gledajući u prilagodnu mrežu mora biti jednaka 1/Z0 te se
računa prema izrazu (2.11)[3]:

𝟏 𝟏 ( 2 . 11 )
= 𝒋𝑩 +
𝒁𝟎 𝑹𝑳 + 𝒋(𝑿 + 𝑿𝑳 )

Preuređivanjem i razdvajanjem na realni i imaginarni dio dobiju se dvije jednadžbe s

nepoznanicama X i B:

𝑩𝒁𝟎 (𝑿 + 𝑿𝑳 ) = 𝒁𝟎 − 𝑹𝑳 ( 2 . 12 )

(𝑿 + 𝑿𝑳 ) = 𝑩𝒁𝟎 𝑹𝑳 ( 2 . 13 )

4
Rješavanjem jednadžbi (2.12) i (2.13) za X i B dobiju se dva rješenja:

√(𝒁𝟎 − 𝑹𝑳 )⁄𝑹𝑳 ( 2 . 14 )
𝑩= ±
𝒁𝟎

𝑿 = ± √𝑹𝑳 (𝒁𝟎 − 𝑹𝑳 ) − 𝑿𝑳 ( 2 . 15 )

Iz izraza (2.14) te (2.15) proizlazi da su moguća dva rješenja za X i B za koja vrijede ista pravila
kao i kod konfiguracije mreže za RL > Z0. Također vrijedi i isti izračun za kapacitet odnosno
induktivitet tj. pozitivni X i B računaju se prema izrazima (2.7) i (2.8), a negativni prema
izrazima (2.9) te (2.10).

2.2 Koeficijent refleksije

Koeficijent refleksije Γ u sustavima električnih sklopova je omjer reflektiranog i

poslanog vala, što je jednako omjeru razlike i zbroja impedancija Zul i Z0 kao što je vidljivo u
izrazu (2.16) [4]:

𝒁𝒖𝒍 − 𝒁𝟎 ( 2 . 16 )
𝚪=
𝒁𝒖𝒍 + 𝒁𝟎

gdje je:

Zul ulazna impedancija L-mreže

Z0 impedancija s lijeve strane L-mreže (Slika 2.1)

Prije samog izračuna koeficijenta refleksije potrebno je izračunati ulaznu impedanciju Zul koja
se računa kao Thevenin-ova impedancija u L-mrežu, uključujući i teret, gledano s lijeva.

2.3 Smith-ov dijagram

Osim analitičke metode računanja parametara L-prilagodne mreže postoji i grafička

metoda pomoću Smith-ovog dijagrama (engl. Smith chart).

5
 Smith-ov dijagram je grafičko pomagalo koje se koristi u elektrotehnici, elektronici i
radio-komunikaciji razvijen od strane Philip H. Smitha 1939. godine u Bell Telephone
Laboratories [3]. U suštini, to je polarni prikaz naponskog koeficijenta refleksije Γ koji je
skaliran na normaliziranu vrijednost impedancije. Unatoč postojanju računala, i dalje je korisno
pomagalo za pokazivanje i razumijevanja na prilagodnoj L-mreži. Na dijagramu se istovremeno

mogu prikazati više parametara kao što su impedancija, admintancija, koeficijent refleksije te
mnogi drugi koji nama nisu od pretežite važnosti. Na Slici 2.2 prikazan je Smith-ovo dijagram
bez ucrtanih podataka.

Slika 2. 2: Smith-ov dijagram [3]

Svaku impedanciju ZL prije crtanja u dijagram potrebno je normalizirati

karakterističnom impedancijom linije Z0 prema izrazu (2.17):
6
 𝒁𝑳 ( 2. 17 )
𝒛𝑳 =
𝒁𝟎

Kako je koeficijent refleksije Γ kompleksni broj moguće ga je prikazati u polarnom ili

Eulerovom obliku kao u izrazu (2.18):

𝚪 = |𝚪|𝒆𝒋𝜽 ( 2. 18 )

Magnituda od Γ je nacrtana kao radijus od centra dijagrama, dok se kut θ mjeri s desne strane
horizontalnog dijametra. Na taj način se svaki Γ pasivnog sklopa može prikazati kao jedinstvena
točka na dijagramu. Jednadžbe (2.19) i (2.20) predstavljaju dvije skupine kružnica u Γr i Γi
ravnini. Kružnice otpora su definirane po (2.19), a kružnice reaktancije po (2.20).

𝟐
𝒓𝑳 𝟐 𝟏 ( 2. 19 )
(𝚪𝐫 − ) + 𝚪𝟐𝐢 = ( )
𝟏 + 𝒓𝑳 𝟏 + 𝒓𝑳

𝟏 𝟐 𝟏 𝟐 ( 2. 20 )
(𝚪𝐫 − 𝟏)𝟐 + (𝚪𝐢 − ) =( )
𝒙𝑳 𝒙𝑳

gdje je:

Γr realni dio koeficijenta refleksije

Γi imaginarni dio koeficijenta refleksije

rL realni dio normalizirane impedancije

xL imaginarni dio normalizirane impedancije

Na Slici 2.3 možemo vidjeti kružnice otpora iscrtane crvenom bojom, dok su kružnice
reaktancije iscrtane plavom bojom.

Slika 2. 3: Kružnice u Smith-ovom dijagramu [4]

7
 Koeficijent refleksije Γ pomoću Smith-ovog dijagrama računa se u nekoliko koraka
opisanih u nastavku:

 normaliziramo ZL
 zL ucrtamo u dijagram
 ravnalom postavimo pravac između centra dijagrama i zL i povučemo dužinu kroz obod
dijagrama
 odredimo udaljenost od centra dijagrama
 stavimo tu mjeru na skalu za naponski koeficijent refleksije ispod dijagrama te očitamo
| Γ|
 kut od Γ očitamo po obodu dijagrama

8
3. KORIŠTENE TEHNOLOGIJE

U današnjem svijetu razvoja web aplikacija (engl. web development) postoje razne
tehnologije i programski jezici koji iz dana u dan postaju sve kompleksniji te su samim time
pogodniji za stvaranje složenih aplikacija kakve danas poznajemo. Osim samih programskih
jezika sve su popularniji raznorazni framework-ovi koji olakšavaju pisanje programskog koda.
Sve tehnologije i programski jezici dijele se na frontend, koji se izvršavaju na klijentskom
računalu tj. u klijentskom web pregledniku, te backend, koji se izvršavaju na serverskoj strani.

Neki od značajnijih frontend programskih jezika i tehnologija su:

 HTML
 CSS
 JavaScript
 Actionscript
 Java Applets

Najznačajniji backend programski jezici:

 PHP
 .NET (C#, VB)
 Ruby
 Python
 Perl
 JavaScript (Node JS framework)

Web aplikacija predstavljena u ovom radu u potpunosti je rađena za klijentsku stranu tj.
korištene su isključivo frontend tehnologije kako bi aplikacija mogla raditi na svakom računalu
bez potrebe za interakcijom sa web serverom. Dovoljno je posjedovati izvorni kod te ga
pokrenuti u bilo kojem modernom web pregledniku. Konkretni korišteni jezici su HTML, CSS
te JavaScript zbog svoje jednostavnosti, velikih mogućnosti te kompatibilnosti sa svim web
preglednicima. U nastavku su detaljnije opisane navedene tehnologije.

9
3.1 HTML

HTML (Hypertext Markup Language) je jezik za označavanje (engl. markup laguage)

namijenjen za izradu web stranica. Web preglednici čitaju HTML datoteke i prikazuju ih u
formatu prepoznatljivom ljudima. Uvelike se razvijao kroz povijest. Prva osnovna verzija,
HTML 1, razvijena je od strane Sir Tim Berners-Lee-ja 1989. godine. Prvi pravi pokušaj
standardizacije dogodio se 1994. godine kada su u Internet Engineering Task Force-u (IETF)
razvili HTML 2.0. Nakon toga 1996. uslijedio je HTML 3.2, no mnogo značajniji je razvitak
jedinstvenog W3C (World Wide Web Consortium) standarda koji je i danas u upotrebi. Godinu
dana nakon pojavio se HTML 4.0 koji je bio u upotrebi sve do 28. listopada 2014. godine, do
razvitka HTML5 [6].

HTML-om se oblikuje sadržaj web stranice i stvaraju se hiperveze (engl. hyperlinks)

prema drugim sadržajima ili stranicama. Važno je napomenuti kako HTML, u suštini, nije
programski jezik. Njime ne možemo izvršiti niti najosnovnije računske operacije, već on služi
samo za opis hipertekstualnih (engl. hypertext) dokumenata. HTML datoteke su obične
tekstualne datoteke sa ekstenzijama .html, .htm ili .xhtml koje web preglednik može čitati.

Svaki HTML dokument sastoji se od HTML oznaka (engl. tags) koji imaju svoje
atribute što definiraju svojstva tog elementa [7]. Većina oznaka dolazi u paru na način da oznaka
ima svoju zatvarajuću oznaku. Svaka oznaka počinje znakom < (manje od), a završava znakom
> (veće od) između kojih se piše ime oznake (npr. <div>). Zatvarajuća oznaka kreira se na isti
način, ali se prije znaka > dodaje i kosa crta (engl. slash.). Primjer zatvarajuće oznake je
</div>. Na samom početku datoteke preporučljivo je postaviti <!DOCTYPE> element, koji
označava DTD (Document Type Declaration), čime se definira točan standard koji se koristi.
Nakon tog elementa potreban je <html> element koji označava početak HTML dokumenta.
Unutar njega nalaze se <head> i <body> oznake. Unutar <head> oznake postavlja se <title>,
<meta> te poveznice na eksterne CSS i JS datoteke, dok se unutar <body> oznake kreira sadržaj

HTML dokumenta, odnosno web stranice koju on prezentira. Jedna od važnijih oznaka, koja
omogućuje povezivanje na druge stranice, je sidro (engl. anchor) <a>. Osnovni atribut oznake
je href unutar kojeg se nalazi odredišna stranica poveznice. Primjer poveznice na web stranicu
Tehničkog fakulteta sa tekstom „Riteh“:

<a href=“http://www.riteh.uniri.hr>Riteh“</a>.

10
Tablica 3. 1 prikazuje neke od značajnijih HTML oznaka te njihovih atributa:

Tablica 3. 1: HTML oznake

Oznaka Atributi Opis

<h1>, <h2>, ...,<h6> (Pod)naslovi (engl. headings)
<p> Odlomci (engl. paragraphs)
<br> Prekid aktivnog retka
<table> Border, width, height Definicija tablice
<tr> Definicija retka tablice
<td> Colspan, rowspan Definicija ćelije
<ul> Neuređena lista
<ol> Uređena lista
<li> Stavak unutar liste
<img> Src, alt Prikaz slike
<form> Name, action, method obrazac
<input> Name, type, value Objekt unutar obrasca
<b> bold
<i> italic
<div> Id, class Spremnik (engl. container)

3.1.1 HTML5
Od HTML-a 4.0 do HTML5 prošlo je punih 18 godina stoga je realno očekivati velike
promjene i revoluciju u strukturiranju web stranica. Naime, starije verzije HTML-a su bile
veoma ograničene te je izrada složenijih interaktivnih web aplikacija bila mukotrpan i
kompleksan posao.

Prva velika promjena odnosi se na deklaraciju dokumenta [8]. Naime, u starijim

verzijama <!DOCTYPE> element je sadržavao četiri atributa:

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dok je u HTML5 deklaracija značajno jednostavnija: <!DOCTYPE html>

11
 Neke od novih HTML5 oznaka [8]:

 <header>
 <footer>
 <main>
 <canvas>
 <section>
 <article>
 <audio>
 <video>

Također, osim oznaka uvedeni su i novi tipovi unosa (<input> oznake). Osim već postojećih
text, button, submit itd. uvedeni su i search, tel, email, date, month, week, color itd [8].

HTML5 uvodi i nove API-je (Application Programming Interface) koji se mogu

koristiti u kombinaciji sa JavaSript-om pri stvaranju složenih interaktivnih aplikacija [8].
Najpopularniji su:

 Canvas API
 Svg
 Offline Web Applications
 Drag-and-drop
 HTML5 File API
 Web Audio API
 Browser history management
 Geolocation

Na Slici 3.1 prikazan je HTML5 logotip.

Slika 3. 1:HTML5
logotip [6]

12
3.2 CSS

CSS (Cascading Style Shhets) je stilski jezik (engl. style sheet language) koji služi za
opis izgleda i formatiranje dokumenata napisanih u matkup jeziku kao što je HTML. Prvotno
se stil definirao unutar samog HTML dokumenta (npr. <font> oznaka), ali je vrlo brzo uočena
potreba za stilskim jezikom koji će HTML osloboditi oblikovanja sadržaja.

Hakom Wium Lie je prvi čovjek koji je 1994. godine predložio upotrebu CSS-a. U to
vrijeme predloženo je i nekoliko drugih stilskih jezika za web što je rezultiralo
standardiziranjem CSS-a prema W3C standardu 1996. godine [9]. CSS1 omogućio je zadavanje
fonta, postavljanje boje teksta, pozadine i drugih elementa. Također, omogućeno je
poravnavanje teksta, slika, tablica te drugih elemenata. Nadalje, moguće je definiranje margina,
granica, padding te pozicioniranje gotovo svih HTML elemenata. 1998. godine W3C je
predložio novu CSS2 specifikaciju koja uvodi nekoliko novih mogućnosti kao što su apsolutno,
relativno i fiksno pozicioniranje te z-index elemenata. Još omogućuje dvosmjerni tekst te
sjenčanje. Kako je CSS2 u početku imao mnogo grešaka, napravljena je revizija poznata pod
imenom CSS 2.1 koji se razvijao i objavljivao dugi niz godina sve do konačne verzije 2011.
godine [10]. CSS3, za razliku od prethodnika koji je jedna velika specifikacija, podijeljen je u
nekoliko modula koji se zasebno razvijaju te nadodaju nove mogućnosti definirane u CSS2. Od
studenog 2013. godine objavljeno je preko pedeset modula, no samo pet kao formalni prijedlozi
(engl. recommendations) [11]:

 Media Queries
 Namespaces
 Selectors Level 3
 Color
 Style Attributes

Slika 3.2 prikazuje CSS3 logotip.

Slika 3. 2: CSS3
logotip

13
 CSS je moguće ugraditi interno u tijelo HTML-a unutar <style> oznake, ali češće se
sprema kao eksterna datoteka sa ekstenzijom .css. Kako bi uključili eksternu CSS datoteku u
HTML potrebna je sljedeća linija koda (style.css je ime datoteke):

<link rel="stylesheet" type="text/css" href="style.css">

Sintaksa je poprilično jednostavna te ima općenitu formu:

selector {property: value}

Pri tome je:

 selectror: HTML oznaka koja se pobliže specificira

 property: svojstvo oznake koja se postavlja u neku vrijednost
 value: (nova) vrijednost svojstva oznake

Property/value grupiranja moguća su u list sa delimiterom točka-zarez (;) te je moguće i

grupiranje više selektora odvojenih zarezom. Primjer centralnog poravnavanja i bojanja u
zeleno teksta svih naslova:

h1, h2, h3, h4, h5{

text-align: center;
color: green;
}

Najčešće ne želimo jedinstveni stil za sve instance određene oznake, već želimo
primijeniti neki stil na točno određenoj oznaci. U tom slučaju unutar HTML dokumenta
možemo kao atribut nekoj oznaci definirati id ili klasu. Nakon što se definira klasa, sa CSS-om
joj se lako pristupa na sljedeći način:

selector.class {property: value}

I selector i classi su opcionalni parametri. Ukoliko selector nije definiran pravilo se primjenjuje
na sve oznake koje uključuju tu klasu, ako class nije definiran primjenjuje se na sve instance
oznake. Osim klase možemo i definirati id kojem u CSS-u pristupamo hash (#) operatorom:

#id {property: value}

Postoje mnogo svojstava (engl. property) koja mogu poprimiti veliki broj vrijednosti
(engl. value), no tablica 3.2 prikazuje najkorištenija svojstva sa njihovim najčešćim
vrijednostima.

14
 Tablica 3. 2: CSS svojstva

Svojstvo (Property) Vrijednost (Value) Opis

Background-color Color-rgb Pozadinska boja
Color-#
Color-name
transparent
Background-image url Pozadinska slika
color Color-rgb Boja teksta
Color-#
Color-name
Text-align Left Način poravnavanja teksta
Right
Center
justified
Font family Family-name Prioritetna lista imena
Generic-name korištenih fontova
Font-size xx-small Veličina fonta
...
xx-large
height Auto Visina
Length
%
width Auto Širina
Length
%

Važno je napomenuti kako se danas za programiranje u CSS-u sve više programera

odlučuje za korištenje nekih framework-a od kojih su najpoznatiji:

 Bootstrap
 Foundation
 Skeleton
 Cascade

15
3.3 JavaScript

JavaScript je skriptni programski jezik koji se izvršava u web pregledniku na strani

korisnika. Uz navedene HTML i CSS, jedan je od tri najrasprostranjenijih te najčešće korištenih
jezika za razvoj web aplikacija. Originalno je razvijen od strane Brendan Elcha dok je radio u
Netscape Communications Corporation. Godine 1996. Netscape objavljuje da je JS prihvaćen
od Ecma International kao industrijski standard [12]. Standard se razvijao dugi niz godina, a
aktualna, šesta verzija, objavljena je u lipnju ove godine.

Bitno je napomenuti da unatoč sličnom imenu programski jezici Java i JS nemaju

nikakve zajedničke poveznice. JS ima upravo takvo ime iz marketinškog razloga. Naime, u
vrijeme razvitka, Java je bila vrlo popularna i nova te korištena od velikog broja korisnika,
stoga su se u Netscape-u odlučili za slično ime [13].

JavaScript se u razvoju web aplikacija koristi kako bi se omogućila interakcija sa

korisnikom, animirali neki dijelovi stranice, za validaciju nekih vrijednosti itd. Ukratko, uz
pomoć JS-a „oživljavamo“ web stranicu odnosno aplikaciju [13]. Kako se program izvršava na
korisničkoj strani tj. u njegovom Internet pregledniku, dobra je stvar što je server oslobođen od
bilo kakvih radnji. Unatoč tome, postoje i loše strane izvođenja na klijentskoj strani. Iako bi
teoretski JS svugdje trebao raditi jednako, u praksi to nije slučaj. Naime, Internet Explorer,
naročito starije verzije, interpretiraju JS na potpuno drugačiji način od drugih preglednika kao
što su Firefox i Chrome. Kako korisnici u svijetu koriste različite verzije preglednika,
programeri moraju pronalaziti različite načine kako bi kod radio svima, što zna biti vrlo teško i
zahtjevno.

Iako je primarna upotreba JavaSript-a za aplikacije zasnovane na webu, upotrebljava se

i u PDF dokumentima, site-specific preglednicima i desktop widget-ima. Osim za programiranje
na klijentskoj strani, može se upotrijebiti i na poslužiteljskoj strani (engl. server-side)
korištenjem framework-a kao što je Node.js. Također, koristi se i za razvoj igara (engl. game
developement) i mobilne aplikacije.

16
 Slika 3.3 prikazuje JavaSript logotip.

Slika 3. 3: JavaScript
logotip

JavaScript , slično kao i CSS, se može pisati interno unutar HTML dokumenta ili kao
zasebna eksterna JS datoteka sa ekstenzijom .js [13]. Kod unutar HTML dokumenta se piše
između <script> oznake unutar glave (<head> oznaka) ili tijela (<body> oznaka) dokumenta
kao što je prikazano na sljedećem primjeru:

<script type=“text/javascript“>
//JavaScript kod
</script>

Kao što se može vidjeti na primjeru, komentari se pišu poslije dvostruke kose crte (engl. double
slash).

Kako bi dodali eksternu JS datoteku u HTML potrebno je dodati src atribut <script> oznaci
koja se nalazi u glavi dokumenta:

<script type="text/javascript" src="app.js" ></script>

Datoteka app.js mora postojati i biti u istom direktoriju kao i HTML. Ukoliko se datoteka nalazi
na nekom drugom mjestu potrebno je navesti apsolutni put (engl. path) do datoteke.

JavaScript, kao i svi programski jezici, koristi varijable, no za razliku od većine jezika
unutar varijable se mogu spremati bilo koji tipovi podataka bez potrebe za preciznom
inicijalizacijom. Npr. ako u početku programa u neku varijablu spremimo integer, u daljnjem
izvršavanju programa ta varijabla može postati float, double, string ili bilo koji drugi tip
podataka. Također, moguće je testiranje raznoraznih uvjeta (engl. conditionals) pomoću
naredbe if. Nadalje, moguće je višestruko ponavljanje dijelova koda uz pomoć for i while petlji.

17
Funkcije u JavaScriptu se kreiraju ključnom riječju function iza koje slijedi ime funkcije:

function mojaFunkcija(){
//kod funkcije
}

Unutar oblih zagrada opcionalno mogu biti parametri funkcije. Funkcija, također, može vraćati
neku vrijednost uz pomoć ključne riječi return. Osim što možemo sami stvarati funkcije, JS
ima niz ugrađenih (engl. built-in) funkcija koje nam olakšavaju programiranje.

Kako je ranije rečeno, glavna svrha JS-a je manipulacija HTML dokumentom. Postoje
mnoge ugrađene funkcije koje omogućuju upravo to. Za pristupanje određenom HTML
elementu najčešće se koristi funkcija getElementById. Nakon pristupanja elementu moguće je
pročitati njegov trenutni sadržaj, izmijeniti njegov CSS stil ili sam sadržaj. Osim navedene
funkcije, elementima možemo pristupati i funkcijama getElementByTagName i
getElementByClassName. Nadalje, moguće je detektirati koji preglednik korisnik koristi uz
pomoć navigator objekta. Objekt location omogućuje redirekciju na druge stranice. Ovdje su
nabrojane samo neke najosnovnije mogućnosti JS programskog jezika iz razloga što je jezik
vrlo širokog raspona i razvija se svakodnevno.

Kako bi se proširile mogućnosti JS i donekle olakšalo programiranje koriste se mnoge

knjižnice (engl. libraries) i framework-ovi od kojih su najkorišteniji:

 jQuery
 Prototype
 MooTools
 D3.js
 Plotly
 AngularJS
 Bootstrap

18
4. WEB APLIKACIJA

Kroz ovo poglavlje detaljno je pojašnjen proces stvaranja web aplikacije za izračun
parametara L-mreže za transformaciju impedancije. Aplikacija je zamišljena da bude laka za
korištenje, prenosiva te kompatibilna sa svim modernim Internet preglednicima. Cijela
aplikacija izrađena je frontend tehnologijama (HTML, CSS, JavaScript) te za njeno korištenje
nije potreban web server. Sve što je potrebno za uspješno funkcioniranje je Internet preglednik
te izvorni kod aplikacije. Naravno, moguće je aplikaciju postaviti i na neki od hosting servisa
te joj pristupati preko domene čime bi se omogućilo korištenje aplikacije bez posjedovanja
izvornog koda. Međutim, za potrebe ovog rada to nije napravljeno.

Cijeli izvorni kod (engl. source code) aplikacije nalazi se na optičkom mediju
priloženom uz rad.

4.1 Početno sučelje

Za potrebe izrade grafičkog sučelja u index.html datoteci kreirana je forma sa četiri

tekstualna polja (engl. textbox) za impedanciju linije, impedanciju tereta te frekvenciju. Ispod
tekstualnih polja kreiran je gumb koji pokreće izvršavanje aplikacije.

Kako bi se izbjeglo popunjavanje tekstualnih polja pri svakom novom korištenju

aplikacije omogućeno je spremanje te učitavanje početnih parametara u tekstualnu datoteku.
Kreirano je tekstualno polje sa atributom id FileNameToSave te gumb Spremi koji na klik
pokreće JS funkciju save():

<input type="text" id="FileNameToSave">

<input type="button" value="Spremi" onclick="save()">

Ispod toga, kreiran je HTML input element tipa file koji omogućuje odabir datoteka iz
korisničkog datotečnog sustava (engl. file system) sa atributom id fileToLoad. Gumb Učitaj
pokreće JS funkciju load():

<input type="file" id="fileToLoad">

<input type="button" value="Učitaj" onclick="load()">

19
 Zadani HTML gumbi i tekstualna polja stilom nisu baš ugodni za oko te su zbog toga
unutar style.css datoteke dodana neka CSS pravila kao što su plava boja gumba, zaobljeni
rubovi, sjena na tekstualnim poljima itd. Također, dodana je i pozadina u header i footer
pomoću CSS3 vrijednosti linear-gradient koja omogućuje skaliranje boja. Ovdje je
implementirana plava boja pri vrhu koja lagano prelazi u bijelu te suprotno u footer-u.

Desno od početne forme prikazana su opća rješenja L-prilagodne mreže na način da su

ubačene dvije slike pomoću HTML <img> oznake koje su pozicionirane uz pomoć tablice s
nevidljivim granicama:

<table border="0">
<tr><td align="center">
<img src="img/opcenitoUnutar.PNG" width="290px"><br>
R_L > Z₀
</td>
<td align="center">
<img src="img/opcenitoIzvan.PNG" width="290px"><br>
R_L < Z₀
</td></tr></table>

Nakon napravljenih koraka početno sučelje web aplikacije izgleda kao na Slici 4.1.

Slika 4. 1: Početno sučelje

20
4.1.1 Validacija
Kako bi se izbjeglo upisivanje nevažećih vrijednosti u tekstualna polja ili njihovo
neispunjavanje, potrebno je izvršiti validaciju upisanih vrijednosti. U tu svrhu kreirana je JS
funkcija validacija() koja se pokreće klikom na gumb Izračunaj. Funkcija uzima vrijednosti iz
tih polja te ih uz pomoć predefinirane parseFloat funkcije pretvara u numeričke vrijednosti.
Zatim, se uz pomoć funkcije isNaN te logičkog operatora ili (||) provjerava je li jedna od
vrijednosti NaN (not-a-number), odnosno ako nije brojčana vrijednost. Ukoliko je uvjet
zadovoljen tj. barem jedna od vrijednosti nije broj funkcija ispisuje poruku „Upišite sve
brojčane vrijednosti“, prekida izvršavanje te vraća vrijednost false. U suprotnom, aplikacija
nastavlja sa izvršavanjem.

4.1.2 Funkcije save() i load()

Nakon kreiranja potrebnih elemenata u HTML datoteci potrebno je implementirati
funkcije. Unutar app.js datoteke prvo je kreirana funkcija save(). Prvo se dohvaćaju sve
vrijednosti tekstualnih polja pomoću ugrađene JS funkcije getElementById. Nakon preuzimanja
sprema ih se u varijablu text na način da se iz svake vrijednosti dodaje string „\r\n“ što će svaku
vrijednost u datoteci prikazati u novom retku. Zatim je kreiran HTML5 Blob element [14] te
poveznica za preuzimanje (engl. download link). Chrome i Firefox drugačije tretiraju
download. Naime, Firefox zahtjeva dodavanje poveznice u DOM prije nego ga se može
kliknuti, dok u Chromeu to nije slučaj. Stoga je prije preuzimanja potrebno napraviti provjeru
preglednika uz pomoć funkcije window.webkitURL te implementirati rješenje sukladno tome.

function save(){
var z0 = document.getElementById("z0").value;
var rl = document.getElementById("rl").value;
var xl = document.getElementById("xl").value;
var f = document.getElementById("f").value;
var text = z0 + "\r\n" + rl + "\r\n" + xl + "\r\n" + f;
var textFileAsBlob = new Blob([text], {type:'text/plain'});
var fileNameToSaveAs= document.getElementById("FileNameToSave").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null){

21
 downloadLink.href=window.webkitURL.createObjectURL(textFileAsBlob);
}
else{
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}

Sljedeće je potrebno implementirati funkciju load(). Prvo se u varijablu spremi datoteka koju
je potrebno učitati na način da pomoću funkcije getElementById pročitamo vrijednost HTML
elementa file. Zatim pomoću HTML5 elementa FileReader [14] čitamo datoteku te string
spremamo u varijablu text. Uz pomoć funkcije split rastavimo string sa delimiterom „\r\n“ te
upisujemo vrijednosti u HTML tekstualna polja.

function load(){
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent){
var text = fileLoadedEvent.target.result;
var text = text.split("\r\n");
document.getElementById("z0").value = text[0];
document.getElementById("rl").value = text[1];
document.getElementById("rl").onchange();
document.getElementById("xl").value = text[2];
document.getElementById("xl").onchange();
document.getElementById("f").value = text[3];
};
fileReader.readAsText(fileToLoad, "UTF-8");
}

Na elementima sa id-jem rl i xl izazvan je event onchange kako bi radila funkcija ispisiZl() koja
ispisuje kompleksnu vrijednost impedancije tereta.

22
4.2 Izračun parametara L-mreže

Nakon uspješne validacije unesenih vrijednosti poziva se JS funkcija odaberiKrug().

Potrebno je provjeriti konfiguraciju mreže uspoređivanjem vrijednosti RL i Z0. Ukoliko je RL >
Z0 poziva se funkcija unutarKruga(), inače funkcija izvanKruga().

function odaberiKrug(){
var rl = parseFloat(document.getElementById("rl").value);
var z0 = parseFloat(document.getElementById("z0").value);
if(rl > z0) unutarKruga();
else izvanKruga();
}

4.2.1 Funkcija unutarKruga()

Ova funkcija izračunava parametre L-mreže konfiguracije pod (a) na Slici 2.1 u
poglavlju 2.1. Prvo se uzimaju sve vrijednosti iz tekstualnih polja pomoću funkcije
getElementById. Zatim je potrebno frekvenciju pretvoriti iz MHz u Hz na način da se preuzeta
vrijednost pomnoži sa 1000000. Nakon toga izračuna se kružna frekvencija ω prema formuli
ω=2πf. Parametri X i B se računaju kako je opisano u poglavlju 2.1.1. Za izračun kompleksnijih
matematičkih operacija korišten je JS objekt Math [15]. Metoda pow(x, y) računa eksponent, a
sqrt(x) korijen broja. Također je korištena i konstanta PI.

Kako postoje četiri moguća rješenja ovisno o X i B kreirane su četiri funkcije LC(b, x,
w), CC(b, x, w), LL(b, x, w) i CL(b, x, w). Funkcije primaju izračunate parametre X i B te kružnu
frekvenciju ω te računaju induktivitet L odnosno kapacitet C ovisno o konfiguraciji mreže i
vraćaju polje sa dva rezultata i string mreza koji opisuje konfiguraciju mreže. Unutar funkcije
unutarKruga() radi se provjera parametara X i B tj. gleda se jesu li pozitivni ili negativni te se
na temelju toga poziva odgovarajuća funkcija.

if(b1 > 0 && x1 > 0) var r1 = LC(b1, x1, w);

else if(b1 > 0 && x1 < 0) var r1 = CC(b1, x1, w);
else if(b1 < 0 && x1 > 0) var r1 = LL(b1, x1, w);
else if(b1 < 0 && x1 < 0) var r1 = CL(b1, x1, w);

Isti postupak se ponavlja i za druga X i B rješenja tj. za x2 te b2.

Također se u varijablu krug sprema string „unutar“ što će pomoći pri ispisu rješenja.
23
4.2.2 Funkcija izvanKruga()
Funkcija izračunava parametre L-mreže konfiguracije pod (b) na Slici 2.1 u poglavlju
2.1. Funkcija je vrlo slična prethodno opisanoj funkciji unutarKruga(). Razlika je u izračunu
parametara X i B koji se računaju kako je opisano u poglavlju 2.1.2. Nakon izračuna, također
se provjerava jesu li parametri pozitivni ili negativni te se na temelju toga pozivaju funkcije za
izračun induktiviteta L odnosno kapaciteta C.

U varijablu krug sprema se string „izvan“.

4.3 Ispis rješenja

Za ispis rješenja u index.html datoteci kreiran je div prikazKruga unutar kojeg je tablica
sa dva stupca za prikaz svakog od rješenja. HTML oznaci <table> dodan je atribut
style=“visibility: hidden;“ kako bi se sakrila tablica.

U app.js datoteci kreirana je funkcija ispisiRezultat(r1, r2, krug) koja kao parametre
prima polja r1 i r2 te string krug. Prvo se provjerava varijabla krug tj. koja je konfiguracija
mreže. Nakon toga, u oba if bloka kreirani su switch-evi koji provjerava varijablu mreza1
odnosno mreza2 u kojoj je spremljena točna konfiguracija mreže koju su vratile funkcije LC,
CC, LL ili CL. Ovisno o tome pomoću funkcije getElementById i innerHTML ispisujemo
rješenja u ranije kreiranu tablicu. Slika odgovarajuće mreže se prikazuje sa HTML oznakom
<img>, a rješenja zaokružujemo na dvije decimale naredbom toFixed. Na kraju, potrebno je
tablicu rješenja prikazati vidljivom promjenom atributa style u „visible“.

Ispis rješenja u aplikaciji prikazan je na Slici 4.2.

Slika 4. 2: Prikaz rješenja

24
4.4 Grafički prikaz koeficijenta refleksije

Koeficijent refleksije Γ računa se prema izrazu (2.15) opisanom u poglavlju 2.2. Prije
izračuna koeficijenta potrebno je izračunati ulaznu impedanciju Zul. Njezin izračun zahtjeva
matematičke operacije sa kompleksnim brojevima. No, kako predefinirani JS objekt Math nema
te funkcionalnosti javlja se potreba za korištenjem vanjske knjižnice. Za potrebe ove aplikacije
korištena je knjižnica math.js, dostupna na službenoj web stranici [16]. Nakon preuzimanja,
izvorni kod potrebno je spremiti u direktorij gdje se nalaze ostali dijelovi aplikacije. Spremljena
je unutar mape lib kako bi sve knjižnice bile na jednom mjestu. Zatim ju je potrebno uključiti
unutar index.html datoteke:

<script src="lib/math.js" type="text/javascript"></script>

Izvršavanjem prethodnih koraka knjižnica se može koristiti unutar app.js datoteke.

Za potrebe izračuna koeficijenta refleksije Γ kreirana je funkcija izracunajGamma(r1,

r2, krug, z0) koja kao parametre prima dva prethodno izračunata rješenja, varijablu krug te
impedanciju linije Z0. Prvo je potrebno sve vrijednosti pretvoriti u kompleksne kako bi se mogle
vršiti računske operacije nad njima. U tu svrhu korištena je math.js funkcija complex(re, im)
kojoj je prvi parametar realni dio kompleksnog broja, a drugi imaginarni. Kako je potrebno
računati koeficijent za dva prethodno dobivena rješenja L-mreže stvorena su dva polja rez1 i
rez2 u koja će se spremiti dobivene vrijednosti. Također, stvorena je varijabla frekGranica u
koju se sprema vrijednost frekvencije do koje će se računati koeficijent refleksije te kasnije
crtati graf. Potom se vrši provjera varijable krug tj. provjera konfiguracije mreže. Zatim su u
oba if bloka kreirane dvije for petlje za dva rješenja koja je potrebno izračunati. Petlje se
izvršavaju od frekvencije 1 do vrijednosti u varijabli frekGranica sa korakom 1000000:

for(var frek = 1; frek <= frekGranica; frek += 1000000)

Unutar for petlje radi se još jedna provjera, no ovog puta naredbom switch. Provjerava se
varijabla mreza1, odnosno mreza2 u drugoj petlji. Sukladno konfiguraciji mreže računa se
ulazna impedancija mreže Zul. Osim prethodno navedene funkcije complex, koriste se funkcije
pow za računanje eksponenta, add za zbrajanje, subtract za oduzimanje te divide za dijeljenje
[16]. Potrebno je koristiti te funkcije umjesto osnovnih računskih operatora (+, -, *, /) jer se radi
sa kompleksnim brojevima. Nakon izračunate ulazne impedancije koeficijent refleksije
jednostavno se izračuna prema izrazu (2.15) objašnjenom u poglavlju 2.2. Kako je na grafu
potrebno prikazati apsolutnu vrijednost koeficijenta Γ, jednostavno varijablu pretvorimo u
25
odgovarajući oblik pomoću funkcije abs. Potom je rješenje potrebno spremiti u ranije stvoreno
polje rez1 odnosno rez2. To se može postići naredbom push.

Nakon što se izvrše for petlje u poljima rez1 i rez2 nalazi se 1500 vrijednosti za
frekvencije od 1 do 1500000000 Hz odnosno 1,5 GHz. Funkcija vraća ta rješenja kao polje
složeno od dva polja.

Za potrebe crtanja grafova korištena je vanjska knjižnica D3.js preuzeta sa službenih

stranica. Knjižnica služi za manipulaciju podacima koristeći HTML, SVG i CSS. Podržani su
svi moderni web preglednici (Firefox, Chrome, Safari, Opera, IE9+) [17].

Kao i kod prethodno opisane knjižnice, nakon preuzimanja izvornog koda, potrebno ga
je uključiti unutar HTML dokumenta. Moguće je uključiti d3.js koja je cijela, veća verzija, no
za ovu aplikaciju odabrana je d3.min.js koja je nešto manja, ali sasvim dovoljna za potrebe
aplikacije.

<script src="lib/d3.min.js" type="text/javascript"></script>

Unutar app.js datoteke kreirana je funkcija crtajGraf(data) koja kao parametar prima
složeno polje sa ranije izračunatim koeficijentima refleksije. Prvo se podaci iz složenog polja
raspoređuju u dva polja nazvana Ydata1 i Ydata2 te se stvara polje Xdata za x vrijednosti
pomoću funkcije range. Kako knjižnica nema mogućnosti rada sa jednodimenzionalnim
poljima stvorena su polja xy1 i xy2 koja sadrže parove x i y vrijednosti:

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

xy1.push({x:Xdata[i], y:Ydata1[i]});
}

Nakon toga definirane su margine grafa (varijabla m), njegova širina (varijabla w) i
visina (varijabla h). Potom je stvorena skala za x vrijednosti od 0 do broja x elemenata odnosno
1500 te skala za y vrijednosti od 0 do 1:

xScale = d3.scale.linear().domain(d3.extent(xy1,function(d)
{ return d.x;} )).range([0, w]);
yScale = d3.scale.linear().domain([0, 1]).range([h, 0]);

Zatim je potrebno definirati x i y točke pomoću D3 funkcije line() koje se spremaju u

varijablu line:

26
var line = d3.svg.line()
.x(function(d,i) { return xScale(d.x);})
.y(function(d,i) { return yScale(d.y);})

Kada su pripremljeni svi elementi moguće je početi s crtanjem samoga grafa. Prvo je
potrebno odabrati ranije stvoreni div graph te mu dodati (engl. append) svg element te atribute
za širinu i visinu zajedno sa marginama. Potom se novostvorenom svg elementu dodaje element
g, pomaknut za gornju i lijevu marginu, unutar kojeg će se crtati graf.

var graph = d3.select("#graph").append("svg:svg")

.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

Sljedeće je potrebno definirati osi grafa. Prvo su, pomoću funkcije axis() zajedno sa
ranije definiranim skalama, stvorene osi koje se spremaju u varijablu xAxis odnosno yAxis.
Zatim je svg elementu dodan novi g element pomaknut za visinu h u slučaju x osi, odnosno za
25 piksela u slučaju y osi. Pozivom funkcije call kreiraju se osi. Sljedeći kod prikazuje
definiranje x osi:

var xAxis = d3.svg.axis().scale(xScale).tickSize(-h).tickSubdivide(true);

graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis)

Kako bi dodali etiketu (engl. label) potrebno je dodati element text sa atributima za
pozicioniranje, stil te željeni tekst. Kako bi pobliže opisali osi, ispod x osi kreirana je etiketa
„f(MHz)“, dok je lijevo od y osi etiketa „|Γ|“.

Za crtanje krivulja grafa potrebno je svg elementu dodati element path zajedno sa ranije
kreiranim točkama u varijabli line, određenim id-jem te stilom.

graph.append("svg:path")
.attr("d", line(xy1))
.attr("id", "myPath1")
.attr('stroke', '#47A3FF')

Krivulja za prvo rješenje ima id myPath1 i plave je boje.

27
Postupak kreiranja krivulje za drugo rješenje je gotovo identičan, osim što je isprekidana,
crvene boje i ima id myPath2. Isprekidana linija kreirana je pomoću stilskog atributa stroke-
dasharray.

Kako bi omogućili prikaz vrijednosti prelaskom miša preko krivulje kreirane su funkcije
mMove1 i mMove2 koje vraćaju poziciju miša konvertiranu iz piksela u točnu y vrijednost točke
na grafu, zaokruženu na tri decimale.

function mMove1(){
var title = d3.mouse(this);
d3.select("#myPath1").select("title").text((yScale.invert(title[1])).
toFixed(3));
}

Zatim je path elementu dodan element title unutar kojeg će se ispisivati vrijednosti te je dodan
poziv funkcije mMove1, odnosno mMove2, na pomak miša.

.on("mousemove", mMove1)
.append("title");

Za potrebe kreiranja legende deklarirana je varijabla legendSpace koja je jednaka visini

podijeljenoj sa brojem točaka, što će olakšati centriranje legende ispod grafa. Legenda se kreira
na način da se grafu doda element text sa atributima za pozicioniranje, stil te željeni tekst. Ispod
grafa kreirana je legenda plave boje za prvu krivulju, odnosno crvene boje za drugu.

Kako bi se izbjeglo ponovno crtanje grafa sa unosom novih parametara u početnu formu
na početku funkcije briše se sve unutar graph div-a te svi svg elementi.

document.getElementById('graph').innerHTML = "";
d3.select("svg")
.remove();

Na Slici 4.4 prikazan je grafički prikaz koeficijenta refleksije Γ u aplikaciji za parametre

Z0=100, RL=200, XL=-300 i f=600.

28
 Slika 4. 4: Grafički prikaz koeficijenta refleksije Γ

4.5 Širina frekvencijskog pojasa

Potrebno je izračunati širinu frekvencijskog pojasa (engl. bandwidth) za neki željeni

koeficijent refleksije Γ. Širina pojasa je razlika rubnih frekvencija koje su ispod željenog
koeficijenta refleksije.

U index.html datoteci kreiran je div sa id-jem bandwidth ispod grafa koji je u početku
nevidljiv tj. visibility mu je postavljen u hidden. Unutar njega kreiran je HTML input element
tipa number koji dozvoljava upis brojeva od 0 do 1 na najviše dvije decimale. Ispod njega
kreiran je gumb koji na klik pokreće JS funkciju izracunajBandwidth(). Desno od ta dva
elementa stvorena je tablica predviđena za ispis rješenja.

Unutar funkcije crtajGraf() potrebno je prikazati badwidth div, odnosno promijeniti mu

visibility u visible. Za izračun širine pojasa kreirana je nova funkcija izracunajBandwidth(). Na
početku su deklarirana polja f1 i f2 u koje će se spremati dobivene rubne frekvencije. Također
je deklarirana pomoćna varijabla flag postavljena u vrijednost false. Zatim se u varijablu gamma
sprema vrijednost preuzeta iz HTML number elementa. For petljom se prolazi kroz polje
Ydata1 i Ydata2 koji su ranije kreirani kod crtanja grafa. Unutar petlji provjerava se je li
vrijednost unutar polja Ydata1 ili Ydata2, zaokružena na dvije decimale, jednaka varijabli
29
gamma tj. odabranoj vrijednosti te je li varijabla flag postavljena u false. Ukoliko je uvjet
zadovoljen u polje f1, odnosno f2, sprema se vrijednost frekvencije te se varijabla flag postavlja
u true. Zatim se provjerava je li vrijednost u Ydata1 ,odnosno Ydata2, također zaokružena na
dvije decimale, različita od varijable gamma. Ukoliko je uvjet zadovoljen varijabla flag se
postavlja u false. Na taj način je izbjegnuto ponavljanje vrijednosti kojim je druga decimala
jednaka, a razlikuju se u nekoj daljoj decimali. Nakon izvršavanja petlji u poljima f1 i f2
spremljene su po dvije vrijednosti koje odgovaraju rubnim frekvencijama.

Kada su izračunate rubne frekvencije, širina pojasa se jednostavno izračuna

oduzimanjem veće vrijednosti frekvencije od manje. Izračunate vrijednosti za širinu pojasa
spremaju se u varijable bw1 te bw2.

Relativna širina pojasa računa se kao:

𝑩𝑾 ( 4.1 )
∗ 𝟏𝟎𝟎%
𝒇𝒐
pri čemu je fo jednako:

(𝒇𝟏 + 𝒇𝟐) ( 4.2 )

𝒇𝒐 =
𝟐

Unutar funkcije prvo se računa fo1 te fo2, nakon čega se izračunava relativna širina pojasa koja
se sprema u varijable relBW1 i relBW2.

Rješenja se ispisuju u ranije kreiranu tablicu pomoću funkcija getElementById i

innerHTML. Prvo rješenje ispisano je plavom bojom, dok je drugo crvene boje, kako bi
odgovarali bojama krivulja na grafu.

Slika 4.5 prikazuje ispis rubnih frekvencija te širine pojasa unutar aplikacije za Γ=0,4.

Slika 4. 5: Širina frekvencijskog pojasa

30
4.5.1 Prikaz rubnih frekvencija na grafu
Kako bi prikazali frekvencije na grafu potrebno je odabrati div graph te svg element u
njemu pomoću D3 funkcije select. Kreirane su četiri varijable za linije: horizontalLine za
prikaz odabranog koeficijenta refleksije Γ, f11Line za prvu frekvenciju prvog rješenja,
f12Line za drugu frekvenciju prvog rješenja, f21Line za prvu frekvenciju drugog rješenja i
f22ine za drugu frekvenciju drugog rješenja.

Linije se crtaju na način da se svg elementu doda element line te atributi za dvije točke
linije te stil. Sljedeći kod crta liniju za prvu frekvenciju prvog rješenja.

if(!isNaN(f1[0])){
f11Line = graph.append("svg:line")
.attr("x1", xScale(f1[0]) + 80)
.attr("y1", yScale(0) + 20)
.attr("x2", xScale(f1[0]) + 80)
.attr("y2", yScale(gamma) + 20)
.style("stroke", "#47A3FF")
.style("stroke-width", 2)
.style("stroke-dasharray", ("2, 2"));
}

Prikaz koeficijent refleksije iscrtan je punom crnom linijom, rubnih frekvencija prvog rješenja
plavom isprekidanom linijom, a drugog rješenja crvenom isprekidanom linijom.

Na Slici 4.6 prikazan je grafički prikaz rubnih frekvencija te odabranog koeficijenta

Γ=0,4.

Slika 4. 6: Prikaz rubnih frekvencija na grafu

31
Kako bi se spriječilo ponovno crtanje linija svakim novim izračunom širine pojasa prije crtanja
linija potrebno je provjeriti je li linija već nacrtana. Ukoliko je uvjet ispunjen, linija se briše.

Svakim upisom novih parametara u početnom sučelju potrebno je osvježiti izračun i

prikaz širine pojasa i rubnih frekvencija. To se postiglo na način da je na kraju funkcije
izracunajBandwidth() varijabla isBandwith postavljena u true. U funkciji crtajGraf()
provjerava se je li varijabla deklarirana i je li joj vrijednost postavljena u true. Ukoliko je uvjet
zadovoljen poziva se funkcija izracunajBandwidth() tj. ponovno se radi izračun širine pojasa te
prikaz na grafu.

32
5. KORIŠTENJE APLIKACIJE

Pri pokretanju aplikacije prikazano je početno sučelje sa četiri tekstualna polja za

impedanciju linije Z0, realni dio impedancije tereta RL, imaginarni dio impedancije tereta XL te
frekvenciju. Također, ispod se nalazi i sučelje za učitavanje i spremanje datoteka sa
parametrima. Desno od sučelja prikazano je opće rješenje L-mreže. Prikaz sučelja je na Slici
4.1. u poglavlju 4.1.

Kako bi spremili upisane parametre u datoteku potrebno je upisati željeno ime datoteke,
u za to predviđeno tekstualno polje, te kliknuti gumb Spremi. Datoteka će se automatski
spremiti na korisnikovo računalo. Ukoliko želimo učitati ranije kreiranu datoteku s
parametrima, potrebno je kliknuti na gumb Pretraži kako bi nam se omogućilo pretraživanje
datotečnog sustava. Nakon odabira datoteke potrebno je kliknuti na gumb Učitaj.

Za početak izračuna potrebno je kliknuti na gumb Izračunaj. U nastavku je opisan rad

aplikacije na nekoliko primjera.

5.1 Prvi primjer

Parametri uneseni u početno sučelje aplikaciju su: Z0 = 100; RL = 200; XL = -100; f =

500. Aplikacija zatim izračunava dva moguća rješenja te ih prikazuje ispod početnog sučelja. S
desne strane, gdje je bilo opće rješenje, iscrtava se grafički prikaz koeficijenta refleksije Γ, a
ispod njega se nudi sučelje sa izračun širine pojasa. Na Slici 5.1 prikazan je aplikacija nakon
unosa parametara.

33
 Slika 5. 1: Aplikacija nakon unosa parametara

Za izračun širine pojasa potrebno je, u za to predviđeno polje, upisati željenu vrijednost
koeficijenta refleksije Γ te kliknuti Izračunaj ispod grafa. Na Slici 5.2 prikazana je izračunata
širina pojasa za Γ = 0,3 te grafički prikaz rubnih frekvencija.

Slika 5. 2: Prikaz širine pojasa i rubnih frekvencija

34
5.2 Drugi primjer

U ovom primjeru korišteni su sljedeći parametri: Z0 = 50; RL = 250; XL = -250; f = 660.

Nakon izračuna rješenja odabrana je vrijednost od 0,55 za koeficijent refleksije Γ. Na Slici 5.3
prikazana je aplikacija nakon unosa navedenih parametara.

Slika 5. 3: Rješenje drugog primjera

5.3 Treći primjer

Zadani parametri su: Z0 = 50; RL = 25; XL = 30; f = 1000. Odabrani koeficijent refleksije
je: Γ = 0,2. Na Slici 5.4 je prikazano rješenje za navedene parametre.

35
Slika 5. 4: Rješenje trećeg primjera

36
6. ZAKLJUČAK

Tema ovog završnog rada bila je implementacija web aplikacije za izračun parametara
L-mreže za transformaciju impedancije, što je uspješno realizirano. U radu je poprilično
detaljno opisan sam problem prilagodbe impedancije L-mrežama te dva načina rješavanja:
analitički, na kojem se i temelji aplikacija, te metoda pomoću Smith-ovog dijagrama. Također,
opisane su i tehnologije kojima je aplikacija izrađena kao i detaljan postupak implementacije
svake od mogućnosti.

Većih problema prilikom implementacije nije bilo osim korištenja vanjskih knjižnica
math i D3 zbog nedovoljnog poznavanja istih. No, proučavanjem njihove javno dostupne
dokumentacije problemi su, u relativno kratkom vremenu, riješeni.

Aplikacije je implementirana u svega nekoliko mjeseci, stoga, posljedično, postoji

mogućnost za dorade i usavršavanje.

Dolaskom novih i inovativnih tehnologija, kao što je HTML5, veoma je proširen spektar
mogućnosti u razvoju web aplikacija. Upravo tim novim tehnologijama, mogao bi se
implementirati i prikaz izračuna parametara L-prilagodne mreže pomoću Smith-ovog
dijagrama. Naime, u implementiranoj aplikaciji, nakon upisa parametara, prikazuje se samo
krajnje rješenje, dok bi se na Smith-ovom dijagramu vidio i izračun međukoraka kao što su
parametri X i B.

Danas, u modernom dobu, gotovo da ne postoji čovjek bez pametnog telefona (engl.
smartphone). Upravo je to dobar razlog da se, osim ove web, implementira i mobilna aplikacija.
Kako najveći broj mobilnih korisnika koristi Android OS [18], smatram da bi to trebala biti
ciljana platforma za razvoj. No, to ne isključuje mogućnost razvitka na nekim drugim
platformama, kao što su iOS ili Windows Phone, u budućnosti.

37
LITERATURA

[1] RF Electronics Engineering Blog, s Interneta, https://jaunty-

electronics.com/blog/2013/04/l-network-impedance-matching/, 20. kolovoza 2015.

[2] Frenzel, L.: „Back to Basics: Impedance Matching (Part 2)“, s Interneta,
http://electronicdesign.com/communications/back-basics-impedance-matching-part-2, 20.
kolovoza 2015.

[3] Joler, M.: „L-mreže za prilagodbu impedancije“, predavanja iz kolegija

Radiokomunikacije 2015.

[4] Grbić, M.: „Smithov dijagram“, s Interneta,

http://www.phy.pmf.unizg.hr/~mgrbic/glavna_strana/smith.php, 21. kolovoza 2015.

[5] Crepaldi, P.; Ferreira, L.; Pimenta, T.: „Radio Frequency Background“, INTECH, 2011.

[6] W3C: „Open Web Platform Milestone Achieved with HTML5 Recommendation“, s
Interneta, http://www.w3.org/2014/10/html5-rec.html.en, 24. kolovoza 2015.

[7] W3C: „HTML Tags“, s Interneta, http://www.w3.org/History/19921103-

hypertext/hypertext/WWW/MarkUp/Tags.html, 24. kolovoza 2015.

[8] Crnković, T.: „Klijentska strana weba“, s Interneta, https://github.com/tinc2k/frontend-

intro/, 24. kolovoza 2015.

[9] W3C: „CSS, level 1“, s Interneta, http://www.w3.org/TR/CSS1/, 25. kolovoza 2015.

[10] W3C: „CSS Level 2 Revision 1 (CSS 2.1) Specification“, s Interneta,

http://www.w3.org/TR/CSS2/, 25. kolovoza 2015.

[11] MDN: „CSS modules status“, s Interneta, https://developer.mozilla.org/en-

US/docs/Web/CSS/CSS3, 25. kolovoza 2015.

[12] Ecma International, s Interneta, http://www.ecma-international.org/memento/TC39.htm,

26. kolovoza 2015.

[13] Suehring, S.; Valade, J.: „PHP, MySQL, JavaScript & HTML5 All-in-One For
Dummies“, John Wiley & Sons, Inc., Hoboken, NJ, 2013.

[14] W3C: „File API“, s Interneta, http://www.w3.org/TR/FileAPI/, 6. kolovoza 2015.

38
[15] Dokumentacija Math objekta, s Interneta, https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Math, 15. lipnja 2015.

[16] Math.js knjižnica, s Interneta, http://mathjs.org/, 30. lipnja 2015.

[17] D3.js knjižnica, s Interneta, http://d3js.org/, 3. srpnja 2015.

[18] IDC: „Smartphone OS Market Share, 2015 Q2“, s Interneta,

http://www.idc.com/prodserv/smartphone-os-market-share.jsp, 1. rujna 2015.

39
POPIS OZNAKA I KRATICA

1. RF – radio-frekvencijski
2. HTML – HyperText Markup Language
3. CSS – Cascading Style Sheets
4. JS – JavaScript
5. PHP - PHP: Hypertext Preprocessor
6. VB – Visual Basic
7. IETF - Internet Engineering Task Force
8. W3C - World Wide Web Consortium
9. DTD - Document Type Declaration
10. API - Application Programming Interface
11. SVG - Scalable Vector Graphics
12. D3 - Data Driven Documents
13. NaN - Not-a-Number
14. IE – Internet Explorer
15. Hz – Hertz
16. MHz – megahertz
17. GHz – gigahertz
18. OS – Operacijski sustav

40