Handling of a SVG representation with Java's Text Listeners?

[lbrtchx]

Hi,
~
say you have some text (on an html page or inside a javax.swing text
container) and some graphics based on SVG relating to the text. How
could you handle events on the textual part and produce actions on the
graphic part? Let me clarify that a bit more. Say you have a sentence
like this
~
Triangles have 3 sides and three angles, e.g., for the one
represented on the picture the sides are AB, BC and CA and the angles
are <(AB, AC), <(BA, BC) and <(CA, CB)
~
Now, I would like for the pictures components to be highlighted when
the user hovers the mouse over each of the components of the triangle
~
This application will be part of an applet or a java webstart app.
And, of course, the text is not editable by users
~
How can you achieve this? Any examples out there you could lead me
to?
~
Thanks
lbrtchx

 

[John B. Matthews]

Say you have some text (on an html page or inside a javax.swing text
container) and some graphics based on SVG relating to the text. How
could you handle events on the textual part and produce actions on
the graphic part? Let me clarify that a bit more. Say you have a
sentence like this

Triangles have 3 sides and three angles, e.g., for the one
represented on the picture the sides are AB, BC and CA and the angles
are <(AB, AC), <(BA, BC) and <(CA, CB)

Now, I would like for the pictures components to be highlighted when
the user hovers the mouse over each of the components of the triangle

This application will be part of an applet or a java webstart app.
And, of course, the text is not editable by users

How can you achieve this? Any examples out there you could lead me
to?

Here's an example that determines if a polygon contains a point:

<http://sites.google.com/site/drjohnbmatthews/point-in-polygon>

Just cover each desired component with a polygon. Highlight the
component that contains the current mouse point.

 

[Sigfried]

(e-mail address removed) a écrit :

Hi,
~
say you have some text (on an html page or inside a javax.swing text
container) and some graphics based on SVG relating to the text. How
could you handle events on the textual part and produce actions on the
graphic part? Let me clarify that a bit more. Say you have a sentence
like this
~
Triangles have 3 sides and three angles, e.g., for the one
represented on the picture the sides are AB, BC and CA and the angles
are <(AB, AC), <(BA, BC) and <(CA, CB)
~
Now, I would like for the pictures components to be highlighted when
the user hovers the mouse over each of the components of the triangle
~
This application will be part of an applet or a java webstart app.
And, of course, the text is not editable by users
~
How can you achieve this? Any examples out there you could lead me
to?

You must be able to get the View corresponding to the picture tag in
html. Then you calulate if the mouse is in one component/picture, an
highlight image by inverting its colors for example.

 

[Tom Anderson]

~
say you have some text (on an html page or inside a javax.swing text
container) and some graphics based on SVG relating to the text. How
could you handle events on the textual part and produce actions on the
graphic part? Let me clarify that a bit more. Say you have a sentence
like this
~
Triangles have 3 sides and three angles, e.g., for the one
represented on the picture the sides are AB, BC and CA and the angles
are <(AB, AC), <(BA, BC) and <(CA, CB)
~
Now, I would like for the pictures components to be highlighted when
the user hovers the mouse over each of the components of the triangle
~
This application will be part of an applet or a java webstart app.
And, of course, the text is not editable by users
~
How can you achieve this? Any examples out there you could lead me
to?

I wouldn't use java at all. I'd do the text in HTML, and the image in SVG
or PNG. I'd do the highlighting with javascript: put the key phrases in a
span element, and attach an event handler to each that triggers
highlighting of the relevant bit of the page.

If you use a PNG image, that's as simple as showing or hiding (using CSS)
a transparent image that overlays the main image - you could have a
separate one for each highlight, each exactly the same size as the main
image, each being completely transparent in most of the image, and having
a partially-transparent coloured bit where you want the highlight to be.
Alternatively, create a single small partially-transparent coloured image
for the highlight, and set its position differently for each highlight.

I'm not sure how you do it with SVG - i know nothing about that.

You should even be able to do all this without any javascript, just using
CSS:

http://meyerweb.com/eric/css/edge/popups/demo2.html

If you can figure out how to get the 'popup' images to be positioned
relative to your diagram, rather than the description text. I *think* you
can do this by nesting the diagram and description inside some element (eg
a div), setting the popup to have position: absolute, and the containing
div or whatever to be position: relative with offsets of zero, while
leaving the description with default (ie static) position. Using relative
position with zero offsets for the container has the same visual effect as
static position, ie it will be laid out in the normal way. The key thing
is that when an element is laid out with position: absolute, it's
positioned with respect to a 'containing block', and the containing block
is the nearest ancestor that has non-static position. Thus, when looking
for that ancestor, the description will be ignored, and the enclosing
container will be found. You may then need to pay attention to the padding
that comes between the container and the image.

tom

 

[lbrtchx]

~

http://sites.google.com/site/drjohnbmatthews/point-in-polygon

~
But the chart is not built using svg I just tried making the page
smaller/larger and it didn't change accordingly
~
Again, I would like for:
~
1) the whole chart be based on SVG
~
2) Listen to events in the textual components
~
3) accordingly change the xml describing the SVG
~
4) tell the browser to "refresh" the chart
~
So, do you know of such a similar thing?
~
Thanks
lbrtchx

 

[John B. Matthews]

But the chart is not built using svg.

Your original post did not mention charts.

I just tried making the page smaller/larger and it didn't change
accordingly.

Exactly. The AffineTransform that scales the polygon in my example is
applied during initialization. Yours would have to be applied when the
component is resized:

<http://java.sun.com/javase/6/docs/api/java/awt/event/ComponentListener.h
tml>

Again, I would like for:

1) the whole chart be based on SVG

2) Listen to events in the textual components

3) accordingly change the xml describing the SVG

4) tell the browser to "refresh" the chart

So, do you know of such a similar thing?

I've used JFreeChart in a similar way. It understand it can be
integrated with Batik:

<http://www.oracle.com/technology/pub/articles/marx-jchart.html>
<http://xmlgraphics.apache.org/batik/>