pl0t engine - applets and javascript


There are two applets needed for the pl0t system to get up and running on the client side. The first one is PlotIOApplet, the second is PlotPlayerApplet. Shortly told it's the PlotIOApplets job to send events (mouse and keyboard), and PlotPlayerApplets job to play the incoming midi-stream.

PlotIOApplet

Is loaded using the normal JVM included in either NS4+ or IE5+ (the browser should support JAVA 1.1). To send events to the server some params has to be set when loading the applet (works in both IE and NS):

<applet name="PlotIOApplet" codebase="http://127.0.0.1/plot/" code="PlotIOApplet.class" width=2 height=2 MAYSCRIPT>
<param name="servername" value="127.0.0.1">
<param name="eventport" value="55000">
</applet>

To send events, there are two functions available in the applet. These functions are called by using javascript and the browser must support LiveConnect.

  1. sendKeyboardEvent(keyCode)

    This function takes one argument (at the moment) and that is the ASCII (or whatever you want to send it in) keyboard code. To call this in a webpage where PlotIOApplet is loaded as above, one could call:

    document.PlotIOApplet.sendKeyboardEvent(64);

    which would send a keyboard event to the server with the keyboard code 64

  2. sendMouseEvent(type, button, clicks, x, y)

    This function takes five arguments. The first one is the type of message to be sent to the server (more info) like is it a mouse click or did they move the mouse. The second one is which button was pressed. The third one tells how many times the mousebutton was pressed (like doubleclick would be 2). The fourth and fifth is the position of the mouse pointer as the event was captured. To call this function in a webpage where the PlotIOApplet is loaded like above, this would work:

    document.PlotIOApplet.sendMouseEvent(5,1,1,200,100);

    which sends an event to the server telling that the mouse was clicked, button1, one time, at position (200,100) in the webpage

There is also a third function, but this should not be used normally as it is called by the other applet PlotPlayerApplet. The function: setTimeAndID(appletID, appletTimeModifier) sets the applets ID (a unique number), and the timemodifier (which is a number used for timestamping events), so if you WANT to use it, go ahead, SEE IF I CARE!! ;)

PlotPlayerApplet

This applet HAS TO BE loaded using a JAVA 1.3 supported JVM (in other words SUNs newest JAVA plugin), if not it will fail as the older JVMs don't support JavaSound (midi playback etc.). To load the applet in a webpage for (both IE and NS) do the following:

<OBJECT classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
     width="20" height="20" align="baseline"
     codebase="http://127.0.0.1/plot/#Version=1,3,0,0">
 <PARAM NAME="code" VALUE="TestPlotPlayerApplet.class">
 <PARAM NAME="codebase" VALUE="http://127.0.0.1/plot">
 <PARAM NAME="type" VALUE="application/x-java-applet;version=1.3">
 <PARAM NAME="soundbank" VALUE="soundbank.gm">
 <PARAM NAME="midiport" VALUE="55000">
 <PARAM NAME="scriptable" VALUE="true">
 <PARAM NAME="MAYSCRIPT" VALUE="true">
 <COMMENT>
     <EMBED type="application/x-java-applet;version=1.3" width="20"
     height="20" align="baseline" code="TestPlotPlayerApplet"
     soundbank="soundbank.gm" midiport="55000"
     MAYSCRIPT="true" name="PlotPlayerApplet">
     <NOEMBED>
     </COMMENT>
            No Java 2 SDK, Standard Edition v 1.3 support for APPLET!!
     </NOEMBED></EMBED>
 </OBJECT>

The parameters one should worry about are the following:

Ofcourse codebase and code has to be set correctly, not sure if that classid thingy needs to be included though. Also, both applets PlotIOApplet and PlotPlayerApplet needs to be scriptable to work, but don't worry about that, using the HTML code from above they are allready set to be scriptable.

JavaScript functions

For the applets to work correctly together, and for them to operate correctly with the rest of the webpage, some javascript functions MUST! be present:

appletID = -1;
appletTimeModifier = 0;

<!-- called by PlayerApplet to update PlotIOApplet -->
function setTimeAndID(id, time) {
   appletID = eval(id);
   appletTimeModifier = eval(time);
   updateApplet('PlotIOApplet');
}

<!-- Recursive function waiting for PlotIOApplet to load before setting time and id -->
function updateApplet (appletName) {
   if (document && document[appletName] && document[appletName].isActive())
      document.PlotIOApplet.setTimeAndID(appletID, appletTimeModifier);
   else 
      setTimeout(updateApplet, 100, appletName);
}  

The first javascript function is not the same function as the one with the same name in PlotIOApplet. As we can see, that function is called in the updateApplet function. Thw whole purpose with these two functions is that when PlotPlayerApplet has gotten vital information from the server, and we know PlotIOApplet is loaded, it also gets this information.

the whole thing

As an example, here is some HTML code that loads both applets and a bit more:

<head>
<title>PlotPlayerApplet and PlotIOApplet in both IE & NS</title>
<script language="JavaScript">

<!--

appletID = -1;
appletTimeModifier = 0;

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function layerWrite(id,nestref,text) {
        if (ns4) {
                var lyr = (nestref)? eval('document.'+nestref+'.document.'+id+'.document') : document.layers[id].document
                lyr.open()
                lyr.write(text)
                lyr.close()
        }
        else if (ie4) document.all[id].innerHTML = text
}

//-->

</SCRIPT>
<STYLE TYPE="text/css">
<!--
.white {color:white;; font-size: 36pt}
#blueDiv {position:absolute; left:200; top:200; width:500; height:100; clip:rect(0,500,100,0); background-color:#004080; layer-background-color:#004080; z-index:0}
-->
</STYLE>
</head>
<body bgcolor=22ffff>


<!-- HERE PlotIOApplet is loaded -->
<applet name="PlotIOApplet" codebase="http://127.0.0.1/plot/" code="PlotIOApplet.class" width=2 height=2 MAYSCRIPT>
<param name="servername" value="127.0.0.1">
<param name="eventport" value="55000">
</applet>

<!-- HERE TestPlotPlayerApplet is loaded -->
<OBJECT classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
     width="20" height="20" align="baseline"
     codebase="http://127.0.0.1/plot/#Version=1,3,0,0">
 <PARAM NAME="code" VALUE="TestPlotPlayerApplet.class">
 <PARAM NAME="codebase" VALUE="http://127.0.0.1/plot">
 <PARAM NAME="type" VALUE="application/x-java-applet;version=1.3">
 <PARAM NAME="soundbank" VALUE="soundbank.gm">
 <PARAM NAME="midiport" VALUE="55000">
 <PARAM NAME="eventport" VALUE="55000">
 <PARAM NAME="scriptable" VALUE="true">
 <PARAM NAME="MAYSCRIPT" VALUE="true">
 <COMMENT>
     <EMBED type="application/x-java-applet;version=1.3" width="20"
     height="20" align="baseline" code="TestPlotPlayerApplet"
     soundbank="soundbank.gm" midiport="55000" eventport="55000"
     MAYSCRIPT="true" name="PlotPlayerApplet">
     <NOEMBED>
     </COMMENT>
            No Java 2 SDK, Standard Edition v 1.3 support for APPLET!!
     </NOEMBED></EMBED>
 </OBJECT>

<!-- layer being set -->
<DIV ID="blueDiv"><SPAN CLASS="white">updated by applet</SPAN></DIV>

<script language="JavaScript">

<!-- redirects the whole webpage to another URL -->
function redirectMe(theUrl) {
   top.location.replace(theUrl);
}

<!-- updates the layer with new text -->
function writeText(text) {
   layerWrite('blueDiv', null,'<SPAN CLASS=\'white\'>'+text+'</SPAN>');
}

<!-- called by PlayerApplet to update PlotIOApplet -->
function setTimeAndID(id, time) {
   appletID = eval(id);
   appletTimeModifier = eval(time);
   updateApplet('PlotIOApplet');
}

<!-- Recursive function waiting for PlotIOApplet to load before setting time and id -->
function updateApplet (appletName) {
   if (document && document[appletName] && document[appletName].isActive())
      document.PlotIOApplet.setTimeAndID(appletID, appletTimeModifier);
   else 
      setTimeout(updateApplet, 100, appletName);
}  

function mouseEvent() {
<!-- type, button, clicks, X, Y -->
document.PlotIOApplet.sendMouseEvent(5,1,1,200,100);
}

function keyboardEvent() {
document.PlotIOApplet.sendKeyboardEvent(64);
}

</script>

<br clear=all><a onMouseOver="mouseEvent();" href="jalla.html">sends mouse event</a>
<br clear=all><a onMouseOver="keyboardEvent();" href="jalla.html">sends keyboard event</a>
</pre>