Skip to main content Skip to navigation

Innovations for the MCE

Links to innovative / experimental developments for JS-EDEN (e.g.) by Elizabeth Hudnott, Jonny Foss and Nick Pope.

Warning - this page is still under development, and contains links to prototype demos that might break easily.

Tiles Interface

Objective

To improve window management so that windows can be arranged side-by-side with less user effort

Suggested solution

Dockable windows (or 'tiles') that can be moved around and 'snap' into place. Similar to windows in most operating systems, or 'panels' in many image manipulation tools or IDEs such as Eclipse. The 'tabs' paradigm should also be familiar to users of all modern web browsers.

The current version uses http://docker.webcabin.org/ as a layout library, although see below for future extensions.

Demo

http://jseden.dcs.warwick.ac.uk/tiles

Click on the 'Shopping' construal, and a second canvas (the JSPE)1 should open to the left2.

The menu hasn't been implemented in this version yet, so if you want to add a SymbolList you'll have to put the following code into the interpreter:

createView("view_1", "SymbolList");

You can grab hold of any of the windows by dragging the blue tab (where the window name is). Before you drag, you should be able to see your mouse change into a 4 sided arrow. Whilst dragging, you should be able to see a light blue rectangle that changes position - this is where the window will go to if you drop it.

Mouse pointer when about to drag

About to dock a panel to the side

Notice that if you drop when the blue area is highlighting the horizontal part at the top next to a tab (as shown below), you can have the view as a new tab of the existing window (as shown in above picture, with two canvases on the same tab.

About to dock a panel as a tab

Future ideas

This interface is an experiment - not necessarily ideal, but interesting to compare to the existing one. As the interface is similar to IDEs, this version might appeal more to programmers.

It would be interesting to evaluate the usability of this new version against the existing layout. It would also be straightforward to provide different 'layout engines', which would allow users to choose which layout they want to see.

Implementing the concept of separate layout engines also allows for a range of alternative layouts to be designed. Other potential ideas for layout engines could be to use a grid based layout:

http://hootsuite.github.io/grid/

Additionally, this work would make it possible to write a lightweight version of JS-Eden that could be easily inserted into other websites. This would allow working construals to be shown amongst educational content without the necessity of the all the usual JS-Eden windows.

Project Manager

Objective

  • To simplify the process of working with construals.
  • To allow users to save their construals online so that they can be accessed from any computer (without them needing to worry about local files).
  • To provide a convenient way for users to keep track of different versions of construals.

For more details see the (Powerpoint Presentation) Project Manager Presentation

No demo available yet, see the presentation for ideas and mock-ups.

mongst educational content without the necessity of the all the usual JS-Eden windows.

Rethinking the environment for making construals

Objective

  • To simplify the process of working with construals so that this is better integrated within a single online environment. (In conjunction with the Project Manager, this is intended to make it unnecessary to develop construals by working with an external editor, as has been a common practice for some makers.)
  • To incorporate a new feature that makes it possible to scale up models through replicating parts of a construal.
  • To support a more direct and intuitive form of interaction with a construal that is a form of 'live coding'. This live editing process also gives much more timely and informative error messages.
  • To enable construals to be more effectively presented and documented in worksheet-style webpages in which scripts and views can be embedded.
  • To take advantage of the fact that a radically new implementation is required and make changes that are in line with the suggestions made by our consultants (and especially by Peter Tomcsanyi) for simpler syntax (perhaps even at the cost of losing compatibility with older variants of EDEN).

Some radical changes to the environment for making construals have been conceived and are currently being implemented by Nick Pope. These have wide ranging implications for how we present construals and for the way in which we conceive our interaction with them. The key difference is that rather than building up a script of definitions through submitting blocks of definitions through Input Windows, we instead introduce windows through which we in effect directly edit the current script.

Our intention is to make this new version of the MCE (which will be referred to as the CONSTRUIT! environment to reflect the fact that it represents a departure from the 'old-style' EDEN) into the main dissemination vehicle. This is a bold step which is being taken with Nick Pope acting in the lead role with support from Elizabeth Hudnott and Jonny Foss. An immediate goal is to transform existing construals that have been developed in CONSTRUIT! to date so that they work in the CONSTRUIT! environment. We are planning to deploy this environment at the iTAG conference later this month.

Prototype

The relevant prototype for the CONSTRUIT! environment that is best matched to this webpage is at the following url:

http://jseden.dcs.warwick.ac.uk/itag

- this is a relatively stable version which was subsequently developed by Nick into the new design and implementation implementation first deployed at C6 in December 2015.
More details of the progress towards developing the CONSTRUIT! environment are given on a separate webpage.


1 At the moment this new canvas is also called 'Canvas' - the headings only provide the window type not the window name

2 Notice new windows appear on the left. The library we're using will allow us to specify any opening position.