Inkscape scripting
Hi all,
File->Document_properties->Scripting_tab
I've looked all over the web and all through my help->user manual and can't find anything about this. For one thing, I need to know how to give an embedded script a human-friendly name. I also need to know what to put in the content: Is it Javascript, and how does it differ from html based Javascript.
Anyone know of any documentation on this? Theoretically, I could creat a very simple clickable map exclusively in <svg>, without the containing <html>.
Thanks,
SteveT
Steve Litt April 2017 featured book: Troubleshooting Techniques of the Successful Technologist http://www.troubleshooters.com/techniques
On Wed, Apr 26, 2017 at 4:44 AM, Steve Litt <slitt@...2357...> wrote:
File->Document_properties->Scripting_tab
I've looked all over the web and all through my help->user manual and can't find anything about this. For one thing, I need to know how to give an embedded script a human-friendly name. I also need to know what to put in the content: Is it Javascript, and how does it differ from html based Javascript.
Anyone know of any documentation on this? Theoretically, I could creat a very simple clickable map exclusively in <svg>, without the containing <html>.
I don't know of any documentation on this, but it is something I plan to eventually cover in my tutorial series in Full Circle Magazine (see inkscapeforum.com for links to the previous 60 instalments!).
I have put a file up on my website to show you the basics, though: http://peppertop.com/interactive.svg
(tested on Firefox and Chrome on Linux, using the built-in developer consoles)
Notes:
* Yes, it's JavaScript, and it doesn't really differ from HTML based JS much at all. The main differences are around interacting with the DOM, as you may have to use the namespace-aware XML methods, rather than the usual HTML versions. So in my example you can see I use getAttributeNS(), passing the Sodipodi namespace as the first parameter (the namespace itself is one of many included near the top of an Inkscape file if you open it in a text editor).
* You don't really need to give the embedded script itself a user-friendly name - it's the functions within it that you'll want to name well.
* The fact that you can have multiple embedded scripts is a bit of a red herring. You can get by with just one that contains multiple functions, if you want. Ultimately the browser just concatenates all the scripts when parsing anyway.
* As well as File > Document Properties > Scripting you'll also want to use the Interactivity section of the Object Properties dialog (from the context menu on an object in your drawing).
The specific examples in my file are:
* An alert that fires as soon as the script is executed.
* Some JS (an alert) written directly on the onclick handler of the red star.
* A common function (blue()) in the Document Properties > Scripting tab, called from an onclick handler on the blue star.
* As above for the green star, but also passing the event (I had to use "evt" for it to work), then logging that out to the console, as well as various other bits of information from the clicked object.
I hope that helps.
Mark
It works fine on Opera 44.0 in Windoze 8.1.
Best wishes,
John
On 26/04/2017 10:41, Mark Crutch wrote:
I have put a file up on my website to show you the basics, though: http://peppertop.com/interactive.svg
(tested on Firefox and Chrome on Linux, using the built-in developer consoles)
On Wed, 26 Apr 2017 10:41:54 +0100 Mark Crutch <markc@...2744...> wrote:
On Wed, Apr 26, 2017 at 4:44 AM, Steve Litt <slitt@...2357...> wrote:
File->Document_properties->Scripting_tab
I've looked all over the web and all through my help->user manual and can't find anything about this. For one thing, I need to know how to give an embedded script a human-friendly name. I also need to know what to put in the content: Is it Javascript, and how does it differ from html based Javascript.
Anyone know of any documentation on this? Theoretically, I could creat a very simple clickable map exclusively in <svg>, without the containing <html>.
I don't know of any documentation on this, but it is something I plan to eventually cover in my tutorial series in Full Circle Magazine (see inkscapeforum.com for links to the previous 60 instalments!).
I have put a file up on my website to show you the basics, though: http://peppertop.com/interactive.svg
(tested on Firefox and Chrome on Linux, using the built-in developer consoles)
Notes:
- Yes, it's JavaScript, and it doesn't really differ from HTML based
JS much at all. The main differences are around interacting with the DOM, as you may have to use the namespace-aware XML methods, rather than the usual HTML versions. So in my example you can see I use getAttributeNS(), passing the Sodipodi namespace as the first parameter (the namespace itself is one of many included near the top of an Inkscape file if you open it in a text editor).
- You don't really need to give the embedded script itself a
user-friendly name - it's the functions within it that you'll want to name well.
- The fact that you can have multiple embedded scripts is a bit of a
red herring. You can get by with just one that contains multiple functions, if you want. Ultimately the browser just concatenates all the scripts when parsing anyway.
- As well as File > Document Properties > Scripting you'll also want
to use the Interactivity section of the Object Properties dialog (from the context menu on an object in your drawing).
The specific examples in my file are:
An alert that fires as soon as the script is executed.
Some JS (an alert) written directly on the onclick handler of the
red star.
- A common function (blue()) in the Document Properties > Scripting
tab, called from an onclick handler on the blue star.
- As above for the green star, but also passing the event (I had to
use "evt" for it to work), then logging that out to the console, as well as various other bits of information from the clicked object.
I hope that helps.
Your graphic is a self-explanatory proof of concept for all the different scripting methods. Thanks much!
SteveT
Steve Litt April 2017 featured book: Troubleshooting Techniques of the Successful Technologist http://www.troubleshooters.com/techniques
On Wed, 26 Apr 2017 10:41:54 +0100 Mark Crutch <markc@...2744...> wrote:
On Wed, Apr 26, 2017 at 4:44 AM, Steve Litt <slitt@...2357...> wrote:
File->Document_properties->Scripting_tab
I've looked all over the web and all through my help->user manual and can't find anything about this. For one thing, I need to know how to give an embedded script a human-friendly name. I also need to know what to put in the content: Is it Javascript, and how does it differ from html based Javascript.
Anyone know of any documentation on this? Theoretically, I could creat a very simple clickable map exclusively in <svg>, without the containing <html>.
I don't know of any documentation on this, but it is something I plan to eventually cover in my tutorial series in Full Circle Magazine (see inkscapeforum.com for links to the previous 60 instalments!).
I have put a file up on my website to show you the basics, though: http://peppertop.com/interactive.svg
If anybody is *at all* interested in interactive SVG, they should download, use, and completely examine the preceding link, both in Inkscape and in an editor. The preceding link is one of the best pieces of teaching content I've ever seen, and it's my business to create teaching content.
[snip]
- You don't really need to give the embedded script itself a
user-friendly name - it's the functions within it that you'll want to name well.
Nice! I *never* would have figured that out.
[snip]
- As well as File > Document Properties > Scripting you'll also want
to use the Interactivity section of the Object Properties dialog (from the context menu on an object in your drawing).
:-)
I knew that already, because I opened a Vim-created .svg, with onclick and onmouseover events, within Inkscape, and saw where my handlers showed.
[snip mechanics of teachable image]
I hope that helps.
More than you can ever imagine. So now I have another question:
Have you done SVG work in which data is sent to an http back end and the http back end sends messages that directly or indirectly change the state of objects in the SVG?
My eventual project will require back end work: It can't be front end only. If it were front-end only, it's likely I could do the *entire* thing in SVG using the techniques you demonstrated.
Is there anything like AJAX in SVG?
By the way, I have embedded <svg> content that interacts with <html> based javascript here:
http://troubleshooters.com/codecorn/clickmap/hello1.htm
But the preceding doesn't do anything to communicate with the back end.
SteveT
Steve Litt April 2017 featured book: Troubleshooting Techniques of the Successful Technologist http://www.troubleshooters.com/techniques
On Fri, Apr 28, 2017 at 3:16 AM, Steve Litt <slitt@...2357...> wrote:
I don't know of any documentation on this, but it is something I plan to eventually cover in my tutorial series in Full Circle Magazine (see inkscapeforum.com for links to the previous 60 instalments!).
I have put a file up on my website to show you the basics, though: http://peppertop.com/interactive.svg
If anybody is *at all* interested in interactive SVG, they should download, use, and completely examine the preceding link, both in Inkscape and in an editor. The preceding link is one of the best pieces of teaching content I've ever seen, and it's my business to create teaching content.
Thanks, I'm glad you found it helpful.
Is there anything like AJAX in SVG?
It's not a question of AJAX in SVG - it's a question of the capabilities of the JavaScript engine on the user agent that's being used to view the SVG. When using a browser, therefore, you pretty much have access to all the same JS capabilities as an HTML page would.
I've put another example up on my site:
http://peppertop.com/clock.svg
This one uses a JavaScript fetch() call (the new replacement for XMLHttpRequest()) to retrieve a value from a web API that just returns the current number of *minutes* past the Unix epoch. I then parse the response (skipping over all the checks that I *should* be doing!), convert it into milliseconds, and use it to seed a new JavaScript Date object.
From there I extract the hour and minutes of the Date, then use that
information to set the a transform attribute on the hands of the clock, rotating them to the right position.
If you really want a clock, this isn't the best way to do it (just using a JS Date with no seed would give you the local time, for a start), but it does demonstrate making a request to a URL, receiving a reply, then using that data to update the DOM of an SVG image. There are a few comments in the code to point you in the right direction if you need to deal with JSON or binary data. The only code is in the Document Properties this time.
The clock will update each time you refresh the page, or every 5 mins otherwise, with a resolution of 1 minute (as that's all the web API supports).
Mark
participants (3)
-
John Baraclough -
Mark Crutch -
Steve Litt