W&T Interfaces
for TCP/IP, Ethernet, RS-232, RS-485, USB, 20mA
Glass and plastic fiber optic, http, SNMP, OPC, I/O digital, I/O analog, ISA, PCI, ...?
      Products
Home Contact   Distributors worldwide
Languages:
DE
US
ES
IT
RU
Web-IO Universal
Digital
Analog
Web-IO application-ready
Monitor climate
Alarm Reporting Center
Web-Count / S0 acquisition
IP monitoring
Data Server
Motherbox 2
pure.box 2
Network Memory
TCP/IP-Ethernet servers
Com-Server (serial)
USB Server
Serial interfaces
USB, RS232, RS485, 20mA
Isolators & fiber optics
USB, RS232, RS485, 20mA
PC cards
PCI Express, PCI and
ISA bus
...
Printer interfaces
Accessories
Downloads
Old
Shopping basket Your shopping basket

 
      Technical knowledge
Books, articles, glossaries...
Technical background info
Applications for Com-Server,
USB Server, Web-IO,
Web Thermometer,
Motherbox and pure.box
 
Application for the Web-IO Digital:

Counter




 Additional links: Product overview Application overview Print version


The inputs, counter and outputs of the Web-IO Digital can be simply Visualized on a Web page using JavaScript and a few images. Incorporation of the Web-IO applet provides for continuous updating of the display.

Using the following copy&paste example you can represent a current value measured by your Web-IO Digital on a Web page.

 Simply place your counter on a dynamic Website - the Java applet of the Web-IO Digital will take care of continuous updating

You don’t have a Web-IO yet but would like to try the example out sometime?

No problem: We will be glad to send you the Web-IO Digital 2xInput, 2xOutput PoE at no charge for 30 days. Simply fill out a sample ordering form, and we will ship the Web-IO for testing on an open invoice. If you return the unit within 30 days, we will simply mark the invoice as paid.

To sample orders   To sample orders  

Preparations
You have already provided your Web-IO Digital
  • with power,
  • connected it to your network,
  • assigned it an IP address - which with WuTility is no problem.
1. Incorporate JavaScript into the Web page
  • Copy the JavaScript (shown in gray) from the following example
    to the <head> area of your Web page.
<html>
<head>
<title>Counter</title>
<script language="JavaScript" type="text/javascript">
<!--
   var ypositopn = 223;
   var xposition = 100;
   var xdifferenc = 14;
   var maxdigits = 6;
   document.write("<img border='0' src='cmeter.gif' style='position:absolute; top:190px; left:36px'>");
   counterdigit = new Array(maxdigits);
   for (i=0; i<maxdigits; i++)
   { counterdigit[i] = new multipic(100+i,"digit_","gif",9,ypositopn,xposition + i*xdifferenc,'nolink');
   }

   function multipic(id, img_name, img_ext, img_count, ypos, xpos, link)
   { img_count++;
     this.multipics = new Array( img_count );
     this.multipic_count = img_count;
     this.multipic_id = id; // class variables
     for (ii=0; ii<img_count; ii++)
     { this.multipics[ii] = new Image();
      this.multipics[ii].src = img_name+ii+'.'+img_ext;
     }
     this.Set = picSet; // Class method
     if (link == "nolink")
     { document.write("<img id='"+this.multipic_id+"' style=position:absolute;top:"+ypos+"px;left:"+xpos+"px src="+this.multipics[0].src+" border=0>");
     }
     else
     { document.write("<a href='javascript:" + link + "(" + id + ");'><img id='"+this.multipic_id+"' style=position:absolute;top:"+ypos+"px;left:"+xpos+"px src="+this.multipics[0].src+" border=0></a>");
     }
   }

   function picSet(iCount)
   { for (ii=0; ii<this.multipic_count; ii++)
     { if(iCount==ii)
       { document.getElementById(this.multipic_id).src = this.multipics[ii].src;
       }
     }
   }

   function counterChanged( iDevice, iNr, iVal )
   { if (iNr==0)
     { var i=maxdigits;
       var digitvalue;
       window.status=iVal;
       do
       { i--
         digitvalue = parseInt(iVal/Math.pow(10,i));
         counterdigit[maxdigits-1-i].Set(digitvalue);
         iVal=iVal-digitvalue*Math.pow(10,i);
       }
       while(i> 0)
     }
     else
     { iVal = 0;
     }
   }

   function setPassword()
   { document.applets["dio"].setPassword( document.forms[0].tfPassword.value );
     document.forms[0].tfPassword.value = '';
   }
</script>
</head>
...

2. Incorporate applet into Web page
  • Copy the applet data (in gray) to the <body> area of your Web page.
  • Insert the IP address of your Web-IO Analog.
...
<body style="font-family: Arial, Helvetica, sans-serif;">
<applet name="dio" archive="dio.jar" code="dio.class" codebase="http://10.40.50.5" height="0" width="0" mayscript>
<param name="device" value="0">
<param name="showerrors" value="off">
<param name="inputpolling" value="off">
<param name="outputpolling" value="off">
<param name="counterpolling" value="on">
<param name="pollingrate" value="1000">Java ist nicht aktiviert oder wird nicht unterstützt
</applet>
...

3. Password form
  • If your Web-IO is password protected, also copy the password form (shown in gray) to the <body> area of your Web page. In this case the Web page can only communicate with the Web-IO after the password has been sent.
...
<form>
  <p>Passwort:
    <input type="password" name="tfPassword" maxlength="31" size="20">
    <input type="button" value="senden" onclick="setPassword()">
  </p>
</form>
 </body>
</html>

4. Download and save images
  • Now all you need is the images associated with the display object, which we have provided here for downloading: .zip (approx. 11 kB). Please place the images in the directory in which the Web page with the JavaScript and applet data are located.

 
    Additional application examples for Web-IO Digital
Web techniques
      Browser
      Smartphone
      E-mail
      SMS
  Your own web pages
        AJAX - dynamic Web pages with JavaScript
        PHP and AJAX - dynamic web pages also for multiple Web-IOs
        Mashup web pages - displaying values in Google Maps
        Java-Applet - use the integrated applet
        Java-Applet - Example: display in- and outputs
        Java-Applet: Example: display in- and outputs and control the outputs
        Java-Applet - Example: display counters
        Java-Applet - Example: Open doors and switch lights from the browser
        Web-IO with iPhone: visualize and control
        Web-IO with iPhone example: control shutter blinds
        Web-IO with iPhone example: monitor room climate
        Web-IO with iPhone example: display measurement values
System integration
      OPC
      OPC - example
      Modbus
      SNMP
      SNMP traps
      Box-to-Box
Data acquisition
      FTP data logger
      FTP data logger - example
Timer
      iCal timer
      CRON timer (Linux)
      Task planner as timer
Individual programming
      Visual Basic 5 and 6
      Visual Basic.Net 2005/2008/2010
      Visual Basic.Net 2005/2008/2010 with WuTdevice.dll
      Visual C++
      Visual C#
      Visual C# with WuTdevice.dll
      Visual C++ (Linux with QT-Designer)
      Visual Delphi
      Visual Delphi.Net (2005)
      Lazarus / FreePascal
      Java
      control using VBScript
Web-IO system
      Box-to-Box
      Box-to-Box - example
      Motherbox - Access multiple Web-IOs
      Motherbox - Logically link Web-IOs
      Limit monitoring
  Web-IO - Options for network linking
        WLAN
        DSL
        UMTS/GPRS/mobile phone network
        Satellite radio

 
  • Mister Wong
  • Google Bookmarks
  • Twitter
  • Facebook
  • Digg
   Imprint
We are here for you personally! Wiesemann & Theis GmbH Tel.: +49 202/2680-110 (M-F 8:00 - 5:00)
Porschestr. 12 fax: +49 202/2680-265
42279 Wuppertal Individual e-mail

© Wiesemann & Theis GmbH, subject to error and alteration: Since we can make errors, none of our statements should be used without verification. Please report any mistakes or misunderstandings so that we can be aware of them and respond appropriately as quickly as possible.