[TW5] Snap.svg
289 views
Skip to first unread message
FrD
Nov 17, 2015, 10:38:51 AM11/17/15
to TiddlyWiki
Hi,
Searching the web about svg an svg libraries, I found Snap.svg.
I'd like to be able to test and perhaps use this library in TW5 (in a widget) , but I don't know how to integrate it.
I've copied the snap js file in a tiddler, added type application/javascript and module-type library (my tiddler is $:/frd/library/snapsvg.js).
Then I have to "require" the module from inside a widget :
var snap = require("$:/frd/library/snapsvg.js");
(I've also tried var snap = require("$:/frd/library/snapsvg.js").Snap;)
But I get an error message when loading : Error executing boot module $:/frd/library/snapsvg.js : undefined
Maybe the snapsvg library is not in the right format for TW (pb with export. ... ?) or something else is missing.
Any help would be greatly appreciated !
Thanks in advance,
FrD
Searching the web about svg an svg libraries, I found Snap.svg.
I'd like to be able to test and perhaps use this library in TW5 (in a widget) , but I don't know how to integrate it.
I've copied the snap js file in a tiddler, added type application/javascript and module-type library (my tiddler is $:/frd/library/snapsvg.js).
Then I have to "require" the module from inside a widget :
var snap = require("$:/frd/library/snapsvg.js");
(I've also tried var snap = require("$:/frd/library/snapsvg.js").Snap;)
But I get an error message when loading : Error executing boot module $:/frd/library/snapsvg.js : undefined
Maybe the snapsvg library is not in the right format for TW (pb with export. ... ?) or something else is missing.
Any help would be greatly appreciated !
Thanks in advance,
FrD
BJ
Nov 17, 2015, 4:40:54 PM11/17/15
to TiddlyWiki
Hi FrD
I can't get it to work either.
I can use it loading the lib like:
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'/>
cheers
BJ
I can't get it to work either.
I can use it loading the lib like:
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'/>
cheers
BJ
FrD
Nov 17, 2015, 4:48:36 PM11/17/15
to TiddlyWiki
Hi BJ,
Thanks for the tip.
In what kind of tiddler do you put the script instruction ?
Thanks
FrD
Thanks for the tip.
In what kind of tiddler do you put the script instruction ?
Thanks
FrD
Eric Shulman
Nov 17, 2015, 5:16:03 PM11/17/15
to TiddlyWiki
On Tuesday, November 17, 2015 at 1:48:36 PM UTC-8, FrD wrote:
Thanks for the tip.
In what kind of tiddler do you put the script instruction ?
Le mardi 17 novembre 2015 22:40:54 UTC+1, BJ a écrit :I can use it loading the lib like:
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'/>
If you tag a tiddler with:
$:/tags/RawMarkup
then it's contents will be inserted into the output file at the end of the <head>...</head> section.
enjoy,
-e
BJ
Nov 17, 2015, 6:34:46 PM11/17/15
to TiddlyWiki
I agree with what Eric says.
Its seems that the lib needs to be put as
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>
FrD
Nov 18, 2015, 2:30:43 AM11/18/15
to TiddlyWiki
Hi BJ and Eric,
Thank you both.
No more error message. I can access a "Snap" object from inside my test widget. I'll try some drawings.
Menawhile I've found another svg library : http://svgjs.com/
This one can be embeded inside a TW5 and used with "require" from inside a widget, so maybe I'll turn to this one (and it's smaller too).
FrD
Thank you both.
No more error message. I can access a "Snap" object from inside my test widget. I'll try some drawings.
Menawhile I've found another svg library : http://svgjs.com/
This one can be embeded inside a TW5 and used with "require" from inside a widget, so maybe I'll turn to this one (and it's smaller too).
FrD
Jed Carty
Nov 18, 2015, 7:30:55 AM11/18/15
to TiddlyWiki
snap looks really neat! I can't get any of the demos on http://svgjs.com to work so if only for that reason I like snap better. I hope you get this working well, if you do I am probably going to try making some sort of interactive game that uses some animated graphical elements. Snap may be simpler to use than d3.js. Snap certainly looks like it has a focus on animation and creative things as opposed to data presentation the way that d3.js is.
I am always very excited about the creative possibilities of tiddlywiki, but I need refrain from getting distracted by new toys for a bit.
I am always very excited about the creative possibilities of tiddlywiki, but I need refrain from getting distracted by new toys for a bit.
FrD
Nov 18, 2015, 10:19:33 AM11/18/15
to TiddlyWiki
Hi Jed,
For now I'm fiddling with svgjs as it's easy to integrate into TW5.
I've loaded the draggable library too, and it seems also easy to use.
As for snap, after having had a look at the js file, and as far as I understand its structure (I'm not that good with js -:) ) , I don't understand why a simple "require" doesn't do the trick.
FrD
For now I'm fiddling with svgjs as it's easy to integrate into TW5.
I've loaded the draggable library too, and it seems also easy to use.
As for snap, after having had a look at the js file, and as far as I understand its structure (I'm not that good with js -:) ) , I don't understand why a simple "require" doesn't do the trick.
FrD
Jed Carty
Nov 21, 2015, 5:40:11 AM11/21/15
to TiddlyWiki
Did you get anything working with this? I have played with snap.js a bit and have a minimally working version but it is done in what is probably the worst way possible. The snap script is added using $:/tags/rawmarkup and the svg images are defined using raw javascript in a tiddler.
The script is included using raw markup because I tried to put it in a tiddler like with d3.js and the other javascript libraries and the library would load fine, but whenever I tried to use it I would get an error that said that eve was undefined. The other problems I have encountered are that since the dom has to be able to refresh at any time if you have animations they will be repeated whenever a tiddler is opened or sometimes when tabs are changed and a lot of other times too. So if we are going to use something like this than there will need to be lots of state variables stored. Or we may need to copy some tricks from the list widget for selectively refreshing elements if possible.
One thing I don't remember how to do is make the widget refresh when the tiddler containing the svg script is changed. Any suggestions for that?
The script is included using raw markup because I tried to put it in a tiddler like with d3.js and the other javascript libraries and the library would load fine, but whenever I tried to use it I would get an error that said that eve was undefined. The other problems I have encountered are that since the dom has to be able to refresh at any time if you have animations they will be repeated whenever a tiddler is opened or sometimes when tabs are changed and a lot of other times too. So if we are going to use something like this than there will need to be lots of state variables stored. Or we may need to copy some tricks from the list widget for selectively refreshing elements if possible.
One thing I don't remember how to do is make the widget refresh when the tiddler containing the svg script is changed. Any suggestions for that?
BJ
Nov 21, 2015, 12:59:45 PM11/21/15
to TiddlyWiki
Hi Jed, good stuff,
On Saturday, November 21, 2015 at 10:40:11 AM UTC, Jed Carty wrote:
maybe you could give a demo of the above problem.
if((Object.keys(changedAttributes).length) || changedTiddlers[this.tiddler])
all the best
BJ
ps maybe instead of using an 'id' (like Snap("#id")) you can create the svg 'institute':
var domNode = this.document.createElementNS("http://www.w3.org/2000/svg","svg");
parent.insertBefore(domNode,nextSibling);
this.domNodes.push(domNode);
s = Snap(domNode);
On Saturday, November 21, 2015 at 10:40:11 AM UTC, Jed Carty wrote:
Did you get anything working with this? I have played with snap.js a bit and have a minimally working version but it is done in what is probably the worst way possible. The snap script is added using $:/tags/rawmarkup and the svg images are defined using raw javascript in a tiddler.
The script is included using raw markup because I tried to put it in a tiddler like with d3.js and the other javascript libraries and the library would load fine, but whenever I tried to use it I would get an error that said that eve was undefined.
I don't see anything wrong with including a lib this way (in the header) - snap is a bit big after all. But if you want to internalise it:- I think the problem with 'eve' is that it is defined in the same file as snap (so ends up in the same tid) which means that 'require' with not work. A solution maybe achieved by moving 'eve' into its own tiddler.
The other problems I have encountered are that since the dom has to be able to refresh at any time if you have animations they will be repeated whenever a tiddler is opened or sometimes when tabs are changed and a lot of other times too. So if we are going to use something like this than there will need to be lots of state variables stored. Or we may need to copy some tricks from the list widget for selectively refreshing elements if possible.
maybe you could give a demo of the above problem.
One thing I don't remember how to do is make the widget refresh when the tiddler containing the svg script is changed. Any suggestions for that?
if((Object.keys(changedAttributes).length) || changedTiddlers[this.tiddler])
all the best
BJ
ps maybe instead of using an 'id' (like Snap("#id")) you can create the svg 'institute':
var domNode = this.document.createElementNS("http://www.w3.org/2000/svg","svg");
parent.insertBefore(domNode,nextSibling);
this.domNodes.push(domNode);
s = Snap(domNode);
Jed Carty
Nov 21, 2015, 5:13:03 PM11/21/15
to TiddlyWiki
I made drag and drop work for svg elements and stores the locations in tiddlers so it can be manipulated using wikitext. There is some other stuff. The updated version is here.
Jed Carty
Nov 23, 2015, 4:50:45 AM11/23/15
to TiddlyWiki
I spent a big chunk of my weekend playing with this. I like it. How easy it is to take a library like this and use tiddlywiki to make a simple svg authoring tool is one big reason I like tiddlywiki. Adding support for polygons was more work than I expected, but it mostly works now. There is some trouble with animating dragging polygons and there are some refresh problems associated with visually specifying points for the vertices. Even with this library being less flexible than d3 I think it has more potential for tiddlywiki because of how easy it is to use. The current version is here.
Sylvain Naudin
Nov 24, 2015, 7:19:17 AM11/24/15
to TiddlyWiki
Le lundi 23 novembre 2015 10:50:45 UTC+1, Jed Carty a écrit :
I spent a big chunk of my weekend playing with this. I like it. How easy it is to take a library like this and use tiddlywiki to make a simple svg authoring tool is one big reason I like tiddlywiki. Adding support for polygons was more work than I expected, but it mostly works now. There is some trouble with animating dragging polygons and there are some refresh problems associated with visually specifying points for the vertices. Even with this library being less flexible than d3 I think it has more potential for tiddlywiki because of how easy it is to use. The current version is here.
Waouh !! Great stuff :)
I'm impress as always.
Very nice this tiddler for example SVG Element - Ellipse, it's fun to play whith it !
Cheers,
Sylvain
Reply all
Reply to author
Forward
0 new messages