Das Bildobjekt ist mit einem Link hinterlegt, bei dessen Anklicken der genaue Wert angezeigt wird. Soll auf diesen Link verzichtet werden, bitte hier "nolink" eintragen.
Absolute Position des Bildobjekts in px vom oberen und vom linken Fensterrand.
Zeitraum in ms, innerhalb dessen das Applet den Messwert aktualisiert; bei Bedarf anzupassen.
Der vom Web-IO Analog gemessene Wert kann mit Hilfe von JavaScript und einigen Bildern recht einfach auf einer Webseite
visualisiert werden. Für die laufende Aktualisierung der Messwertanzeige sorgt die Einbindung des Web-IO-Applets.
Mit dem folgenden copy&paste-Beispiel können Sie einen von Ihrem Web-IO Analog-In gemessenen Ampere-Wert auf einer Webseite in Form eines
Zeigerinstruments darstellen. Entsprechende Beispiel-Webseiten und Bilder finden Sie auch für die Anzeige eines Volt-Werts
sowie die Anzeige zweier Messwerte (Volt und/oder Ampere).
Vorbereitungen
Sie haben Ihr Web-IO Analog bereits
mit Strom versorgt,
an Ihr Netzwerk angeschlossen,
mit einer IP-Adresse versehen - mit WuTility kein Problem.
1. JavaScript in Webseite einbinden
Kopieren Sie aus dem folgenden Beispiel das JavaScript (grau unterlegt) in den <head>-Bereich Ihrer Webseite.
<html>
<head>
<title>Zeiger</title>
<script language="JavaScript" type="text/javascript">
<!--
var amperemeter = new multipic(101,"ampere_400_","gif",20,10,10,"showampere");
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 showampere()
{ alert("Aktueller Wert: "+valueampere+"mA");
}
function sensorChanged( iDevice, iSensor, iVal )
{ if (iSensor==1)
{ valueampere = iVal;
amperemeter.Set(Math.round(iVal*2));
}
}
</script>
</head>
...
2. Applet in Webseite einbinden
Kopieren Sie die Applet-Angaben (grau unterlegt) in den <body>-Bereich Ihrer Webseite.
Fügen Sie
die IP-Adresse Ihres Web-IO Analog ein.
...
<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. Bilder downloaden + ablegen
Nun benötigen Sie nur noch die zum Anzeigeobjekt gehörigen Bilder, die wir hier zum Download bereitgestellt haben: .zip (ca. 298 KB). Bitte legen Sie die Bilder in dem Verzeichnis ab, in dem sich auch die Webseite mit den JavaScript- und Applet-Angaben befindet.
