0
What is DojoX GFX?
    It's a cross-platform vector graphics package
●

    written in JavaScript.
    Frequently referenc...
Web gfx: VML
    Microsoft submitted VML to W3C in 1998.
●


        Since then it was augmented several times.
    –

   ...
Web gfx: SVG
    You know SVG, right?
●


    Pros:
●


        Mature, feature rich, well-documented.
    –

        Ther...
Web gfx: Canvas
    Part of HTML5 by WHATWG.
●


    Implements a procedural interface.
●


    Pros:
●


        Implemen...
Web gfx: Silverlight
    Microsoft's answer to SVG and Flash.
●


    Pros:
●


        Finally something better than VML ...
Web gfx: Flash
    The king of web graphics.
●


    Pros:
●


        Adobe: installed on ~98.7% browsers (Wikipedia).
  ...
Web gfx: Plug-ins
    All plug-ins may require a download!
●


    Major players: Java applet, ActiveX.
●


    Pros:
●


...
Web gfx: HTML
    Simulation of vector graphics with absolutely
●

    positioned <div>s, or variations of this technique....
DojoX GFX
    Loosely based on SVG concepts.
●


    Separation of concerns:
●


        Shape describes a geometry.
    –...
Shape
    Available shapes:
●


        Path (using the SVG path language).
    –

        Rectangle (with rounded corners...
Fill
    Solid fill.
●


         Any color object would do:
     –

              «red», «0xF00», «0xFF0000»
          ●
...
Stroke
    Supports color, thickness, caps, and joins.
●


    Styles:
●


        Solid, ShortDash, ShortDot, ShortDashDo...
Font
    Supports family, style, variant, weight, and size.
●


    Styles:
●


        Normal, Italic, Oblique.
    –

  ...
Matrix
    Traditional 2D matrix.
●


    Numerous helpers:
●


        Constants: identity, flipX, flipY, flipXY.
    –

...
Group & Surface
    Group:
●


        Used to combine several shapes together.
    –

             It is possible to have...
Notes
    DojoX GFX takes advantage of JavaScript:
●


        All descriptor objects are JSON-compatible.
    –

        ...
Demo
Upcoming
    More backends.
●


        We need to support IE better.
    –

    Animation.
●


        Native animation A...
DojoX GFX 3D
    Google Summer of Code 2007
●

    project.
    Student: Kun Xi.
●


        Graduate student of the Georg...
DojoX GFX 3D pics
    Demonstration of some techniques.
●
DojoX Charting
    Google SoC 2007 project.
●


    Student: Neil Joshi.
●


        Graduate student of Ryerson
    –
   ...
Charting demo
    Demonstration of technical prototypes.
●
Questions


????
????
????
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
Upcoming SlideShare
Loading in...5
×

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

6,220

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
1 Comment
6 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
6,220
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
251
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "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 ???? ???? ????
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×