I looked at some source for a Maestro diagram and saw that it appears to use a JavaScript library for constructing the diagrams.

Would W3C standard Scalable Vector Graphics (SVG) be more suitable. JavaScript/AJAX/JQuery could still be used for handling UI events and for manipulation of the SVG DOM to fulfil the user's actions to edit their diagram.

Thoughts?

Comments

_randy’s picture

_randy commented

Patches are welcome :-)

Its been a while, but quite some time ago I was pondering whether to rewrite the interface with svg or not. I now also question whether svg is the right way or if an HTML5 canvas is better.

therobyouknow’s picture

therobyouknow commented

Thanks @_randy for reading my comments. Yes I would be happy to first learn about the workings of Maestro and the structure of the data in the database in order to make a patch to produce a SVG version of Maestro that constructs SVG from the database records.

Some more detailed thoughts on why I prefer SVG instead of HTML5 canvas for this particular application because:

  • it is W3C standard markup to represent the shapes, which will use the browser's built-in standard routines for rendering
  • the page performance may be improved due to less code needed to render the graphics (no need for custom rendering libraries, only JQuery-based code should be needed to handle input events from user)
  • the page can be exported as svg, into presentations, documentation etc
  • the graphics can be styled efficiently using CSS to style the SVG: lines can be made thicker or thinner, color changes, sizes and styles to the graphical objects. All of which can be done globally referring to the class attribute of the markup. Great for user's preferences and accessibility
  • the page may even be more responsive and efficient as it may make the most of the browser's common way for internally managing the XML DOM Objects, rather than a custom set of code with its own management system
  • the graphics should look good at any resolution, being vectored, with anti-aliasing available as well, zooming in and out will be more easier to implement (SVG Transformations) as would bulk changes (rotates etc.) also validations are easier to implement,e.g. to check that objects don't overlap etc. Ordinary 2D Graphics maths can be applied to help these things
  • the markup is accessible in standard ways and therefore functionality can be extended using standard tools, e.g. adding JQuery code to animate the diagrams
therobyouknow’s picture

therobyouknow commented

http://raphaeljs.com may be a suitable replacement for the HTML5 Canvas (bitmapped) that appears to be currently used by Maestro. The site is user-friendly: clear points about the features, well documented it seems and MIT license.

A sibling of Raphael is this (also from Sencha labs)
http://philogb.github.com/jit/demos.html

Others are:
http://irunmywebsite.com/raphael/additionalraphael.php
http://stackoverflow.com/questions/7034/graph-visualization-code-in-java...