Dylan Schiemann

SXSW 2007

March 10, 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
• It's early

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"); ... <div dojoType="clock"></div>

Example: Charting

• Dojo Charting
  

• PlotKit
  

Example: XDraw

• Web-based drawing tool

Example: Google Maps

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

Current Obstacles

• No visual environment (yet) for dojo.gfx
• Not enough examples/best practices
• Make dojo.gfx work easily with other toolkits
• Improve performance in browsers

Thanks!

Special thanks to:

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