Position der Input-LEDs in px vom oberen Fensterrand
Position der LEDs in px vom linken Fensterrand
Position der Output-LEDs in px vom oberen Fensterrand
Position des Gerätebilds in px vom oberen und linken Fensterrand
Zeitraum in ms, innerhalb dessen das Applet den Messwert aktualisiert; bei Bedarf anzupassen.
Die Inputs, Counter und Outputs des Web-IO Digital können mit Hilfe von JavaScript und einigen Bildern recht einfach auf einer Webseite
visualisiert werden. Für die laufende Aktualisierung der Anzeige sorgt die Einbindung des Web-IO-Applets.
Mit dem folgenden copy&paste-Beispiel können Sie Ihr Web-IO Digital mit seinen Inputs und Outputs auf einer Webseite
abbilden.
Sie haben noch kein Web-IO und möchten das vorgestellte Beispiel
einfach mal ausprobieren?
Kein Problem: Wir stellen Ihnen das Web-IO Digital 2xInput, 2xOutput
PoE gerne kostenlos für 30 Tage zu Verfügung. Einfach Musterbestellung
ausfüllen, wir liefern das Web-IO zum Test auf offene Rechnung.
Wenn Sie das Gerät innerhalb von 30 Tagen zurück schicken,
schreiben wir die Rechnung komplett gut.
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 (ii=0; ii<img_count; ii++)
{ this.multipics[ii] = new Image();
this.multipics[ii].src = img_name+ii+'.'+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 (ii=0; ii<this.multipic_count; ii++)
{ if(iCount==ii)
{ document.getElementById(this.multipic_id).src = this.multipics[ii].src;
}
}
}
function inputChanged( iDevice, iNr, iVal )
{ ledinput[iNr].Set(iVal);
}
function outputChanged( iDevice, iNr, iVal )
{ ledoutput[iNr].Set(iVal);
}
function setPassword()
{ document.applets["dio"].setPassword( document.forms[0].tfPassword.value );
document.forms[0].tfPassword.value = '';
}
</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 Digital ein.
...
<body style="background-color: #0099CC; font-family: Arial, Helvetica, sans-serif;"> <applet name="dio" archive="dio.jar" code="dio.class" codebase="http://10.40.50.5"
height="0" width="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="off">
<param name="pollingrate" value="1000">Java ist nicht aktiviert oder wird nicht unterstützt
</applet>
...
3. Passwort-Formular
Wenn Sie Ihr Web-IO durch ein Passwort geschützt haben, kopieren Sie das Passwort-Formular (grau unterlegt) ebenfalls in den <body>-Bereich Ihrer Webseite. Die Webseite kann in diesem Fall erst nach dem Senden des Passwortes mit dem Web-IO kommunizieren.
Nun benötigen Sie nur noch die zum Anzeigeobjekt gehörigen Bilder, die wir hier zum Download bereitgestellt haben: .zip (ca. 9 KB). Bitte legen Sie die Bilder in dem Verzeichnis ab, in dem sich auch die Webseite mit den JavaScript- und Applet-Angaben befindet.
