DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

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

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

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

Similar to DojoX GFX Keynote Eugene Lazutkin SVG Open 2007 (20)

More from Eugene Lazutkin

More from Eugene Lazutkin (17)

Recently uploaded

Recently uploaded (20)

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007