1 / 18

Interactive Bus Driving Simulation with JavaScript Interface

This document presents an interactive simulation for bus driving using a JavaScript interface. It leverages the DLP (Dynamic Learning Platform) for enhanced human-computer interaction, allowing users to modify system parameters in real-time. The application showcases a bus driving world environment with an intuitive interface where users can control speed, engine status, and other actions through buttons. It includes methods for communication between JavaScript and the DLP program, enabling seamless interaction and parameter adjustments during runtime.

daryl-lane
Télécharger la présentation

Interactive Bus Driving Simulation with JavaScript Interface

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