Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

6.713 Aufrufe

Veröffentlicht am

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/)

Veröffentlicht in: Technologie, Kunst & Fotos
  • 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. ;-)
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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 ???? ???? ????

×