Aplicatie HMI referat










Aplicatie HMI

Instructiunea HTML Form

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.

Instructiuni HTML <Form> si elemente Form

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.

Elementul Buton

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

Elementul Checkbox

Checkbox este folosit pentru ca utilizatorul sa il verifice. Cand checkbox-ul este verificat, valoarea lui este setata la '1'. Aceasta valoare poate fi mai apoi examinata de un program pentru a verifica daca  checkbox-ul a fost verificat sau nu.

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.

Elementul Textbox

In textbox, utilizatorul poate sa introduca informatii lamuritoare, detalii. Textul introdus va fi ulterior verificat de program.

Unde este sintaxa?

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.

Dispozitiv de comanda la distanta cu un HMI

Se va lamuri in continuare cum se pot trimite comenzi dintr-o pagina Web la echipament pentru comanda la distanta prin Internet a statiei.

Functii Javascript CISend si CISend2

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.

CISend2

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’ )

Crearea unui fisier Javascript

Se va crea aici un fisier javascript numit Fst.js. acest fisier va fi plasat in acelasi director ca si pagina Web. Functiile CISend si CISend2 vor fi incluse in acest fisier.

Editeaza fisierul la fel ca si fisierul HTML, utilizand Notepad.

.

Deschide Notepad si tasteaza textul de mai jos.

Salveaza fisierul cu numele “fst.js”.

Trebuie transmis acest fisier la controler, daca se doreste utilizarea functiilor CISend si CISend2 in fisierul HTML.

// CISend sends a modify command to the web server

// Parameters:

//   Operand: for example MW0

//   Value

function CISend(Operand,Value)

  // Verify variable value

  if ( (Value < -65535) || (Value > 65535) )

                // 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 > 65535) )

  if ( Value2 == 'NaN' )

 

  // Verify variable value2

  if ( (Value2 < -65535) || (Value2 > 65535) )

                // 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 > 0 )

                // 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 > 65535) )

 

            // 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 + ';!3M' + StringNumber + '=' + Stringtext;

}

 


Operarea la distanta a echipamentului

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.

Crearea butoanelor

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:

<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>

<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:

<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>

 


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


Fisierul complet HTML

<!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='http://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>

 

       <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>

     <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>

 

       <td width='35% valign='top' height='222' bgcolor='#DDDDDD'align='center'>

                <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>

 












Copyright © Contact | Trimite referat


Ultimele referate adaugate
Mihai Beniuc
   - Mihai beniuc - „poezii"
Mihai Eminescu Mihai Eminescu
   - Mihai eminescu - student la berlin
Mircea Eliade Mircea Eliade
   - Mircea Eliade - Mioara Nazdravana (mioriţa)
Vasile Alecsandri Vasile Alecsandri
   - Chirita in provintie de Vasile Alecsandri -expunerea subiectului
Emil Girlenu Emil Girlenu
   - Dragoste de viata de Jack London
Ion Luca Caragiale Ion Luca Caragiale
   - Triumful talentului… (reproducere) de Ion Luca Caragiale
Mircea Eliade Mircea Eliade
   - Fantasticul in proza lui Mircea Eliade - La tiganci
Mihai Eminescu Mihai Eminescu
   - „Personalitate creatoare” si „figura a spiritului creator” eminescian
George Calinescu George Calinescu
   - Enigma Otiliei de George Calinescu - geneza, subiectul si tema romanului
Liviu Rebreanu Liviu Rebreanu
   - Arta literara in romanul Ion, - Liviu Rebreanu































Cauta referat
Scriitori romani