Muuri Storyview

903 views
Skip to first unread message

BurningTreeC

unread,
Oct 17, 2020, 4:38:34 AM10/17/20
to TiddlyWiki
Hello dear TiddlyWikians :)

Right now I'm working on a better Muuri storyview. You can find its progress and Demo page here: https://burningtreec.github.io/tiddlywiki-muuri/

It's more simple than previous versions and has less bells and whistles...

As always, I welcome ideas, criticism and help :)

all the best, BTC

Ste

unread,
Oct 17, 2020, 5:04:58 AM10/17/20
to TiddlyWiki
That's looking really good on mobile! 

Atronoush Parsi

unread,
Oct 17, 2020, 5:51:00 AM10/17/20
to tiddl...@googlegroups.com
Hi BTC
This is absolutely amazing! I will go through and have some comments later.

For now:
Is it possible to control direction of flow? I mean have a setting to control how tiddlers appear from right side to left or from left side to right?
Can we use the new muuri plugin the same way as two rivers stream plugin (e.g in Stroll )? I mean having two columns, keep some certain tiddlers on the left side, some on the right side?

On touch screen specially on small screen, Murri plugin with Notebook theme from Niclos Petton https://nicolas.petton.fr/tw/project-manager.html are great combinations!

Thank you again

Atro


--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5c34030f-c9a4-4d64-ac82-8385cb2d941fn%40googlegroups.com.

Ste

unread,
Oct 17, 2020, 5:51:19 AM10/17/20
to TiddlyWiki
On mobile. Looks good. I can drag things round nicely.
 The columns button doesn't seem to make any difference. 
I set it to one thinking that would push everything into a single column but it remained at two. 
I also couldn't drag to an extra column for 3 or more, but that's probably not a bad thing on mobile. 
Ste

BurningTreeC

unread,
Oct 17, 2020, 6:17:01 AM10/17/20
to TiddlyWiki
Hello @Ste, thanks!

The columns button has no effect on mobile, there I decided to make it two columns, but I'm inclined to make it a single column if the column-button is set to "1"
More than two columns seem indeed to be a bad thing on mobile, tiddlers get too narrow then and become unreadable and difficult to handle

BTC

BurningTreeC

unread,
Oct 17, 2020, 6:23:09 AM10/17/20
to TiddlyWiki
Hello @Atronoush, thank you!

It's possible to control the direction flow from right to left, left to right, top to bottom and bottom to top... see the open control panel options on the demo page
About two rivers like the Stroll plugin... The Muuri library that's used here lays out tiddlers in a certain way, moving them to calculated free space in a certain manner. There's no way to control that like the Stroll plugin does.
The Notebook theme from Nicolas Petton looks very interesting! Thanks for the link! I was thinking about something like that for mobile use

BTC

Atronoush Parsi

unread,
Oct 17, 2020, 8:02:58 AM10/17/20
to tiddl...@googlegroups.com
On Sat, Oct 17, 2020 at 1:53 PM BurningTreeC <hypnotize...@gmail.com> wrote:
Hello @Atronoush, thank you!

It's possible to control the direction flow from right to left, left to right, top to bottom and bottom to top... see the open control panel options on the demo page
Oh, thanks!
 
About two rivers like the Stroll plugin... The Muuri library that's used here lays out tiddlers in a certain way, moving them to calculated free space in a certain manner. There's no way to control that like the Stroll plugin does.
The Notebook theme from Nicolas Petton looks very interesting! Thanks for the link! I was thinking about something like that for mobile use

Murri brings a new feel and looks into Tiddlywiki.  So please keep going on!

BTC

Atronoush schrieb am Samstag, 17. Oktober 2020 um 11:51:00 UTC+2:
Hi BTC
This is absolutely amazing! I will go through and have some comments later.

For now:
Is it possible to control direction of flow? I mean have a setting to control how tiddlers appear from right side to left or from left side to right?
Can we use the new muuri plugin the same way as two rivers stream plugin (e.g in Stroll )? I mean having two columns, keep some certain tiddlers on the left side, some on the right side?

On touch screen specially on small screen, Murri plugin with Notebook theme from Niclos Petton https://nicolas.petton.fr/tw/project-manager.html are great combinations!

Thank you again

Atro


On Sat, Oct 17, 2020 at 12:08 PM BurningTreeC <hypnotize...@gmail.com> wrote:
Hello dear TiddlyWikians :)

Right now I'm working on a better Muuri storyview. You can find its progress and Demo page here: https://burningtreec.github.io/tiddlywiki-muuri/

It's more simple than previous versions and has less bells and whistles...

As always, I welcome ideas, criticism and help :)

all the best, BTC

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5c34030f-c9a4-4d64-ac82-8385cb2d941fn%40googlegroups.com.

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

Saq Imtiaz

unread,
Oct 17, 2020, 2:15:21 PM10/17/20
to TiddlyWiki
Hi @BTC, neat stuff! Thank you for sharing.

I fiddled very briefly with using the muuri storyview in a substory and it mostly works well. I realize this is probably outside the scope of your focus, but it would be great if muuri worked well with multiple stories as well.

A few rough edges:

1) If both the main story and the substory use muuri, they both have the same number of columns etc. Otherwise muuri seems to work well in both.

Would it be possible to set the muuri settings like number of columns etc, independently for each story?

2) with both stories using muuri, if I re-arrange the tiddlers in the substory, after a brief interval the main story river is updated with the contents of the substory. Seems like maybe the story list is hardcoded into some kind of refresh mechanism? I haven't looked at the code.

3) If the main story river uses classic storyview, and the substory uses muuri, there are some layout issues. Perhaps some CSS that isn't active?

Attached is a copy of your demo with a tiddler added to test substories.

This could be a lot of fun to use for a pinboard. I also see potential for having two stories side by side, one with the classic storyview and one with muuri.

If you don't have the time to tackle the multiple story issues, I will probably give it a shot when I have the opportunity. Overall, this looks great.

Cheers,
Saq

muuri-substory.html

BurningTreeC

unread,
Oct 17, 2020, 7:36:54 PM10/17/20
to TiddlyWiki
Hi @Saq, thank you!

1) I've now fixed your issue with using the core $:/core/ui/ViewTemplate as a template, it does no more lay out using the columns of the columns-button. Their width however needs to be defined using a css...

The list widget that uses the muuri storyview accepts some additional attributes, they just aren't documented yet... For example the "containerClass" attribute sets a class for the element that contains the muuri items

2) There's another attribute ("storyList") that defines the tiddler whose list field should be updated. This defaults to "$:/StoryList"

3) Most of the css is only active if the $:/view tiddler is set to muuri, but I'm about to add some sane css defaults that are always active

>This could be a lot of fun to use for a pinboard. I also see potential for having two stories side by side, one with the classic storyview and one with muuri.

Yes that's true, and yes, I'd be intrigued to see it in action in a two-story-view, would be really cool (for a future release it's planned that one can drag from one story to another btw)

Thanks @Saq,

all the best, BTC

Atronoush Parsi

unread,
Oct 18, 2020, 2:01:23 AM10/18/20
to tiddl...@googlegroups.com
Question:

Assume you use Murri with 3 columns and then click on the column button to switch to 4! But then you want to return to three columns!
Right now you have to cycle, click to switch to 5 and six columns and then 1, 2 and finally 3 columns.
Is there any way like shift+click to return from 4 to 3? or any simpler method?
I know shift+click is not good for touch screens!

Atro

On Sat, Oct 17, 2020 at 12:08 PM BurningTreeC <hypnotize...@gmail.com> wrote:
--

BurningTreeC

unread,
Oct 18, 2020, 4:02:28 AM10/18/20
to TiddlyWiki
Hi @Atronoush,

> Assume you use Murri with 3 columns and then click on the column button to switch to 4! But then you want to return to three columns!
Right now you have to cycle, click to switch to 5 and six columns and then 1, 2 and finally 3 columns.
Is there any way like shift+click to return from 4 to 3? or any simpler method?
I know shift+click is not good for touch screens!

At the moment there's the cycling button and the keyboard shortcuts alt-shift-Right and alt-shift-Left. I was thinking about different ways but these are the easiest.
For touch screens I could implement touch gestures like swiping left / right, but that's not that easy to implement

BTC

Saq Imtiaz

unread,
Oct 18, 2020, 4:08:23 AM10/18/20
to TiddlyWiki
Hi @BTC,
 
1) I've now fixed your issue with using the core $:/core/ui/ViewTemplate as a template, it does no more lay out using the columns of the columns-button. Their width however needs to be defined using a css...

If I understand correctly, does that mean the number of columns would be have the hardcoded via CSS? Or is there a parameter to the list widget for it?

I was wondering if there could be additional optional attributes to the list widget, such as "columns", which points by default to $:/state/config/muuri/storyview/columns. 
 
2) There's another attribute ("storyList") that defines the tiddler whose list field should be updated. This defaults to "$:/StoryList"

This resolves the refresh issue.
 
I have also noticed that after changing the number of columns, the layout of the muuri tiles can be off (overlapping) until one of the tiles is dragged. Perhaps a refreshEnd reflow is needed?

Cheers,
Saq

BurningTreeC

unread,
Oct 18, 2020, 4:17:55 AM10/18/20
to TiddlyWiki
Hi @Saq,

>If I understand correctly, does that mean the number of columns would be have the hardcoded via CSS? Or is there a parameter to the list widget for it?

There's no parameter for the list widget for the columns, it's hardcoded via CSS. I use "width: calc((100% / <<columns>>) - <<margin>> - (<<margin>> / <<columns>>));"

>I was wondering if there could be additional optional attributes to the list widget, such as "columns", which points by default to $:/state/config/muuri/storyview/columns.

As said above, the columns aren't handled within the storyview, they are pure CSS

>I have also noticed that after changing the number of columns, the layout of the muuri tiles can be off (overlapping) until one of the tiles is dragged. Perhaps a refreshEnd reflow is needed?

Thanks, I've also noticed that, I'll have to investigate further

all the best,
BTC

Atronoush Parsi

unread,
Oct 18, 2020, 4:50:16 AM10/18/20
to tiddl...@googlegroups.com
On Sun, Oct 18, 2020 at 11:32 AM BurningTreeC <hypnotize...@gmail.com> wrote:
Hi @Atronoush,

> Assume you use Murri with 3 columns and then click on the column button to switch to 4! But then you want to return to three columns!
Right now you have to cycle, click to switch to 5 and six columns and then 1, 2 and finally 3 columns.
Is there any way like shift+click to return from 4 to 3? or any simpler method?
I know shift+click is not good for touch screens!

Lovely! works like a charm and these are the easiest! 

At the moment there's the cycling button and the keyboard shortcuts alt-shift-Right and alt-shift-Left. I was thinking about different ways but these are the easiest.
For touch screens I could implement touch gestures like swiping left / right, but that's not that easy to implemen

Yep, that is true! But I use a multi-column layout on a big screen which is not a touch screen :-( 
 

BTC

Thank you BTC. 

Atronoush schrieb am Sonntag, 18. Oktober 2020 um 08:01:23 UTC+2:
Question:

Assume you use Murri with 3 columns and then click on the column button to switch to 4! But then you want to return to three columns!
Right now you have to cycle, click to switch to 5 and six columns and then 1, 2 and finally 3 columns.
Is there any way like shift+click to return from 4 to 3? or any simpler method?
I know shift+click is not good for touch screens!

Atro

On Sat, Oct 17, 2020 at 12:08 PM BurningTreeC <hypnotize...@gmail.com> wrote:
Hello dear TiddlyWikians :)

Right now I'm working on a better Muuri storyview. You can find its progress and Demo page here: https://burningtreec.github.io/tiddlywiki-muuri/

It's more simple than previous versions and has less bells and whistles...

As always, I welcome ideas, criticism and help :)

all the best, BTC

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5c34030f-c9a4-4d64-ac82-8385cb2d941fn%40googlegroups.com.

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

Saq Imtiaz

unread,
Oct 18, 2020, 6:00:49 AM10/18/20
to TiddlyWiki
Thanks for the clarification @BTC.

I did a quick mashup adding Stories to your Muuri demo.
Works pretty well, you can have Muuri in both stories or just one. 

I think having a classic story view in the default story and muuri in the second could be very powerful for making good use of a large screen for some of my workflows.

If you are curious, the files are here:
Muuri in both stories:

Muuri in the second story only, with the first story only using 35% of available space.

Being able to drag between stories could be very handy. I've considered adding that for the Stories plugin but ultimately didn't have the motivation for it. With Muuri it would have greater appeal.

Anyway, don't let me distract you with all the talk of multiple stories :)

Cheers,
Saq

Atronoush Parsi

unread,
Oct 18, 2020, 6:48:32 AM10/18/20
to tiddl...@googlegroups.com
This is lovely Saq!
In the second example I don't see the Murri columns button to change the number of columns! 
How can one set the target story river (column) when clicking a tiddler title in the right side bar?

Atro

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

Saq Imtiaz

unread,
Oct 18, 2020, 7:07:11 AM10/18/20
to TiddlyWiki
@Atro this is a quick mashup to see how Muuri would interact with the Stories plugin, and is not meant to be used for anything other than testing. As such there are no buttons to configure Muuri in that setup.


On Sunday, October 18, 2020 at 12:48:32 PM UTC+2, Atronoush wrote:
This is lovely Saq!
In the second example I don't see the Murri columns button to change the number of columns! 
How can one set the target story river (column) when clicking a tiddler title in the right side bar?

Atro

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

TiddlyTweeter

unread,
Oct 18, 2020, 7:16:41 AM10/18/20
to tiddl...@googlegroups.com
Ciao BTC,

As an enthusiast for Muuris past I am very glad to see and test this later version.

I DO like the simplification of the interface. Its still very bell-and-whistles enough! 
Nice simplifications IMO. Hats off!

Regarding mobile ... where I toyed some. I think there is need to assert an approach and stick with it. 
In terms of mobile interface it might be better, eventually, to hide the "column number" button (I assume through CSS based on screen size detection?).
I'm not convinced of value of even 2 columns on mobile--though it may be my bias in having a rather small dimensional smartphone?

Regarding the "Finger Toggle" & scrolling ... This applies to both desktop & mobile, particularly on mobile. It can be hard to scroll UP after moving stuff around with the "Finger Toggle" active to switch it OFF. On mobile particularly trying to scroll up you can just end up moving Tiddlers around rather than actually scrolling up. Maybe the toolbar for Muuri should be attached somewhere so its always visible?

Just thoughts
Best wishes on a nice evolution.
TT 

TiddlyTweeter

unread,
Oct 18, 2020, 7:26:10 AM10/18/20
to TiddlyWiki
Ciao BTC

Further ... I'm glad to see, also, that "In Tiddler Muuri" are still supported. Its an extremely efficient way to, for instance, create galleries, as your example shows.

Best wishes
TT

On Saturday, 17 October 2020 10:38:34 UTC+2, BurningTreeC wrote:

TiddlyTweeter

unread,
Oct 18, 2020, 7:36:30 AM10/18/20
to tiddl...@googlegroups.com
Ciao BTC

Final thoughts.

I think in actual practice I'd use Muuri to arrange a site for online publishing I do NOT want users to mess with. 

What I'm getting at is its a tool for content/organisation by developers as much as for end users. Yes?

Maybe? Maybe some hidden option to HIDE the tool could aid publishers publish their arrangement without worry the end user will mess with it?

Thoughts

Best wishes
TT 

On Saturday, 17 October 2020 10:38:34 UTC+2, BurningTreeC wrote:

Atronoush Parsi

unread,
Oct 18, 2020, 7:37:25 AM10/18/20
to tiddl...@googlegroups.com
Thanks for clarification Saq!

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/79baf7c3-6a8a-4f52-9c0e-85f840f6db6ao%40googlegroups.com.

TiddlyTweeter

unread,
Oct 18, 2020, 8:19:20 AM10/18/20
to TiddlyWiki
Ciao Saq & BTC

Saq Imtiaz wrote:
I think having a classic story view in the default story and muuri in the second could be very powerful for making good use of a large screen for some of my workflows.

If you are curious, the files are here:
Muuri in both stories:

Muuri in the second story only, with the first story only using 35% of available space.

Being able to drag between stories could be very handy. I've considered adding that for the Stories plugin but ultimately didn't have the motivation for it. With Muuri it would have greater appeal.

Both of those are very interesting experiments!

I think the end user problem is its hard to see what is going on since the two stories are visually identical. It looks like ONE thing.
That is not a criticism per se as its an experiment. I do think it might gain more value IF D&D between two stories worked.

My basic query is this: functionally, for end aims, is this worth it? What I mean is SINCE Muuri supports D&D to re-arrange at will what would be the added value of two stories? Not being negative. Just trying to grasp the advantage.

Thoughts & best wishes
TT

Saq Imtiaz

unread,
Oct 18, 2020, 9:01:35 AM10/18/20
to tiddl...@googlegroups.com
@TT

I think the end user problem is its hard to see what is going on since the two stories are visually identical. It looks like ONE thing.

I realized this as well but it wasn't worth the effort to address for something that was a quick experiment to test compatibility. If BTC had not mentioned interest in seeing Muuri in a multiple story setup I would not even have posted those links.
 

My basic query is this: functionally, for end aims, is this worth it? What I mean is SINCE Muuri supports D&D to re-arrange at will what would be the added value of two stories?

If your question addresses the demos I posted in particular, there is no added value beyond testing compatibility. However being able to use Muuri in multiple stories, or in a single story which is not the default, offers a lot of room for exploration and new workflows.
 
Firstly it's a technical thing for me. All storyviews currently in TW are flexible in that they can be used with multiple stories and there is nothing that ties them to the default story only. It just made sense to check if Muuri was too, as that opens the doors for others to leverage it in different ways, without any drawbacks. Thanks to the changes BTC made today and using the appropriate parameters this is already possible. We have all seen over time that TiddlyWiki users can be very creative as to the uses they will put things to when the need flexibility is present.

Secondly, as far as I can tell, Muuri will re-arrange all tiles when one is moved. So let's say I am working in one tiddler but want to have all the others open to refer to while maximizing how much I can see on screen. Well as soon as I close or move one of them, the tiddler I am working in will move as well! With two stories, I can be working in a normal story with a persistent order while having my reference or "to do" items in the other story.

As a photographer that also does his own art direction, I can tell you that being able to write my notes for a project in one story with additional tiddlers open with textual reference, while referring to images and re-organizing them in another story would allow me to use TW for something it so far has not be useful for at all.

Similarly, I could imagine having one story with unordered images with a specific tag using Muuri. And another story that I am dragging and dropping those images into to create a moodboard to share with collaborators.

I'm pretty pressed for time these days so these are just the immediate personal use cases that came to mind. All of which are possible with a storyview written so as to not be tied to a specific story.

Cheers,
Saq

TiddlyTweeter

unread,
Oct 18, 2020, 9:14:49 AM10/18/20
to TiddlyWiki
Ciao BTC

Footnote.

I just stumbled on what looks like a minor CSS issue ... replication on tablet ...

1 - Hide menu & you see ...

Screenshot 2020-10-18 150445.jpg



2 - Re-show menu & you see ...

Screenshot 2020-10-18 150546.jpg


Notice how the invoke of menu throws out layout.

FYI, tested on latest Chrome on a touchscreen Win10 PC.

Just an observation.
Best wishes
TT 


On Saturday, 17 October 2020 10:38:34 UTC+2, BurningTreeC wrote:

TiddlyTweeter

unread,
Oct 18, 2020, 9:36:51 AM10/18/20
to TiddlyWiki
Ciao Saq

You are a very clever programmer. I wanted, maybe for another thread, to ask you about how in TW we could access EXIF data in external images. That seems even more economical than twin data notation streams that are serendipitous and uncoordinated. 

What I mean is the logical place for meta data about an image is IN the image. So, for me I'm thinking that is a somewhat different exploration than two Muuri streams?

I leave this out of Muuri for now.

Best wishes
TT

Saq Imtiaz wrote:
 
... I can tell you that being able to write my notes for a project in one story with additional tiddlers open with textual reference, while referring to images and re-organizing them in another story would allow me to use TW for something it so far has not be useful for at all.
 

Saq Imtiaz

unread,
Oct 18, 2020, 9:52:34 AM10/18/20
to TiddlyWiki

What I mean is the logical place for meta data about an image is IN the image. So, for me I'm thinking that is a somewhat different exploration than two Muuri streams?

Depends on the nature of the notes and what they are meant for and how they will be consumed, in the use cases I described storing them in EXIF would serve no purpose. However I believe the example suffices to show that flexibility in how Muuri is used opens a lot of possibilities for users to optionally leverage.

But yes, let's table further EXIF related discussion for a future separate thread so as to not go too off-topic. 

Cheers,
Saq


TiddlyTweeter

unread,
Oct 18, 2020, 10:15:38 AM10/18/20
to TiddlyWiki
Saq Imtiaz wrote

Secondly, as far as I can tell, Muuri will re-arrange all tiles when one is moved. So let's say I am working in one tiddler but want to have all the others open to refer to while maximizing how much I can see on screen. Well as soon as I close or move one of them, the tiddler I am working in will move as well! With two stories, I can be working in a normal story with a persistent order while having my reference or "to do" items in the other story.

Right. But that SUPPORTS my point! You don't need TWO STORIES for that since Muuri supports that just by having 2 or more COLUMNS. 

So I'm still wondering what the functional advantage of 2 stories is. 
Is it that each is scroll-able independently? I.e. potential horizontal ALIGNMENT of consanguines?

Best wishes
TT

Saq Imtiaz

unread,
Oct 18, 2020, 11:16:19 AM10/18/20
to TiddlyWiki
@TT
 

Right. But that SUPPORTS my point! You don't need TWO STORIES for that since Muuri supports that just by having 2 or more COLUMNS. 

To the contrary, the workflow I described is not possible with multiple columns in a single Muuri story. Every time the story list changes, the tiddlers are re-organized across all columns to maximize screen space utilization.

Unfortunately I don't really have the time at present to try to explain it better than I already have. Not to mention that this is derailing the focus of the thread far too much, seeing as how BTC is still actively working on Muuri and things may change significantly before a stable release.

Cheers,
Saq





TW Tones

unread,
Oct 18, 2020, 6:35:59 PM10/18/20
to TiddlyWiki
Folks,

I just want to chime in here on Stories. As you know a story is but a list, Tiddlywiki still has room to mature on the use of stories and lists. Naming and dragging a "Story of tiddlers" to a story list being able to store, reopen, close, delete stories etc...

Some work have being done on this and more needs to be done, but it highlights the fact a story is a fundamental collection of tiddlers, so I believe any solution should at minimum permit at least one story within it, because tools from presentations to compound tiddlers make use of the story.  Permitting multiple stories and providing a few more fundamental story manipulations tools can come later, we must not compromise the future of any solution by leaving out consideration of such fundamental organisational methods.

A personal vision is to merge stories with a fundamental list feature so we can freely move between generated lists, list in content, stories, tag and other lists. Lists as an element treated as a full first class tiddlywiki object would be marvellous.

I have a suit of macros that give me more access to the history list I find very useful, but I would like to manipulate these as lists I can build, store, close and reopen.

Regards
Tony

BurningTreeC

unread,
Oct 19, 2020, 10:44:54 AM10/19/20
to TiddlyWiki
@All, Wow, a lot to comment to :)

@Saq

Thanks for the mashups that add Stories to the Muuri Demo, I was really curious if it works out well!

>Being able to drag between stories could be very handy. I've considered adding that for the Stories plugin but ultimately didn't have the motivation for it. With Muuri it would have greater appeal.

My goal is that dragging between stories becomes very easy using the muuri storyview. I hope I can achieve that soon

>Anyway, don't let me distract you with all the talk of multiple stories :)

It doesn't distract me, I had multiple stories in mind the way I created muuri


@TiddlyTweeter

>Regarding mobile ... where I toyed some. I think there is need to assert an approach and stick with it. 
In terms of mobile interface it might be better, eventually, to hide the "column number" button (I assume through CSS based on screen size detection?).
I'm not convinced of value of even 2 columns on mobile--though it may be my bias in having a rather small dimensional smartphone?

On mobile I honestly like the classic storyview more, even if it would need some css tweaking like smaller tiddler titles and less space between tiddlers (my opinion).
Still on mobile, using the muuri storyview with only 1 column makes dragging a bit complicated / difficult to handle. On bigger smartphones I think two columns work fine

>Regarding the "Finger Toggle" & scrolling ... This applies to both desktop & mobile, particularly on mobile. It can be hard to scroll UP after moving stuff around with the "Finger Toggle" active to switch it OFF. On mobile particularly trying to scroll up you can just end up moving Tiddlers around rather than actually scrolling up. Maybe the toolbar for Muuri should be attached somewhere so its always visible?

On mobile that's a bit of an issue, you're right. There's the need to access the dragging-toggle button to be able to scroll up/down... As @Atronoush mentioned before, there are solutions like Nicolas Petton's Notebook theme that add a bottom panel with the page-controls buttons. Something like that I had in mind, I just didn't want to add another solution to the muuri storyview when there are already many solutions made by others, like @JD or @Nicolas Petton

>Further ... I'm glad to see, also, that "In Tiddler Muuri" are still supported. Its an extremely efficient way to, for instance, create galleries, as your example shows.

Yes, that was important to me. A muuri within a muuri within a muuri should also work (and so on :P )

>I think in actual practice I'd use Muuri to arrange a site for online publishing I do NOT want users to mess with.

Ok, yes I didn't think about that so much. There's the option to disable dragging and to hide the dragging button from the pagecontrols menu, then disabling the dragging-keyboard-shortcut by removing the tag $:/tags/KeyboardShortcut and doing the same for the columns button and the two columns shortcuts...

What I'm getting at is its a tool for content/organisation by developers as much as for end users. Yes?

Which tool do you mean? Muuri itself or the dragging on/off button?

Maybe? Maybe some hidden option to HIDE the tool could aid publishers publish their arrangement without worry the end user will mess with it?

I would go with the options described above...

>I just stumbled on what looks like a minor CSS issue ... replication on tablet ...

Thanks, you've found an issue I'm investigating :) ! Yet I couldn't find a problem in MY code so I'll leave an issue at the muuri github page, maybe its creator can tell me more about this problem (I hope so)



@The Rest about Stories

I believe multiple stories have their use-cases since we're manipulating different lists, where one could be the normal story list and another one could for example be a prioritized to-do-list where we can re-arrange tiles.
I can imagine, like @Saq wrote, that users can be very creative and use the muuri storyview in many different ways - given that it works well enough. And that's it from me atm, I'm going back to have a look at the code, maybe later today I'll have dragging between stories working... We'll see :)

all the best,
BTC


Saq Imtiaz

unread,
Oct 19, 2020, 11:04:09 AM10/19/20
to TiddlyWiki
@BTC 
 
My goal is that dragging between stories becomes very easy using the muuri storyview. I hope I can achieve that soon

One of the cool things already is that if you set Muuri to use just one column, it gives an experience close to the classic storyview but you can drag to re-order tiddlers within the story. So I am optimistic about your goal. :)

One quick thought. Would it be doable as an option to have a specific part of the tiddler div be the element that is the drag handle? Perhaps the title, or a horizontal div above the title? It would allow for a UX where dragging tiddlers within/across stories is always enabled, and yet it doesnt interfere with scrolling, copying text etc. 

Note I did see that there is a SELECTTEXT_CONFIG but have not fiddled with it, so it could turn out that the above isn't really necessary.

Thanks BTC, excited to see where this leads.
Cheers,

Saq

Eric Shulman

unread,
Oct 19, 2020, 11:20:02 AM10/19/20
to TiddlyWiki
On Monday, October 19, 2020 at 8:04:09 AM UTC-7, Saq Imtiaz wrote:
One of the cool things already is that if you set Muuri to use just one column, it gives an experience close to the classic storyview but you can drag to re-order tiddlers within the story. So I am optimistic about your goal. :)

Note that you can also drag to "re-order tiddlers within the story" using the Sidebar "Open" tab in a standard vanilla TiddlyWiki.

-e

BurningTreeC

unread,
Oct 19, 2020, 12:12:59 PM10/19/20
to TiddlyWiki


@Saq,

>One quick thought. Would it be doable as an option to have a specific part of the tiddler div be the element that is the drag handle? Perhaps the title, or a horizontal div above the title? It would allow for a UX where dragging tiddlers within/across stories is always enabled, and yet it doesnt interfere with scrolling, copying text etc.

Yes that's possible, I just have to add an attribute or a configuration tiddler for that... makes sense to me, so I'll implement this. Thanks for the idea

BTC

TiddlyTweeter

unread,
Oct 20, 2020, 7:27:50 AM10/20/20
to tiddl...@googlegroups.com
BurningTreeC wrote:

I think in actual practice I'd use Muuri to arrange a site for online publishing I do NOT want users to mess with.

Ok, yes I didn't think about that so much. There's the option to disable dragging and to hide the dragging button from the pagecontrols menu, then disabling the dragging-keyboard-shortcut by removing the tag $:/tags/KeyboardShortcut and doing the same for the columns button and the two columns shortcuts...

What I'm getting at is its a tool for content/organisation by developers as much as for end users. Yes?

Which tool do you mean? Muuri itself or the dragging on/off button?

Yeah. The controls. 

Maybe? Maybe some hidden option to HIDE the tool could aid publishers publish their arrangement without worry the end user will mess with it?

I would go with the options described above...

Right. FYI I'll likely write a macro do the settings for the contexts I need on one press.

My point was to highlight some auteur issues that are implicit and make them more explicit.
I wasn't really expecting you to DO anything :-). 
Rather, highlight that Muuri can be viewed as an EXCELLENT "author's arrangement tool" and not just an end-consumer tool.

I think if you made that clearer it might well increase uptake? In brief, for site design, it makes an otherwise tiresome task easier. 

Best wishes
TT

TW Tones

unread,
Oct 20, 2020, 6:48:13 PM10/20/20
to TiddlyWiki
TT et al,

In relation to different operational modes,

I have being thinking about this a lot and use a few modes in my own wikis, but I would love to see them adopted more widely

They follow this format
  • A config tiddler eg $:/config/author-mode
  • Which includes a field config-values containing a list of values or a filter
  • The text contains the selected mode value
  • A field can be added to any tiddler eg author-mode whose value will override that in $:/config/author-mode if present
  • A matching macro <<author-mode>> that returns the current mode on any tiddler after testing if the field author-mode overrides it.
  • Then in tiddlers you can include code that responds to different modes
  • I have a config tool that detects and displays the values for selection on any tiddler containing config-values
Standard modes starts with wiki-mode which has the values of view update edit etc...

Then I recommend the following modes at a minimum;
  • author-mode
  • designer-mode
  • debug-mode
When I find my exhaustive list I will share.

So each will have;
  • A config tiddler and Config-values
  • A matching fieldname
  • A matching macro that returns the value
  • The ability to select the value from a list or filter in config-values
Something I have learned.
  • Sometimes it is better not to code parts of a tiddler to operate in one mode or the other, but do this within the macros you use last
  • Imagin a field macro 
    <<field fieldname>>
  • Within this macro you can determine the wiki-mode or local override and display the field according to the mode eg view update or edit.


A new topic for comments posted


Tones

Ste

unread,
Oct 23, 2020, 7:34:39 AM10/23/20
to TiddlyWiki
Finally got around to having a play on the not small screen.
I'm sure it's because of stuff I already had installed but with stories, I dragged over your stylesheet saq, there are no columns.
I can drag tiddlers around nicely vertically in each story though, which I quite like!
I have tried with stories disabled and I am also unable to make muri columns.
When I shift to small screen view it defaults to two muri columns and can't be toggled to one.
Will have a tinker...

Ste

BurningTreeC

unread,
Dec 13, 2020, 7:19:29 AM12/13/20
to TiddlyWiki
A little update for the Muuri StoryView:

Thanks to the contribution of an enthusiastic Muuri user we now have a row-based layout, too. You can enable it through the ControlPanel -> Appearance -> Muuri -> align top/bottom/rows

There are still some bugs to fix regarding dragging between grids and I'm thinking about ditching that feature. But maybe I'll get some help with that, too

here is the github repo: https://github.com/BurningTreeC/tiddlywiki-muuri (star it if you like it)


all the best,
BTC

Mohammad

unread,
Dec 13, 2020, 1:13:15 PM12/13/20
to TiddlyWiki
Great Job BTC, Useful new row layout.

--Mohammad
Reply all
Reply to author
Forward
0 new messages