## include("jspe.jse); labvii1 is Slide("
The JsEden interpreter is still a 'work-in-progress'. (As you can see, quite apart from the variants of JsEden, even the name of the interpreter has taken several forms!) CS405 students are not obliged to use it, but some knowledge of the issues behind its design and use will be valuable. (For instance, you can be sure that JsEden will be relevant to the subject of an examination question.)
There are many currently variants of JsEden and no single developer is committed to working on any of these at present. The interpreter is available as an open source project via github:
https://github.com/EMGroup/js-edenThose who have been involved in development include Tim Monks, Nick Pope, Matt Cranham, Jess Nickson and Antony Harfield. If you wish to raise issues with them, or want to find out more about - or contribute to - JsEden development, you can register for the JsEden Google group at
https://groups.google.com/forum/?fromgroups#!forum/jseden.
The purpose of this rough guide is to provide additional information and resources that may encourage you to explore JsEden. As you shall see, even the guide itself is a work-in-progress and any suggestions for improvement are welcomed. Note that at present the most up-to-date forms of the JsEden interpreter only work satisfactorily in the Chrome browser.
"); labvii1a = Slide("There are two aspects to this guide: introducing you to some practical aspects of JsEden that you may find practically useful, and outlining some of the ways in which JsEden may be further developed as an instrument for EM. You may like to begin by reviewing the code of some JsEden models. One of the simplest is the JUGS construal that was the subject of one of the introductory sessions in CS405. To inspect the text for the JUGS construal, open the browser at the webpage:
http://jseden.dcs.warwick.ac.uk/emile/models/jugs/To inspect the text for the presentation of the JUGS construal, open the browser at the webpage:
http://jseden.dcs.warwick.ac.uk/emile/models/cs405/JUGSinJS-E/jugspres.eTo inspect the text for the JsEden presentation environment developed by Matt Cranham, open the browser at the webpage:
http://jseden.dcs.warwick.ac.uk/emile/jspe.jse
Some useful features of JsEden are illustrated in these sources.
"); labvii1b is Slide("You might begin by inspecting the source of the JUGS presentation cited on the previous slide.
More sophisticated features of JsEden are illustrated in the source for the JsEden presentation environment itself, as cited on an earlier slide. A striking feature of the code is the extensive use of raw JScript code that is embedded into the script and the EDEN function definitions. Most intimidating are the expressions of the form \$\(\"# ... \") that are used liberally throughout the text. These are instances of JQuery expressions - about which much more can be learnt from popular websites such as http://www.w3schools.com/jquery/ The basic idea is that elements within the webpage displayed in JsEden can be tagged by the modeller in such a way that their properties can be conveniently referenced and modified via a JQuery expression. (This is an alternative to the Byzantine modes of reference that the native Dom model of a webpage supports.) For instance, in the presentation environment the tag 'jspe' references the html canvas in which the html text you are currently reading is presented, and the tag 'd1canvas' references the canvas on the left hand side. The next slide illustrates some simple uses of JQuery. "); labvii1d is Slide("
The following command for changing the style of the text in this presentation illustrates a simple use of Jquery:
In a similar vein, you can use JQuery to change the characteristics of the text and the text area for the slides - not necessarily appropriately:
Tracing the way in which style characteristics are inherited is tricky, as is illustrated
by the following attempt (not entirely successful?) to restore the slides to their original state:
(It's useful to remember that pressing F11 twice will reformat the webpage should the layout get scrambled.)
"); labvii1e is Slide("Unless you are new to web development, you are doubtless aware of the alternative access to the webpage that is afforded by the console interface (and other interfaces within the Developer Tools panel in the Chrome browser that expose the way in which the webpage has been constructed).
A full discussion of these is beyond the scope of this guide, but here are some brief hints.
To access the console in Chrome you type Shift-Ctrl-J. You can enter JScript directly via the command line in the console - the effect is almost always equivalent to entering the script between the special JScript brackets via the EDEN Interpreter Window. You can gain much useful information by entering the names of JScript variables (or more complex expressions) at the command line and inspecting their values. This may involve identifying the names of attributes of objects etc, and becoming familiar with the methods that can be applied to them.
EDEN commands such as writeln(v);
and ?v;
deliver their output to the console.
To inspect the internal representation of the EDEN observable v (something that becomes useful when trying to exploit JsEden with existing JScript libraries etc), you enter the expression root.lookup(\"v\")
at the console.
The result is an object representing v that has the following components:
For the purpose of understanding the use of JQuery, you should also explore the Elements interface that is accessed via the button at the top left of the Developer Tools panel. By surveying the html specification displayed, you will be able to correlate display components - such as were referenced using 'jspe' and 'jspe_slide' - with tagged html entities within the text.
"); labvii1f is Slide("For the present, in the absence of an integrated development environment, it is advisable (even necessary?) to develop JsEden models interactively using a text editor. By and large, it is a good policy to build your model (as if) in one continuous stream of thought. This means keeping the content of the textfile you are editing closely synchronised with the state currently being realised in the JsEden interpreter. This may involve some interactions that are not preconceived and oblige you to think hard from time to time: this is part of what making interesting construals is about. It should also make good material for an interesting account of EM activity. If you do find it necessary to reload the script, it is a good idea to note the points at which you have observed a good correlation between the construal you have constructed (as realised in JsEden and as recorded in the text file) and the construal you have in mind. Note that the History tab can be helpful in reconstructing the state of a construal, but this does not record any interventions you make via the console, which may be critical! It is helpful in the stages of development to focus on specific families of observables and dependencies that you can select by typing a regular expression into the Search Box in the O&A panel. For instance, the RE 'slideList|Slide|slideNumber|labvii' will summarise information about the presentation, and 'content|cap|.*full|target' describes some key parameters in the JUGS model (if this is loaded!). To record the views of the construal that you construct in this way within your textfile, you can introduce the following procedure, which is essentially written in JScript:
proc showObservables { \$\{\{ \$('#symbol-search > .side-bar-topic-title').click(); \$('#observable-search').val(arguments[0]); \}\}\$; }
To test this out:
One of the problematic aspects of traditional EDEN has been the difficulty of incorporating new kinds of observable. To study applications involving music, it is useful to be able to play a midi file and give notifications of when notes are played for instance. This activity has been contrived in the past, but involves setting up quite complex configurations of applications that are hard to maintain as software evolves. Another potentially interesting application for EM might be concerned with semantic analysis of text, but it has proved non-trivial to link EDEN to otherwise readily accessible resources such as WordNet. One of the advantages of JsEden is that is relatively easy to make links with established JScript libraries. For example, applications addressing music and texts could exploit online libraries such as:
mudcu.be/midi-js
http://wordvis.com/about.html
https://github.com/NaturalNode/natural
The next slide gives more guidance as to how such libraries can be introduced.
"); labvii1g is Slide("In the implementation of JsEden, certain key libraries are loaded on the server when the application starts up. For the EMILE project, it seemed appropriate to preload the Sylvester linear algebra package at http://sylvester.jcoglan.com/ - the Matrix and Vector prototypes that appear under the Drawable tab are derived from that source.
In some cases, it makes more sense for a library to be loaded on a one-off basis. For instance, to make an application that is based on a traditional card game, it may be useful to take advantage of existing JsEden library such as https://github.com/atomantic/JavaScript-Playing-Cards.
Something like the following JsEden code can be used to adjoin such a library on-the-fly:
This code seems to work if you cut-and-paste into a fresh JsEden instance, but not when directly executed. It can of course be simplified, but is included here in the form in which it was developed. Note the role of dummy Div components (with zero width and height) in loading library functions.
"); labvii2 is Slide("At present, it's unclear to what extent the existence of many variants of JsEden is simply a consequence of its immaturity. It may be that the wide variety of ways in which JScript can be used in web applications will naturally lead to different extensions of JsEden. What all these variants at present have in common is construal-building based around EDEN-style definitions. It is the ways in which these are connected to the broader web environment and the libraries they exploit that differ.
The first prototype for JsEden was devised by Tim Monks. Nick Pope has contributed substantially to subsequent development (see http://jseden.dcs.warwick.ac.uk/latest/). Matt Cranham adapted Pope's version of JsEden for use in a summer project led by Steve Russ and Meurig Beynon in July 2012 (the 'emile' variant). Antony Harfield has developed a simpler variant for use in the Thai schools context (see http://harfield.org.uk/jsedencanvas/). Miscellaneous variants that were intended to make useful extensions or resolve known bugs have been successfully developed - and unsuccessfully ventured. The best aspects of these will be incorporated into the interpreter in due course. Contributions to the discussions - and/or development - at the JsEden Google group will be helpful in this context.
"); labvii3 is Slide("One of the main motivations for developing JsEden is to promote EM ideas in a broader forum. The traditional EDEN interpreter has never attracted much external interest, at any rate as a potential practical modelling tool. Its maintenance is challenging because of its reliance on tk/tcl libraries, the hybrid nature of its C/EDEN code and the variety of parsing strategies used to support the associated definitive notations. Scaling up EDEN models can also be problematic. Nick Pope's PhD thesis includes a critique of EDEN that helps to explain some of the relevant issues.
"); labvii4 is Slide("