Quantcast

Inkscape scripting

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Inkscape scripting

Steve Litt
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

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Inkscape scripting

Mark Crutch-2
On Wed, Apr 26, 2017 at 4:44 AM, Steve Litt <[hidden email]> 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





------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Inkscape scripting

John Baraclough
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)
>


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Inkscape scripting

Steve Litt
In reply to this post by Mark Crutch-2
On Wed, 26 Apr 2017 10:41:54 +0100
Mark Crutch <[hidden email]> wrote:

> On Wed, Apr 26, 2017 at 4:44 AM, Steve Litt
> <[hidden email]> 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

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Inkscape scripting

Steve Litt
In reply to this post by Mark Crutch-2
On Wed, 26 Apr 2017 10:41:54 +0100
Mark Crutch <[hidden email]> wrote:

> On Wed, Apr 26, 2017 at 4:44 AM, Steve Litt
> <[hidden email]> 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

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Inkscape scripting

Mark Crutch-2


On Fri, Apr 28, 2017 at 3:16 AM, Steve Litt <[hidden email]> 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



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Loading...