Dylan Schiemann

Ajax World Expo 2007

March 20, 2007

History of the graphical web: Chapter 1

• ascii art
• <img>
• Animated gif
• JavaScript and CSS
• But no ability to natively draw arbitrary shapes

History of the graphical web: Chapter 2

• Flash (not the Open Web)
• VML in IE
• SVG with Adobe plug-in

History of the graphical web: Chapter 3

• VML in IE (still)
• Native SVG in Firefox, Opera, and Webkit
• Native Canvas in Firefox, Opera, and Safari
• Complex, frustrating, and inconsistent across browsers...

...But Possible!

• dojo.gfx and others
• Handle cross-browser compatibility issues
• Consistent API across competing technologies
• Easy to mix (X)HTML with vector graphics
• Ability to manipulate and connect events to arbitrarily drawn and styled shapes

Example: Slideshow Navigation

// add a text label var textShape0 = group.createTextPath({text: "introduction"}) .moveTo(125, 70) .lineTo(285,20) .setFont({family: "Verdana", size: "1em"}) .setFill("black"); // create a rectangle var rect= { x: 360, y: 180, width: 200, height: 100, r:15 }; // add rect to drawing surface group group.createRect(rect) .setStroke({color: [0, 0, 255, 0.5], width: 2, cap: "butt", join: 2}) .setFill([0, 0, 255, 0.1]) .applyTransform(dojo.gfx.matrix.identity);

Example: Dojo Clock Widget

Palo Alto, CA

Austin, TX

New York, NY

London, UK

<script type="text/javascript" src="dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.Clock"); ... </script> <div dojoType="clock"></div>

Code Fragment: Clock Hour

// _initPoly adds coords to create a path on a node/surface) this.shadows.hour.shadow = this._initPoly(this.surface, hP) .setFill([0, 0, 0, 0.1]); this.hands.hour = this._initPoly(this.surface, hP) .setStroke({color: this.handStroke, width:1 }) .setFill({ type:"linear", x1:0, y1:0, x2:0, y2:-27, colors:[ {offset:0, color:"#fff"}, {offset:0.33, color:this.handColor} ] });

Example: Charting

• Dojo Charting
  

• PlotKit
  

Example: XDraw

• Web-based drawing tool

Example: Draggable Circles

dojo.gfx in depth

• cross-platform declarative interactive graphics package
• follows SVG loosely as the underlying model
• SVG and VML back-ends are implemented
• dojo.gfx has a simple declarative model

dojo.gfx primitives

• coordinates
• matrices/transformations
• colors

more dojo.gfx primitives

• surfaces
• groups
• z-index and stacking order is bottom to top

dojo.gfx features

• strokes and fills
• shapes and paths
• text
• images
• opacity
• rounded corners

Obstacle: Authoring Environment

• No visual environment (yet) for dojo.gfx
• Illustrator exports to SVG
• Possible to take paths and use them in gfx

var path = "M 100,100 l 10,-10 5,-2 12,-5 c -2,-28"; var stroke = {color: "blue", width: 2, cap: "butt", join: 2}; shape11.createPath(path) .setStroke(stroke) .applyTransform(dojo.gfx.matrix.identity);

Obstacle: Browser Performance

• Testing based on number of nodes, gradients, transformations, etc. First to Worst:
• Safari WebKit Nightly
• Opera 9
• Firefox 3 Alpha
• Firefox 2
• Firefox 1.5
• ...
• IE 6 and 7

Obstacle: It's early

• Need more examples/best practices
• Higher level APIs in addition to charting
• Separation of presentation and content
• Accessibility
• Complexity

Ostacle: Ubiquity

• Make dojo.gfx work easily with other toolkits
• jQuery, Prototype, Tibco GI, YUI, etc.
• No need to reinvent the wheel

Why not canvas?

• lacks a true DOM
• cannot easily attach DOM events to a specific node or layer in a drawing
• more appropriate for drawing that for an application interface

dojo.gfx hybrid solutions

• gfx and html
• gfx with flash
• gfx with server-side image generation

Example: Google Maps

• Drawing Directions
• Paths show up when printing, unlike CSS background images

Opportunities

• comet + gfx = real-time collaborative applications
• drawing and CAD tools
• diagrams and mind maps
• maps and floorplans
• etc.

Thanks!

Special thanks to:

• Gavin Doughtie
• Eugene Lazutkin
• Torrey Rice
• Tom Trenka
• Kun Xi
• Greenplum
• Mozilla Foundation
• SitePen
• ...and the entire Dojo developer community