SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA DIZAJN BINOMNOGA

TRANSFORMATORA IMPEDANCIJE

Rijeka, rujan 2016.

Erika FafanĎel

0069060311

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA DIZAJN BINOMNOGA

TRANSFORMATORA IMPEDANCIJE

Mentor: izv. prof. dr. sc. Miroslav Joler

Rijeka, rujan 2016.

Erika FafanĎel

0069060311

Izjava o samostalnoj izradi rada Izjavljujem da sam samostalno izradila ovaj rad.

Rijeka, rujan 2016. _______________

Erika FafanĎel

1

2

SADRŢAJ

1. UVOD .................................................................................................................................... 3

2. BINOMNI TRANSFORMATOR IMPEDANCIJE .......................................................... 4

3. POTREBNI ALATI ZA USPOSTAVU I KORIŠTENJE PROGRAMSKOG RJEŠENJA 7

3.1. HTML .......................................................................................................................................... 7

3.2. CSS ............................................................................................................................................... 9

3.3. JavaScript ................................................................................................................................. 10

3.4. ASP.NET ................................................................................................................................... 12

4. WEB APLIKACIJA ........................................................................................................... 14

4.1. Sučelje ........................................................................................................................................ 15

4.1.1. Ulazni parametri ................................................................................................................. 16

4.2. Spremljeni primjeri .................................................................................................................. 17

4.2.1. Spremanje ........................................................................................................................... 18

4.2.2. Prikazivanje ........................................................................................................................ 19

4.2.3. Učitavanje ........................................................................................................................... 19

4.2.4. Brisanje ............................................................................................................................... 20

4.3. Analitičko rješenje .................................................................................................................... 21

4.4. Grafičko rješenje ...................................................................................................................... 22

4.5. Kr/f graf .................................................................................................................................... 25

5. KORIŠTENJE APLIKACIJE ........................................................................................... 30

5.1. Prvi primjer .............................................................................................................................. 30

5.2. Drugi primjer ............................................................................................................................ 31

5.3. Treći primjer............................................................................................................................. 34

6. ZAKLJUČAK ..................................................................................................................... 36

LITERATURA ............................................................................................................................... 37

SAŢETAK ....................................................................................................................................... 38

ABSTRACT .................................................................................................................................... 39

3

1. UVOD

U ovom će radu biti prikazan izračun prilagodbe impedancije pomoću binomnog

transformatora. Prilagodba impedancije ostvaruje se pomoću prilagodne mreţe koja je, u

idealnom slučaju, bez gubitaka dok je binomni transformator jedan od načina za prilagodbu

impedancije. On je utemeljen na ideji da to bude optimum u smislu da je za zadani broj

sekcija, karakteristika koeficijenta refleksije ravna koliko moţe biti u okolici ţeljene

frekvencije.

Glavna tema ovoga rada je opis i analiza izraĎene web aplikacije za izračun prilagodbe

impedancije pomoću binomnog transformatora. Web aplikacija se sastoji od dijela za ulazne

parametre te dijela za prikaz rješenja, analitičkog i grafičkog. Uz samu funkciju izračuna

sadrţi i dio s kratkim uvodom u binomni transformator. Tamo se nalaze sve informacije

potrebne za shvaćanje principa izračuna na web aplikaciji, ali i za dobivanje cjelokupnog

dojma što je to binomni transformator. Aplikacija bi trebala korisnicima olakšati put do

potrebnih podataka ili sluţiti kao provjera za prethodno izračunate rezultate. Relativno je

jednostavna za korištenje i ugodna oku da bi korisnicima bilo lakše raditi.

Rad je organiziran tako da nakon teoretskog dijela o temi, odnosno binomnom

transformatoru impedancije, slijedi teoretski dio o korištenim tehnikama potrebnim za rad

web aplikacije. Opisano je koje se tehnike koriste, zašto i ukratko o svakoj od njih.

Središnji dio rada je 3.poglavlje u kojem se detaljno opisuju načini izrade svakog od dijelova

aplikacije uz priloţen kod i objašnjenje istog.

Da bi analiza aplikacije bila potpuna, u 4.poglavlju slikovito je opisan primjer korištenja iste.

Opisani su svi mogući načini korištenja aplikacije, korak po korak.

4

2. BINOMNI TRANSFORMATOR IMPEDANCIJE

Binomni transformator je dobro poznat koncept za prilagodbu impedancije.

Korištenjem višestrukih sekcija prijenosne linije duţine četvrtine valne duljine postiţe se

širokopojasno prilagoĎenje impedancije. Kod binomnog transformatora, koeficijenti refleksije

(a time i faze impedancije) se dizajniraju na bazi binomnoga koeficijenta[1], što nam moţe

biti poznato iz teorije vjerojatnosti, ili binomne transformacije (X + Y) ^ N.

Osnovna ideja binomnog transformatora impedancije je optimum u smislu da je za zadani

broj sekcija, karakteristika koeficijenta refleksije ravna koliko moţe biti u okolici ţeljene

frekvencije.

Multisekcijska prilagodna mreţa moţe biti opisana teorijom malih refleksija[2]:

( )

(2.1)

Teorija malih refleksija je aproksimacija gdje koristimo samo izravan put za izračunavanje

niza propagacija i gdje usklaĎujemo koeficijente prijenosa kao 1 (npr. T=1). Omogućuje nam

da koristimo niz kao alat za analizu (ne moramo uzeti u obzir bezbroj izraza).

Kod multisekcijskog transformatora svaka sekcija ima jednaku duljinu l ali nejednake

karakteristične impedancije.

Uzeto je u obzir da za multisekcijski transformator imamo N stupnjeva slobode dizajna, što

odgovara broju N karakterističnih vrijednosti impedancija Zn.

Moramo definirati N neovisnih jednadţbi dizajna da bi ih iskoristili za rješavanje N

karakterističnih vrijednosti impedancije Zn[2].

Da bi to riješili uzimamo u obzir binomnu funkciju:

( ) ( ) (2.2)

5

Gdje je:

A općeniti koeficijent amplitude.

Ova funkcija ima poţeljna svojstva :

(

) ( )

(2.3)

Drugim riječima, binomna funkcija je maksimalno ravna kada je θ = π / 2, gdje je:

Г (θ = π/2) = 0.

Nakon što ju proširimo s binomnim koeficijentom i usporedimo s formulom za N-sekcijski

transformator, vidimo da su forme identične te zaključujemo:

(2.4)

Općenita formula za koeficijent refleksije po binomnoj razdiobi glasi[3]:

( ) ∑

(2.5)

U teoriji vjerojatnosti, binomni koeficijent je odgovor na pitanje, koliko ima načina za

odabrati n stvari iz grupe od N stvari? Da bi izbjegli brojanje načina u glavi, ovo je formula:

( ) (2.6)

Svojstva binomnog koeficijenta su:

(2.7)

(2.8)

(2.9)

6

Da bi na kraju izračunali koeficijent refleksije i impedanciju sekcija sluţimo se sljedećim

formulama[3]:

(2.10)

(2.11)

Gdje je osnova za iterativni algoritam:

(2.12)

Kada bi se koristile „točne“ formule za dizajn za otkrivanje karakterističnih impedancija Zn,

zadnja vrijednost ГN bi došla do značajne numeričke pogreške, te naš dizajn ne bi ispao

maksimalno ravan. Ako se umjesto tih koriste „pribliţne“ formule za dizajn za otkrivanje

karakterističnih impedancija Zn, sve vrijednosti Гn bi imale malu grešku ali bi rezultirajući

dizajn izgledao maksimalno ravan [2].

Da bi dobili širinu frekvencijskog pojasa koristimo formule:

(2.13)

[

( )

] (2.14)

Gdje je

Гm maksimalno prihvatljiva vrijednost koeficijenta refleksije

BW širina frekvencijskog pojasa

7

3. POTREBNI ALATI ZA USPOSTAVU I KORIŠTENJE

PROGRAMSKOG RJEŠENJA

Zbog svoje funkcionalnosti za ovu je web aplikaciju korišten HTML, CSS, JavaScript i

ASP.NET. Pomoću CSS-a izgled web aplikacije se organizirao te su se posloţili i animirali

HTML elementi. Za izračune i ispis rješenja, mijenjanje CSS-a i izračunavanje i crtanje grafa

korišten je JavaScript. Do dijela za spremanje primjera u datoteke, cijeli programski dio

aplikacije pisan je u JavaScript-u. Zbog jednostavnijeg prikazivanja i učitavanja spremljenih

primjera izračuna, korištena je ASP tehnologija koja je, kroz programski dio web aplikacije

koji se odraĎuje na serverskoj strani, omogućila spremanje primjera u zasebne .txt datoteke na

udaljenom (eng. remote) serveru, prikazivanje svih spremljenih primjera i učitavanje istih,

jednim klikom.

Općenito o svim korištenim alatima nalazi se u nastavku.

3.1. HTML

HTML je kratica za HyperText Markup Language, što znači prezentacijski jezik za izradu

web stranica. Hipertekst dokument se stvara pomoću HTML jezika. Njime se oblikuje sadrţaj

i stvaraju se hiperveze hipertekst dokumenta. Jedan od razloga njegove opće prihvaćenosti i

popularnosti je taj što je jednostavan za uporabu i lako se uči. Raširen je zbog svoje

jednostavnosti i zbog toga što je od početka bio zamišljen kao besplatan i tako dostupan

svima[4].

Svaki HTML dokument sastoji se od osnovnih graĎevnih blokova - HTML elemenata. Svaki,

pak, HTML element sastoji se od para HTML oznaka (engl. tag). TakoĎer, svaki element

moţe imati i atribute kojim se definiraju svojstva tog elementa. Na samom početku HTML

dokumenta preporučljivo je postaviti <!DOCTYPE> element, kojim se označava DTD

(eng. Document Type Declaration), čime se definira točna inačica standarda koja se koristi za

izradu HTML dokumenta. Nakon <!DOCTYPE> elementa, <html> elementom označava se

početak HTML dokumenta. Unutar <html> elementa nalaze se i <head> element te <body>

element. <head> element predstavlja zaglavlje HTML dokumenta u kojemu se najčešće

specificiraju jezične značajke HTML dokumenta kao i sam naslov (engl. title) stranice.

Pomoću odreĎenih HTML elemenata unutar zaglavlja dodaju se i stilska obiljeţja stranice,

8

bila ona direktno ugraĎena (engl. embedded) ili dodana kao referenca na vanjsku CSS

datoteku[4]. U ovoj se aplikaciji, u zaglavlju njenog html koda, osim naslova i reference na

vanjsku CSS datoteku nalazi i navoĎenje javascript datoteke te referenca na favorite icon

(favicon.ico).

<head runat="server">

<title>Binomni transformator</title>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<link rel="stylesheet" media="screen,projection" type="text/css"

href="css/stil.css" />

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

</head>

Često se unutar zaglavlja još definiraju i skripte kreirane u JavaScript jeziku. U <body>

elementu kreira se sadrţaj HTML dokumenta, odnosno, stranice koju on reprezentira.

Svaka HTML oznaka (koja u paru kreira HTML element) počinje znakom < (manje od), a

završava znakom > (više od). Na taj je način napravljeno cijelo sučelje, izmeĎu ostaloga

prostor za unos ulaznih parametara:

<span title="Impedancija s lijeva" class="hover">Početna impedancija,

Z<span style='font-size: 11px'>0</span>(&#8486): </span>

I button-i „O APLIKACIJI“ i „O TRANSFORMATORU“ za pomoć u korištenju stranice:

<input type="button" id="lbtHelp" onclick="otvoriPopUp();" value="O

APLIKACIJI" /> <input type="button" width="200"id="lbtAbout"

onclick="otvoriPopUp2();" value="O TRANSFORMATORU" />

9

3.2. CSS

CSS je jednostavan mehanizam za dodavanje stilova: fontova, boja razmaka izmeĎu

paragrafa, ureĎivanje tablica. Svojim dolaskom CSS je izazvao pravu revoluciju na internetu i

to zahvaljujući nizu prednosti koje ima pred tabličnim layout-om (korištenje tablica za

formiranje stranice). Korištenjem CSS-a postalo je moguće odvojiti prezentaciju podataka i

dizajn od same strukture podataka. HTML kôd postaje pregledniji i manji što znači da ga je

puno lakše kontrolirati, a takoĎer je moguće jednostavnom primjenom parametara promijeniti

izgled stranice [5].

U HTML-u ova web aplikacija je podijeljena na tri osnovna dijela, odnosno, <div>-a:

<div id="Zaglavlje"></div>

<div id="Sadrzaj"> </div>

<div id="Podnozje"> </div>

koje smo u CSS osnovno formatirali tako da smo im odredili svojstvo (properties)

position:relative i overflow:hidden kako bi bili poredani jedan ispod drugog i ne bi prelazili

jedan preko drugog. Uz to, zaglavlju i podnoţju je odreĎena širina (svojstvo width) 100%

zbog čega se crna crta na dnu zaglavlja(border-bottom: 1px solid #000000;) i vrhu podnoţja

(border-top: 1px solid #000000;) proteţe od ljevog kraja ekrana do desnog, bez obzira o kojoj

se rezoluciji radi. Za razliku od zaglavlja i podnoţja Sadrţaju je odreĎena širina od 1000 px

(width: 1000px;) i horizontalno je smješten u centar ekrana pomoću odreĎivanja vrijednosti

svojstva margina (margin: 0px auto 0px auto;). Vrijednost gornje i donje margine iznosi 0px

što znači da izmeĎu Sadrţaja i Zaglavlja, kao i izmeĎu Sadrţaja i Podnoţja neće biti razmaka,

a vrijednosti desne i lijeve margine postavljene su na auto što čini da div Sadrţaj bude, bez

obzira na rezoluciju ekrana na kojem se pregledava, uvijek jednako udaljen od lijevog i

desnog ruba ekrana (u centru).

#Zaglavlje

position:relative;

width:100%;

border-bottom: 1px solid #000000;

#Sadrzaj

position:relative;

overflow:hidden;

width: 1000px;

margin: 0px auto 0px auto;

10

padding:10px;

#Podnozje

position:relative;

margin-top: 10px;

width:100%;

height:50px;

border-top: 1px solid #000000;

Div Sadrţaj zamišljen je da se prikazuje u pet panela, u HTML kodu div-ova, što je detaljno

objašnjeno u 4. poglavlju WEB APLIKACIJA.

<div id="Parametri"> </div>

<div id="sviIzracuni"> </div>

<div id="brojcanoRjesenje"> </div>

<div id="grafickoRjesenje"> </div>

<div id="grafContainer"> </div>

Kroz CSS su ti paneli poredani jedan do drugog, a maksimalno dva u redu.

#Parametri, #sviIzracuni, #brojcanoRjesenje, #grafickoRjesenje,

#grafContainer

...

width: 45%; /* ne dozvoljava više od dva u redu */

float:left; /* omogućava da se poravnavaju lijevo i ako ima mjesta

postave do prethodnog div-a */

...

3.3. JavaScript

JavaScript je objektno orijentirani programski jezik (object oriented programming – OOP).

Koristi se isključivo na web stranicama za manipulaciju s objektima na stranici. Potpuno je

besplatan i ugraĎen u svakom Web browseru. Pomoću JavaScript-a programiramo

interaktivnost svojih web stranica. Pod interaktivnost web stranica spada, na primjer, prijelaz

pokazivača miša iznad neke slike, pa se promjeni boja podloge stranice ili se pojavi neka

druga slika itd. JavaScript reagira na neke akcije posjetitelja naših web stranica s ciljem da

privuče njegovu pozornost, olakša mu pretragu...

11

JavaScript gradi interaktivnost pomoću niza dogaĎaja, funkcija i objekata (Events, Functions,

Objects).

Koristi dogaĎaje (Events) kako bi doznao što posjetitelj web stranice radi. Postoji čitav niz

dogaĎaja, meĎu kojima je i „onMouseOver“. Kad na nekoj stranici postavite pokazivač miša

iznad neke slike i ista se počne mijenjati, ili iskoči izbornik, to je dogaĎaj „onMouseOver“.

Taj i svaki drugi dogaĎaj upisuju se unutar HTML tag-ova kao i bilo koji drugi atribut.

DogaĎaj uvijek poziva („function call“) ili pokazuje na neku funkciju. JavaScript, pomoću

funkcija i dogaĎaja, čini nešto u točno odreĎenom trenutku. Kad se dogaĎaj dogodi, pokrene

se funkcija na koju taj dogaĎaj „pokazuje“.

Funkcija je JavaScript program, ili preciznije programski modul koji sadrţi JavaScript

instrukcije („statements“). Te instrukcije manipuliraju nekim objektom. Dinamika je

ostvarena i to u realnom vremenu, baš u trenutku u kojem se dogaĎaj dogodio.

Objekt je nešto na našoj web stranici ili u Web browseru što JavaScript prepoznaje.

Prozor Web browser-a u kojem se posjetitelj nalazi, JavaScript naziva „window“, web

stranicu koja je u tom prozoru naziva „document“ ili „window.document“; sliku „knjiga“ na

toj stranici naziva „window.document.images.knjiga“.

Točka u nazivima objekata ima veliku ulogu. Ona razdvaja „roditelja“ od „djeteta“. I

„roditelji“ i „djeca“ su objekti. Objekt „roditelj“ sadrţi objekte „djecu“.

Objekt „window“ sadrţi objekt „document“, koji sadrţi skupinu objekata (image array)

„images“, a u toj skupini postoji objekt koji se zove „knjiga“. „Pokazivanje“ na objekt

pomoću imena više objekata i točaka izmeĎu naziva se JavaScript Object Reference.

Svaki objekt ima svoje JavaScript osobine (Properties) i svoje JavaScript radnje (Methods).

Pomoću tih osobina i radnji manipuliramo objektom. Metode se izvode (do) ili pozivaju (call

on), a osobine se dinamički mijenjaju pomoću programskog jezika JavaScript [6].

JavaScript-om osim osnovnog funkcioniranja web aplikacije, objašnjenog u poglavlju 4,

omogućeno je automatsko (animirano) podizanje sučelja, odnosno, pomicanje do panela koji

prikazuju rješenje, nakon klika na tipku Izračunaj odnosno klika na primjer u panelu

sviIzracuni.

function scrollToRjesenje(scrollDuration)

var scrollStep = 15,

scrollInterval = setInterval(function ()

12

if (window.scrollY < 350)

window.scrollBy(0, scrollStep);

else clearInterval(scrollInterval);

, 15);

3.4. ASP.NET

ASP.NET je model ujedinjenog Web razvoja koji uključuje usluge potrebne za razvoj Web

aplikacija s minimumom kodiranja. ASP.NET je dio .NET Framework-a i kodiranjem u

ASP.NET aplikacijama je dobiven pristup klasama u .NET Framework-u. Moguće je kodirati

aplikacije u bilo kojem jeziku kompatibilnom s common language runtime (CLR), uključujući

Microsoft Visual Basic i C# [7].

U slučaju da se na stranicama prikazuju sadrţaji koji se često mijenjaju: npr. vremenska

prognoza, rezultati sportskih susreta, vrijednosti dionica itd. sam HTML, u tom trenutku, gubi

vrijednost zbog svoje statičnosti.

ASP tehnologija omogućuje web programerima izradu fleksibilnih stranica kojima će korisnik

moći manipulirati i na taj način od pasivnog promatrača postati aktivan sudionik dinamički

kreirane stranice.

ASP.NET nudi tri framework-a za izradu web aplikacija: ASP.NET Web forme, ASP.NET

MVC (Model-View-Controller) i ASP.NET web stranice. Sva tri su stabilna i daju mogućnost

izrade kvalitetnih web aplikacija.

Svaki framework cilja na različite tipove aplikacija. Izbor ovisi o kombinaciji korisnikovog

iskustva s web razvojem, odabirom okvira koji mu najviše odgovara i koji je od njih najbolji

odabir za tip aplikacije koju izraĎuje [7].

Slijedi pojašnjen princip rada asp kontrole <asp:Repeater..> korištene za prikazivanje

spremljenih kombinacija ulaznih parametara (primjera izračuna).

ASP kontrola Repeater kao što se i iz imena da zaključiti ponavlja svoj sadrţaj, odnosno bilo

13

koje HTML elemente koje umetnemo unutar tag-ova <ItemTemplate> </ItemTemplate> i

kao takva vrlo je korisna za prikazivanje skupa podataka.

<asp:Repeater ID="rptSviIzracuni" runat="server">

<HeaderTemplate>html kod koji želimo da se prikaže samo jednom na

početku</HeaderTemplate>

<ItemTemplate>html kod koji želimo da se ponavlja onoliko puta

koliko ima stavki u skupu podataka, odnosno izvoru kojim punimo asp kontrolu

Repeater

</ItemTemplate>

<FooterTemplate> html kod koji želimo da se prikaže samo jednom na kraju<

FooterTemplate>

</asp:Repeater>

U ovoj aplikaciji Repeater kontrolu punimo listom imena (file list) datoteka pohranjenih u folder

„Spremljeni__izracuni“

Private Sub NapuniRptSviIzracuni()

'deklariranje di kao nove DirecrotoryInfo metode koja će pribaviti

informacije iz foldera "/Spremljeni_izracuni/“

Dim di As New DirectoryInfo(Server.MapPath(".") &

"/Spremljeni_izracuni/")

'uzimanje liste imena datoteka i dodjeljivanje te liste našoj

Repeater kontroli kao izvor

rptSviIzracuni.DataSource = di.GetFiles()

'punjenje Repeatera skupom podataka iz izvora

rptSviIzracuni.DataBind()

End Sub

14

4. WEB APLIKACIJA

Web aplikacija je aplikacija kojoj se pristupa putem web-a koristeći Internet ili intranet mreţu.

Kod web aplikacija, nije potrebno instalirati aplikaciju na korisničko računalo. Web aplikacija

umjesto izvršne datoteke (.exe) generira skup dokumenata koji se mogu vidjeti s pomoću web

preglednika (npr. Internet Explorer, Mozilla Firefox i dr.) koji podrţavaju html/xhtml/xml.

Web aplikacije se najčešće sastoje od sljedećih aktivnosti:

1. Korisnik aktivira web preglednik

2. Putem web sučelja postavi odreĎeni upit (npr. traţi cijenu nekog artikla ili izračun Binomnog

transformatora)

3. Sučelje za upite šalje zahtjev programu na posluţitelju

4. Program na posluţitelju daje odgovor na zahtjev (npr. cijenu artikla ili rješenja izračuna)

koristeći neki izvor podataka (bazu ili podatke datoteka na serveru ili izračun)

5. Odgovor se iz baze prosljeĎuje preko posluţitelja na klijent

6. Odgovor preko web sučelja postaje vidljiv korisniku

Ova web aplikacija nam omogućava izračun impedancija po sekcijama binomnog transformatora

i širinu frekvencijskog pojasa na osnovu upisanih ulaznih parametara, odnosno: broja sekcija,

početne impedancije, krajnje impedancije i koeficijenta refleksije, Kr ili odnosa stojnih valova

(eng. standing wave ratio). Osim analitičkog rješenja, aplikacija prikazuje grafičku shemu

sekcija transformatora s pripadajućim vrijednostima impedancije te linijski Kr/f graf, na kojem je

svaka točka linije vrijednost koeficijenta refleksije u ovisnosti frekvencije. Osim rješenja

dobivenih ručnim unosom ulaznih parametara, na za to predviĎeno mjesto, moguće je

pregledavati rješenja već spremljenih kombinacija ulaznih parametara kao, naravno, i spremanje

osobnih primjera ulaznih parametara.

U ovom poglavlju detaljno je opisan proces izrade aplikacije za izračun impedancije binomnog

transformatora, svrha i način korištenja. Aplikacija je prvotno izraĎena kao web stranica .html

ekstenzije i isključivo u frontend tehnologijama, koristeći jedino JavaScript, klijentski

programski jezik, kako ne bi bilo potrebe za lokalnim web serverom odnosno hosting servisima.

Tijekom rada na dijelu aplikacije koji je zaduţen za spremanje kombinacija ulaznih parametara i

učitavanje istih, a radi intuitivnosti, jednostavnosti i brzine korištenja aplikacije u svom

konačnom obliku „Binomni transformator – aplikacija za izračun“ je ASP.NET web aplikacija

15

kojoj je minimalni dio koda pisan u Microsoft visual basic programskom jeziku. Iz tog razloga i

razloga potrebe prezentiranja ovog rada dodijeljena joj je trenutna domena erifax.com/BT.

4.1. Sučelje

Sučelje aplikacije prikazano je na svega jednoj web stranici podijeljenoj na pet dijelova (panela):

1.) Ulazni parametri, 2.) Spremljeni primjeri, 3.) Analitičko rješenje, 4.) Grafičko rješenje i 5.)

Kr/f graf

Slika 4.1 Prikaz početnog sučelja

16

4.1.1. Ulazni parametri

Panel ulazni parametri sastoji se od jednog html select elementa koji nam sluţi za odabir broja

sekcija transformatora (od 2 do 5), četiri html input type: text elemenata za upis početne

impedancije Z0(Ω), krajnje impedancije ZL(Ω) i maksimalnog koeficijenta refleksije |Γ m| ili

Standing wave ratio SWR. Vrijednosti |Γ m| i SWR ovise jedna o drugoj te je potrebno upisati

samo jednu od njih. Da bi se spriječila mogućnost upisivanja jedne i druge vrijednosti, na

dogaĎaj onFocus pokreće se JavaScript za skrivanje polja za upis onog drugog parametra.

onfocus=“document.getElementById('

txtSWR').style.visibility='hidden'

;“

onfocus=“document.getElementById('txt

KoeficijentRefleksije').style.visibil

ity='hidden';“

Tablica 4.1 Skrivanje polja za upis koeficijenta refleksije ili SWR

Unutar panela Ulazni parametri nalaze se i dva button-a: Spremi i Izračunaj. Button Spremi nije

html element već asp kontrola (<asp:Button...) jer na dogaĎaj Klik izmeĎu ostalog, pokreće

proceduru Spremi koja se nalazi na serveru u codebehind-u ove aplikacije (detaljnije u poglavlju

Spremljeni primjeri), a button Izračunaj je html element (<input type:submit) i klik na njega

pokreće JavaScript funkciju Izracunaj() koja pokreće funkcije za provjeru popunjenosti polja

ulaznih parametara, izračun i prikaz analitičkog rješenja, prikaz grafičke sheme transformatora i

crtanje Kr/f Grafa.

Provjera popunjenosti ulaznih parametara (validation) provjerava jesu li upisane vrijednosti Z0,

ZL i jedna od vrijednosti |Γ m| ili SWR, te je li vrijednost |Γ m| veća od 0 i manja od 1, odnosno,

vrijednost SWR veća od 1. U slučaju da ulazni parametri ne zadovoljavaju postavljene uvjete

ispisuje se poruka o potrebi ponovnog upisa valjane vrijednosti.

...

if (isNaN(Zl))

alert("Upiši krajnju impedanciju");

return false;

if (isNaN(Kr) && isNaN(SWR))

17

alert("Upiši koeficijent refleksije ili SWR");

return false;

if (Kr<0 || Kr>1)

alert("Koeficijent refleksije može biti broj između 0 i 1");

return false;

4.2. Spremljeni primjeri

Unutar ovog panela prikazuju se sve pohranjene kombinacije ulaznih parametara sa

mogućnošću njihova brisanja u obliku button-a (btnUcitaj i btnObrisi). Ti button-i se prikazuju

unutar Item-a asp kontrole Repeater.

<asp:Repeater ID="rptSviIzracuni" runat="server">

<HeaderTemplate><table id="tblSviIzracuni"></HeaderTemplate>

<ItemTemplate>

<tr><td><asp:Button id="btnUcitaj" Text="<%# Container.DataItem %>"

CommandName="Ucitaj" CommandArgument='<%# Container.DataItem %>'

runat="server" /></td>

<td><asp:Button id="btnObrisi" Text="Obriši" CommandName="Obrisi"

CommandArgument='<%# Container.DataItem %>' runat="server"/></td></tr>

</ItemTemplate>

<FooterTemplate></table></FooterTemplate>

</asp:Repeater>

Slika 4.2 Spremljeni primjeri izračuna

18

4.2.1. Spremanje

Klik na button Spremi unutar panela Ulazni parametri pokreće proceduru „Spremi()“ unutar

datoteke default.aspx.vb u kojoj se nalazi programski kod sučelja aplikacije pisan u

Microsoft visual basic-u.

Procedura „Spremi()“ pokreće validaciju ulaznih parametara, dodavanje ulaznih parametara

array-u arrUlazniParametri(4), zapisivanje ulaznih parametara u .txt datoteku (svaki red

jedan parametar) i spremanje datoteke u folder „Spremljeni_izracuni“ pod imenom stvorenim

od ulaznih parametara.

//deklariranje array-a maksimalnog indexa 4 i dodavanje vrijednosti

ulaznih parametara određenom indexu array-a

Dim arrUlazniParametri(4) As String

arrUlazniParametri(0) = ddlBrojSekcija.Value

arrUlazniParametri(1) = txtPocetnaImpedancija.Value

arrUlazniParametri(2) = txtKrajnjaImpedancija.Value

arrUlazniParametri(3) = txtKoeficijentRefleksije.Value

arrUlazniParametri(4) = txtSWR.Value

//stvaranje stringa puta i naziva datoteke iz kojeg će biti vidljivi

ulazni parametri

Dim filePath As String = Server.MapPath(".") & "/Spremljeni_izracuni/N=" &

arrUlazniParametri(0) & "_Z0=" & arrUlazniParametri(1) & "_Zl=" &

arrUlazniParametri(2)

//upisivanje zadnjeg ulaznog parametra (Kr ili SWR) ovisno o popunjenosti

If arrUlazniParametri(3) = "" Then

filePath += "_SWR=" & arrUlazniParametri(4)

Else

filePath += "_Kr=" & arrUlazniParametri(3)

End If

//deklariranje objekta koji koristi class SreamWriter za upisivanje u

dokument i eventualno stvaranje dokumenta

Dim objWriter As New System.IO.StreamWriter(filePath, False)

//upisivanje 5 ulaznih parametara, svaki u svoj red

For i = 0 To 4

objWriter.WriteLine(arrUlazniParametri(i))

Next

19

4.2.2. Prikazivanje

Unutar iste procedure, a nakon spremanja datoteke poziva se procedura

„NapuniRptSviIzracuni()“ koja puni asp kontrolu Repeater, rptSviIzracuni, imenima svih

datoteka u folderu „Spremljeni_izracuni“ pa tako i upravo stvorene,

Private Sub NapuniRptSviIzracuni()

Dim di As New DirectoryInfo(Server.MapPath(".") &

"/Spremljeni_izracuni/")

rptSviIzracuni.DataSource = di.GetFiles()

rptSviIzracuni.DataBind()

End Sub

te ih prikazuje u panelu Spremljeni primjeri.

Folder Spremljeni_izracuni nalazi se na serveru i svakom tko pokrene ovu web aplikaciju

dostupni su dotad spremljeni primjeri (njihovo učitavanje i brisanje) i omogućeno spremanje

novih primjera.

Procedura „NapuniRptSviIzracuni()“ pokreće se i prilikom početnog učitavanja web

aplikacije.

4.2.3. Učitavanje

Učitavanje se pokreće klikom na tipku naziva stvorenog od ulaznih parametara.

Slika 4.3 Prikaz tipke s nazivom spremljenog primjera

Klik pokreće proceduru rpt_ItemCommand(ByVal source As Object, ByVal e As

System.Web.UI.WebControls.RepeaterCommandEventArgs) koja zbog argumenta

CommandName=“Ucitaj“ koji se nalazi unutar asp:Button kontrole, izvršava dio koda koji se

odnosi na učitavanje primjera, a ne na brisanje. Taj dio koda otvara datoteku imena ispisanog

na button-u i čita red po red upisujući te vrijednosti u polja ulaznih parametara. Nakon

popunjavanja ulaznih parametara, pokreće JavaScript funkciju Izracunaj(), a koja pokreće

funkcije za provjeru popunjenosti polja ulaznih parametara, izračun i prikaz analitičkog

rješenja, prikaz grafičke sheme transformatora i crtanje Kr/f Grafa.

20

'ako je CommandName argument Ucitaj

ElseIf e.CommandName = "Ucitaj" Then 'ako kliknemo na dugme Učitaj

Dim filePath As String = Server.MapPath(".") &

"/Spremljeni_izracuni/" & e.CommandArgument

' stvaranje arraya u koji spremamo linije teksta

Dim arrUlazniParametri(4) As String

'Otvaranje txt datoteke sa ulaznim parametrima

Using r As StreamReader = New StreamReader(filePath)

' prolaz kroz redove datoteke i dodavanje teksta retka u

arr

For i = 0 To 4

'Dodavanje reda(i) u arr(i)

arrUlazniParametri(i) = r.ReadLine

Next

End Using

'učitavanje ulaznih parametara iz arr

ddlBrojSekcija.Value = arrUlazniParametri(0)

txtPocetnaImpedancija.Value = arrUlazniParametri(1)

txtKrajnjaImpedancija.Value = arrUlazniParametri(2)

txtKoeficijentRefleksije.Value = arrUlazniParametri(3)

txtSWR.Value = arrUlazniParametri(4)

' pokretanje js funkcije izracunaj()

Page.ClientScript.RegisterStartupScript(Me.[GetType](),

"izracunaj", "izracunaj();", True)

4.2.4. Brisanje

Brisanje datoteke u kojoj je spremljen primjer ulaznih parametara ispisanih na button-u, pokreće

se klikom na tipku „Obriši“ koji se nalazi do tipke datoteke koju ţelimo obrisati.

Slika 4.4 Prikaz tipke za brisanje spremljenog primjera

Klik pokreće proceduru rpt_ItemCommand(ByVal source As Object, ByVal e As

System.Web.UI.WebControls.RepeaterCommandEventArgs) koja zbog argumenta

CommandName=“Obrisi“ koji se nalazi unutar asp:Button kontrole (<asp:Button

id="btnObrisi" Text="Obriši" CommandName="Obrisi" CommandArgument='<%#

21

Container.DataItem %>' runat="server"/> ), izvršava dio koda koji se odnosi na brisanje

primjera, a ne na učitavanje. Taj dio koda briše datoteku imena proslijeĎenog argumentom

CommandArgument i poziva proceduru NapuniRptSviIzracuni() kako bi se u panelu

Spremljeni primjeri prikazali primjeri bez obrisanog.

If e.CommandName = "Obrisi" Then

'stvaranje stringa koji je put do datoteke koju želimo obrisati

Dim filePath As String = Server.MapPath(".") & "/Spremljeni_izracuni/"

& e.CommandArgument

If System.IO.File.Exists(filePath) = True Then

'brisanje datoteke

System.IO.File.Delete(filePath)

End If

'pozivanje funkcije za punjenje Repatera

NapuniRptSviIzracuni()

4.3. Analitičko rješenje

Unutar ovog panela prikazuju se brojčane vrijednosti ulaznih parametara i izračunatih

vrijednosti impedancije sekcija i širine frekvencijskog pojasa.

Slika 4.5 Prikaz analitičkog rješenja

22

Vrijednosti se izračunavaju klikom na tipku „Izračunaj“ koja pokreće JavaScript funkcije.

Koristeći JavaScript Math objekt i formule za izračunavanje impedancije sekcija i širine

frekvencijskog pojasa, izračunavamo vrijednosti koje se s ulaznim parametrima spremaju u

string rjesenje. String rjesenje je ustvari html kod za Unsorted List te se kao takav i prikazuje

u panelu Analitičko rješenje.

//izračunavanje Z1..Zn i BW i punjenje stringa rjesenje

rjesenje = "<ul><li>N = " + N + "</li><li> |&#x0393<span style='font-size:

11px'>m</span>| = " + Kr.toFixed(2) + "</li>" + "<li>A = " + A.toFixed(5) +

"</li>" + "<li>Z<span style='font-size: 11px'>0</span> = " + Z0 + " " +

"&#8486" + "</li>";

for (n=0; n < N; n++)

C[n] = factorial(N)/(factorial(N-n)*factorial(n));

Z[n+1] = Math.pow(Math.E, Math.log(Z[n])+(Math.pow(2, -

N)*C[n]*Math.log(Zl/Z0)));

rjesenje += "<li>n = " + n + ", &nbsp;&nbsp;&nbsp;Z<span

style='font-size: 11px'>" + (n+1) + "</span> = " + Z[n+1].toFixed(2) + " "

+ "&#8486" + "</li>";

rjesenje += "<li>Z<span style='font-size: 11px'>L</span> = " + Zl + " "

+ "&#8486 </li>" + "<li>BW = " + BW.toFixed(3) + " " + "=" + " " +

BWS.toFixed(2) + "%" + "</li></ul>";

// upisivanje HTML koda unutar početnog i završnog tag-a elementa

id=“BrojcanoRjesenje“

document.getElementById("brojcanoRjesenje").innerHTML = rjesenje;

4.4. Grafičko rješenje

U panelu Grafičko rješenje prikazuje se shema transformatora s pripadajućim karakterističnim

vrijednostima impedancije.

23

slika 4.6 Prikaz grafičkog rješenja

Panel Grafičko rješenje je ustvari slika koju čini UnsortedList <ul id= "listaSekcija"...>

odnosno njenih 7 ListItem-a <li> sa svojim pozadinskim slikama (početna sekcija, krajnja

sekcija i maksimalno pet sekcija izmeĎu početne i krajnje).

<ul id= "listaSekcija" class="sekcija0">

<li id="N0"></li>

<li id="N1"></li>

<li id="N2"></li>

<li id="N3"></li>

<li id="N4"></li>

<li id="N5"></li>

<li id="N6"></li>

</ul>

Inicijalno je UnsortedList-i odreĎen argument class=“sekcija0“ pri čemu ListItem-i <li>

imaju širinu 0px pa nisu vidljive pozadinske slike. Klikom na button Izračunaj JavaScript

kodom dodjeljujemo UnsortedList-i <ul id= "listaSekcija"..> argument class od

class=“sekcija4“ do class=“sekcija7“ ovisno o odabranom broju sekcija unutar panela

Ulazni parametri.

switch (N)

// ako je N=2

24

case 2:

// dodjeljivanje UnsortedListi „listaSekcija“ class „sekcija4“

document.getElementById("listaSekcija").className = "sekcija4";

// upisivanje vrijednosti impedancija u svaku sekciju

S0.innerHTML = "Z<span style='font-size: 11px'>0</span>=" + Z0 +

"&#8486";

S1.innerHTML = "Z<span style='font-size: 11px'>1</span>=" +

Z[1].toFixed(2) + "&#8486";

S2.innerHTML = "Z<span style='font-size: 11px'>2</span>=" +

Z[2].toFixed(2) + "&#8486";

S3.innerHTML = "Z<span style='font-size: 11px'>L</span>=" + Zl +

"&#8486";

break;

Mijenjanjem class argumenta mijenjamo širinu ListItem-a <li> i njihovih pozadinskih slika,

.sekcija7 li

width: 77.14px;

font-size:15px;

.sekcija6 li

width: 90px;

font-size:16px;

s obzirom da je u CSS-u za <ul id= "listaSekcija"...> postavljeno da sve što prelazi okvire

panela bude skriveno, vidi se točno onoliko sekcija koliko je odabrano u ulaznim

parametrima.

#grafickoRjesenje ul

position:relative;

height:300px;

width:540px;

left:0px;

overflow:hidden; // dio liste koji prelazi 540px neće se vidjeti

U slučaju da je početna impedancija veća od krajnje, pozadinske slike ListItem-a <li> se

mijenjaju JavaScript kodom kako bi visina sekcije bila proporcionalna impedanciji.

25

if(Z0>Zl)

S0.style.backgroundImage = "url(../slike/cijesek/6.png)";

S1.style.backgroundImage = "url(../slike/cijesek/5.png)";

4.5. Kr/f graf

Panel Kr/f Graf prikazuje koordinatni sustav nacrtan u <canvas> HTML5 elementu, u kojem

su na X osi prikazane vrijednosti frekvencije, a na Y osi apsolutne vrijednosti koeficijenta

refleksije. Klik na button Izračunaj, izmeĎu ostalog, poziva i JavaScript funkciju

ispisiGraf(Z0,Zl,Krt,Nt) pri čemu su argumenti Z0 početna impedancija, Zl krajnja

impedancija, Krt koeficijent refleksije trenutno upisan u Ulaznim parametrima i Nt broj

sekcija trenutno odabran u panelu Ulazni parametri. Ta funkcija iscrtava pet linijskih grafova

unutar navedenog koordinatnog sustava, u pet boja dodijeljenih broju sekcija transformatora,

a sve prema legendi grafa. Za crtanje grafa nisu upotrebljavani open source programi niti

online chart web aplikacije, odnosno alati, već je koordinatni sustav, mreţa koordinatnog

sustava i svaka linija grafa proizvod spajanja izračunatih koordinata točaka na <canvas>

HTML5 elementu.

26

Slika 4.7 Prikaz grafa

Svaka linija predstavlja skup točaka koje prikazuju sjecište vrijednosti frekvencije i apsolutne

vrijednosti koeficijenta refleksije izračunate za trenutno unesene ulazne parametre početne i

krajnje impedancije.

Korištenjem formula za izračun širine frekvencijskog pojasa u ovisnosti o koeficijentu

refleksije izračunate su pripadajuće točke vrijednosti frekvencije za svaku apsolutnu

vrijednost koeficijenta refleksije u razmaku od 0.001 (YstepSize) i njima su napunjeni svi

nizovi (array) za svaku liniju grafa (arrN[1] do arrN[5]). Y skala mijenja svoju maksimalnu

vrijednost u ovisnosti o maksimalnoj vrijednosti koeficijenta refleksije.

//punjenje arraya frekvencije svakog grafa sa vrijednošću F=1 kojem će biti

dodijeljena vrijednost Kr=0.

for (i = 1; i<=5; i++)

arrN[i].push(1)

//punjenje nizova arrN1 do arrN5 sa Fl i Fh.

//Kr kreće od 0.001 jer je vrijednost F=1 za Kr=0 već unesena

for (Kr = 0.001; Kr <= 1; Kr+= 0.001)

27

for (N = 1; N <= 5; N++)

var A = Math.pow(2, -N)*Zizr;

var BW2 = Kr / Math.abs(A);

var BW = 2 - ( BW1*(Math.acos(0.5*Math.pow (BW2,1/N))));

if (isNaN(BW)) break; ; //prekini odrađivanje koda petlje ako

BW više nije numerička vrijednost. Ovo nam omogućuje mijenjanje maksimalne

vrijednost ordinate (YvalMax)

var Fl = 1-(BW/2);

var Fh =1+(BW/2);

arrN[N].unshift(Fl.toFixed(2)); // upisivanje vrijednosti Fl

ispred prve vrijednosti F u arrF[N]

arrN[N].push(Fh.toFixed(2)); // upisivanje vrijednosti Fh iza

zadnje vrijednosti F u arrF[N]

Nakon što su se skupovi točaka arrF[N] i arrKr napunili, funkcija ispisiGraf(Z0,Zl,Krt,Nt)

crta mreţu grafa odnosno horizontalne linije u razmaku od 0.10.

// ispisivanje zaglavlja redova i crtanje horizontalnih linija

var count = 0;

for (scale=YvalMax;scale>=YvalMin;scale = scale - (YstepSize*10*10)) //

YstepSize=0.001

// izračunavanje horizontalne pozicije horizontalne linije

i zaglavlja redova

var y = yScale * count * YstepSize*10*10;

// ispisivanje vrijednosti u zaglavlju redova na x

poziciji 35 točaka od početka contexta u <canvas> elementu i y poziciji +

10točaka od horizontalne linije

context.fillText(scale.toFixed(2), 35, y+10);

// početak crtanja horizontalne linije

context.moveTo(rowHeaderSize,y)

// kraj crtanja horizontalne linije

context.lineTo(canvas.width,y)

count++;

Funkcija ispisiGraf(Z0,Zl,Krt,Nt) ispisuje i vrijednosti koeficijenta refleksije |Γm|i najniţe i

najviše vrijednosti frekvencije Fl i Fh za trenutno upisane ulazne parametre te crta vertikalne

linije Fl i Fh. Iz tog razloga prosljeĎujemo toj funkciji zadnja dva argumenta Krt i Nt.

28

// ispisivanje vrijednosti Fl za odabran broj sekcija i upisan

koeficijent refleksije u panelu Ulazni parametri

context.fillText(Flt.toFixed(2), rowHeaderSize + (Flt*xScale) -

10,canvas.height-columnHeaderSize + 20);

//crtanje vertikalne linije za trenutni Fl

context.moveTo(rowHeaderSize + (Flt*xScale), canvas.height-

columnHeaderSize);

context.lineTo(rowHeaderSize + (Flt*xScale), canvas.height-

columnHeaderSize - (Krt*yScale));

// ispisivanje vrijednosti Fh za odabran broj sekcija i upisan

koeficijent refleksije u panelu Ulazni parametri

context.fillText(Fht.toFixed(2), rowHeaderSize + (Fht*xScale) -

10,canvas.height-columnHeaderSize + 20);

//crtanje vertikalne linije za trenutni Fh

context.moveTo(rowHeaderSize + (Fht*xScale), canvas.height-

columnHeaderSize);

context.lineTo(rowHeaderSize + (Fht*xScale), canvas.height-

columnHeaderSize - (Krt*yScale));

Nakon iscrtavanja koordinatnog sustava, ispisivanja vrijednosti Y i X osi, crtanja mreţe grafa

(horizontalne linije), ispisivanja trenutnih vrijednosti koeficijenta refleksije, najniţe i najviše

vrijednosti frekvencije i crtanja vertikalnih linija, funkcija ispisiGraf(Z0,Zl,Krt,Nt) dodjeljuje

boje linijama grafa i poziva funkciju plotData(dataSetX, dataSetY) radi crtanja linija grafa.

// određivanje boje linije grafa neposredno prije poziva funkcije za

crtanje linije

context.strokeStyle="#ff0000";

// pozivanje funkcije za crtanje linije između dviju susjednih točaka (x,y)

navedenih u array-ima proslijeđenih u argumentima

plotData(arrN[1],arrKr);

Funkciju plotData(dataSetX, dataSetY) crta liniju grafa odnosno spaja linijom (x,y) točke

proslijeĎene u skupinama arrF[N] i arrKr.

function plotData(dataSetX, dataSetY)

context.beginPath();

context.moveTo(dataSetX[0]*xScale, dataSetY[0]*yScale);

for (i=1;i<=dataSetX.length;i++)

context.lineTo(dataSetX[i] * xScale, dataSetY[i] * yScale );

29

context.stroke();

Prvotno sučelje ove web aplikacije sadrţavalo je još dva panela u kojima su bile prikazane

tablice sa vrijednostima Kr, Fl, Fh i BW, ali se od istih odustalo radi User

friendly karakteristike aplikacije.

30

5. KORIŠTENJE APLIKACIJE

Nakon otvaranja aplikacije prikazuje se sučelje s prostorom za unos ulaznih parametara: broj

sekcija N, impedancija s lijeva Z0(Ω), impedancije s desna ZL(Ω) i koeficijenta refleksije |Γ m| ili

Standing Wave Ratio (SWR). Obavezan je unos svih parametara te jednog od koeficijenta

refleksije i SWR-a. Desno od ulaznih parametara nalaze se spremljeni primjeri u obliku

gumbova koji se mogu učitati i izračunati. Da bi spremili unešene parametre dovoljno je

kliknuti na gumb „SPREMI”, te će se oni pojaviti u prostoru za prikaz primjera. Do rješenja

se moţe doći preko ručno unjetih ulaznih parametara i pritiska na gumb „IZRAČUNAJ” ili

pritiska na jedan od pohranjenih primjera. Prostor za prikaz rješenja, kako analitičkog tako i

grafičkog nalazi se ispod dijela za ulazne parametre te ga aplikacija automatski stavlja u prvi

plan („namjesti” prostor za rješenje na sredinu stranice da ne moramo „scrollati” da bi ga

vidjeli). Korištenje aplikacije biti će jasnije nakon slijedećih primjera:

5.1. Prvi primjer

Upisani ulazni parametri su N=2, početna impedancija je 100Ω, krajnja 50Ω, a koeficijent

refleksije 0.05. Nakon što je upisan |Γ m|, polje za upis SWR je nestalo zbog toga što ovise

jedan o drugome. Nakon klika na gumb „IZRAČUNAJ” prikazuje se rješenje u sva tri oblika

kao što se vidi na slici 5.1. Za izračunavanje vrijednosti, korištene su formule iz 2.poglavlja

BINOMNI TRANSFORMATOR. Varijabla A i varijabla C su izračunate po formulama

(2.11) i (2.6). Uvrštavajući njihove vrijednosti i vrijednosti unešenih parametara u formulu

(2.12) izračunate su vrijednosti za impedancije pojedinih sekcija Z1 i Z2. Kao što je ranije

rečeno vrijednost širine frekvencijskog pojasa izračunata je uvrštavanjem unešene vrijednosti

koeficijenta refleksije u formulu (2.14). TakoĎer moţemo vidjeti da su iste izračunate

vrijednosti prikazane na pripadajućem grafičkom rješenju, odnosno na grafu.

31

Slika 5.1 Primjer rješenja

5.2. Drugi primjer

Aplikacija sadrţi dva gumba da bi se olakšao rad u istoj. Dostupne su upute za korištenje

aplikacije i osnovne informacije o binomnom transformatoru, kao što je to prikazano na slici

5.2, odnosno na slici 5.3 .

32

Slika 5.2 Prikaz prozora o binomnom transformatoru

Slika 5.3 Prikaz prozora s uputama za aplikaciju

33

Ako postoji dilema oko ulaznih parametara i nakon proučavanja spomenutih uputa, prelaskom

miša preko svakog od ulaznih parametara vidljivo je kratko objašnjenje o njima. Na prijelaz

preko prostora za unos početne i krajnje impedancije pokazuje se sličica s njihovim poloţajem

u grafičkom rješenju, dok se na prijelaz preko koeficijenta refleksije i SWR-a prikazuje kratak

tekst s opisom odabranog. Prikazan je primjer prelaska miša preko prostora za unos početne

impedancije Z0 na slici 5.4:

Slika 5.4 Prikaz pomoćne slike za početnu impedanciju Z0

Kao što je takoĎer navedeno u prethodno spomenutim uputama za korištenje aplikacije,

potrebno je unjeti sva tri prva ulazna parametra i odabrati unos jednog od |Γ m| ili SWR-a. U

slučaju da ne unesemo jedan od prva tri parametra javlja se poruka da se unese parametar koji

je ostao prazan, kao na slici 5.5. TakoĎer, ako unesemo pogrešnu vrijednost koeficijenta

refleksije ili SWR-a, javlja se poruka s jasnim prikazom domene vrijednosti istih parametara.

Na slici 5.6 prikazana je poruka zbog pogrešnog unosa vrijednosti koeficijenta refleksije.

34

Slika 5.5 Poruka za upis svih parametara

Slika 5.6 Poruka za netočan unos parametra

5.3. Treći primjer

Ako ţelimo spremiti podatke koje smo upravo unijeli, potrebno je pritisnuti gumb „SPREMI”

i spremljeni podaci će se prikazati u prostoru za prikaz spremljenih primjera. Nakon što smo

ih spremili, moţemo pritisnuti gumb „IZRAČUNAJ”, pa ćemo vidjeti i izračun od podataka

koje smo upravo spremili. Primjer će ostati vidljiv sve dok se ne klikne na gumb „Obriši” koji

se nalazi kraj njega. Nazivi primjera se sastoje od ulaznih parametara koje sadrţe kao što je

vidljivo na slici 5.7:

35

Slika 5.7 Primjer spremanja unesenih parametara

36

6. ZAKLJUČAK

U ovom je radu detaljno opisano korištenje prethodno spomenutih alata za rad aplikacije.

Svaki dio je analiziran i prokomentiran da bi shvaćanje načina rada ovog uratka bilo

jednostavnije.

Zadatak je uspješno obavljen i ova je web aplikacija za izračun prilagodbe impedancije

pomoću binomnog transformatora funkcionalna i jednostavna za korištenje. Cijela je

aplikacija proţeta objašnjenjima za korištenje, kako u posebnom prostoru s uputama za

korištenje i uvodom u teoriju, tako i kroz cijelo početno sučelje, prijelazom miša preko

odreĎenog ulaznog parametra ili netočnim unosom istih.

Kao što je opisano u 3. poglavlju, prvi veći problem je nastao kod suočavanja sa zadatkom

spremanja i učitavanja ulaznih parametara, ali nakon kratkog istraţivanja, problem je riješen

korištenjem ASP tehnologije. Spremanje ulaznih parametara pod nazivom sastavljenim od

unešenih vrijednosti pridonosi jednostavnosti aplikacije.

Korištenje aplikacije uvelike skraćuje vrijeme ručnog računanja karakterističnih impedancija i

širine frekvencijskog pojasa, a uz to nudi i jasan prikaz izračunatih rezultata.

.

37

LITERATURA

[1]„Maximally - flat impedance transformers“, s Interneta,

http://www.microwaves101.com/encyclopedias/maximally-flat-impedance-transformers, 30.

kolovoz 2016.

[2]Stiles, J.: „The binomial multi-section transformer“ , s Interneta,

http://www.ittc.ku.edu/~jstiles/723/handouts/The%20Binomial%20Multisection%20Matching

%20Transformer.pdf/, 30. kolovoz 2016.

[3]Joler, M.: „Binomni transformator“, skripta za završni rad 2016.

[4]Wikipedia: „HTML“, s Interneta, https://hr.wikipedia.org/wiki/HTML/, 1. rujan 2016.

[5]Webtech: „CSS“, s Interneta, http://www.webtech.com.hr/css.php , 1. rujan 2016.

[6] Kartelo, I., 2002, JavaScript, Škola E-92., Split

[7]Microsoft: „ASP.NET Overview“, s Interneta, https://msdn.microsoft.com/en-

us/library/4w3ex9c2.aspx , 1. rujan 2016.

38

SAŢETAK

WEB APLIKACIJA ZA DIZAJN BINOMNOGA TRANSFORMATORA

IMPEDANCIJE

U ovom radu opisana je izrada web aplikacije za izračun prilagodbe impedancije pomoću

binomnog transformatora.

U sklopu zadatka, napravljen je pregled teorije binomnog transformatora impedancije te alata

korištenih za rad aplikacije (HTML, CSS, JavaScript i ASP.NET). Aplikacija radi na principu

unosa ulaznih parametara te prikaza rješenja na tri načina: analitički, grafički te prikazom

maksimalno prihvatljive vrijednosti koeficijenta refleksije na grafu u ovisnosti o frekvenciji.

Unešeni parametri se mogu spremiti i učitati jednim klikom pa se do rješenja moţe doći i bez

ručnog unosa parametara. Središnji dio rada analizira programski kod aplikacije za svaki od

glavnih dijelova: sučelja, spremljenih primjera, analitičkog rješenja, grafičkog rješenja te Kr/f

grafa. Da bi uvid u aplikaciju bio potpun, rad završava slikovitim prikazom različitih načina

korištenja iste.

Ključne riječi: binomni transformator, prilagodba impedancije, koeficijent refleksije, širina

frekvencijskog pojasa

39

ABSTRACT

A WEB APPLICATION FOR A DESIGN OF A BINOMIAL IMPEDANCE

TRANSFORMER

This dissertation describes the creation of web application for calculating the adjustment of

impendance using binomial transformer.

As part of the project, the overview of the theory of binomial transformer of impendence is

created as well as the tools (HTML, CSS, JavaScript and ASP.NET) used in the operation of

this application. This application works using the principles of entering parameters and

showing the results in three ways: analytical, graphical as well as demonstrating the

maximum acceptable coefficient value of reflection using the graph of dependable

frequencies. Entered parameters could be saved and opened using one click, which means that

the results could be obtained without the manual entering of the parameters. The central part

of this dissertation analyses program code of this application for each of the main parts:

interface, saved examples, analytical results, graphical results as well as Kr/f graph. In order

to have a complete overview of this application, the dissertation ends with a descriptive

demonstration of various uses of it.

Keywords: binomial transformer, impedance adjustment, reflection coefficient, bandwidth