Embedding in Sage, background images, extensions / plugins

44 views
Skip to first unread message

Pat LeSmithe

unread,
Sep 4, 2009, 2:51:10 AM9/4/09
to svg-...@googlegroups.com

Hello,

SVG-edit is a cool project! I'm a contributor to Sage, a free
open-source mathematics system:

http://www.sagemath.org/

I posted a message to the Sage developers group about embedding SVG-edit
in the web-based Sage notebook:

http://groups.google.com/group/sage-devel/browse_thread/thread/86429406fb3bba17

The easiest way to try the notebook is to sign up for a free account at

http://www.sagenb.org/

Alternatively, try codenode:

http://codenode.org/

The basic idea is that users can interactively enter code and see the
results in their browser. For example, evaluating

x = var('x')
parametric_plot((cos(x), sin(x)^3), 0, 2*pi, rgbcolor = hue(0.6))

in a Sage notebook input cell will produce an image just below, in the
corresponding output cell.

We'd like to set up various interactive editors to open in an output
cell in response an input command, e.g.,

vector_editor(height=300, width=400)

or double-clicking on an image. I think other possible places to put an
editor are a floating div and a pop-up window. But we're definitely
open to suggestions. A couple of questions:

* Is it possible to insert a background image in SVG-edit dynamically,
either client-side or server-side?

* How do you recommend extending the editor or library to enforce a set
of constraints among objects on the canvas? Specifically, I'd like to
set up a mode for editing graphs (e.g., vertices and edges). I have
considered writing a simple dedicated graph editor with jQuery SVG

http://keith-wood.name/svgRef.html

but it might be better to take a more general approach. I should note
that we've already got a graph editor in development at

http://trac.sagemath.org/sage_trac/ticket/1321

This version relies on processing.js, which writes to a HTML5 canvas
element. However, it may be more appropriate for a graph editor to use
retained-mode vector graphics.

But there's no hurry, as it may be a while before I can take a closer
look at SVG-edit's code.

Thanks!

- Pat LeSmithe


Jeff Schiller

unread,
Sep 4, 2009, 9:34:28 AM9/4/09
to svg-...@googlegroups.com
Hi Pat,

On Fri, Sep 4, 2009 at 1:51 AM, Pat LeSmithe<qed...@gmail.com> wrote:
>
> SVG-edit is a cool project!

Thanks! As is Sage!

>  * Is it possible to insert a background image in SVG-edit dynamically,
> either client-side or server-side?

Some open issues that may be relevant:

http://code.google.com/p/svg-edit/issues/detail?id=39
http://code.google.com/p/svg-edit/issues/detail?id=56

Also, one of our users already figured out a nice way to do this for
tracing by modifying a line in our CSS:

http://code.google.com/p/svg-edit/wiki/FrequentlyAskedQuestions

We are quite open to suggestions and/or patches :)

For example, a function on the canvas that initializes it with various
properties (including background image) would be useful.

>
>  * How do you recommend extending the editor or library to enforce a set
> of constraints among objects on the canvas?  Specifically, I'd like to
> set up a mode for editing graphs (e.g., vertices and edges).  I have
> considered writing a simple dedicated graph editor with jQuery SVG

Interesting. We already have a separation between the SvgCanvas (the
drawable area) and the editor (toolbars, everything else). This is
done by the editor binding functions to various 'events' (not DOM
events) and the canvas 'firing' these events. So, for example, when a
change happens to an object (let's say a user drag-moves an ellipse),
the SvgCanvas does:

call("changed", theEllipse);

And the handler on the editor side receives the element that changed
and is able to update itself (for example, changing the x,y values in
the toolbars to match the ellipse's new position).

This allows us the svgcanvas.js code to be included in a variety of
projects (HTML editor, Firefox extension, Opera widget, Google Wave
gadget).

So it seems like you'd want to write your own layer on top of the
editor that binds to the changed event and then updates your formulas
or best-fit curve or whatever. Sound good? :)

>
> http://keith-wood.name/svgRef.html
>
> but it might be better to take a more general approach.  I should note
> that we've already got a graph editor in development at
>
> http://trac.sagemath.org/sage_trac/ticket/1321
>
> This version relies on processing.js, which writes to a HTML5 canvas
> element.  However, it may be more appropriate for a graph editor to use
> retained-mode vector graphics.

Though it may seem like an obvious statement, personally I agree ;)

Also you will benefit from our growing community.

Regards,
Jeff

Reply all
Reply to author
Forward
0 new messages