1 / 18

Interface Design for DLP Javascripts Support

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. world. interface. <html> <head>

daryl-lane
Download Presentation

Interface Design for DLP Javascripts Support

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interface Design for DLPJavascripts Support • Better human-compuer interface • Easy to make the system setting • Change the system parameters at the run time.

  2. Example: Bus Driving with Javascript interface

  3. Use Frames world interface

  4. <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>

  5. 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 )

  6. 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>

  7. 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>

  8. Online Javascript Tutorials • http://www.w3schools.com/js/ • http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html

  9. 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>

  10. 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.

  11. :-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.

  12. 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(_,_).

  13. Set parameters directly from Javascript <script> function engineProcess() { If (window.document.interfaceform.engine.value==“EngineOff” ) {….applets['dlpbrow'].set_field("bus1", "engine_status", "off"); ......} </script>

  14. 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.interfaceform.speed.value = speed; } </script>

  15. Change Parameters at the Run Time The second message queue is needed Run time control: engineOff, setRotation, speedChange Script_queue1 Javascript Script_queue2 engineOn

  16. 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==“EngineOn” ){appletQueue2("term: engine(bus1, on)");......} ..... </script>

  17. Source Codes The source codes of the bus driving with Javascript interface are available at the MMA2 website: http://wasp.cs.vu.nl/mma2

  18. 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.

More Related