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

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

? ? ? ? ? ? ? ? ? ? ? ?