code Remote Monitoring and Control Live Demo

Source code of io.html
For
Remote Monitoring and Control Live Demo

<HTML>
<HEAD>
<TITLE>Demo for Real-time Remote Monitoring and Control systems</TITLE>
</HEAD>

<BODY style="margin: 0px" onload="startclock(); timerONE=window.setTimeout">
<TABLE width="100%">
<TR>
<TD><applet name="MonitoringApplet" archive="remote.jar" codebase="./" code="com.decision.rp.ui.MonitoringApplet.class" width="0" height="0"></applet>
</TD>
<TD background="imgs/panel.gif" width="600" height="300">
<TABLE width="100%" cellpadding="0" cellspacing="0">
<TR>
<TD width="23%" align="center"> </TD>
<TD width="9%" align="center">CH1</TD>
<TD width="9%" align="center">CH2</TD>
<TD width="9%" align="center">CH3</TD>
<TD width="9%" align="center">CH4</TD>
<TD width="9%" align="center">CH5</TD>
<TD width="9%" align="center">CH6</TD>
<TD width="9%" align="center">CH7</TD>
<TD width="9%" align="center">CH8</TD>
<TD> </TD>
</TR>
<TR>
<TD align="center"><FONT size="4" color="red"><B>OUTPUT</B></FONT></TD>
<TD align="center">

Command:
1. <APPLET name=VirtualButtonApplet ARCHIVE="remote.jar" codeBase=./ code=com.decision.rp.ui.VirtualButtonApplet.class width="image width" height="image height">

card -
0: PCI Industrial Card
1: PCI 4Photo/4Relay Card
2: PCI 8Photo/8Relay Card
3: PCI 16Photo/16Relay Card

port -
PCI Industrial Card: The port value from 0 up to 3. Total has 4 ports.
PCI 4Photo/4Relay Card: The port value only 0. Total has 1 port.
PCI 8Photo/8Relay Card: The port value only 0. Total has 1 port.
PCI 16 Photo/8Relay Card: The port value from 0 to 1. Total has 2 ports

line -
PCI Industrial Card: Each port have 16 lines, from 0 up to 15.
PCI 4Photo/4Relay Card: Form 0 to 3 is Relay Output line. Form 4 to 7 is Isolator Input line.
PCI 8Photo/8Relay Card: Form 0 to 7 is Relay Output line. Form 8 to 15 is Isolator Input line.
PCI 16 Photo/16 Relay Card: Port0 Is Relay Output line. Port1 Is Isolator Input line.
Every port has 16 lines.

on.imageï¿½V It is a picture link when state is ON.
off.imageï¿½V It is a picture link when state is OFF.

switch1-on.gif

switch1-off.gif

Channel 1

//-->
<APPLET name=VirtualButtonApplet ARCHIVE="remote.jar" codeBase=./Â
code=com.decision.rp.ui.VirtualButtonApplet.class width="32" height="42">
<param name="card" value="2">
<param name="port" value="0">
<param name="line" value="0">
<param name="on.image" value="imgs/switch1-on.gif">
<param name="off.image" value="imgs/switch1-off.gif">
</APPLET>
</TD>
<TD align="center">

Channel 2

<APPLET name=VirtualButtonApplet ARCHIVE="remote.jar" codeBase=./Â
code=com.decision.rp.ui.VirtualButtonApplet.class width="32" height="42">
<param name="card" value="2">
<param name="port" value="0">
<param name="line" value="7">
<param name="on.image" value="imgs/switch1-on.gif">
<param name="off.image" value="imgs/switch1-off.gif">
</APPLET>
</TD>
</TR>
<TR>
<TD align="center"><FONT size="4" color="red"><B>INPUT</B></FONT></TD>

Command:
1. <APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./" code="com.decision.rp.ui.VirtualImageApplet.class" width="image width" height="image height">
2. <param name="card.port.line.state" value="image file">

card -
0: PCI Industrial Card
1: PCI 4Photo/4Relay Card
2: PCI 8Photo/8Relay Card
3: PCI 16Photo/16Relay Card

port -
PCI Industrial Card: The port value from 0 up to 3. Total has 4 ports.
PCI 4Photo/4Relay Card: The port value only 0. Total has 1 port.
PCI 8Photo/8Relay Card: The port value only 0. Total has 1 port.
PCI 16 Photo/8Relay Card: The port value from 0 to 1. Total has 2 ports

line -
PCI Industrial Card: Each port have 16 lines, from 0 up to 15.
PCI 4Photo/4Relay Card: Form 0 to 3 is Relay Output line. Form 4 to 7 is Isolator Input line.
PCI 8Photo/8Relay Card: Form 0 to 7 is Relay Output line. Form 8 to 15 is Isolator Input line
PCI 16 Photo/16 Relay Card: Port0 Is Relay Output line. Port1 Is Isolator Input line
Every port has 16 lines.
image fileï¿½V It is a picture link.
light1-on.gif

light1-off.gif

<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.8.1" value="imgs/light1-on.gif">
<param name="2.0.8.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.9.1" value="imgs/light1-on.gif">
<param name="2.0.9.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.10.1" value="imgs/light1-on.gif">
<param name="2.0.10.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.11.1" value="imgs/light1-on.gif">
<param name="2.0.11.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.12.1" value="imgs/light1-on.gif">
<param name="2.0.12.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.13.1" value="imgs/light1-on.gif">
<param name="2.0.13.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.14.1" value="imgs/light1-on.gif">
<param name="2.0.14.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
<TD align="center">
<APPLET name="VirtualImageApplet" archive="remote.jar" codeBase="./"
code="com.decision.rp.ui.VirtualImageApplet.class" width="38" height="38">
<param name="2.0.15.1" value="imgs/light1-on.gif">
<param name="2.0.15.0" value="imgs/light1-off.gif">
</APPLET>
</TD>
</TR>
<TR>
<TD align="center" colspan="9" valign="top">
<TABLE width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="15%" align="center"> </TD>
<TD width="15%" align="center">OUTPUT</TD>
<TD width="10%" align="center"><img src="imgs/switch1-off.gif"></TD>
<TD width="5%" align="center">OFF</TD>
<TD width="10%" align="center"> </TD>
<TD width="15%" align="center">OUTPUT</TD>
<TD width="10%" align="center"><img src="imgs/switch1-on.gif"></TD>
<TD width="5%" align="center">ON</TD>
<TD width="15%" align="center"> </TD>
</TR>
<TR>
<TD width="15%" align="center"> </TD>
<TD width="15%" align="center">INPUT</TD>
<TD width="10%" align="center"><img src="imgs/light1-off.gif"></TD>
<TD width="5%" align="center">OFF</TD>
<TD width="10%" align="center"> </TD>
<TD width="15%" align="center">INPUT</TD>
<TD width="10%" align="center"><img src="imgs/light1-on.gif"></TD>
<TD width="5%" align="center">ON</TD>
<TD width="15%" align="center"> </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD width="600" height="200">
<TABLE width="100%">
<TR>
<TD align="center">
<--Â

Clock

The clock applet downloads from Sun Freeable APPLETS:
http://java.sun.com/openstudio/index.html

<applet codebase="classes" code="JavaClock.class" width="150" height="150">
<param name="delay" value="100">
<param name="link" value="http://www.decision.com.tw">
<param name="border" value="5">
<param name="nradius" value="80">
<param name="cfont" value="TimesRoman|BOLD|18">
<param name="bgcolor" value="ffffff">
<param name="shcolor" value="ff0000">
<param name="mhcolor" value="00ff00">
<param name="hhcolor" value="0000ff">
<param name="ccolor" value="dddddd">
<param name="ncolor" value="000000">
</applet>
</TD>
<TD align="center">

Menology

The menology is a Java-Script function.
This function, source code starts here.

<script language="JavaScript" type="text/javascript">
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) {
this[0] = m0;this[1] = m1;this[2] = m2;this[3] = m3;this[4] = m4;
this[5] = m5;this[6] = m6;this[7] = m7;this[8] = m8;this[9] = m9;
this[10] = m10;this[11] = m11;
}
function calendar() {
var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
var today = new Date();var thisDay;
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
year = today.getYear() + 1900;
thisDay = today.getDate();
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 260 == 0)) monthDays[1] = 29;
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1); // works fine for most systems
testMe = firstDay.getDate();
if (testMe == 2) firstDay.setDate(0);
startDay = firstDay.getDay();
document.write('<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#330000"><TR><TD><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#000000">');
document.write('<TR><TH COLSPAN="7" BGCOLOR="#C0C0C0"><FONT COLOR="#000000" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1"><B>');
var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthNames = new Array( "January","February","March","April","May","June","July","August","September","October","November","December");
var now = new Date();
document.write("<FONT FACE='MS Sans Serif, Verdana, Geneva, Arial, Helvetica' SIZE='1' COLOR='#000000'>" + dayNames[now.getDay()] + ", " + now.getDate() + " " + monthNames[now.getMonth()] + ", " + now.getYear()+ "</FONT>");
document.writeln('</B></FONT></TH></TR><TR><TH BGCOLOR="#808080" width="35"><FONT COLOR="#FFFFFF" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">Sun</FONT></TH>');
document.writeln('<TH BGCOLOR="#808080" width="35"><FONT COLOR="#FFFFFF" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">Mon</FONT></TH>');
document.writeln('<TH BGCOLOR="#808080" width="35"><FONT COLOR="#FFFFFF" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">Tue</FONT></TH>');
document.writeln('<TH BGCOLOR="#808080" width="35"><FONT COLOR="#FFFFFF" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">Wed</FONT></TH>');
document.writeln('<TH BGCOLOR="#ff9900" width="35"><FONT COLOR="#FFFFFF" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">Thu</FONT></TH>');
document.writeln('<TH BGCOLOR="#ff0000" width="35"><FONT COLOR="#FFFFFF" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">Fri</FONT></TH>');
document.writeln('<TH BGCOLOR="#808080" width="35"><FONT COLOR="#FFFFFF" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">Sat</FONT></TH>');
document.writeln("</TR><TR>");
column = 0;
for (i=0; i<startDay; i++) {
document.writeln("\n<TD><FONT SIZE='1'> </FONT></TD>");
column++;
}
for (i=1; i<=nDays; i++) {
if (i == thisDay) {
document.writeln('</TD><TD ALIGN="CENTER" BGCOLOR="#660000"><FONT COLOR="#ffffff" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1"><B>')
}else{
document.writeln('</TD><TD BGCOLOR="#555580" ALIGN="CENTER"><FONT COLOR="#ffffff" FACE="Verdana,Tahoma,Arial,Helvetica" SIZE="1">');
}
document.writeln(i);
if (i == thisDay) document.writeln("</FONT></TD>")
column++;
if (column == 7) {
document.writeln("<TR>");
column = 0;
}
}
document.writeln('<TR><TD COLSPAN="7" ALIGN="CENTER" VALIGN="TOP" BGCOLOR="#00A000"><form name="clock" onSubmit="0"><FONT FACE="Arial, MS Sans Serif, Verdana, Geneva, Arial, Helvetica" SIZE="2" COLOR="#FFFFFF"><B>Local Time: </B><INPUT TYPE="Text" NAME="face" ALIGN="middle" SIZE="20" style="font-family: Verdana,Tahoma,Arial,Helvetica; font-size: 10px;background-color: #000000; color: #FFFFFF;height:18px"></FONT></TD></TR></TABLE></TD></TR></TABLE></FORM>');
}
</script>
<script language="JavaScript">
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = " " + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? " : 0 " : " : ") + minutes
timeValue += ((seconds < 10) ? ": 0 " : " : ") + seconds
timeValue += (hours >= 12) ? " PM" : " AM"
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
</script>
<script language="JavaScript" type="text/javascript">
calendar();
</script>
<--Â
The menology function ends here.
//-->

</TD>
</TR>
</TABLE>
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>