GEMï is a Web Operating System composed of an Application Environment Manager and a Graphical User Interface, using the library of SVG implementations as Virtual Device Interface.
The purpose of this presentation is to survey and demonstrate its features and capabilities, as well as its possible domains of application; to review the techniques employed for its construction; to present the Open Project proposals for evolution available at the time of the conference.
The system
GEMï is a cross-browser Web Operating System. It consists of an Application Environment Manager and a Graphical User Interface using SVG as Virtual Device Interface. The version 2 of the software has been entirely rewritten using a class inheritance architecture with the objective to make its source code easy to extend and maintain by the collaborative crew of programmers in an Open Project context.
GEMï has the systemic features commonly found in window based operating systems, including a system menu. The windows are fully featured and have the particularity of carrying in their tool bars sophisticated tools, proper to SVG transformation capabilities, for zooming and panning their contents.
Two notable features are Preferences and Session which can both be saved in remote mode. The Preferences relate to display options. The Session relates to the windows with their status and their current layout.
Domains of application
The range of domains of application is wide and includes engineering, cartography, scientific, educational, illustration, presentations, etc.
A practical example would be a project consisting of several documents, each containing, for instance, SVG drawings of molecules (latest experiments carried out by my son prove that a GEMï window can carry 3D objects with their animations and transformation tools, which can be used in conjunction with the window’s SVG transformation tools. This finding is the subject of a separate presentation), and a set of informational, interactive documents.
Technical aspects
The architecture of GEMï is based on the principle of class inheritance. Its structure is composed of a placeholder object, named “gemi”, where properties and methods proper to the interface are defined, and which provides a “namespace” for the superclass and subclasses.
The superclass defines properties and methods in its prototype which are then inherited by the subclasses. The superclass also defines some class methods.
The subclasses, which constitute an internal library, may have private methods or override the superclass methods. Basically, the subclasses are specialized constructor for compound physical objects which in most cases use several SVG elements.
Here we come to a fundamental particularity of GEMï: it does not have any classes for SVG elements. Instead, for those it uses the library that is constituted by the browser’s implementation of SVG. To achieve this the “gemi” object defines a method (node builder) which acts as an interface between the internal library and the implementation’s library. This methods expects exactly 1 argument, an object where the property/value pairs use SVG grammar, the property names containing JavaScript illegal characters for variable/property name being specified in string notation. Examples:
Building the interface
The section in the DOM tree restituting the interface is organized in the following manner:
Initially it contains a “gemi_windowstree” group which is hard-codedthe gemi.svg document in order to allow the embedding of those inner <svg> fragments that are intended to be rendered at runtime.
A desktop group is created and the “gemi_windowstree” group appended to it, followed by the other system components groups stacked in a judicious manner –the drag-area being on the topmost layer for example.
Finally, the other system components are created and appended to their respective groups.
GEMï has a reusable skin engine. The concept is similar to that of CSS with some notable advantages; these are:
– The possibility of having several definitions of “selectors” in one single file.
– The “selectors” are properties which are assigned objects, and their names are correlated with the names of the constructors.
– The possibility of using expressions and references for values.
– The use of a theme color, which can be processed on request to produce shades for the painting attributes and/or gradients, patterns and filters.
– The skin is a method that creates an object representing the current skin.
– The skin object defines the gradients, patterns and filters for the current skin.
– The names of the properties of the objects (the “selectors”) defined by the skin object are SVG attribute names, using string syntax where it applies, and other pseudo-attribute names may be used, as needed.
– The properties of objects (class instances, or orphan or volatile objects) reference the properties of the skin.
