Application for Web-IO Analog-In:
Measured value meter (volts and amperes)
The value measured by the Web-IO Analog 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 both the values measured by your Web-IO Analog-In (volts and/or amps) in the form of an analog meter. You will also find corresponding sample Web pages and images for displaying a voltage value as well as an ampere value.
The example presumes first you are displaying a voltage and a current value. At the end we will also show you which parameters you need to edit to display two voltage or two current values.
Preparations
You have already provided your Web-IO Analog
- 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 blue)
to the <head> area of your Web page.
<html>
<head>
<title>Zeiger</title>
<script language="JavaScript" type="text/javascript">
<!--
var voltmeter = new multipic(101,"volt_400_","gif",20,10,10,"showvolt");
var amperemeter = new multipic(102,"ampere_400_","gif",20,10,420,"showampere");
var valuevolt;
var valueampere;
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 (i=0; i<img_count; i++)
{
this.multipics[i] = new Image();
this.multipics[i].src = img_name+i+’.’+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 (i=0; i<this.multipic_count; i++)
{
if(iCount==i)
{
document.getElementById(this.multipic_id).src = this.multipics[i].src;
}
}
}
function showvolt()
{
alert("Aktueller Wert: "+valuevolt+"V");
}
function showampere()
{
alert("Aktueller Wert: "+valueampere+"mA");
}
function sensorChanged( iDevice, iSensor, iVal )
{
if (iSensor==0)
{
valueampere = iVal;
amperemeter.Set(Math.round(iVal));
}
else
{
valuevolt = iVal;
voltmeter.Set(Math.round(iVal*2));
}
}
</script>
</head>
...
2. Incorporate applet into Web page
- Copy the applet data (in blue) to the <body> area of your Web page.
- Insert the IP address of your Web-IO Analog.
...
<body>
<applet name="Analog" archive="A.jar" code="A.class" codebase="http://10.40.22.27" height="0" width="0" mayscript>
<param name="device" value="0">
<param name="showerrors" value="off">
<param name="sensorpolling" value="on">
<param name="pollingrate" value="500">Java ist nicht aktiviert oder wird nicht unterstützt
</applet>
</body>
</html>
3. Download and store images
Now all you need is the images associated with the display object, which we have provided here for downloading: .zip (approx. 583 kB). Please place the images in the directory in which the Web page with the JavaScript and applet data are located.
Side note: Displaying two voltage or two current values
If you want to display two voltage or two current values, you must simply adjust the parameters shown in red accordingly.
<html>
<head>
<title>Zeiger</title>
<script language="JavaScript" type="text/javascript">
<!--
var voltmeter = new multipic(101,"volt_400_","gif",20,10,10,"showvolt");
var amperemeter = new multipic(102,"ampere_400_","gif",20,10,420,"showampere");
var valuevolt;
var valueampere;
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 (i=0; i<img_count; i++)
{
this.multipics[i] = new Image();
this.multipics[i].src = img_name+i+’.’+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 (i=0; i<this.multipic_count; i++)
{
if(iCount==i)
{
document.getElementById(this.multipic_id).src = this.multipics[i].src;
}
}
}
function showvolt()
{
alert("Aktueller Wert: "+valuevolt+"V");
}
function showampere()
{
alert("Aktueller Wert: "+valueampere+"mA");
}
function sensorChanged( iDevice, iSensor, iVal )
{
if (iSensor==0)
{
valueampere = iVal;
amperemeter.Set(Math.round(iVal));
}
else
{
valuevolt = iVal;
voltmeter.Set(Math.round(iVal*2));
}
}
</script>
</head>
...