Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

6,693 views

Published on

Eugene Lazutkin's keynote on DojoX GFX at SVG Open 2007.

(The seminar notes are here: http://www.slideshare.net/elazutkin/dojox-gfx-session-eugene-lazutkin-svg-open-2007/)

Published in: Technology, Art & Photos
  • Trust me: it is not easy to write a renderer split between js and flash. We tried, and continue trying. But you can always prove me wrong and submit a patch --- working code speaks louder than words. ;-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

  1. 1. 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. ●
  2. 2. 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. –
  3. 3. 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. –
  4. 4. 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.
  5. 5. 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. –
  6. 6. 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. ●
  7. 7. 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... ●
  8. 8. 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. –
  9. 9. 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. –
  10. 10. 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). –
  11. 11. 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. ●
  12. 12. 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). –
  13. 13. Font Supports family, style, variant, weight, and size. ● Styles: ● Normal, Italic, Oblique. – Variants: ● Normal, Small-caps. – Weights: ● Normal, Bold, 100-900. –
  14. 14. 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. –
  15. 15. 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. –
  16. 16. 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). ●
  17. 17. Demo
  18. 18. 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. –
  19. 19. 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.
  20. 20. DojoX GFX 3D pics Demonstration of some techniques. ●
  21. 21. 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. –
  22. 22. Charting demo Demonstration of technical prototypes. ●
  23. 23. Questions ???? ???? ????

×