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 (Firefox, Opera, Webkit/Safari 3 beta).
–
VML (IE6, IE7).
–
Silverlight (IE6, IE7, Firefox, Safari).
–
Design decisions were driven by pragmatic
●
considerations.
Let's review what's available.
●

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

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.
–

Web gfx: Canvas
Part of HTML5 by WHATWG.
●
Implements a procedural interface.
●
Pros:
●
Implemented by Safari, Firefox, 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.

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.
–

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.
●

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...
●

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.
–

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.
–

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).
–

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.
–
Tiled pattern.
●

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).
–

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

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, and so on.
–

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

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).
●

Demo

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.
–

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.

DojoX GFX 3D pics
Demonstration of some techniques.
●

DojoX Charting
Google SoC 2007 project.
●
Student: Neil Joshi.
●
Graduate student of Ryerson
–
University in Toronto, ON, Canada.
Majored in Electrical Engineering.
–
Supervisor: Tom Trenka.
●
Veteran developer with SitePen.
–
Owner of DojoX Charting module.
–

Charting demo
Demonstration of technical prototypes.
●

Questions
????
????
????