Adattatori W&T
per TCP/IP, Ethernet, RS-232, RS-485, USB, 20 mA
Fibra ottica di vetro e di plastica, http, SNMP, OPC, I/O digitale, I/O analogico, ISA, PCI, ecc.?
      Prodotti
Pagina iniziale Contatti   Distributori nel mondo
Lingue:
DE

US

ES

IT

RU
Misurazione climatica
Termografo web
WuTooth
Web-IO
Digitale
Analogico
Area speciale
Server dati
Motherbox 2
pure.box 2
memoria di rete
Server Ethernet TCP/IP
Com-Server (seriali)
Server USB
Adattatori seriali
USB, RS232, RS485, 20 mA
Isolatori & fibra ottica
USB, RS232, RS485, 20 mA
Schede PC
PCI Express, bus PCI e
Bus ISA
...
Adattatori stampanti
Accessori
Download
Cose vecchie
Carrello Il vostro carrello

 
      Conoscenze tecniche
Libri, articoli, glossari...
Informazione tecnica di base
Applicazioni per Com-Server,
Server USB
, Web-IO,
termometro web,
Motherbox e pure.box
 
Applicazione relativa al Web-IO digitale:

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




 Ulteriori link: Panoramica del prodotto Panoramica dell’applicazione Versione per la stampa


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 accreditiamo completamente la fattura.

All’ordinazione del campione   All’ordinazione del campione  

Preparativi
Avete già alimentato con corrente
1. 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 mediante 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.

All’ordinazione del campione   All’ordinazione del campione Download esempio di programma   Al download

 
    Altri esempi applicativi per Web-IO digitale
Tecniche web
     
     
     
     
  Siti web propri
       
        PHP e AJAX - pagine web dinamiche anche per diversi Web-IO
        Pagine web Mashup con visualizzazione dei valori nelle carte geografiche di Google Maps
        Java-Applet - utilizzare l’applet integrata
        Java-Applet. Esempio: visualizzazione degli input e degli output
        Java-Applet. Esempio: visualizzazione degli input e degli output e controllo degli output
        Java-Applet. Esempio: visualizzazione dei counter
        Java-Applet. Esempio: aprire le porte e accendere le luci nel browser
        Visualizzare e controllare il Web-IO con l’iPhone
        Web-IO con iPhone. Esempio: comando delle tapparelle
        Web-IO con iPhone. Esempio: monitoraggio del clima
        Web-IO con iPhone. Esempio: visualizzazione valori di misura
Integrazione sistema
     
     
     
     
     
      Box-to-box
Acquisizione dati
     
      datenlogger FTP - esempio
Timer
     
      Timer CRON (Linux)
      Taskplaner come timer
Programmazione personalizzata
     
      Visual Basic.Net 2005/2008/2010
      Visual Basic.Net 2005/2008/2010 con WuTdevice.dll
      Visual C++
      Visual C#
      Visual C# con WuTdevice.dll
      Visual C++ (Linux con QT Designer)
      Visual Delphi
      Visual Delphi.Net (2005)
      Lazarus/FreePascal
      Java
      comandare con VBScript
sistema Web-IO
     
     
      Motherbox - attivare diversi Web-IO
      Motherbox - collegare logicamente i Web-IO
      Controllo dei valori limite
  Web-IO - Possibilità della connessione di rete
       
        DSL
        UMTS/GPRS/rete di telefonia mobile
        Radio satellitare

 
  • Mister Wong
  • Bookmark Google
  • Twitter
  • Facebook
  • Digg
   Colophon
Saremo lieti di fornirvi una consulenza personale! Wiesemann & Theis GmbH Tel.:: 0202/2680-110 (lun.-ven., ore 8-17)
Porschestr. 12 Fax: 0202/2680-265
42279 Wuppertal E-mail personale:

© Wiesemann & Theis GmbH, con riserva di errori e modifiche: poiché possono verificarsi errori, nessuna nostra informazione deve essere utilizzata senza essere stata verificata. Vi preghiamo di comunicarci tutti gli errori o gli equivoci che avete rilevato in modo tale che possiamo riconoscerli ed eliminarli quanto prima.