Contributed by tiagocardoso
-
Svg Editor Demo [JS]
Here at inEvo.pt we have been working hard on ColaDI (site soon). This is a project that will innovate in Design Content Management and Collaboration, adding real-time collaboration and discussion, 2D and 3D retrieval and web-based content management interface.
An essential part of design collaboration is the means to draw and edit graphical content. We already built a Flash SVG editor, but on this project we wanted to go with HTML5.
As the past post on our Labs showed, we are working on a Javascript (GWT) SVG Editor. This will work directly with the SVG from the browser so it works purely over HTML5. Therefor, this can be used on Ipad, Android and most browsers – by now we have only tested it on Firefox and Chrome -.
We are presenting a short demo video and a live demo so you can try it out. Remember that this is a work in progress so it's natural to have some bugs. Nevertheless, we wanted to show our present work here on the Labs and we are also very pleased with the results so far.
This library (pure svg editor, just SVG and JS on the browser) was built with GWT so you can add it to your GWT projects or just use it as Javascript on other frameworks.
If you have a project that could benefit from this, please contact us.
Without further ado, here is the demo video.
Now for the Live Demo!
Just some information first of what it can do for now:
- Enables some primitive creation like freehand drawing, rectangles and circle.
- Has a shape recognition engine so by hand drawing shapes it will recognize and change your paths to triangles, rectangles, circles, ellipses, lines, diamonds, etc.. You can turn off this feature using the check box.
- Elements selection, move, rotate, scale. Press Control to multiselect elements. Also group, ungroup, send back, bring forwards and delete elements.
- Camera panning, zooming and rotation. Press Control to zoom and Shift to rotate as an alternative to the radio buttons.
- Style options: fill color and opacity, stroke color, opacity and width;
- You can copy-paste some SVG to the text area and press “Import SVG” to add it to the scene.
- Real-time SVG update on the text area as you edit the scene. Please, turn it off using the Check Box as this will slow down edition operations.
If you notice some bugs, please let us know.
Enjoy.
Leave a Comment
-
inEvo's Posterous
-
Comments 10 Comments
Would be nice if del key deleted objects.
I like the ability to draw primitives -- could we have :
- arrows
- text
- draw symbols
@pdw the triangle recognition also isn't working on my chrome. It works on Firefox 3.6 though. Thanks for the bug info :)
Arrows are actually recognized, but we are not creating it by now. Text is a must have for sure ;)
Had some issues on Lucid Lynx / Chromium: Drawing rectangles, ellipses and triangles is rather hard. Sometimes objects are deleted when form recognition is on.
Gonna share this work. Thanks for showing this demo.
Checkout binfire.com we got there a real-time collaborative(what you draw is updated in real-time to other users who are viewing/editing the same board) whiteboard with layers and more drawing options.
here is a explanation of our whiteboard:
http://www.binfire.com/userguide/userguide-project-whiteboard/
sign up(free!) to use the whiteboard.
The whiteboard seems very interesting. Thanks for that. Does it use vector graphics or canvas raster ? The graphical information model is in SVG or another proprietary format ? What are you using for collaboration over the server ?
Thanks :)
I also got a milestone :) last time i tried Firefox 4 it was so slow,is it better now?
The whiteboard uses RaphaelJS which in turn uses SVG or VML(depending on platform) so it is vector graphics.
It is saved on the server as a collection of json objects.
For collaboration we use our own home-built comet server built with python and gevent.
we open sourced it few days ago :)
https://github.com/urielka/shaveet