muuri.js library useful? any Ideas how to use this?

[BurningTreeC]

I was playing around with this library

https://github.com/haltu/muuri

... got a grid working inside tw:  http://muritest.tiddlyspot.com/    - But honestly, I don't know what I'm doing

I think I did a great mess initializing this, I'm a noob in javascript and tw widgets ...

Do you have any Ideas how to use this in a sane way?

[Diego Mesa]

Wow! Thanks for bringing this to my attention and for the demo!

[coda coder]

Excellent library!  I'm sure someone will make use of it (the Kanban/Dropboard stuff springs to mind).

One thing I noticed in passing, that README.md is a prime candidate for TiddlyWikification!

On Tuesday, December 5, 2017 at 7:31:55 AM UTC-6, BurningTreeC wrote:

[BurningTreeC]

you're welcome

[BurningTreeC]

it's great because through https://github.com/hammerjs/hammer.js it's touchable - it works in the tiddlyspot demo ... not on (my) firefox, but on chromium ... I guess also on chrome

[BurningTreeC]

the README is really good, you're right

Am Dienstag, 5. Dezember 2017 15:24:50 UTC+1 schrieb coda coder:

[coda coder]

Interesting.  I tested Win10 on...

1 - Beaker - works partly. Some elements refuse to land where they're dropped (in places where they should land fine).

2 - Edge - seems to start working then the javascript complains with a red box.

3 - Firefox - agreed, no response.

[BurningTreeC]

On Linux with chromium touch, digitizer and mouse work like they should

[Abraham Samma]

I like that Kanban setup. Should consider taking it further with this library.

[BurningTreeC]

Yes, the kanban setup looks very good. I would need some documentation or advice about how to integrate this correctly.

The grid would have to readjust if hiding the sidebar and reload after editing its tiddler.

Also, having the library create new elements out of tw macrocalls ...

These things atm are giving me headaches. But I think that with this library it should be relatively easy to do.

[@TiddlyTweeter]

FYI, works for me on Firefox ESR 52 (64-bit) same as on Chrome 62 (32-bit) Windows.

Its suggestive.

I'm kinda also thinking that TW might be natively be able to do what that does too?

Given the way CSS works in TW much of it looks like assemblage, rather than more JS. Not sure.

I'm certainly glad to explore loosening the CSS in TW. I really think its a major way ahead.

Best wishes
Josiah

[BurningTreeC]

UPDATE: touch is working like a charm on Linux -  firefox developer edition

I'm going to update muritest.tiddyspot.com soon with more functionality

[Alex Hough]

Wouldn't it be wonderful if you could drag boxes into boxes and zoom in

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+unsubscribe@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/1b728a7a-d183-4e58-90d5-08b84de18655%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

cool idea!

Am Samstag, 9. Dezember 2017 10:23:40 UTC+1 schrieb AlexHough:

Wouldn't it be wonderful if you could drag boxes into boxes and zoom in

Alex

On Saturday, 9 December 2017, BurningTreeC <hypnotize...@gmail.com> wrote:

UPDATE: touch is working like a charm on Linux -  firefox developer edition

I'm going to update muritest.tiddyspot.com soon with more functionality

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

I was playing around with this library

https://github.com/haltu/muuri

... got a grid working inside tw:  http://muritest.tiddlyspot.com/    - But honestly, I don't know what I'm doing

I think I did a great mess initializing this, I'm a noob in javascript and tw widgets ...

Do you have any Ideas how to use this in a sane way?

--
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.

[BurningTreeC]

kudos to https://ustuehler.github.io/tw5-material who has already made a muuri plugin

http://muritest.tiddlyspot.com/ is updated to use this plugin with hammer.js

you can try to drag items around. navigating with the "Open" sidebar tab works, too.

with a touchscreen you can drag multiple items at once. works also on chrome for android.

firefox desktop: works on linux with developer edition with some quirks. firefox android: doesn't

edit mode needs some ideas because it can throw errors while editing and klicking / dragging inside editor... maybe a separate container where tiddlers are put for editing...

any ideas welcome!

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

[Alex Hough]

Wow!

Kudos indeed!

Both these are really inspiring!

Alex

On 9 December 2017 at 15:42, BurningTreeC <hypnotize...@gmail.com> wrote:

kudos to https://ustuehler.github.io/tw5-material who has already made a muuri plugin

http://muritest.tiddlyspot.com/ is updated to use this plugin with hammer.js

you can try to drag items around. navigating with the "Open" sidebar tab works, too.

with a touchscreen you can drag multiple items at once.

edit mode needs some ideas because it can throw errors while editing and klicking / dragging inside editor... maybe a separate container where tiddlers are put for editing...

any ideas welcome!

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

I was playing around with this library

https://github.com/haltu/muuri

... got a grid working inside tw:  http://muritest.tiddlyspot.com/    - But honestly, I don't know what I'm doing

I think I did a great mess initializing this, I'm a noob in javascript and tw widgets ...

Do you have any Ideas how to use this in a sane way?

--

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+unsubscribe@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/cfd1e303-6043-4596-87af-cec8b8fef986%40googlegroups.com.

[BurningTreeC]

thanks!

Am Sonntag, 10. Dezember 2017 13:57:05 UTC+1 schrieb AlexHough:

Wow!

Kudos indeed!

Both these are really inspiring!

Alex

On 9 December 2017 at 15:42, BurningTreeC <hypnotize...@gmail.com> wrote:

kudos to https://ustuehler.github.io/tw5-material who has already made a muuri plugin

http://muritest.tiddlyspot.com/ is updated to use this plugin with hammer.js

you can try to drag items around. navigating with the "Open" sidebar tab works, too.

with a touchscreen you can drag multiple items at once.

edit mode needs some ideas because it can throw errors while editing and klicking / dragging inside editor... maybe a separate container where tiddlers are put for editing...

any ideas welcome!

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

I was playing around with this library

https://github.com/haltu/muuri

... got a grid working inside tw:  http://muritest.tiddlyspot.com/    - But honestly, I don't know what I'm doing

I think I did a great mess initializing this, I'm a noob in javascript and tw widgets ...

Do you have any Ideas how to use this in a sane way?

--
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.

[Sylvain Naudin]

Le dimanche 10 décembre 2017 16:44:30 UTC+1, BurningTreeC a écrit :

thanks!

Am Sonntag, 10. Dezember 2017 13:57:05 UTC+1 schrieb AlexHough:

Wow!

Kudos indeed!

Both these are really inspiring!

Alex

Hi BurningTree,

Just test it on Firefox 57 under Fedora 27 and looks great !

Cheers,

Sylvain

 

[BurningTreeC]

thank you!

[BurningTreeC]

UPDATE: now works on firefox for android. now displays two columns in landscape mode on small screens.

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

[BurningTreeC]

Right now I'm looking for a way to get pinch to zoom working, so that single tiddlers can be zoomed. hammer.js provides that but atm I don't know how to do it.

I'd appreciate your help if you can provide some tips for how to do it in a simple way.

I would also need some ideas for scrolling. with the drag-behaviour, touch-scrolling gets difficult and there should be a way to do it.

last but not least I'm looking for a way to have the StoryList synced with muuri - also therefor, every tip, idea and help is very welcome!

comments welcome!

salute!

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

[BurningTreeC]

UPDATE:

New: multitouch zooming on tiddlers. You can zoom single tiddlers in and out.

uses https://github.com/Popmotion/popmotion ...

This is just for playing and demonstration purposes. Like @TiddlyTweeter said, it would be great if something like this would be possible  without depending on many external libraries.

The implementation of the drag&drop and zooming needs work - I'll get there with some js studying - I'm a newb going to be a newbie ;)

reordering the muuri grid doesn't update the tiddler coordinates - so after reordering tiddlers zooming will take place on a wrong position.

things I'd like to sort out ... I'll see

However, I'd like to know if you like it, if you think this should be something TW should be able to do - maybe it's already capable of doing this without big effort?

http://muritest.tiddlyspot.com

cheers, BurningTreeC

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

[TonyM]

BuriningTreeC

You Ask "However, I'd like to know if you like it, if you think this should be something TW should be able to do - maybe it's already capable of doing this without big effort?"

TiddlyWiki already has so much potential we may wonder why we would want more ways to do things, but building on its base flexibility is what makes tiddlywiki so full of promise.

To be honest, when I look at your playground, I am amazed with the potential, but at this point I do not have a specific application but the imagination has being switched on, and once again I am inspired to commit to TiddlyWiki for personal and business uses. Perhaps even for commercial purposes when I match my clients needs to tiddlywiki. TiddlyWiki has as much potential as every technology it uses and applications people create from it - effectively unlimited.

Even as I write this, the ideas flow, Imagine a large screen or a projector and participants contributing "cards" from their own TiddlyWiki's this would be idea for sorting and discussion of items raised in a brainstorming session. Just add some subjects and ratings, or voting counts.

Or a way to expand a list of tiddlers to an easier visualisation to sort and prioritise. Much more friendly than a list of tiddlers.

Answer;

Yes, TiddlyWiki should be able to do this and its uses will expand by the users who adopt it.

Caveats,

In my personal view any such solution should avoid dependence on being released as an "Edition", better as a Plugin or bundle but should also be designed as if it would be in the core, even if it is not placed in the core.

The reason I say "as if it were in the core", describes a design sensibility, that makes such a solution not compromise existing features of tiddlywiki, but adds value to any, in which it can be installed. 

You may have seen the two Kanban Plugins available? You may consider seeing if this tiddler view can operate in a tiddler that can be opened in a "New Window", acting as an Index to the story river, this would help with workflow and presentations. If the tiddlers that appear can be selected by filter all the better, and removed if the filter status changes.

Great work, yes please keep going.

Regards

Tony

[Diego Mesa]

Wow this lets you drag and drop your tiddlers directly!!! Beautiful!

[BurningTreeC]

@TonyM, thanks for your detailed comment!

yes, indeed - tw is already capable to do amazing things

to figure out what's possible to do is one aspect of this great piece of software - being capable to add new things and flexibility is another

I'm also thinking about having a plugin for such functionality as in the example, by time I'll figure out how

Yes, I've seen that it's sensible not to compromise existing features when trying to add new ones. How you do it matters a lot in this context

The existing kanban plugins are something I like - I'd wish to have a drag&drop plugin that adds flexible functionality that's accessible to use "on the fly" with a widget.

To figure out how is the main process here

The filtering is already a built-in as demonstrated in this grid demo: https://haltu.github.io/muuri/ ... another thing one may want as option

@Diego Mesa - thanks, glad you like it!

Am Dienstag, 5. Dezember 2017 14:31:55 UTC+1 schrieb BurningTreeC:

[Jed Carty]

This looks really good but I am getting the red box of doom every time I move a tiddler on Safari using osx high sierra. I can drag the tiddlers around and they stay where I put them, but they never reorganise.

It says 'inst._element.animate is not a function' if that is helpful.

But on my linux desktop (Linux Mint 17.04, Firefox 57) it works and is really nice.

[BurningTreeC]

thanks @Jed Carty, I think this may be because it uses web-animations and safari doesn't (fully?) support that.

Icluding web-animations as a library should solve that

I'm going to post an update when I know more

[BurningTreeC]

UPDATE @Jed Carty

I did an ugly web-animations integration - on my girlfriend's safari dragging and reorganizing works with that solution

But I didn't try it before, so her safari could still be better than yours

[Jed Carty]

It is working on all the browsers I have access to now. There are some oddities in the layout where some tiddlers overlap others by a tiny amount. But that does show off the z level sorting as a tiddler gains focus.

[BurningTreeC]

thanks, thats great

[BurningTreeC]

I'd appreciate some ideas for editing and mobile view - how to show tiddlers ... where to show them - maybe full screen when editing - in mobile just two in a row or more? zooming them in with a gesture? 

[BurningTreeC]

another update: newly created tiddlers are zoomable and rotatable, too

it should work at the correct position now ....

• tiddler-scaling and tiddler-rotation don't reset anymore after reordering the grid :)
  
• scaling is done with two-finger pinch-zoom/rotate - a little odd at the moment, works best when starting to drag with one finger and then pinch-in or pinch-out or rotate. this is because I initialize it in the wrong place - it's going to be fixed soon
• tiddler-height and tiddler-width after zooming/rotation will also be fixed, so that tiddlers don't overlap and available space is used

I'd like to have the "targetTiddler" and "actionTiddler" variables to be included, does anybody know how? like the draggable widget does. So it would be possible to drag tiddlers onto buttons to create actions - that would be very cool :)

cheers!

[BurningTreeC]

zooming and rotating makes it kinda messy right now :'(

I need some time to sort all options out... meanwhile, anyone who finds this idea useful and some nice or stupid ideas?

the stupid ones are the best ones btw

greets from snowy austria

[Diego Mesa]

Hello BurningTreeC,

I am very excited by your work on this! I think this will dramatically increase usability, especially on mobile devices! As far as (dumb) ideas go, maybe having a setting for 1, 2, 3, or 4 columns, and each tiddler then has an appropriate button to make it take 1 more or 1 less column. Also, pinning a tiddler.

[BurningTreeC]

Hello Diego,

yes! that's going to be useful, a popup like the paletteswitcher to set different tiddler sizes maybe, there you could also select it as fixed that it keeps its position. that would also keep the appearance clean

another Idea would be not to use single buttons on tiddlers but to drag them onto a "setting field" in the sidebar for example, or onto a button on the side, to add a designated setting to the tiddler.

with that Idea you could go further and apply actions and many other things.