DojoX GFX Keynote Eugene Lazutkin SVG Open 2007

  • 6,099 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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. ;-)
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,099
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
250
Comments
1
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Font Supports family, style, variant, weight, and size. ● Styles: ● Normal, Italic, Oblique. – Variants: ● Normal, Small-caps. – Weights: ● Normal, Bold, 100-900. –
  • 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. 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. 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. Demo
  • 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. 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. DojoX GFX 3D pics Demonstration of some techniques. ●
  • 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. Charting demo Demonstration of technical prototypes. ●
  • 23. Questions ???? ???? ????