Lively Kernel

The Lively Kernel is an

Overview

The Lively Kernel is a graphical composition and integrated programming environment written fully in the programming language JavaScript using standard browser graphics (W3C Canvas or SVG). It is thus accessible to any browser as a web page, and it begins operating as soon as the web page is loaded. It is able to edit its own code and graphics, and through its built-in WebDAV support, it can save its results or even clone itself onto new web pages. Along with its application development abilities, it can also function as its own integrated development environment (IDE), making the whole system self-sufficient with no tools except a browser.

Shapes, widgets, windows, IDE all on a Web page

The Lively Kernel uses a Morphic graphics model to add behavior to a scene graph built from browser graphics. Simple graphics are thus assembled into such standard widgets as sliders, scroll bars, text views, lists and clipping frames. A simple window system built from these widgets offers object inspectors, file browsers and code browsers. Even the rudimentary demo pages thus have the ability to edit and test new code in a simple code browser while the system is running.

Lively has been used to build simple web sites, including its own tutorial, and also a client-side Wiki system that stores its pages in a versioned repository. Content can vary from relatively static pages of text to fully dynamic models that look and behave like Adobe Flash simulations. The Lively Kernel achieves complex dynamic behavior without any specific animation support (it does not use the animation features of SVG), but by simple scheduling of multiple green-thread processes in JavaScript.

Text and transformations

The Lively Kernel includes its own multifont text editor written in JavaScript. It includes support for centering, justification and similar rudimentary text composition abilities. Working in Lively thus has much the same feel as working in a web page design program, except that the on-the-fly text layout is not being done in an offline composition program, but it is the built-in dynamic behavior of text in the Lively Kernel.

The liveliness of Lively graphics becomes even more apparent when manipulating the scale and rotation handles for objects and text. The whole code browser can be used when tilted 20 degrees on its side. Because the text editor is made up entirely of lively graphics, it works perfectly well when rotated or scaled, just as do the scroll bars, clipping frames, and the rest of the entire user interface.

Cross-browser compatibility

The Lively Kernel depends on browser support for JavaScript and SVG or Canvas graphics, all now part of the W3C standards. As of 2009, this means that it runs in Safari, Firefox, Chrome and Opera browsers.

While this requirement might seem less compatible than HTML, Lively is actually more compatible across the browsers on which it runs than is HTML. This is because there is more uniformity among JavaScript, SVG and Canvas implementations than there is from one HTML implementation to another. Except for one small initial file, the Lively Kernel code base is entirely free of tests for which client browser is being used.

As of 2011, Lively Kernel runs best in WebKit-based browsers such as Safari for Macintosh, or Chromium or Google Chrome for Windows. Running in Internet Explorer (Windows) requires Google Chrome Frame. Testing in all popular browsers is planned for the next release.

Integrated development environment

Lively includes an integrated development environment of considerable power, designed to work via WebDAV with a local set of a dozen or so source JavaScript files synchronizable with a versioned repository. If the user opens a SystemBrowser, all the JavaScript source files are listed in the file pane of the browser. If the user clicks on one of these files, it will be read, parsed (by an OMeta JavaScript parser) and displayed similar to a Smalltalk browser with functions or class definitions listed and, for each class, all the method names are shown. The user can click on a method name, edit its code in the bottom pane, and then save the new definition. The new definition will be checked for syntax and, if correct, it will be stored back in the .JS file. Moreover, if in "eval mode" (the usual case), the method will be redefined in the system that is running. This allows non-critical changes to be made without any need to restart Lively or any of the applications being developed. When all the source files are loaded, a rapid scan will find every reference to a selected text, and present all the code bodies that match in a separate sub-browser.

The Lively IDE includes object inspectors and morph style panels for controlling fills, borders, and text styles. There are also facilities for debugging at error points and profiling for performance tuning, but these have not been pushed, owing to the improving quality of such run-time support in all the major browsers.

Lively Wiki

The IDE operates on its source code files in a versioned repository to manage evolution of the Lively code base. The same approach has been used to empower users with control over active web content in the form of a client-side Wiki. Because Lively includes facilities to edit the content in its worlds (scene graphs and other content), and to store that content as web pages, a WebDAV connection allows Lively to store new versions of its page content while it is being incrementally developed. As each new version is saved, it is viewable from the rest of the Internet and prior versions can be retrieved in cases of error or change of mind. It is notable that this Wiki style of evolving web content extends to all the textual, graphical, and scripting content in Lively, as well as to any new forms that may be defined, yet without any need for a Wiki server of any kind.^[3] All that is required is a server providing a HTTP WebDAV interface. Increasing amounts of the Lively Project content is now maintained in this manner.

Lively for Qt

Lively for Qt is a new implementation of the Lively Kernel in which the "kernel" parts are replaced by functionality offered by the

// ClockMorph: A simple analog clock

Morph.subclass(“ClockMorph”, {

    defaultBorderWidth: 2, 
    type: "ClockMorph",

    // Constructor 
    initialize: function($super, position, radius) {

        $super(position.asRectangle().expandBy(radius), "ellipse"); 
        this.openForDragAndDrop = false; // Do not handle drag-and-drop requests 
        this.makeNewFace(); // Construct the clock face 
        return this; 
    },

    // Construct a new clock face 
    makeNewFace: function() {

        var bnds = this.shape.bounds(); 
        var radius = bnds.width/3; 
        var labels = []; 
        var fontSize = Math.max(Math.floor(0.04 * (bnds.width + bnds.height)),4); 
        var labelSize = fontSize; // room to center with default inset

        // Add Roman numerals to the clock 
        for (var i = 0; i < 12; i++) { 
            var labelPosition = bnds.center().addPt(Point.polar(radius*0.85, 
                                ((i-3)/12)*Math.PI*2)).addXY(labelSize, 0); 
            var label = new TextMorph(pt(0,0).extent(pt(labelSize*3,labelSize)), 
            ['XII','I','II','III','IV','V','VI','VII','VIII','IX','X','XI'][i]); 
            label.setWrapStyle(WrapStyle.SHRINK); 
            label.setFontSize(fontSize);
            label.setInset(pt(0,0));        
            label.setBorderWidth(0);
            label.setFill(null);
            label.align(label.bounds().center(),labelPosition.addXY(-2,1)); 
            this.addMorph(label); 
        } 
    
        // Add clock hands 
        this.addMorph(this.hourHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.5)],4,Color.blue)); 
        this.addMorph(this.minuteHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.7)],3,Color.blue)); 
        this.addMorph(this.secondHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.75)],2,Color.red)); 
        this.setHands(); 
        this.changed(); 
    }, 
    
    // Set clock hand angles based on current time 
    setHands: function() {

        var now = new Date(); 
        var second = now.getSeconds(); 
        var minute = now.getMinutes() + second/60; 
        var hour = now.getHours() + minute/60; 
        this.hourHand.setRotation(hour/12*2*Math.PI); 
        this.minuteHand.setRotation(minute/60*2*Math.PI); 
        this.secondHand.setRotation(second/60*2*Math.PI);    
    },

    // Will be called when the ClockMorph is placed in a world 
    startSteppingScripts: function() { 
        this.startStepping(1000, "setHands"); // once per second 
    } 
});