It's a cross-platform vector graphics package written in JavaScript. Frequently referenced as dojox.gfx or dojo.gfx. Supported backends:

Transcription

1

2 What is DojoX GFX? It's a cross-platform vector graphics package written in JavaScript. Frequently referenced as dojox.gfx or dojo.gfx. Supported backends: SVG (FF, Opera, Webkit/Safari 3 beta). VML (IE6, IE7). Silverlight (IE6, IE7, FF, Safari). Design decisions were driven by pragmatic considerations. Let's review what's available.

3 Web gfx: VML Microsoft submitted VML to W3C in Since then it was augmented several times. Pros: Available on IE6 and IE7: Cons: 60-85% of all browsers (source: Wikipedia). No need to install anything. Antiquated, incomplete, bug-ridden, slow. Documentation is misleading, lack of examples. Persistent rumors that Microsoft will drop it in IE8.

4 Web gfx: SVG You know SVG, right? Pros: Mature, feature rich, well-documented. There are several high-quality native implementations. Cons: The market leader (IE) doesn't support it.

5 Web gfx: Canvas Part of HTML5 by WHATWG. Implements a procedural interface. Pros: Implemented by Safari, FF, Opera. Fast for drawing static images. Cons: No support for picture regeneration. Limited support for mouse selection. Usually available along with SVG, which makes its use questionable in some cases.

6 Web gfx: Silverlight Microsoft's answer to SVG and Flash. Pros: Finally something better than VML on IE! Multi-platform: «All major browsers on both Mac OS X and on Windows». Silverlight for Linux: Moonlight by Mono team. Rumored to replace VML in upcoming IE8. Cons: Built on SVG blueprints, yet incompatible. Not integrated with HTML DOM. Requires a download.

7 Web gfx: Flash The king of web graphics. Pros: Adobe: installed on ~98.7% browsers (Wikipedia). Mature, well-known technology. Multi-platform (including IE!). Cons: Multiple problems with interfacing to external JavaScript. Forces to move everything to the Flash. No integration with HTML DOM and other browser facilities.

8 Web gfx: Plug-ins All plug-ins may require a download! Major players: Java applet, ActiveX. Pros: Well-documented, mature, multi-platform. Employs «real» languages. Cons: Java applet: No integration with HTML DOM... ActiveX: Security issues, Windows IE-only technology...

9 Web gfx: HTML Simulation of vector graphics with absolutely positioned <div>s, or variations of this technique. Pros: Multi-platform, doesn't need plug-ins. Keeps everything in the familiar HTML/CSS domain. Cons: Restricts expressiveness. Consumes a lot of memory, slow.

10 DojoX GFX Loosely based on SVG concepts. Separation of concerns: Shape describes a geometry. Group is a special shape, which is used to combine other shapes. Fill describes how to fill a shape. Stroke describes how to draw an outline. Font defines how to render text shapes. Matrix describes a transformation. Surface defines a drawing area.

11 Shape Available shapes: Path (using the SVG path language). Rectangle (with rounded corners). Polyline/polygon. Ellipse. Convenient shapes: Circle. Line. Image. Text. TextPath (highly experimental).

12 Fill Solid fill. Any color object would do: «red», «0xF00», «0xFF0000» «rgb(255, 0, 0)», «rgba(255, 0, 0,1)» {r: 255, g: 0, b: 0, a: 1}, [255, 0, 0, 1] Linear gradient Supports multiple color steps + line. Radial gradient Supports multiple color steps + center + radius.

13 Stroke Supports color, thickness, caps, and joins. Styles: Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot. Caps: Butt, Round, Square. Joins: Round, Bevel, Miter (specified by a number).

14 Font Supports family, style, variant, weight, and size. Styles: Normal, Italic, Oblique. Variants: Normal, Small-caps. Weights: Normal, Bold,

15 Matrix Traditional 2D matrix. Numerous helpers: Constants: identity, flipx, flipy, flipxy. Translation: translate(). Rotation: rotate(), rotateg(), rotateat(), rotategat(). Scaling: scale(), scaleat(). Skewing: skewx(), skewxg(), skewxat(), skewxgat(). skewy(), skewyg(), skewyat(), skewygat(). Normalization, combination, inversion.

16 Group & Surface Group: Used to combine several shapes together. It is possible to have embedded groups. Supported operations: Surface: Matrix transformations. Event processing. Propagation of default fills and strokes is planned. Hosts a drawing area. Serves as a top-level group for all shapes.

17 Notes DojoX GFX takes advantage of JavaScript: All descriptor objects are JSON-compatible. Opens a possibility of network streaming. Almost all setters are chained. Example: surface.createrect(r).setfill(f).setstroke(s); Duck-typing is used almost everywhere. Example: shape.settransform({dx: 10, dy: 10}); Supports a wide variety of color representations. Separates geometry from visual parameters. Keeps all relevant information together. Easy to define a palette or theme (used in charting).

18 Demo

19 Upcoming More backends. We need to support IE better. Animation. Native animation APIs (SVG, Silverlight). Fall back to Dojo animation facilities (VML). DojoX GFX 3D Restricted subset of 3D graphics. Geared towards charting. DojoX Charting New and improved.

20 DojoX GFX 3D Google Summer of Code 2007 project. Student: Kun Xi. Graduate student of the George Washington University. Majored in Computer Engineering. Previous project: Dojo Summer of Code 2006 Dojo GFX.

21 DojoX GFX 3D pics Demonstration of some techniques.

22 DojoX Charting Google Summer of Code 2007 project. Student: Neil Joshi. Graduate student. Majored in Electrical Engineering. Supervisor: Tom Trenka. Veteran developer with SitePen. Owner of DojoX Charting module.

23 DojoX Charting Demo Demonstration of technical prototypes.

24 Questions????????????