1. HTML5 Diagramo - Real world example OSCON, Birds of Feather, July 28, 2011

2. Lack of advance geometry library to build vector like applications Whenever you draw something in is lost if you just repaint it. You need to store what you paint.

3. So, I started to make one out of scratch Point Polyline Polygon Line Ellipse QuadCurv e CubicCurve Figure Path Arc

4. Who start to use it?

5. The mighty Point function Point(x, y) {...... } var p = new Point(10,13)

6. Line function Line(startPoint, endPoint){.... } var p1 = new Point(10, 10); var p2 = new Point(30, 40); var l = new Line(p1, p2);

7. Cubic Curve function CubicCurve(startPoint, controlPoint1, controlPoint2, endPoint) {.. } var sp = new Point(10, 10); var cp1 = new Point(14, 15); var cp2 = new Point(30, 40); var ep = new Point(50, 50); var curve = new CubicCurve(sp, cp1, cp2, ep);

8. Figure ( one shape to rule them all ) ● Figure is more or less a container that keeps a set of primitives (points, lines, etc) ● Composite pattern used for: transformations, near and paint algorithms

9. Painting engine ● All figures are painted from bottom to top ● “Dirty object” pattern – repaint ONLY if changes occured.

10. Connectors ● Very difficult to implement ● 2 types : straight and jagged

11. Export to SVG ● First export to SVG ● Then convert SVG to whatever format you want ● Composite pattern used to generate the SVG

12. New features ● Image support → load from URL (upload might come) ● SVG support → Last browsers supports this well ● Organic connectors → rounded connectors

13. Download it Download it and install it on your server. You ONLY need a LAMP stack. Online accounts are suspended :( for now until new release will be available.

14. Thank you! Visit http://diagramo.comhttp://diagramo.com Follow us on Twitter @diagramo