|
HTML este un limbaj standard utilizat la crearea paginilor Web. Pagini Web editate in versiuni anterioare ale HTML, afisau static informatii codate in pagina prin instructiuni HTML. Pe masura ce tehnologia IT a avansat, paginile Web au inceput sa aiba un continut dinamic, care se schimba in functie de browser-ul utilizat, de interactiunile utilizatorului cu diferite carcateristici ale paginii, etc.
Un element de proiectare utilizat in obtinerea unei pagini Web dinamice este FORM. Forms permite utilizatorului sa introduca informatii in paginile Web. Forms pot avea diferite tipuri de elemente ca de exemplu butoane, deschidere de liste, zone de introducere a textelor, etc., elemente de primire a informatiilor de la utilizator.
Proiectarea unei pagini Web cu instructiuni form necesita doua componente:
O pagina Web cu forms si elemente asociate de colectare a datelor de intrare de la utilizator; si
Un program care poate receptiona informatiile si le poate prelucra.
O pagina tipica Web cu form poate prelucra datele de intrare ale utilizatorului f ie prin trimiterea lor la un program care ruleaza pe server (program denumit CGI) fie poate prelucra datele pe masina clientului la care are acces utilizatorul cu ajutorul unui limbaj ca de exemplu JavaScript sau VBScript.
In acest capitol se va utiliza varianta prelucrarea datelor pe masina clientului cu JavaScript. Se vor explora relatiile intre forms HTML si JavaScript pentru a implementa pagini Web dinamice. Astfel, se va realiza o interfata om-masina (HMI) pentru aplicatia data.
Instructiunea <FORM> intr-o pagina Web semnalizeaza inceputul introducerii diferitelor elemente, ca de exemplu butoane, cutii combo (deschidere de liste), butoane tip radio, zone de introducere a textelor, etc.
Anumite elemente form
pot sa genereze un set de evenimente. De exemplu, elementul buton are un
"onClick" dat de utilizator. Pagina Web
poate reactiona la acest eveniment prin asa numitul administrator de evenimente
"event handler".
Acesta este un program care ruleaza cand este apasat acest buton. Pentru mai multe detalii se poate consulta manualul de HTML sau de JavaScript.
Cand se creaza butoane, sunt activate evenimente sau actiuni. Textul este incadrat de tag-uri <FORM> si </FORM>. Aceste instructiuni sunt plasate in pagina Web acolo unde utilizatorul doreste ca intrarea de la elementul buton sa fie primita. Se va utiliza:
<INPUT type="buton" name = "Cilindrul 1A Out" value="Cilindrul 1A Out" onClick=""CISend ('A0.0','1')">
Tag-ul <INPUT> precizeaza ca acesta este un camp de intrare. Instructiunea poate avea diferite atribute:
Atribute |
Definitie |
|
Tip |
Precizeaza ca acesta va fi un buton |
|
Nume |
Atribuie un nume la obiectul buton. Acest nume poate fi utilizat in programul activat de evenimentul apasarii pe buton de catre utilizator. |
|
Valoare |
Eticheta afisata pe buton |
|
onClick |
Eveniment click generat de buton pentru a apela actiunea sau 'event handler'-ul cand utilizatorul apasa pe acest buton |
Se va folosi sintaxa:
<INPUT type="buton" name = "Cilindrul 1A Out" value="Cilindrul 1A Out" onClick=""CISend ('A0.0','1')">acesta este?
Semnificatia atributelor sintaxei sunt:
Atribute |
Definitie |
|
Tip |
Defineste ca acesta va fi un checkbox |
|
Nume |
Atribuie un nume la obiectul checkboxt. Vor exista referinte la acest nume al obiectului checkbox in program. |
|
Valoare |
Aceasta este valoarea care va fi trimisa programului procesului cand checkbox-ul este verificat. |
Atributele au semnificatia:
Atribute |
Definitie |
|
Tip |
Precizeaza ca acesta este un textbox |
|
Nume |
Atribuie un nume la obiectul textbox, care va fi referinta pentru program. |
|
Lungimea maxima |
Determina latimea textbox-ului. Limiteaza si numarul maxim de caractere care pot fi tastate de catre utilizator in textbox. |
Se va lamuri in continuare cum se pot trimite comenzi dintr-o pagina Web la echipament pentru comanda la distanta prin Internet a statiei.
Comanda la distanta a statiei poate fi realizata prin trimiterea de comenzi CI adecvate la statie, ca rezultat a interactiunii utilizatorului cu pagina Web. Aceasta necesita dezvoltarea unei functii JavaScript prin care se poate transmite parse a string un sir de caractere pentru a forma o comanda CI necesara la controler. Se vor utiliza aici doua comenzi CI:
CISend
Functia "CISend()" are doua argumente. "Operand" este comanda CI de trimis la controler. "Value" este valoarea parametrului pentru comanda. De exemplu, daca se doreste trimiterea lui MAW0 cu o valoare a parametrului "0" (setarea tuturor iesirilor pe OFF), se foloseste apelarea functiei:
CISend('AW0', '0')
Functia preia aceste argumente si verifica intai valoarea"value" care este trimisa pentru a verifica daca este acceptabila. Apoi formeaza un sir de caractere la serverul controler Web pentru a livra comanda CI la statie.
In multe situatii este necesar sa se trimita mai mult decat numai o comanda CI. Exemplul urmator combina doua comenzi CI intr-o apelare a functiei, astfel incat sa avem patru argumente: 2 operanzi si 2 parametrii. Aceasta functie se poate utiliza la comanda celor doua armaturi ale unui distribuitor cu doua pozitii intr-o singura apelare.
Ambele functii sunt salvate intr-un singur fisier, astfel incat fiecare dintre cele doua functii pot fi adaugate la orice document HTML prin simpla referire la acest fisier dintr-un document HTML (asa cum s-a procedat in paragraful urmator
Aceste functii CI sunt salvate in fisierul "Fst.js". atentie, acest fisier trebuie sa fie localizat in acelasi director ca si pagina Web in care se gasesc referinte.
CISend2('Operand1', 'Value1', 'Operand2', 'Value2' )
// Parameters:
Operand: for example MW0
Value
function CISend(Operand,Value)
// Verify variable value
if ( (Value < -65535) || (Value >
// Strip previous modify command from URL
href = this.location.href;
found = href.indexOf('?');
if ( found > 0 )
// Now add modify command to URL and reload
this.location.href = href + '?ci:' + 'M' + Operand + '=' + Value;
// CISend2 sends 2 modify command to the web server
// Parameters:
Operand1: for example MW0
Value1
Operand2: for example MW1
Value2
function CISend2(Operand1,Value1,Operand2,Value2)
// Verify variable value1
if ( (Value1 < -65535) || (Value1 >
if ( Value2 == '
if ( (Value2 < -65535) || (Value2 >
// Strip previous modify command from URL
href = this.location.href;
found = href.indexOf('?');
if ( found > 0 )
// Now add modify command to URL and reload
this.location.href = href + '?ci:' + 'M' + Operand1 + '=' + Value1 + ';M' + Operand2 + '=' + Value2;
// CISendStr sends a modify string command to the web server
// Parameters:
Operand: for example 3
Value
function CISendStr(Operand,Value) {
var found;
var href;
// Strip previous modify command from URL
href = this.location.href;
found = href.indexOf('?');
if ( found >
// Now add modify command to URL and reload
this.location.href = href + '?ci:' + '!3M' + Operand + '=' + Value;
// CISendStr sends a modify string command to the web server
// Parameters:
Operand: for example 3
Value
function CISetAndSendStr(Operand,Value,StringNumber,StringText)
// Verify variable value
if ( (Value < -65535) || (Value >
href = this.location.href;
found = href.indexOf('?');
if ( found > 0 )
// Now add modify command to URL and reload
this.location.href = href + '?ci:' + 'M' + Operand + '=' + Value + ';!3M' + StringNumber + '=' + Stringtext;
Se va dezvolta o pagina Web cu urmatoarele caracteristici:
Pornirea echipamentului
Oprirea echipamentului
Extinderea pistonului unui cilindru 1A
Retragerea pistonului cilindrului 1A
Extinderea pistonului cilindrului 2A
Retragerea pistonului cilindrului 2A
Pentru a controla aceste caracteristici, se va utiliza functia CISend( ). Pagina Web ar trebuie sa arate ca mai jos. Dupa tastarea instructiunilor, trebuie descarcate fisierul de pagina si fisierul fst.js la controler.
Se vor crea 6 butoane: patru pentru cei doi cilindrii si doua pentru start si stop.
Pentru activarea cilindrilor trebuie sa activam numai anumite iesiri. Se vor utiliza functii CISend pentru a activa iesirile relavante. Se vor tasta urmatoarele lini in javascript:
<form>
<DIV align='center'>
<input type='buton' value='Cylinder 1A Extins' onclick='CISend('A0.0', '1')'>
<input type='buton' value=' Cylinder 1A Return ' onclick='CISend('A0.0', '0')'>
</DIV>
</form>
</td>
<td bgcolor='#e0e0e0'>
<form>
<DIV align='center'>
<input type='buton' value='Cylinder 2A Extins' onclick='CISend('A0.1', '1')'>
<input type='buton' value=' Cylinder 2A Return ' onclick='CISend('A0.1', '0')'>
</DIV>
</form>
</td>
Pentru butoanele de start si de stop trebuie sa utilizam flaguri pentru activarea functiei de start si stop a echipamentului. Nu este posibil sa activam semnalele direct, pentru ca se poate sa nu se sincronizeze semnalul cu refresh-ul paginii. Se utilizeaza un flag pentru pornirea sau oprirea rularii programului de comanda directa a echipamentului.
Liniile javascript sunt urmatoarele:
<form>
<DIV align='center'>
<input type='buton' value=' Buton de Start ' onclick='CISend('MW30', '1')'>
<input type='buton' value=' Buton de Stop ' onclick='CISend('MW30', '2')'>
</DIV>
</form>
</td>
Trebuie modificat programul Win FST pentru a include flag-urile. Modificarea se face in :Programul principal de organizare'. Aceasta inseamna ca procesul poate porni fie prin apasarea butoanelor start de la echipament fie din pagina Web. Aceste flag-uri trebuie sa fie declarate in Lista de alocare.
Programul principal de organizare a dispozitivului de ridicare
!doctype html public '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>
<head>
<title>
FST Web Server
</title>
<meta name='Author' content='Edward Gasper'>
<script language='JavaScript' src='fst.js'>
</script>
</head>
<body>
<table width='100%'>
<tr>
<td align=center>
<b><H2>
Lifting Device Remote Monitor
</b></H2>
</td>
<td align=right width='25%'>
<a href='https://www.festo.com' target='_Blank'><img src = 'http_in_logof.gif' alt='Festo' border=0 height=15 width=83></a>
</td>
</tr>
</table>
<br>
<table width='50%' border='0' cellspacing='0' cellpadding = '0' align = 'center'>
</tr>
<tr>
<td width='15%' bgcolor='#CCCCCC'>
<div align='center'><B><font face='Vendana, Arial, Helvetica, sans-serif' size='2' color='#0000CC'>Cylinder 1A</font></B></div>
</td>
<td width='15%' bgcolor='#CCCCCC'>
<div align='center'><B><font face='Vendana, Arial, Helvetica, sans-serif' size='2' color='#0000CC'>Cylinder 2A</font></B></div>
</td>
<td width='15%' bgcolor='#CCCCCC'>
<div align='center'><B><font face='Vendana, Arial, Helvetica, sans-serif' size='2' color='#0000CC'>Comutatores</font></B></div>
</td>
</tr>
<br>
<tr>
<td bgcolor='#e0e0e0'>
<form>
<DIV align='center'>
<input type='buton' value='Cylinder 1A Extins' onclick = 'CISend('A0.0', '1')'>
<input type='buton' value=' Cylinder 1A Return ' onclick = 'CISend('A0.0', '0')'>
</DIV>
</form>
</td>
<form>
<DIV align='center'>
<input type='buton' value='Cylinder 2A Extins' onclick = 'CISend('A0.1', '1')'>
<input type='buton' value=' Cylinder 2A Return ' onclick= 'CISend('A0.1', '0')'>
</DIV>
</form>
</td>
<td bgcolor='#e0e0e0'>
<form>
<DIV align='center'>
<input type='buton' value=' Buton de Start ' onclick= 'CISend('MW30', '1')'>
<input type='buton' value=' Buton de Stop ' onclick= 'CISend('MW30', '2')'>
</DIV>
</form>
</td>
</tr>
</table>
<br>
<table width='70%' border='1'align='center'>
<tr>
<td width='35% bgcolor='#CCCC99'valign='middle'>
<H3 align='center'><font color='336633'>Inputs</font></H3>
</td>
<td width='35% bgcolor='#CCCC99'valign='middle'>
<H3 align='center'><FONT color='336633'>Outputs</font></H3>
</td>
</tr>
<tr>
<td width='35% valign='top' height='222' bgcolor='#DDDDDD'align='center'>
<pre><font color='#000000'>
Buton de Start (E0.0):<FSTCI DE0.0>
Cylinder 1A Retras (E0.1):<FSTCI DE0.1>
Cylinder 1A Extins (E0.2):<FSTCI DE0.2>
Cylinder 2A Retras (E0.3):<FSTCI DE0.3>
Cylinder 2A Extins (E0.4):<FSTCI DE0.4>
AutoMan Comutator (E0.5):<FSTCI DE0.5>
Buton de Stop (E0.6):<FSTCI DE0.6>
Reset Buton (E0.7):<FSTCI DE0.7>
Buton de Emergency Stop (E1.0):<FSTCI DE1.0>
</font></pre>
</td>
<pre><font color='#000000'>
Cylinder 1A Solenoid (A0.0):<FSTCI DA0.0>
Cylinder 2A Solenoid (A0.1):<FSTCI DA0.1>
Lampa de Start (A0.2):<FSTCI DA0.2>
Lampa de Stop (A0.3):<FSTCI DA0.3>
Lampa de Reset (A0.4):<FSTCI DA0.4>
</font></pre>
</td>
</tr>
</table>
</body>
</html>
