Position of the input LEDs in px from the upper window edge
Position of the LEDs in px from the left window edge
Position of the output LEDs in px from the upper window edge
Position of the device image in px from the upper and left window edge
Time in ms within which the applet updates the measured value; adjust as needed.
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 your Web-IO Digital with its inputs and outputs on a Web page.
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.
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 inputChanged( iDevice, iNr, iVal )
{ ledinput[iNr].Set(iVal);
}
function outputChanged( iDevice, iNr, iVal )
{ ledoutput[iNr].Set(iVal);
}
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 Digital.
...
<body style="background-color: #0099CC; 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="on">
<param name="outputpolling" value="on">
<param name="counterpolling" value="off">
<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.
Now you just need the images associated with the display object, which we have provided here for downloading: .zip (approx. 9 kB). Please place the images in the directory in which the Web page with the JavaScript and applet data are located.
