Interface Design for DLP

internalchildlikeInternet and Web Development

Nov 12, 2013 (4 years ago)

87 views

Interface Design for DLP

Javascripts Support


Better human
-
compuer interface


Easy to make the system setting


Change the system parameters at the run
time.

Example: Bus Driving with
Javascript interface

Use Frames

interface

world

<html>

<head>

<title>Bus Driving Example (with Javascript
Interface)</title>

</head>

<frameset frameborder=1 rows="80%,20%,*">

<frame src="busdriving_world.htm"
name="world"

marginwidth=0 scrolling=no>

<frame src="busdriving_interface.htm"
name="interface"

marginwidth=1 scrolling=yes>

</frameset>

</html>


DLP Javascript Interface


JS methods

(Java script
-
> DLP)

var applet = window
.
document
.
applets['dlpbrow'];

applet
.
set_queue("namespace", "queuename", term )

to set a message on a message queue on a DLP program.

applet
.
get_field( "namespace", "fieldname", atomic )

to get a value of a global variable on a DLP program

applet
.
set_field( "namespace", "fieldname", term )

to set a value of a global variable on a DLP program



DLP methods (object
jsilib
) (DLP
-
> Javascript)

get_window(
-
JSObject )

call( +JSObject, +JSFunctionName, +ArgList,
-
FunctionResult )



busDriving_world.htm

......

<script type="text/javascript">

......</script>

<embed src="./../vrml/street/street5d.wrl"

<applet codebase="./classes"
archive="dlpsys.jar" code="dlpbrow.class"

id="dlpbrow" name="dlpbrow"

width=0 height=0
MAYSCRIPT>

......

<param name="object" value="
busDrivingjsi
">

</applet>


busDriving_interface.htm

<script> ... </script>

<form
name="interfaceform
">

<INPUT TYPE="button"
name="engine"

Value="EngineOn"
onClick="engineProcess()">

<INPUT TYPE="button" name="gas" Value="Gas"
onClick="gasProcess()"> ......

<INPUT TYPE="button" name="turnleft"
VALUE="TurnLeft" onClick="turnLeft()">

Speed: <INPUT TYPE="text" NAME="speed"
VALUE="0"> ...... </form>



Online Javascript Tutorials



http://www.w3schools.com/js/


http://www.cs.brown.edu/courses/bridge/1998/res/j
avascript/javascript
-
tutorial.html

busDrving_interface.htm

<script> ......

function
appletQueue
(term)

{window.parent.world.document.applets['dlpbrow
'].
set_queue("script", "queue", term
);}

function gasProcess()

{var gaschange = 2.0;

appletQueue("
term: speedChange(bus1," +
gaschange + ")"
); }

......

</script>


Pass values from Javascript to
DLP

:
-
object busDrivingjsi.


main :
-
setInitialValues(bus1),


new(
busDrivinglistener
(script, queue),
_), ...



setInitialValues(Object):
-


set_field(Object, speed, 0),


set_field(Object, engine_status, off).

:
-
end_object busDrivingjsi.




:
-
object busDrivinglistener : [
jsilib, bcilib,
busDriving
].

busDrivinglistener(Node,Queue):
-
run(Node, Queue).

run(Node,Queue):
-

repeat,




get_queue(Node, Queue, Term),




process_test_term(Term),




Term = stop, !.


process_test_term(Term):
-



Term =
speedChange(Object,Change),



!,
speedChange(Object,Change
),...

......

:
-
end_object busDrivinglistener.




speedChange(Object, Change):
-



get_field(Object, engine_status, Status),



Status = on,



get_field
(Object, speed, Speed),% get
a global variable



Speednew is Speed + Change,



Speednew > 0,



!,
set_field
(Object, speed, Speednew), %
set a global variable



showSpeed(Object, Speednew).

speedChange(_,_).

Set parameters directly from
Javascript

<script>

function engineProcess()

{

If
(window.document.interfaceform.engine.value=
=“EngineOff” )
{…
.applets['dlpbrow'].
set_field
("bus1",
"engine_status", "off");

......}

</script>

Pass values from DLP to
Javascript

In DLP:

showSpeed(Object, Speed):
-


get_window(Window),


call(Window,
showSpeed
,[
Object, Speed
],_).

In Javascript ( busDriving_world.htm):

<script type="text/javascript">

function
showSpeed(object, speed)

{window.parent.interface.window.document.interfac
eform.speed.value = speed; }

</script>



Change Parameters at the Run Time

The second message queue is needed

Javascript

Script_queue1

Script_queue2

engineOn

Run time control:

engineOff, setRotation, speedChange

In DLP:

main :
-
setInitialValues(bus1),


new(busDrivinglistener(script, queue), _),


new(busDrivinglistener(script, queue2), _).

In Javascript

(busDriving_interface.htm):

function
appletQueue2
(term)
{window.parent.world.document.applets['dlpbrow'].
set_queue("script",
"queue2",

term);}

function
engineProcess
(){......

If(window.document.interfaceform.engine.value==“E
ngineOn” ){
appletQueue2
("term: engine(bus1,
on
)");......} .....

</script>





Source Codes

The source codes of the bus driving with Javascript
interface are available at the MMA2 website:


http://wasp.cs.vu.nl/mma2


Exercise

1*(Bonus). Design a Bus Race Game with Javascript
interface.

Hint: Combine the Bus
-
Driving
-
with
-
Javascript
program with the Bus
-
Moving
-
along
-
Route program.