x
Sunday, 14 April 2019 15:35

Measured value meter (amperes)

Written by
Rate this item
(0 votes)

Programming with JavaScript

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 a current value measured by your Web-IO Analog on a Web page. You will also find corresponding sample Web pages and images for displaying a voltage value as well as displaying two measured values (volts and amps).

Preparation

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 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. 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. 298 kB). Please place the images in the directory in which the Web page with the JavaScript and applet data are located.

Read 34 times Last modified on Sunday, 14 April 2019 17:21

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.