RaphaelJS
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.
Authors:
Daniel Robbins
Maintainers:
Daniel Robbins
Organization:
Zenoss, Inc.
License:
GNU General Public License, Version 2, or later
Name:
ZenPacks.zenoss.RaphaelJS
More Information:
Git Sources (For Cloning):
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"});