web vector graphics

© SitePen, Inc. All Rights Reserved

A Journey Through Web Vector Graphics

Dylan Schiemann (@dylans)SitePen, Inc.London Ajax, October 12, 2010

Saturday, October 16, 2010


ajax bsd ceo comet cometdaily conferences

cynic dojo dylan @dylans hiring

javascript open source schiemann

sitepen toolkit travel web www

dylan


http://tagcrowd.com/#tagcloud

































Topology and Rheology of Quasi Two-Dimensional Foam

1996

http://arxiv.org/pdf/cond-mat/9904101


http://www.physics.upenn.edu/liugroup/pubs/PRE.60.4385.pdf

http://www.physics.upenn.edu/liugroup/pubs/PRE.60.4385.pdf


Netscape 2-4: JavaScript, but no drawingI didn't like Java or Flash

1996-1999



Adobe SVG Viewer

2000-2001



SFW Accendo(NetWindows, SVG Viewer, custom JS code)

2003



2004

SVG Viewer dead, except in Adobe Acrobat

Adobe acquired an obscure vector graphics format

Preventing the death of SVG

http://dylanschiemann.com/2004/09/12/preventing-the-death-of-svg/

Dojo Toolkit development started







2005

Dojo 0.1 and 0.2

SVG Viewer

Not ideal

Mozilla

SVG through special builds

"One of the very first design decisions of which I was a proponent was that the Dojo Toolkit not be HTML-centric. After working on several SVG-based intranet applications, I was highly motivated to see Dojo work well with SVG and other namespaces that could become relevant in the future."



2006

"Before this project is launched, dojo’s developers have made significant progress to explore how to integrate SVG support. Another candidate for the back-end render engine is VML. There are two projects in dojo SoC 2006, dojo-svg & dojo-vml, a universal interface is developed to glue the Gfx API and various back-end rendering engine. I prefer dojo-svg, since VML is only rendered within Microsoft Internet Explorer, while SVG is supported natively by Mozilla Firefox 1.5+, or any browsers with Adobe SVG plugin." - Kun Xi


http://xdraw.org/

http://xdraw.org/

http://www.w3.org/Graphics/SVG/

http://www.w3.org/Graphics/SVG/

http://www.w3.org/TR/NOTE-VML

http://www.w3.org/TR/NOTE-VML

http://dojo.jot.com/SummerOfCode2006

http://dojo.jot.com/SummerOfCode2006

http://www.adobe.com/svg/viewer/install/main.html

http://www.adobe.com/svg/viewer/install/main.html


dojox.gfx (Thanks in part to Mozilla!)Bubbles, 10 years later! (Thanks Gavin Doughtie)

SVG and VML supporthttp://thinkvitamin.com/code/create-cross-browser-vector-graphics/

2006


http://thinkvitamin.com/code/create-cross-browser-vector-graphics/

http://thinkvitamin.com/code/create-cross-browser-vector-graphics/


2007-2010

Add support for <canvas>, Silverlight, SVGWeb

Base vector graphics APIs

Charting & real-time capabilities

Data store bindings

Drawing APIs



What is DojoX GFX?

JavaScript cross-browser graphics package

Support for SVG, Canvas, VML, Silverlight, and SVGWeb

Loosely based on SVG vocabulary

Geometry, shapes, transformation matrices

Stroke, fill, fonts, other visuals

Surfaces and groups

Interactive (events)

Optional SVG to JSON converter

Send user-created drawings to the server



dojox.gfx

DojoX Drawing

Normalized API

VMLSVG

Canvas Silverlight

DojoX Charting

SVGWeb

Render



Create

dojox.gfx.createSurface(node, width, height)

All drawing operations done through the surface object

Multiple surfaces in a document supported



Draw

Several shape primitives to choose from

Path, Polyline, Rect, Ellipse, Circle, Line

surface.create<shape>(params);



Style

<shape>.setFill to fill the object

<shape>.setStroke to outline the object (think CSS border)

fill with gradients



Transform

Common transformations available through dojox.gfx.matrix

flipX, flipY, flipXY, translate, scale, rotate/rotateg

skewX, skewY, reflect, project

shape.setTransform(dojox.gfx.matrix.flipX);

shape.applyTransform(dojox.gfx.matrix.translate(10,10));



Group

dojox.gfx.VirtualGroup used to group shapes together

can be treated as a single unit

var g= surface.createGroup();

g.add(shape);



Event

Using <shape>.getEventSource() to get a direct handle to underlying nodes

"Old school" event handling functions expect a normalized event object

Connect handlers to event sources:

dojo.connect(shape.getEventSource(),“onmousedown”, onMouseDown);



Example

Fun with the London Ajax logo



DojoX Charting Library

Dojo’s primary charting library is within DojoX

Can use DojoX’s gfx library to create animated effects

Dozens of themes included, supports custom theming and gradation themes

Zooming, panning, and scrolling capabilities

Supports chart events

Support for SVG, VML, Canvas, Silverlight, and other technologies

Support for 2D and 3D charts

Integration with Dojo data stores

Turns boring, static data into something readable and visually appealing.



Chart Types

Line Charts

Stacked Line Charts

Bar Charts

Column Charts

Pie Charts

Scatter Charts

Grids

Charts can be created declaratively or programmatically.



Chart Pieces

“Chart” - the object which will house the other pieces of the chart

Theme - the series of colors and/or gradation information for the chart’s pieces, lines, and markers

Plots - describe how data is to be visualized

Axes - the dimensions of data that are being visualized and includes things like specifying labels

Series - describes the Data itself that the chart will visualize

Markers - shapes placed at key points within data

Extras - additional “plugin” functionalities for the chart



Chart Plugins and Effects

Tooltip - Shows a tooltip when a chart piece is hovered over

Highlight - A hover color effect when hovering over a chart piece

Magnify - Magnifies a marker when hovered over

MoveSlice - Animates a pie slice when hovered over

Shake - Shakes a given chart piece when hovered over



Create a Basic Pie Chart - Declaratively



Basic Chart Theme Creation (cont.)



Create a Basic Column Chart - Programatically


web vector graphics

Technology