Sammen med W&T Web-IOs kan browseren nu også bruges som et display- og kontrolelement til dynamiske, tekniske applikationer.

Motoren til denne dynamik er Java-appletten, som simpelthen kan indlæses fra Web-IO’en til browseren, og som overtager udvekslingen af procesdata med Web-IO’en. Når der sker ændringer, tager simple JavaScript-rutiner den aktuelle status for IO’erne fra Java-appletten og tilpasser visningen i browseren til forholdene i marken.

Dette er bare noget kode.

Applikationen, der beskrives i det følgende, viser et eksempel på samspillet mellem browser, Java-applet og Web-IO.

Har du ikke en Web-IO endnu, men vil du gerne prøve eksemplet på et tidspunkt? Det er ikke noget problem:

Kom i gang - bestil en prøveversion i 30 dage.

Prøv vores produkter fra Wiesemann & Theis gratis i 30 dage ved at skrive det i ordrebekræftelsen: Ønsker at teste produktet.
Hvis du ikke ønsker at gøre brug af din returret inden for 30 dage, skal du blot betale den medfølgende faktura. Gratis forsendelse i Danmark.

Læs produktspecifikationen her:

Forberedelser

Kombination af de forskellige betjeningselementer og visningsobjekter på websiden

1. HTML underliggende struktur af websiden

Placering af betjenings- og displayelementer

For bedre strukturering placeres de enkelte elementer i tabeller, og helheden erklæres som en formular. Tagget <user.htm> er ikke en del af standard HTML-syntaks og bruges af Web-IO til at identificere websiden. Tagget filtreres fra, før det uploades til browseren.

<user.htm>
<html>
	<head>
		<title>Web-IO mit Java-Aplett</title>
		<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
		<STYLE type=text/css>
			TD {COLOR: #000000; FONT-FAMILY:Verdana,Arial,Helvetica; FONT-SIZE: 10pt; }
		</STYLE>
	</head>
	<body bgcolor="#FFFFFF">
		<form name="ioform">
			<table width="500" border="1" height="144" bgcolor="#CCCCCC">
				<tr>
					<td>
						<table width="500">
							<tr>
								<td colspan="5">
									<b>Input/Output Control </b>
								</td>
							</tr>
							<tr>
								<td width="100">
									<input type="checkbox" name="cb_output" onclick="setOutput(0)"> Output 0
								</td>
								<td width="100">
									<input type="checkbox" name="cb_input"> Input 0
								</td>
								<td width="100">
									<div align="right">Counter 0 </div>
								</td>
									<td width="*" bgcolor="#FFFFFF" id="counter0">
								</td>
								<td width="55">
									<input type="button" value="Clear" onclick="clearCounter(0)">
								</td>
							</tr>
							<tr>
								<td width="100">
									<input type="checkbox" name="cb_output" onclick="setOutput(1)"> Output 1
								</td>
								<td width="100">
									<input type="checkbox" name="cb_input"> Input 1
								</td>
								<td width="100">
									<div align="right">Counter 1 </div>
								</td>
								<td width="*" bgcolor="#FFFFFF" id="counter1">
								</td>
								<td width="55">
									<input type="button" value="Clear" onclick="clearCounter(1)">
								</td>
							</tr>
							<tr>
								<td width="100" height="29">&nbsp;
								</td>
								<td width="100" height="29">&nbsp;
								</td>
								<td width="100" height="29">
									<div align="right">Counter all </div>
								</td>
								<td width="*" height="29">
								</td>
								<td width="55" height="29">
									<input type="button" value="Clear" onclick="clearCounter()">
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			<table width="500" border="1" bgcolor="#CCCCCC" >
				<tr>
					<td height="35">
						<table width="500">
							<tr>
								<td width="77">Password
								</td>
								<td width="141">
									<input type="text" name="ed_password">
								</td>
								<td width="266">
									<div align="right">
										<input type="button" value="Send" onclick="setPassword()">
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</form>
.....

2. Inkorporer Java-applet i webstedet

<applet> tag og parameteroverførsel
Når Java-appletten indarbejdes, skal det navn, som appletten skal tiltales med på webstedet, angives i <applet> tag. Du skal også angive, hvilken applet der skal indlæses. Når appletten ikke indlæses fra den samme server som selve webstedet, skal codebase også bruges til at angive serveradressen. Hvis webstedet og appletten indlæses fra den samme server, er denne parameter unødvendig.

Mellem de to <applet> tags overføres parametre, som påvirker og styrer kommunikationen med Web-IO’en.

.......
<applet name="dio" archive="dio.jar" code="dio.class" codebase="http://10.40.22.21" width="0" height="0" mayscript>
	<param name="device" value="0">
	<param name="showerrors" value="off">
	<param name="inputpolling" value="on">
	<param name="outputpolling" value="on">
	<param name="counterpolling" value="on">
	<param name="pollingrate" value="200">
</applet>
.......

3. Procesbrugerbetjening

Afhængigt af hvilket betjeningselement på webstedet brugeren har klikket på eller ændret, påkaldes visse JavaScript-funktioner. JavaScript-funktionerne påkalder så Java-applet-rutiner og overfører eventuelle nødvendige parametre.

  • Overførsel af adgangskodeDenne funktion er kun nødvendig, hvis der er tildelt en adgangskode for adgang til Web-IO.
    function setPassword()
{
	document.applets["dio"].setPassword( ioform.ed_password.value);
	ioform.ed_password.value = '';
}
  • Indstilling af udgange Brugeren indstiller udgangene ved hjælp af de to afkrydsningsfelter cb_output. Når funktionen påkaldes, vises output nr. er bestået.
    <script language="JavaScript" type="text/javascript">
<!--
function setOutput(OutputNr)
{
	var Out = 0;
	Out |= Math.pow( 2, OutputNr );
	if (ioform.cb_output[OutputNr].checked==true)
	{
		document.applets["dio"].outputAccess( Out,Out );
	}
	else
	{
		document.applets["dio"].outputAccess( Out,0 );
	}
}
  • Rydning af tællereIndgangstællernes tællertilstande kan ryddes. Den sendte parameter er nummeret på den tæller, du ønsker at aflæse eller slette. Hvis der ikke sendes nogen parameter, aflæser eller sletter Web-IO alle tællere.
    function clearCounter(CounterNr)
{
	if (CounterNr==undefined)
	{
		document.applets["dio"].counterClear(0xf);
	}
	else
	{
		var Counters = 0;
		Counters |= Math.pow( 2, CounterNr );
		document.applets["dio"].counterClear( Counters);
	}
}

4. Opdatering af IO-tilstande og tællertilstande

Overvågning af indgange, udgange og tællere på Web-IO håndteres af Java-appletten. Når en ændring opdages, påkalder appletten en tilsvarende JavaScript-funktion på webstedet.

  • OutputændringerNår der registreres en ændring, aktiveres følgende funktion. Overført er, hvilken Web-IO der rapporterede ændringen, hvilket output der blev ændret, og hvad den aktuelle status for outputtet er.
    function outputChanged( Device, OutputNr, OutputVal )
{
	ioform.cb_output[OutputNr].checked=OutputVal;
}
  • InputændringerNår der registreres en ændring, aktiveres følgende funktion. Overført er, hvilken Web-IO der rapporterede ændringen, hvilket input der blev ændret, og hvad den aktuelle status for inputtet er.
    function inputChanged( Device, InputNr, InputVal)
{
	ioform.cb_input[InputNr].checked=InputVal;
}
  • TællerændringerNår der registreres en ændring, aktiveres følgende funktion. Overført er, hvilken Web-IO der rapporterede ændringen, hvilken tæller der ændrede sig, og hvad den aktuelle tællerstatus er.
    function counterChanged( Device, CounterNr, CounterVal )
{
	document.getElementById('counter'+CounterNr).innerHTML = '<a>'+CounterVal+'<\/a>';
}
//-->
</script>
</body>
</html>
For at kunne arbejde med det viste eksempel, skal browseren tillade arbejde med Java-applets. Hvis Java ikke understøttes, kan de nødvendige plug-ins downloades gratis på www.java.com.

Eksemplet understøtter alle almindelige funktioner i Web-IO, optimeret til Web-IO 2x Digital Input, 2x Digital Output PoE. For de andre Web-IO-modeller kan det være nødvendigt at foretage tilpasninger af eksempelwebsiden. Yderligere programeksempler til socket-programmering kan findes på værktøjssiderne for Web-IO. En detaljeret beskrivelse af socket-grænsefladen til Web-IO Digital-modellerne findes i referencemanualen.

Download programeksempel

Wiesemann & Theis GmbH blev grundlagt i 1979 af Reinhard Wiesemann og Rüdiger Theis. Med 50 ansatte producerer virksomheden mikrocomputer- og netværksteknologi i Wuppertal. I 2001 introducerede Wiesemann & Theis den første industrielle temperatursensor med et netværksinterface, Web-Thermometer, og har næsten 20 års erfaring inden for områderne Industri 4.0 og Internet of Things.

Active Communication har været distributør for W&T siden 1992 i Danmark og siden 2002 også i Sverige, Norge og Island. W&T’s produkter er ekstremt brugervenlige og pålidelige til en konkurrencedygtig pris.