Izris modulov pohistva v prostoru

Matjaz Pozar, Vs 3. let., KGS-B
mentor: asis.mag. Joze Tavcar, dipl.ing.

 

Stvarno kazalo


1.Abstract

2.Definicija naloge

3.Potek dela

4.Opis HTML strani

5.Opis javanskega programa

6.Zakljucek

7.Literatura

8.Test programa


1.Abstract

2.Definicija naloge

Napisi program, ki bo v Javascriptu izrisal omare in ji postavil poljubno v tlorisno in narisno ravnino sobe. Program naj podpira standard PHIGS.

3.Potek dela

Naloge sem se lotil s programom Microsoft FrontPage 2.0. Najprej sem zasnoval stran v HTML jeziku in dobil grobo postavitev elementov na strani. Pred pisanjem Javanskega programa je bilo potrebno v HTML vkljuciti dve datoteki z imenoma PHIGS.JS ter DATA.JS. V PHIGS.JS se nahajajo vse emulacije PHIGS funkcij, ki so jih napisali v laboratoriju Lecad. V DATA.JS pa so podatki o obliki in dimenzijah omar. V programu sem predvidel maksimalno 8 razlicnih omar, zato jih je v to datoteko vkljucenih le 8. Te datoteki se vkljuci z ukazom script. Datoteka se mora nahajati v istem imeniku kot vse ostale datoteke tega projekta.

V stran sem vkljucil tri polja APPLET, v katerih se izvrsuje program. Polje z imenom PHIGS je namenjeno izrisu pozicij modulov pohistva v prostoru, ki je lahko pravokotne oblike poljubnih dimenzij. V polju z imenom PHIGS2 se na uporabnikovo zahtevo izrise poljuben pohistveni element enostavnih dimenzij. Polje NARIS pa je namenjeno izrisu omar na narisno ravnino (steno sobe).

Za izris posameznega pohistvenga elementa je prirejen pozamezni gumb, ki ob kliku nanj sprozi dogodek za izris omare. Elementov je najvec 8, zato je tudi gumbov 8. Izris omare poteka tako, da program iz datoteke DATA.JS prebere tabelo tock, ki opisujejo konture elementa. Te konture vsako posebej izrise na polje PHIGS2. Tabelo tock sem dobil s pomocjo programa AutoCAD na sledec nacin: narisano omaro sem prilagodil v okvir s koordinatami 0,0; 1,1, tako da sem dobil pravo razmerje tock za izris v polje PHIGS2, ki ima izrisno podrocje 0,0; 1,1. Koordinate vseh crt sem s pomocjo ukaza LIST izpisal v datoteko, jo uredil v pravo obliko in vkljucil v datoteko DATA.JS.
Na isto polje se v levi zgornji kot izpisejo tudi dimenzije pohistvenih elementov.

Za izbor omar, ki se izrisejo v prostoru je namenjenih 8 kombiniranih seznamov in po dve vnosni polji za vsak kombiniran seznam. Vse to je vkljuceno v HTML tabelo. Kombiniran seznam ima moznosti izbiranja med osmimi omarami ali pa vrednostjo "<prazno>, kar pomeni, da v tem polju ni izbranega nobenega elementa.

Po kliku na gumb z imenom IZRIS se pozene javanski program, ki izrise obliko sobe s pohistvenimi elementi na polje PHIGS.

4.Opis HTML strani

HTML je oblika formatiranega tekstovnega zapisa v ASCII standardu. Formatiranje strani omogocajo ukazi, ki so navedeni med znakoma <>. Bralnik HTML strani (npr. Netscape) si sproti interpretira ukaze in postavlja stran na zaslon.

Nekaj osnovnih ukazov HTML:


<html>
Tu notri je zajeta celotna HTML stran
</html>

Med ukazoma <head> in </head> so navedeni osnovni podatki o strani, naslov strani.

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1250">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Matjaz Pozar - Postavitev omar v prostoru</title>
</head>

Tekst, ki se izpise na zaslon pa je naveden med ukazoma <body> in </body>.

HTML vsebuje tudi jezik Javascript. V njem definirmo funkcije, ki se bodo izvajale ob raznih dogodkih. Z javascriptom tudi vkljucimo podatkovne datoteke v HTML. V nasem primeru sem vkljucil datoteko z emulacijo PHIGS-a (phigs.js) in podatke za izris omar (data.js):

<p><script language="JavaScript" src="phigs.js">
</script> <script
language="javascript" src="data.js">
document.write("Error loading data from data.js")
</script> <script
language="JavaScript">
<!--
function main(form)
.
.
//definiranje javanskih funkcij...
.
}
// -->

</script> </p>

Primer za izris gumba:

<input type="button" name="B2" value="Omara 1" onclick="RisiOmara1(this)">

Risalno podrocje vstavimo z ukazom <applet>

<applet code="Phigs.class" align="middle" width="300" height="300" archive="phigs.jar" name="Phigs2"></applet>

Izbirno polje dolocimo z ukazom <select>. Vanj vpisemo vse moznosti za izbor.

<select name="Omare1" size="1">
<option selected>&lt;prazno&gt;</option>
<option>Omara 1</option>
<option>Omara 2</option>
<option>Omara 3</option>
<option>Omara 4</option>
<option>Omara 5</option>
<option>Omara 6</option>
<option>Omara 7</option>
<option>Omara 8</option>
</select>

Vnosno polje za vnos koordinat je doloceno z ukazom <input>

<input type="text" size="6" name="X1" value="0">

Oba tipa vnosnih polj sta pa vkljucena v tabelo.

<table border="0"cellpadding="2" cellspacing="10">
<tr>
<tr> in </tr> dolocata zacetek in konec vrstice
<td>tip omare</td>
<td> in </td> pa dolocata zacetek in konec stolpca
<td>X</td>
<td>Y</td>
</tr>

5.Opis javanskega programa

Javascript je programski jezik podoben C++, ki je vkljucen v HTML jezik. Podobno kot pri C jeziku se tudi v Javi definira funkcije, ki se izvrsujejo ob dogodkih. Tak dogodek se npr. aktivira ob kliku na gumb.

Opis vseh funkcij

function main(form)izrise omare na Applet 'PHIGS'. Sprozi se ob pritisku na gumb 'BOmare'.
function RisiNaris(form)izrise omare na Applet 'NARIS'. Sprozi se ob pritisku na gumb 'BIzris_N'.
function izris(form)izrise omare na Applet 'PHIGS2'. To funkcijo klicejo funkcije navedene spodaj.
function RisiOmara1(gumb)priredi tabeli z imenom 'Omara' vrednosti v tabeli Omara1. Nato klice funkcijo izris.
.
.
.
function RisiOmara8(gumb)priredi tabeli z imenom 'Omara' vrednosti v tabeli 'Omara8'. Nato klice funkcijo izris.

Podroben opis funkcij

function main(form)
{

definicija spremenljivk potrebnih za zagon Phigs okna.
var WorkstnID = 1; /* workstation identifier */
var ConnID = document.Phigs; /* connection identifier */
var WorkstnType = PWODSX; /* An OUTPUT, direct, single, Xwindow */
var TheCurve = 1; /* structure ID (chosen by user) */
var LinePts = new Array(); /* points for the polyline */
var LineData = new Ppoint_list(); /* data for the polyline */

definicija tabel
var Kvadrat = new Array();
var Pozicija_omar = new Array(16);

Prebere vrednosti v vnosnem polju 'sirina' in 'Dolzina'
var sir=form.sirina.value;
var dolz=form.dolzina.value;

Odpre phigs okno
popen_phigs("stderr", 0); /* errors go to "stderr" */
popen_ws(WorkstnID, ConnID, WorkstnType);
popen_struct(TheCurve);

Ugotovi razmerje med sirino in dolzino in priredi spremenljivki 'razmerje' pravi faktor pomanjsave, da bo celoten izris v obmocju okna Phigs z izrisnim poljem 0,0 ; 1,1.
razmerje1=sir/dolz;
if (razmerje1 > 1) razmerje=(1-0.125)/sir;
if (razmerje1 <= 1) razmerje=(1-0.125)/dolz;

Definira tocke pravokotnika, ki ponazarja stene sobe. Vse strnice pravokotnika morajo biti oddaljene od roba risalne povrsine za 6.25% na vsaki strani.
LinePts[0] = new Ppoint();
LinePts[0].x = 0.0625;
LinePts[0].y = 0.0625;
LinePts[1] = new Ppoint();
LinePts[1].x = 0.0625+razmerje*sir;
LinePts[1].y = 0.0625;
LinePts[2] = new Ppoint();
LinePts[2].x = 0.0625+razmerje*sir;
LinePts[2].y = 0.0625+razmerje*dolz;
LinePts[3] = new Ppoint();
LinePts[3].x = 0.0625;
LinePts[3].y = 0.0625+razmerje*dolz;
LinePts[4] = new Ppoint();
LinePts[4].x = 0.0625;
LinePts[4].y = 0.0625;

Pred izrisom je potrebno se dolociti stevilo tock poligona, ki ga izrisujemo. V tem primeru gre za prevokotnik, ki ima 4 tocke, vendar moramo eno tocko steti dvakrat (zacetek in konec crtovja se stika v isti tocki).
LineData.num_points = 5;
LineData.points = LinePts;
ppolyline(LineData);

Prebere vrednosti v vnosnih poljih X in Y ter jih priredi v tabelo 'Pozicije_omar'. V tabelo 'Spisek_Omar' pa se priredijo vrednosti izbranih omar. Te vrednosti so dejansko indeksi izbranega elementa v izbirnem polju. Indeksi se zacnejo s stevilko 0 (pomeni, da je izbran prvi element, v nasem primeru '<prazno>').
with(form) {
Pozicija_omar = new Array(
X1.value,Y1.value,
X2.value,Y2.value,
X3.value,Y3.value,
X4.value,Y4.value,
X5.value,Y5.value,
X6.value,Y6.value,
X7.value,Y7.value,
X8.value,Y8.value);
Spisek_Omar = new Array(
Omare1.selectedIndex,
Omare2.selectedIndex,
Omare3.selectedIndex,
Omare4.selectedIndex,
Omare5.selectedIndex,
Omare6.selectedIndex,
Omare7.selectedIndex,
Omare8.selectedIndex);
} //with (form)

Celotna zanka v stavku For se izvrsi 7x, pri tem pa indeks i raste od 0 do 7.
for (var i=0; i < 8 ; i++)
{
J dobi vrednost, ki je na i-ti poziciji v tabeli 'Spisek_Omar' in pomeni stevilko omare, ki se izrisuje pomanjsano za 1, ker ima prvi element v tabeli indeks 0 in ne 1.
J=Spisek_Omar[i]-1;

IF stavek se izvrsi le, ce je omara v trenutnem elementu izbrana (indeks omare mora biti vecji od -1)
if (J > -1) {

Doloci pravokotnik, ki ponazarja omaro v prostoru - pogled iz tlorisa.
Kvadrat[0] = new Ppoint();
Kvadrat[0].x =Pozicija_omar[i*2]*razmerje+0.0625;
Kvadrat[0].y =Pozicija_omar[i*2+1]*razmerje+0.0625;
Kvadrat[1] = new Ppoint();
Kvadrat[1].x = Dimenzije[J*3]*razmerje+Pozicija_omar[i*2]*razmerje+0.0625;
Kvadrat[1].y = Pozicija_omar[i*2+1]*razmerje+0.0625;
Kvadrat[2] = new Ppoint();
Kvadrat[2].x = Dimenzije[J*3]*razmerje+Pozicija_omar[i*2]*razmerje+0.0625;
Kvadrat[2].y = Dimenzije[J*3+2]*razmerje+Pozicija_omar[i*2+1]*razmerje+0.0625;
Kvadrat[3] = new Ppoint();
Kvadrat[3].x = Pozicija_omar[i*2]*razmerje+0.0625;
Kvadrat[3].y = Dimenzije[J*3+2]*razmerje+Pozicija_omar[i*2+1]*razmerje+0.0625;
Kvadrat[4] = new Ppoint();
Kvadrat[4]=Kvadrat[0];
LineData.num_points = 5;
LineData.points = Kvadrat;
ppolyline(LineData);

Ispise stevilko omare na tocko vnosa omare.
ptext(new Ppoint(Pozicija_omar[i*2]*razmerje+0.0625, Pozicija_omar[i*2+1]*razmerje+0.0625), "O"+Spisek_Omar[i]);

} // EndIf
} //End For

Zapre phigs emulacijo.
ppost_struct(WorkstnID, TheCurve, 1.0);
pclose_ws(WorkstnID);
pclose_phigs();
} // End Function

function RisiNaris(form)

Ta funkcija je podobna predhodnje opisani. Razlika je v grobem le v nacinu prikaza omare. Izris poteka tako, da rise vsako crto posebej ne pa tako kot pri prejsnji funkciji, ki rise pravokotnik.

Podobno kot prej se indeks i povecuje od 0 do 7.
for (var i=0; i < 8 ; i++)
{
J=Spisek_Omar[i]-1;

Glede na vrednost J (st. omare (0÷7)) se tabeli 'Omara' priredi dolocene vrednosti iz datoteke 'Data.js'
if (J==0) Omara=Omara1_N;
if (J==1) Omara=Omara2_N;
if (J==2) Omara=Omara3_N;
if (J==3) Omara=Omara4_N;
if (J==4) Omara=Omara5_N;
if (J==5) Omara=Omara6_N;
if (J==6) Omara=Omara7_N;
if (J==7) Omara=Omara8_N;
if (J > -1)
{

Ta zanka se izvrsi le, ce je J>-1 (ce je omara izbrana).
for (var k=0; k < (Omara.length) / 4 ; k++)
{LinePts[0].x = Omara[4*k]*razmerje+0.0625+Pozicija_omar[i]*razmerje;
LinePts[0].y = Omara[4*k+1]*razmerje+0.0625;
LinePts[1].x = Omara[4*k+2]*razmerje+0.0625+Pozicija_omar[i]*razmerje;
LinePts[1].y = Omara[4*k+3]*razmerje+0.0625;
LineData.num_points = 2;
LineData.points = LinePts;

Izrise vsako crto posebej.
ppolyline(LineData);
}

Ispise stevilko omare na tocko vnosa omare.
ptext(new Ppoint(Pozicija_omar[i]*razmerje+0.0625,0.0625),"O"+Spisek_Omar[i]);

function RisiOmara1(gumb)
{ st_omare=0;

Priredi tabeli 'Omara' vrednosti ki so v tabeli 'Omara1 (v datoteki 'Data.js').
Omara = Omara1;

Klice funkcijo izris, ki izrise omaro na polje 'Phigs2'.
izris(gumb,st_omare);
}

Ostale funkcije 'RisiOmaraX(gumb)' so podobne le da tabeli 'Omara' priredijo druge vrednosti.

function izris(gumb,st_omare)

Parameter st_omare ima vrednost stevilke omare, gumb je pa objekt (v tem primeru gumb), kateri je sprozil dogodek za izris omare. Potrebujemo ga pri izpisu imena omare v spodnji levi kot risalne ravnine.
Izris poteka podobno kot pri prejsnjih funkcijah, le da so podatki za izris ze prirejeni tako, da jih ni potrebno pomanjsevati.

{
var LinePts = new Array();
var LineData = new Ppoint_list();
LinePts[0] = new Ppoint();
LinePts[1] = new Ppoint();
popen_phigs("stderr", 0);
popen_ws(1,document.Phigs2,PWODSX);
pset_view_ind(1);
for (var i=0; i < (Omara.length-4) / 4 ; i++)
{ LinePts[0].x = Omara[4*i];
LinePts[0].y = Omara[4*i+1];
LinePts[1].x = Omara[4*i+2];
LinePts[1].y = Omara[4*i+3];
LineData.num_points = 2;
LineData.points = LinePts;
ppolyline(LineData);
}

Zadnji dve tocki v tabeli 'Omara' se uporabi za dolocitev tocke izpisa h,b. N je indeks zadnje vrednosti v tabeli 'Omara'.
N=Omara.length-1;
ptext(new Ppoint(Omara[N-3],Omara[N-2]),"h");
ptext(new Ppoint(Omara[N-1],Omara[N]),"b");
ptext(new Ppoint(0.01,0.01),gumb.value);
ptext(new Ppoint(0.01,0.95),"h="+Dimenzije[st_omare*3+1]+"m");
ptext(new Ppoint(0.01,0.90),"b="+Dimenzije[st_omare*3]+"m");
ptext(new Ppoint(0.01,0.85),"a="+Dimenzije[st_omare*3+2]+"m");
}

6.Zakljucek

Sama naloga se mi ni zdela obsezna in tezavna, problem pa se je pojavil v programiranju samem, ker sem se prvic srecal z jezikom Javascript. Potreboval sem kar nekaj nasvetov, kako zaceti s programiranjem, zato sem se po pomoc zatekel k asistentu in k drugim poznavalcem jezika. Veliko mi je pomagala tudi knjiga Javascript, v kateri sem nasel veliko resitev raznih problemov.

7.Literatura

Peter Hribar, Spoznajmo Javascript, Flamingo 1998
Zapiski predavanj in vaj, Ljubljana 1998
Predstavitveni primeri programov v Javascript

8.Test programa