Aplicación al Web-IO Analog-In:

Instrumento indicador del valor de medición (Voltio & Amperio)

Otros enlaces

Instrumento indicador del valor de medición (Amperio)

El valor medido por el Web-IO analógico puede visualizarse con ayuda de JavaScript y algunas figuras fácilmente en una página Web. De la actualización corriente de la indicación del valor medido se encarga la integración del Web-IO-Applet.

Con el ejemplo siguiente copy&paste pueden representarse los dos valores medidos por su Web-IO Analog-In (Voltio y/o Amperio) en una página Web en forma de un instrumento indicador. Las páginas Web ejemplo correspondientes también las encontrará para la indicación de un valor de Voltio así como la indicación de un valor de Amperio.

El ejemplo parte primero de la indicación de un valor de Voltio y de Amperio. Al final le mostramos también qué parámetros tiene que procesar en el caso de que deban indicarse dos valores de Voltio o dos de Amperio.

Preparativos

Ya ha abastecido su Web-IO Analógico

con corriente,
conectado a su red,
dotado con una dirección IP - con WuTility no hay problemas.

1. Integrar JavaScript en la página Web

Copie la JavaScript (en azul) del ejemplo siguiente
en la zona <head> de su página Web.


<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. Integrar Applet en la página Web

Copie los datos Applet (en azul) en la zona <body> de su página Web.
Añada la dirección IP de su Web-IO Analógico.


...
<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. descargar + depositar figuras

Ahora sólo necesita las figuras que pertenecen al objeto indicado, que hemos puesto aquí listas para descargar: .zip (aprox. 583 KB). Por favor deposite las figuras en el registro, en el que se encuentra también la página Web con los datos de JavaScript y Applet.

Apéndice: Indicación de dos valores de Voltio o de dos de Amperio

Si quiere hacer indicar dos valores de Voltio o dos de Amperio, sólo tiene que adaptar correspondientemente los parámetros marcados en rojo.


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

Ir arriba