Lab 8: Introducing the JsEden prototype
Orientation
JsEden is a web-enabled variant of EDEN initiated by Tim Monks in his MSc dissertation: A Definitive System in the Browser in 2010-11. This lab gives a general introduction to JsEden as it has so far been developed by Tim Monks and Nick Pope. Note that JsEden requires a relatively up-to-date and sophisticated browser: in this lab, we shall assume that you are using a recent version of Firefox. Though the JsEden prototype is still at an early stage of development, it exposes many interesting issues for EM tools that are topical for this year's CS405 module - for more details, see the supplementary notes.
Activity 1: Introducing JsEden
To experiment with the JsEden environment following this lab sheet you should point your browser at what was http://www.dcs.warwick.ac.uk/~empublic/js-eden/ on 29th November 2011 and is now preserved as http://www.dcs.warwick.ac.uk/~wmb/CS405-2011/lab8/js-eden/. (There are significant changes - and in some respects improvements - in the latest version of JsEden posted at what will be the standard web address for CS405, but these render some of the material in this lab invalid!) This should bring up a webpage in which there are three components:
- an EDEN Input Window for accepting EDEN input,
- a drawing canvas in which visual artefacts generated by EDEN can be displayed, and
- an interface to the symbol table for the EDEN construal under development.
Clicking on the JS-Demo tab on the Projects menu will introduce annotations to identify these three components, which can be then be withdrawn by submitting the following definition via the EDEN input window:
show_demo_tips = 0;
The Input Window is the counterpart of the traditional Eden input window. It accepts virtually all standard Eden input, but does not support any other definitive notation such as DoNaLD or Scout. The symboltable interface lists the projects that can be loaded, and the observables, functions and procedures in the construal that is currently loaded. It has a search box which returns symbol names with a prefix that matches a specified regular expression. This helps to address the problem of identifying observable names that are partially remembered (e.g. try entering ".*demo"). The symboltable displays the current values of observables, but it is also possible to inspect the definitions of observables by hovering over the observable name and copy them into an auxiliary window for editing by clicking on them. You can test out this functionality by inputting a very simple set of EDEN definitions, such as:
a is b+c; b is 2*c; c = 23;
and seeing how these observables are recorded in the interface.You can also access functions - including the library functions used for drawing etc - in a similar way.
The JsEden interface is to be developed to the point where Empirical Modelling is supported within the browser (for instance, so that all the resources of the current EM archive can be re-engineered to work within the JsEden environment). Though JavaScript development of the interpreter is outside the scope of CS405 - and the code itself is still subject to modification - it is instructive to know something about how JsEden is implemented.
To get access to the underlying implementation, it is first necessary to install the Firebug add-on (see instructions for installing Firebug). With Firebug installed, you can use the F12 function key as a toggle that opens and closes the Firebug Panel in which the html, css and JavaScript code that underlies the js-eden webpage are displayed.
The Firebug Panel has several components, of which the Document Object Model (DOM), Console and HTML are the most relevant for this exercise. With the simple EDEN definitions entered and the Firebug Panel open, you can explore the JsEden implementation via these components.
The DOM: Select the DOM tab and navigate to the root/symbols/ context. There you'll find details of the observables that are displayed in the JsEden interface. For instance, if you select the observable 'b' you will be able to find the data about this observable that is recorded in the implementation: such as its current value [see cached_value], current definition [see eden-definition], and the names of other observables it depends on [see dependencies] and that depend upon it [see subscribers]. You will also find reference to other functions and procedures used by JsEden in the DOM.
The Console: Select the Console tab, and you will be able to see the output of writeln(); commands in eden, and use a query such as '?a;' to get direct access to the details associated with the observable a that are displayed in the DOM. The Console is also the place in which to find out more about error conditions that arise in loading and interacting with the js-eden webpage.
The HTML tab: Though this is only of peripheral relevance where the use of JsEden for EM is concerned, you can select the HTML tab and open up the body context in such a way that surveying the code with the mouse highlights the associated elements of the display. (Try doing this with the JS-Demo environment loaded, and relate your interactions with observables in the source file.) This is a good illustration of the role that dependency plays in modern interfaces, and hints at why implementing EDEN using JavaScript is much simpler than implementing it using the older tk/tcl technology.
In tkeden, the fact that procedures and functions can be specified in a C-like language is both powerful (e.g. because it makes it possible to interface readily with the Unix/C environment) and potentially problematic (because "programming in EDEN" - rather than respecting the principles of EM - can degenerate into traditional procedural programming). The JsEden interpreter stands in a somewhat similar relationship to JavaScript. In particular, it is possible to embed JavaScript into Eden statement. For instance, a simple JavaScript feature is the pop-up Alert Box (see http://www.w3schools.com/js/js_popup.asp) which is invoked by the Javascript command "alert('This is my pop-up message');". By enclosing JavaScript code within special brackets, as in ${{...}}$, it is possible to execute JavaScript directly within JsEden:
proc alerta : a {
${{
alert("a has been updated");
}}$;
}
This connection between JsEden and JavaScript is the basis for the EDEN implementation. Here, for instance, is the JavaScript equivalent of the EDEN command "writeln(a);":
${{
console.log(root.lookup('a').value());
}}$;
which can be easily adapted to display the EDEN definition of the observable 'a'. To assign a new value to the EDEN observable c, we can likewise execute:
${{ root.lookup('c').assign(45); }}$;
To understand how this relationship between JsEden and JavaScript can be exploited to create visualisations with lines and buttons etc (as in the Jugs model which is the subject of the next exercise), you can inspect the JavaScript code for defining lines and buttons that can be found online in the file http://www.dcs.warwick.ac.uk/~empublic/js-eden/library/drawing.eden. This should enable you to figure out how JsEden definitions such as:
d is Line(100,100,200,200,"red"); picture is [d];
followed by
e is Button("e","hello",50,50,true);
picture is [d,e];
can be used to put a line and a button in the display.
Activity 2: Some elementary JsEden models
A few relatively simple JsEden models have been created so far. Reviewing these models is a good way to learn more about both practical and conceptual issues concerning tool support for EM. The source code for these models can be found online at http://www.dcs.warwick.ac.uk/~empublic/js-eden/models/. (You may wish to make your own online copies of these models in your own public_html directory so that you can experiment with them. This is not essential for this activity, but is necessary for Activity 3 - see below for details of how you set this up.)
The jugsBeynon1998 model in the EM project archive has been converted to work with JsEden. To load the JUGS model in JsEden, you need only select it via the Projects tab on the JsEden interface. The source for the JUGS model can be found in the files jugsjs.e and jugs.jse. The file jugsjs.e is very similar to the original jugs.e as listed in jugsBeynon1998 in the EM archive. The file jugs.jse sets up the visualisation using the lines and buttons as defined in Javascript in the drawing.eden file in the js-eden/library directory.
You will find it informative to look at the way in which the JUGS display is defined in the file display.jse. The JavaScript functions that define lines and buttons are somewhat analogous to the EDEN representations of a DoNaLD line and Scout button in tkeden. As a simple example of redefinition, look at the contents of the wmbupdate.e file, which relocates the menu buttons on the display. This file can be included by inputting the command:
include("models/jugs/wmbupdate.e");
These trivial redefinitions, which move the menu buttons downwards to make room below the jugs, serves a purpose that will become clear shortly!
Basic definitions for JUGS in JsEden (see jugs.jse) are identical to those for JUGS in EDEN, as can be verified by reviewing the definitions of the standard observables (contentA, capA, valid1, Afull, target etc) via the symbol table interface. The most significant difference is in the way in which the updating of state occurs in the pour() procedure, where the step observable is incremented as follows:
after (viscosity) {
step++;
}
using the newly introduced after() construct. This directly controls the speed of the updating operations in the JUGS model, which occur once every second with the current setting of viscosity at the (rather high) value of 1000. The updating in JsEden is more asynchronous than in EDEN, as can be verified by the unexpected responses to making concurrent interactions (for instance: emptying jug A, setting the content of B to 3, initiating a pour, and interrupting this pour with an action that fills A). This exposes the subtlety of the underlying agency that is associated with EDEN models.
The original JUGS model was used to illustrate how the same underlying definitive script could be visualised in different ways by adding auxiliary scripts. You can verify this by including the file tty.jse, which depicts the JUGS in textual form - as can be verified by opening up the Firebug Panel console window, which is where textual output from JsEden is displayed. You can also introduce an html display of the jugs by introducing the file html.jse. Note that at present this removes the graphical interface to JUGS from the drawing canvas, so that further interaction with the model has to be done by selecting menu options through setting the observable 'input' to values between 1 and 5.
The oxoJoy1994 model has also been converted to work with JsEden and can be loaded from the Projects tab. In its present form, the model plays three OXO-variants using a textual display of the current position that can be inspected in the Console window. To enter a 'O' into (e.g.) the 4-th square of the grid, you make the definition "s4 = o;"; the computer player is set up to respond by entering an 'X' via a redefinition such as "s3 = x;" etc. A feature of the JsEden model is the use of Prompt Box to allow the player to set up the initial state (see the file game.e) - this is the sort of functionality that is useful in managing models, but has not been commonly used in EM models to date, as it involves interactively constructing a redefinition to change state (such as "s=2;" in this case) by reading directly from user input.
Activity 3: Exercises in JsEdeN
In order to carry out these exercises, you will need to make a personal copy of the ~empublic/public_html/js-eden/ directory within your own public_html directory. If you don't already have a public_html directory, you should first make this by invoking the command "mkdir public_html" in your home directory on Unix, and set read permissions on this directory via
chmod 755 public_html
To copy the js-eden source into your public_html directory, change into that directory using 'cd public_html', and run the command:
umask 0022 git clone -b cs405-11-12 git://github.com/EMGroup/js-eden.git
You should then be able to run your own version of js-eden by pointing your browser at http://www.dcs.warwick.ac.uk/~XXXXXX/js-eden/ where XXXXXX is your username.
Exercise 1: Extend the JUGS model by using Alert and Prompt boxes to conduct the dialogue with the pupil. For instance, adapt the model so that:
- when the target is attained, an alert message is issued to announce this in the browser;
- when the model is "awaiting input" it prompts the pupil to select one of the valid options by entering the appropriate command, such as "Fill A" or "Pour".
Exercise 2: Use the html display function in the drawing.eden library file to display the current state of the standard 3-by-3 OXO model.
Exercise 3: Use the Line and Button functions in the drawing.eden library file to provide a graphical interface to the standard 3-by-3 OXO model in which the player selects a square by clicking in the appropriate square, and the player is alerted if the square is occupied.
Exercise 4: Antony Harfield has developed a simple educational game ("The Inequality Game") which is implemented in JavaScript and exploits the dependency maintenance features underlying JsEden. To run Harfield's model, you need to navigate to Harfield's inequality game, open the Firebug Panel (by pressing the function key F12), and then refresh the browser (e.g. by pressing F5). Your challenge is to re-implement Harfield's game so that uses JsEden. For this purpose, you should use the drop-down menu ("Combobox") and circle components in the drawing.eden library file.
Activity 4: Reflection on JsEden
Reflect on the qualities and potential of JsEden as a tool for supporting EM. Speculate on how the JsEden interface might be extended to support model-building using the DoNaLD definitive notation. (You may find it helpful to consult the supplementary notes for the lab.)