Dynamic SVG with Ruby/Tk

[Yotta Meter]

The example I'm looking for in regards to ruby/SVG differs from the
previous questions. I have an SVG document generated from Adobe
Illustrator, and I'd like to not only display the SVG document using
ruby, I'd like to modify it within the ruby program and re-display the
image.

As an example, say I have two nodes connected with and edge, node0,
node1, and theEdge. In Illustrator I draw the two nodes and edge with
the color black. I write out the file to file.svg

I'm able to to open the file in a web browser and view the image
correctly.

For ruby, I'd like to be able to use Tk to show the image on a canvas.
Once an event is processed, I'd like to change the color of node0 to red
from black, with node1 and theEdge staying black. I'm assuming I could
use REXML to change the property of node0. My hope is then to re-display
the SVG image, replacing the original.

Ideally I'd like to be able to detect mouse over events on individual
elements of the SVG document.

I'm going to start attempting to do this - if I am going down a rathole,
I'd appreciate feedback!

Thanks in advance.

 

[Arndt Roger Schneider]

The example I'm looking for in regards to ruby/SVG differs from the
previous questions. I have an SVG document generated from Adobe
Illustrator, and I'd like to not only display the SVG document using
ruby, I'd like to modify it within the ruby program and re-display the
image.

As an example, say I have two nodes connected with and edge, node0,
node1, and theEdge. In Illustrator I draw the two nodes and edge with
the color black. I write out the file to file.svg

I'm able to to open the file in a web browser and view the image
correctly.

For ruby, I'd like to be able to use Tk to show the image on a canvas.
Once an event is processed, I'd like to change the color of node0 to red
from black, with node1 and theEdge staying black. I'm assuming I could
use REXML to change the property of node0. My hope is then to re-display
the SVG image, replacing the original.

Ideally I'd like to be able to detect mouse over events on individual
elements of the SVG document.

I'm going to start attempting to do this - if I am going down a rathole,
I'd appreciate feedback!

Thanks in advance.

Jeszra
http://jeszra.sourceforge.net/

can import and export from and to SVG & Tk.
A DOM-tree is being used for importing SVG in Tk.
The approach is however somewhat different from
your description --I assume you do want to tightly couple
SVG and Tk?

Jeszra always generates code, which in turn generates the
graphics--allowing code-reviews on both sides.

SVG is saturated with features, only a subset of
which can be mapped 1:1 in Tk, and forget the Tk canvas.

Jeszra's code generation targets tkpath 0.2 or 0.3 when importing SVG,
and exports from tk canvas, tkpath, tkzinc, text ...

There is some perl-code, on cpan, available to import SVG
into tkzinc... the project is abondend and incomplete.
There is another SVG export project, from Tk canvas,
written in python (search the tkinter wiki).


Technically not yet feasible:
clippath, textpath, mpath, marker, tref,
filters, pattern, user model for radial gradients.
SVG-fonts, smil.

http://jeszra.sourceforge.net/jeszra/vectordesign.html
http://jeszra.sourceforge.net/jeszra/Jeszra_TechnicalNotes.html#d0e9905

-roger

 

[Yotta Meter]

Maybe I can read the file.svg, modify it, and then write it as a temp
file, and then import it using Jeszra?

I guess I'm not clear on the code generation - I just think of svg as
sort of a text based bitmap. I'll have to take a look at it and try it
out.

 

[Yotta Meter]

Jeszra looks like a GUI Builder - it's interesting, but really I'm just
planning a simple canvas, and would like the ability to put SVG images
on that canvas, modify them, then re-render.

I'll probably look at Jeszra for another problem though, thanks.

 

[Mark T]

Ruby is the Right language for pretty much everything.
Though if the delivery vehicle for your project could be a browser,
then javascript is your buddy here.
You really get the most.best interactive options built-in.

For web-experiments, Inkscape + Firefox => 3.6 (DragDrop) +
http://eazscape.com/eazup is a scratchpad.

MarkT

 

[Yotta Meter]

I agree - I was planning two applications, one in Ruby, and one in
javascript. I actually prefer working with Flex for web applications,
but Adobe seems to not be going in the direction of SVG.

The ruby application is going to render SVG, and connect to another
program via a socket for control.

 

[Arndt Roger Schneider]

Maybe I can read the file.svg, modify it, and then write it as a temp
file, and then import it using Jeszra?

Yes,
but with the mentioned restrictions.
There is not one feature complete SVG 1.1 application, today.
The best coverage has sqiuggle (java, based on batik).

I guess I'm not clear on the code generation - I just think of svg as
sort of a text based bitmap. I'll have to take a look at it and try it
out.

SVG is vector graphics, not a bitmap, it does not create a bitmap.
When using cairo and xrender (under X11) a lot of the graphic
processing can be delegated to the GPU--which is what Microsoft is
currently doing with IE9-- in an ideal world all the SVG
processing could be handled by a GPU.

The difference to a bitmap (raster image)
is its scalability --hence Scalable Vector Graphics.

-roger

 

[Arndt Roger Schneider]

Jeszra looks like a GUI Builder - it's interesting, but really I'm just
planning a simple canvas, and would like the ability to put SVG images
on that canvas, modify them, then re-render.

There are no SVG-images, but you can use raster images inside of
SVG!

Jeszra combines GUI-building with vector graphics.
The code generation is a separate problem --and completely
insolated within a Jeszra project.

Actual, the code generation can be used outside of Jeszra.
There is an example for this inside the documentation:

http://jeszra.sourceforge.net/jeszra/Jeszra_Environment.html#usetdom

I'll probably look at Jeszra for another problem though, thanks.

-roger

 

[Arndt Roger Schneider]

I agree - I was planning two applications, one in Ruby, and one in
javascript. I actually prefer working with Flex for web applications,
but Adobe seems to not be going in the direction of SVG.


http://code.google.com/p/svgweb/

The ruby application is going to render SVG, and connect to another
program via a socket for control.

I agree with Mark that SVG is important for web-deployment.
Javascript however is a last resort. Most, if not all, interactions can
be encapsulated inside of SVG and SMIL. There is very little need for
Javascript--which is also good for a cross-language approach.

-roger

 

[Yotta Meter]

I agree with Mark that SVG is important for web-deployment.
Javascript however is a last resort. Most, if not all, interactions can
be encapsulated inside of SVG and SMIL. There is very little need for
Javascript--which is also good for a cross-language approach.

-roger

Long term I really need individual event handling on each node of the
SVG document, which is why I wouldn't put interactions within the SVG
doc.

Thanks for explaining the difference between bitmaps and vector based
images. I have a beginner 'black box' view of what I want, an image that
is essentially a set of objects that I can modify properties on at
runtime. I'm assuming SVG is the only technology that will give me this.

 

[Arndt Roger Schneider]

Long term I really need individual event handling on each node of the
SVG document, which is why I wouldn't put interactions within the SVG
doc.

SVG grants this type of access.
Event handling is an integral part of the SVG specification.
If the job gets more complex use SMIL.
Javascript or rather direct DOM manipulation is needed to
communicate to the outside world.

--Don't think in graphical terms here, SVG is more than that.

Thanks for explaining the difference between bitmaps and vector based
images. I have a beginner 'black box' view of what I want, an image that
is essentially a set of objects that I can modify properties on at
runtime. I'm assuming SVG is the only technology that will give me this.

Depends on what your requirements are, SVG has many predecessors.
Very likely every visualization system could perform the required task...
but SVG has the potential to become the lingua franca of vector graphics and
graphical user interfaces.

-roger

 

[Yotta Meter]

Ok, I'm really drinking your Kool-Aid and really want to believe every
visualization system could perform this task, but I'm not seeing it.

For instance, in Qt they can only render SVG. Can it accept javascript
wrapping SVG and handling event? The same for Flex.

If you're interested I could show you what we are doing in our startup,
maybe that would give you a better idea.

 

[Yotta Meter]

If anyone is in the silicon valley area would be able to show me how to
capture mouse events over individual elements on an SVG graph using
either flex or Qt I'd pay $50/hour.

 

[Ahmed Eldawy]

There's a new gem called Rasem.
https://github.com/aseldawy/rasem
It can be used to generate SVG images dynamically from your ruby code.
Currently, it doesn't support editing existing SVG images. However, if
your images are simple, you can totally render it from your ruby code.