x
Sunday, 14 April 2019 15:38

Measured value meter (volts and 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 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 redaccordingly.

<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>
...

Read 38 times Last modified on Sunday, 14 April 2019 17:23
More in this category: « Measured value meter (amperes)

Leave a comment

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