ZenPacks

RaphaelJS ZenPack

This ZenPack provides the RaphaelJS SVG/VML JavaScript rendering framework, which can be used by other ZenPacks.

Support

This is an Open Source ZenPack developed by Zenoss, Inc. Enterprise support for this ZenPack is available to commercial customers with an active subscription.

Releases

Version 2.1.0- Download
Compatible with Zenoss Core 3.2.x, Zenoss Core 4.2.x, Zenoss Resource Manager 4.1.x, Zenoss Resource Manager 4.2.x
Incompatible with Zenoss Core 2.5.x

Background

The RaphaelJS ZenPack brings VML/SVG (Scalable Vector Graphics) rendering and animation capabilities to Zenoss. From the Raphael Web Site:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Why RaphaelJS?

The primary benefit of using Raphael over pure SVG is that Microsoft Internet Explorer started supporting SVG in Internet Explorer 9. If you want to maintain compatibility with IE8 and earlier, you cannot use SVG.

Raphael allows you to deliver rich vector-based experiences that are compatible with IE6 and later by providing a JavaScript API that will target SVG on SVG-compatible browsers such as Firefox, Chrome and Safari, while using Microsoft's VML to target IE8 and earlier.

Usage

To use RaphaelJS for rendering in Zenoss, add the following JavaScript code to your ZenPack:

Ext.ux.Raphael = Ext.extend(Ext.BoxComponent, {
    onRender: function(ct) {
        var p = this.paper = Raphael(ct.dom), v;
        this.el = Ext.get(p.canvas);
 
//      Export all methods from this paper object which will not override our native
//      methods like setSize etc.
        for (var prop in p) {
            v = p[prop];
            if (!this[prop] && Ext.isFunction(v)) {
                this[prop] = v.createDelegate(p);
            }
        }
 
//      We always cache our size
        this.cacheSizes = true;
    },
 
    getWidth: function() {
        return this.lastSize.width;
    },
 
    getHeight: function() {
        return this.lastSize.height;
    },
 
    onResize: function(w, h) {
        this.paper.setSize(w, h);
    }
});
Ext.reg('raphael', Ext.ux.Raphael);
// end of file

This code extends Ext.BoxComponent so that it displays a Raphael VML/SVG rendering area that is the size of the component.

You will now be able to define new Ext.ux.Raphael components, which provide Raphael rendering capabilities within Zenoss, via the component's paper property:

var r = new Ext.ux.Raphael();
var myrect = r.paper.rect(0,0,r.getWidth(),r.getHeight()/2).attr({"fill" : "90-#000000:0-#5100ad:99.70238095238095"});

Resources

Installation

Normal Installation (packaged egg)

  1. Download the appropriate egg file for the version of Zenoss you are running.
  2. Ensure you are logged in as the zenoss user:
    $ sudo su - zenoss
  3. Install the ZenPack:
    $ zenpack --install ZenPacks.zenoss.RaphaelJS-*.egg
  4. Restart these services:
    $ zenoss restart

Developer Mode Installation

In order to do a development mode installation you will want to clone the existing git repository, and then use the --link flag with the zenpack command:

  1. Ensure you are logged in as the zenoss user:
    $ sudo su - zenoss
  2. Start by cloning the upstream repository:
    $ git clone git://github.com/zenoss/ZenPacks.zenoss.RaphaelJS.git
  3. Next, perform the installation:
    $ zenpack --link --install ZenPacks.zenoss.RaphaelJS
  4. Finally, restart these serivices:
    $ zenoss restart

Open Source

This ZenPack is developed and supported by Zenoss Inc. Contact Zenoss to request more information regarding this or any other ZenPacks. Click here to view all available Zenoss Open Source ZenPacks.