Inkscape Extensions

[gemlog]

I've been playing with the links and interactivity properties with a view to doing some AJAX with the thing now that I have some ski trails to play with. Poking around the net for examples of way to implement the js from within inkscape I found this extension site:

http://wiki.inkscape.org/wiki/index.php/Extension_repository

Down further I found something called jessielinks which may be of broader interest:

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

jessyink.googlecode.com/files/JessyInk_1_5_5_showcase.svg is their showcase file.

[gemlog]

I know I'm replying myself, but I'm very pleased with inkscape tonight.

I've been playing with javascript embedded in the svg file, since inkscape even gives a handy method for doing it. That and links.

Took me a while to get the syntax right for the svg xml. As well, I didn't realize I was going to overwrite the whole style attribute rather than only changing a part of it. I simply didn't know how much 'work' inkscape was going to do for me (or not). I was hoping it merged the change I guess.

At this point I can control any style attribute or position from an event. I think going forward it will be much easier simply doing that kind of work directly on the svg file in a text editor though.

This is the basic syntax for if you guys want to play with svg files in your browser or on your websites:

Code:

evt.target.setAttribute("style","stroke:red");

You could just copy past that into, say the mouseover and mouseout values in the properties for any old object (changing the colour on one of them, obviously).

In practice, you need to duplicate the whole style and change only the stroke, so it ends up looking more like this:

Code:

evt.target.setAttribute("style","color:#000000;fill:none;stroke:#ff0000;stroke-width:3.07200002999999988;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate");

You don't have to type all that! You just draw the object to your liking and then load the svg file into your text editor. If you label your object back in inkscape, it's easy to do a 'find' for it in your text editor later. Just copy out the style info from there and change only those bits you are interested in.

Anyhow, it's very early days for me on this stuff, but I'm now sure I can make a good interactive map showing, say, grooming history as a heat map of how many days since a trail was groomed or just hightlighting a single trail as so many 'legs' are reused as parts of other routes.

Here's what I was playing with tonight. I took a sat photo and made a negative of it as I thought it would be easier for me to trace over it. The little creek joining two tiny lakes simply changes colour on hovering your mouse. The slightly larger lake in the middle does the same, but also has a weblink and a title that pops up. It's just a raw svg file with no web page around it at all. It just pops right up in firefox. It should do the same for anything except IEs less than IE9. I'd like to hear back from any that do load it in something other than firefox and esp. IE's less than IE9 using the adobe plugin.

http://gemlog.ca/test/ajtest.svg

I'm still going to do the tubemap, but clearly that isn't it :-)

[Jaws]

Well the first part of the last post is Chinese to me (no offense to our Chinese friends).

On the sat photo, for South Lake, since it's a close path it can be considered an object with the ensuing benefit of using the Fill And Stroke dialog to change it's attributes. If you add a fill color, or even a 1% opaque color, to that path you won't have to "hit" the line with your mouse for a link and popup description.

[gemlog]

That's true about "hitting" the object, but I only have interest in the lines and not the water features at all. The subway map will make it easier to hit the lines and for the map linked above (when it's complete) users will select off-map buttons with trail names. Dunno why I picked on that poor lake for my experiments. It's just a proof of concept to prove to myself that I can make an interactive svg map at this point.

I did find a pan/zoom lib that would help that aiming problem though:
http://code.google.com/p/svgpan/

[janvl]

Thanks for this link!

there is some really usefull stuff there.

Kind regards,
Jan

[gemlog]

Glad you found it useful Jan. My unfamiliarity with inkscape meant it wasn't until just yesterday that I'd browsed enough menus to discover that jessylink was already included in my version, but there is much else there.

[spaventapasseri]

here we go one tutorial about jessyink guys

http://www.timteatro.net/2010/08/12/a-tutorial-introduction-to-jessyink-presentations-in-inkscape/

[gemlog]

Great site, bookmarked it -- thanks!

[janvl]

Jesseink is great but it takes a while to get the feeling.

I guess I will make a few presentations with it, I will share.

Kind regards,
Jan

[janvl]

Hi, here a test and a few tips on JessyInk

You should not forget:
extensions -> Jessyink -> Install
Only afer that, you can save a Masterslide or Transitions
If you forget that you wil get an error and it doesn't work

Put the masterslide on the lowest layer
Put all other slides (contents) in layers above

I did not see the layers and had to draw the line under
the slider "opacity" downward to see all the layers

In the browser you change slides with page-up/page-down.

The only thing is that the transitions are not very smooth
but it is usable.

Kind regards,
Jan

[spaventapasseri]

janvl nice examples for Jessyink, yes actually is true the first thing is to put the script inside the svg file , and you can do this like you wrote
extension-->Jessyink-->Install, I saw on yours presentation few transition as well ,  nice job for starter.

[janvl]

Hi,

I have been tampering directly into the XML-code but
it does not seem possible to get a smoother transition.

Whe I use Flash I prefer at least 32 FPS or even 48 FPS
this gives nice and smooth transtions.
Untill now I have not seen anything really smooth made with javascript,
I am open for suggestions.

Kind regards,
Jan