[TW5] SnapSVG plugin zoomable menu demo

[Jed Carty]

I am working on making a menu for the wiki. The idea is to create a small draggable object that you can move around the wiki wherever you want. Then you can click on something to make the menu larger, clicking on each item in the menu will zoom into that item so that you can access the contents. Hopefully multiple zoom levels will be supported.

For now I have a simple one level menu that is inside a single tiddler so you can't drag it around, but it demonstrates some of the basic ideas.

I have made many improvements to the plugin. Things are more stable and hopefully make more sense but the documentation isn't any better. Enjoy the demo here.

Any comments or suggestions are welcome.

[Mat]

Hi Jed - interesting stuff as alway!

I am working on making a menu for the wiki. The idea is to create a small draggable object that you can move around the wiki wherever you want.

I can't help but wonder if the this is not achievable more easily with native html5+CSS3 i.e so no plugins for TW (see e.g the Hooker Method - I think this should be possible to add draggable poisitioning to.) CSS3 can handle zooming effects and much more, surprisingly powerful. But maybe you have more in mind, like your previous animatinos, and SnapSVG is the way to go? :-)

Regarding your demo, or rather the instrux, may I suggest that you rephrase "When you are zoomed in you can click outside the group to zoom back out to see the full menu." into "... you can click outside the group on the wine red background to ...."
 
And in the red/green group, add e.g "Watch the TW title" or similar. I missed it on my first few attemts and thought it was just a static image.

Ok, cool stuff!

<:-)

[Jed Carty]

It may be possible with css, but a menu like this isn't the goal, it is just a demo that helps me debug everything and figure out how to make a reasonable interface for creating everything. Also, thanks for the suggestions, I changed some of the text in the demo for the draggable menu.

I now have a demo of the draggable menu here.

[Mat]

>, it is just a demo that helps me debug everything and figure out how to make a reasonable interface

Ok, then it's good you're testing it on us: Now the five things seem to expand so they almost completely cover the wine red. Also, I think you saved it in a position so that it on my 14" screen ends up half cut at lower right.

<:-)

[Jeremy Ruston]

Hi Jed

Great stuff, I’ve been interested in zooming as a navigation metaphor for a long time. There’s an interesting body of academic literature about the topic “Zooming User Interfaces”, see:

https://en.wikipedia.org/wiki/Zooming_user_interface

There’s also a great little library for building zooming DOM interfaces:

http://jaukia.github.io/zoomooz/

How about a zoomable zork-esque adventure game?

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c617a037-825b-4b05-9f24-cd191c2248f4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tobias Beer]

Wow,

 

http://jaukia.github.io/zoomooz/

I just needed a reason to fiddle with jQuery in TW5. :D

Now, that isometric cube example quite rings my bells.

Best wishes,

Tobias.

[Ed Dixon]

I totally agree adds tons of potential new functionalities to TiddlyWiki! Not sure jQuery can be made to play nice but if so that would also resolve many other items I have been putting on hold here in order to see if a solution to integrate common frameworks like (and mainly) jQuery which dramatically reduce the overhead in the solutions I am designing. If anyone can find a way I am sure you 2 can. Please keep us posted of any progress with that! 

[David Gifford]

Your demo and the zoomooz link just made my day.

[Alex Hough]

Jed,

super cool delux

Alex

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/df220a63-7a2c-4f60-853c-73f3dc94b276%40googlegroups.com.