W&T collega
Adattatori per TCP/IP, Ethernet, RS-232, RS-485, USB, 20 mA, Fibra ottica di vetro e plastica, http, SNMP, OPC, Modbus TCP, I/O digitale, I/O analogico, ISA, PCI

Applicazione relativa al Web-IO digitale:

Web-IO digitale - visualizzazione nel browser con JavaScript e Java-Applet


Il browser Internet fa parte oggi di tutti i moderni sistemi operativi e nella navigazione in Internet il browser viene apprezzato come strumento di visualizzazione versatile.

IO digitali visualizzazione nel browser con Java-Applet

In combinazione con i Web-IO W&T il browser ora può essere utilizzato anche come elemento di visualizzazione e controllo per applicazioni tecniche dinamiche.

Il motore della componente dinamica è in questo caso una Java-Applet che viene caricata semplicemente dal Web-IO nel browser e che qui esegue lo scambio dei dati di processo con il Web-IO. Semplici routine JavaScript accettano, in caso di modifiche, lo stato corrente degli IO dalla Java-Applet e adattano la visualizzazione nel browser alle condizioni sul campo.

Confronto Java Script e HTTP

L’applicazione descritta di seguito mostra ad esempio l’interazione di browser, Java-Applet e Web-IO.

Non disponete ancora di un Web-IO e desiderate semplicemente provarne il funzionamento come nell’esempio illustrato?

Nessun problema: vi mettiamo a disposizione gratuitamente per 30 giorni il Web-IO digitale 2x input, 2x output PoE. Non dovete far altro che compilare l’ordinazione del campione e vi forniremo il Web-IO in prova in conto aperto. Se ci restituite l’apparecchio entro 30 giorni, vi riaccreditiamo l’intero importo della fattura.

All’ordinazione del campione

Preparativi

Collocazione dei diversi elementi di comando e oggetti di visualizzazione nella pagina web

Elementi di comando

Nella denominazione dei singoli oggetti o delle funzioni da richiamare è utile utilizzare nomi che ne riprendono il significato.

1. Struttura di base HTML della pagina web

Collocazione degli elementi di comando e visualizzazione

Per una migliore strutturazione i singoli elementi vengono sistemati in tabelle e il tutto indicato come modulo. Il tag <user.htm> non appartiene alla sintassi HTML standard e serve al Web-IO per l’identificazione della pagina web. Il tag viene filtrato nel browser prima dell’upload.


				<user.htm>
				<html>
					<head>
						<title>Web-IO mit Java-Aplett</title>
						<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
						<STYLE type=text/css>
							TD {COLOR: #000000; FONT-FAMILY:Verdana,Arial,Helvetica; FONT-SIZE: 10pt; }
						</STYLE>
					</head>
					<body bgcolor="#FFFFFF">
						<form name="ioform">
							<table width="500" border="1" height="144" bgcolor="#CCCCCC">
								<tr>
									<td>
										<table width="500">
											<tr>
												<td colspan="5">
													<b>Input/Output Control </b>
												</td>
											</tr>
											<tr>
												<td width="100">
													<input type="checkbox" name="cb_output" onclick="setOutput(0)"> Output 0
												</td>
												<td width="100">
													<input type="checkbox" name="cb_input"> Input 0
												</td>
												<td width="100">
													<div align="right">Counter 0 </div>
												</td>
													<td width="*" bgcolor="#FFFFFF" id="counter0">
												</td>
												<td width="55">
													<input type="button" value="Clear" onclick="clearCounter(0)">
												</td>
											</tr>
											<tr>
												<td width="100">
													<input type="checkbox" name="cb_output" onclick="setOutput(1)"> Output 1
												</td>
												<td width="100">
													<input type="checkbox" name="cb_input"> Input 1
												</td>
												<td width="100">
													<div align="right">Counter 1 </div>
												</td>
												<td width="*" bgcolor="#FFFFFF" id="counter1">
												</td>
												<td width="55">
													<input type="button" value="Clear" onclick="clearCounter(1)">
												</td>
											</tr>
											<tr>
												<td width="100" height="29">&nbsp;
												</td>
												<td width="100" height="29">&nbsp;
												</td>
												<td width="100" height="29">
													<div align="right">Counter all </div>
												</td>
												<td width="*" height="29">
												</td>
												<td width="55" height="29">
													<input type="button" value="Clear" onclick="clearCounter()">
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<table width="500" border="1" bgcolor="#CCCCCC" >
								<tr>
									<td height="35">
										<table width="500">
											<tr>
												<td width="77">Password
												</td>
												<td width="141">
													<input type="text" name="ed_password">
												</td>
												<td width="266">
													<div align="right">
														<input type="button" value="Send" onclick="setPassword()">
													</div>
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</form>
				.....

2. Integrazione di Java-Applet nella pagina web

Il tag <applet> e la trasmissione dei parametri
Durante l’integrazione di Java-Applet deve essere indicato all’interno del tag <applet> il nome attraverso il quale l’Applet deve essere attivata all’interno della pagina web. Inoltre si deve indicare quale Applet deve essere caricata. Tutte le volte che l’Applet non deve essere caricata dallo stesso server della pagina web, deve essere inoltre indicato mediante codebase l’indirizzo del server. Se la pagina web e l’Applet vengono caricate dallo stesso server, questo parametro può essere tralasciato.

Tra i due tag <applet> vengono trasmessi parametri che riguardano e controllano la comunicazione con il Web-IO.


							.......
							<applet name="dio" archive="dio.jar" code="dio.class" codebase="http://10.40.22.21" width="0" height="0" mayscript>
								<param name="device" value="0">
								<param name="showerrors" value="off">
								<param name="inputpolling" value="on">
								<param name="outputpolling" value="on">
								<param name="counterpolling" value="on">
								<param name="pollingrate" value="200">
							</applet>
							.......

3. Elaborazione dell’utilizzo da parte dell’utente

In base all’elemento di comando della pagina web su cui l’utente ha fatto clic o che ha modificato, vengono richiamate determinate funzioni JavaScript. Le funzioni JavaScript richiamano a loro volta routine di Java-Applet e trasmettono parametri eventualmente necessari.

  • Trasmissione della password

    Questa funzione è necessaria soltanto se per l’accesso al Web-IO è stata assegnata una password.

    
    											function setPassword()
    											{
    												document.applets["dio"].setPassword( ioform.ed_password.value);
    												ioform.ed_password.value = '';
    											}
  • Impostazione degli output

    L’impostazione degli output è resa possibile all’utente da due caselle di spunta cb_output. Al richiamo della funzione viene fornito il n. dell’output.

    
    										<script language="JavaScript" type="text/javascript">
    										<!--
    										function setOutput(OutputNr)
    										{
    											var Out = 0;
    											Out |= Math.pow( 2, OutputNr );
    											if (ioform.cb_output[OutputNr].checked==true)
    											{
    												document.applets["dio"].outputAccess( Out,Out );
    											}
    											else
    											{
    												document.applets["dio"].outputAccess( Out,0 );
    											}
    										}
  • Cancellazione dei counter

    È possibile cancellare gli stati dei counter degli input. Come parametro viene trasmesso il n. del counter che deve essere letto o cancellato. Se non viene trasmesso alcun parametro, il Web-IO cancella tutti i counter.

    
    										function clearCounter(CounterNr)
    										{
    											if (CounterNr==undefined)
    											{
    												document.applets["dio"].counterClear(0xf);
    											}
    											else
    											{
    												var Counters = 0;
    												Counters |= Math.pow( 2, CounterNr );
    												document.applets["dio"].counterClear( Counters);
    											}
    										}

4. Aggiornamento degli stati degli IO e degli stati dei counter

Il monitoraggio degli input, output e counter da parte del Web-IO è eseguito da Java-Applet. Se viene riconosciuta una modifica, l’Applet richiama una corrispondente funzione JavaScript all’interno della pagina web.

  • Modifica degli output

    Se viene riconosciuta una modifica, viene richiamata la seguente funzione. Viene trasmesso da quale Web-IO è stata segnalata la modifica, su quale output si è verificata la modifica e in quale stato si trova attualmente l’output.

    
    								function outputChanged( Device, OutputNr, OutputVal )
    								{
    									ioform.cb_output[OutputNr].checked=OutputVal;
    								}
  • Modifica degli input

    Se viene riconosciuta una modifica, viene richiamata la seguente funzione. Viene trasmesso da quale Web-IO è stata segnalata la modifica, su quale input si è verificata la modifica e in quale stato si trova attualmente l’input.

    
    								function inputChanged( Device, InputNr, InputVal)
    								{
    									ioform.cb_input[InputNr].checked=InputVal;
    								}
  • Modifica dei counter

    Se viene riconosciuta una modifica, viene richiamata la seguente funzione. Viene trasmesso da quale Web-IO è stata segnalata la modifica, su quale counter si è verificata la modifica e qual è attualmente lo stato del contatore.

    
    								function counterChanged( Device, CounterNr, CounterVal )
    								{
    									document.getElementById('counter'+CounterNr).innerHTML = '<a>'+CounterVal+'<\/a>';
    								}
    								//-->
    								</script>
    								</body>
    								</html>
    								

Per poter lavorare con l’esempio illustrato il browser deve permettere il funzionamento con Java-Applet. Se manca il supporto Java, è possibile scaricare gratuitamente all’indirizzo www.java.com i plug-in necessari.

L’esempio supporta tutte le funzioni comuni del Web-IO, ottimizzato per il Web-IO 2x Digital Input, 2x Digital Output PoE. Per gli altri modelli di Web-IO devono essere eventualmente apportati adattamenti alla pagina web esempio. Ulteriori esempi di programma per la programmazione socket sono riportati nelle pagine dei tool relative al Web-IO. Una descrizione dettagliata relativa ai comandi dei modelli Web-IO digitali è riportata nel manuale di riferimento.

Download esempio di programma

Non disponete ancora di un Web-IO e desiderate semplicemente provarne il funzionamento come nell’esempio illustrato?

Nessun problema: vi mettiamo a disposizione gratuitamente per 30 giorni il Web-IO digitale 2x input, 2x output. Non dovete far altro che compilare l’ordinazione del campione e vi forniremo il Web-IO in prova in conto aperto. Se ci restituite l’apparecchio entro 30 giorni, vi accreditiamo completamente la fattura.

All’ordinazione del campione