[TW5] SnapSVG progress, eventually drawing UI elements directly on the wiki.

137 views
Skip to first unread message

Jed Carty

unread,
Dec 22, 2015, 9:09:05 AM12/22/15
to TiddlyWiki
I have added a surface that lets you place svg images anywhere on the screen instead of just inside individual tiddlers. At the moment this is tied to the tiddler river, so the images will scroll as you scroll tiddlers. I am going to add a surface attached to the sidebar and one that doesn't scroll eventually.

This allows you to draw directly on the wiki to make whatever shape you wish and then define how it acts. At the moment it can only be set to be draggable, add or remove other svg images, start animations or write to a tiddler field. Eventually this should let you draw (or define using the interface I made) the UI you want instead of needing to fiddle with the html and css that would otherwise be required to move things around.

I have added a button to the demo. If you click on the green rectangle in the upper left part of the screen it will change the title of the wiki. At the moment it only lets you write a value to a field but I am planning on letting the user make buttons that act like a button widget.

There is still very little documentation and the new features (click events and other actions) don't have a reasonable creation interface. I am working on it.

The demo is here: http://ooktech.com/jed/ExampleWikis/SnapSVG/

ih...@newsfromgod.com

unread,
Dec 22, 2015, 12:58:10 PM12/22/15
to tiddl...@googlegroups.com
Hi Jed,
That's a great plugin! Especially the animations and the charts!
Thanks for sharing!

Matabele

unread,
Dec 22, 2015, 9:17:45 PM12/22/15
to tiddl...@googlegroups.com
Hi Jed

Don't know if you saw this w.r.t. the $action-listops widget:

There's another way to add titles, without the use of append[] or prepend[] -- simply list the titles to add to the current list before the filter run. This method allows titles with spaces, or may reference a field or macro containing a title with spaces -- like so:

$subfilter="title [[another title]] {{!!mytitle}} +[filter[run]]"

I haven't yet succeeded in implementing this suggestion.

regards

Jed Carty

unread,
Dec 23, 2015, 5:35:37 PM12/23/15
to TiddlyWiki
Now you can now make buttons from SVG images that you can drag and drop anywhere in the wiki. You can also define the buttons action using wikitext the same way as with the button widget. Currently you have to make polygons on surfaces inside tiddlers then put the elements on the surface that covers the entire wiki but you should be able to draw directly on the wiki to add interface elements soon.

So, while it isn't pretty yet, this lets you use the entire wiki as an SVG canvas where you can (sort of) draw then drag and drop elements and use them to make your interface.

As a demo I made 3 buttons that save or change the wiki title that you can drag around and see how it works.

The demo is here.

Jed Carty

unread,
Dec 24, 2015, 6:27:58 PM12/24/15
to TiddlyWiki
I finally got around to packaging everything as a plugin. You can now add images from external sources (both raster and SVG image types should work) and svg images from tiddlers in the wiki. I have also done a lot of debugging so if you run into any errors let me know. The documentation is still pretty terrible.

The full plugin is around 200k, but around 150k of that is taken up by the components needed to make things and having the full library included in the wiki so it may not be unreasonable to create something using the full plugin and then using a stripped down version after it is finished to reduce the size of the wiki if that is a concern.

The demo is still here.

Matabele,

That is good to know. I just saw Jeremys post about 5.1.10 and I think my next task is going to be switching to using the version of action-listops in the core, I will let you know if I run into any problems but it is working well now so I doubt anything will come up.

Matabele

unread,
Dec 24, 2015, 9:22:06 PM12/24/15
to TiddlyWiki
Hi Jed

And we need to close in on providing the option for arbitrary lists rather than sets. I am working upon collecting all of the relevant material here, with a view to finalising on how to to this (and identify everything that needs to be done.)

So far, it looks as if the parseStringArray and pushTop() functions must provide an option to suppress the removal of duplicates, then the filters.js script will need to provide a facility to select these options, then various of the filter operators will require modification, as they now assume uniqueness. 

regards

On Friday, 25 December 2015 01:27:58 UTC+2, Jed Carty wrote
Reply all
Reply to author
Forward
0 new messages