The Muuri StoryView is back

[BurningTreeC]

First draft, testing prerelease, version 0.0.1 of the Muuri StoryView plugin

I hope that 0.0.2 / 0.0.3 can be a first stable release

Besides of older browsers and more unknown ones I hope there's good browser support - this draft should show over time where the problems are

Older versions with similar or the same functionality were named "TiddlyTouch", "MuuriTouch" etc.

Now it's simply called the "Muuri StoryView" since it's just that, a storyview that can be used with list widgets

(MuuriTouch / TiddlyTouch were relying on a muuri widget, which is complicated and removed)

https://burningtreec.github.io/tw5-muuri-view

One of the starting tiddlers contains a list of issues regarding some ui problems

I'll update that tiddler when there are more issues arising

Whoever is interested in testing this, please try it in a safe wiki, make a copy of the original one, use an empty wiki, don't risk loosing your work through a mistake

I really hope it already works as fine crossbrowser as it does on my linux machine using chrome and firefox

I'm especially interested in feedback by Safari users ... does it throw errors, does it run smoothly etc ...

If everything works - Experimenting time! I believe that many nice things can be created with this

all the best with a jodler,

btc

[Jan]

Hello Simon,
I have been looking forward to this :-) .
It looks a looks sleeker than the first version. Is there a new version of the hammer-widget below? I have been looking even more foreword to that...

Ahoi! Jan

--
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/87f4f323-d24a-4953-8627-1ba72895a5d2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jan]

...One big advantage already: the compability to my old Firefox-Version ist better, the old muri did show a red screen, this one works without problems.

Jan

Am 18.02.2019 um 20:39 schrieb BurningTreeC:

[BurningTreeC]

Hello Simon,
I have been looking forward to this :-) .
It looks a looks sleeker than the first version. Is there a new version of the hammer-widget below? I have been looking even more foreword to that...

Hi Jan, nice to read from you!

Yes it is a lot more performant now than previous versions

There's no hammer-widget involved, only the hammerjs library, which is used by muuri internally

I'm not planning to release any new hammer widget soon, but I hope that my examples and the awesome new widget tutorials by @Brian Theado can help users creating their own 

[@TiddlyTweeter]

BTC

Excellent. 

-- Performance seems better again?

-- Interface is simpler but pretty much just as good practically?

-- Query: How well will it do mobile?

Its a great tool and I think very close to real use.

Best wishes

Josiah

BurningTreeC wrote:

[Mohammad]

I love it! Amazing!

Thanks for all your efforts!

--Mohammad

[BurningTreeC]

BTC

Hi @TiddlyTweeter !

 

Excellent. 

-- Performance seems better again?

 Yes I hope that it's more performant on all browsers now. It is on mine, I get best performance on Chrome/Chromium, so TiddlyDesktop should work very well, too

-- Interface is simpler but pretty much just as good practically?

The simpler the better I think. Just what is needed 

-- Query: How well will it do mobile?

We'll have to try. The stylesheet included in the plugin does not contain many styles for narrow screens, which results in tiddlers being positioned full-width, ignoring the columns button

Here users can add their preferred styles, I just wanted to leave it as close as possible to the standard tiddlywiki style for mobile devices, because I have no idea what works best there

 

Its a great tool and I think very close to real use.

Great, thanks! 

[BurningTreeC]

I love it! Amazing!

Thanks for all your efforts!

--Mohammad

Hi Mohammad, when you find issues or you get ideas how to do things better, please let me know :)

Glad you like it 

[BurningTreeC]

BTC

Hi @TiddlyTweeter !

 

Excellent. 

-- Performance seems better again?

 Yes I hope that it's more performant on all browsers now. It is on mine, I get best performance on Chrome/Chromium, so TiddlyDesktop should work very well, too

-- Interface is simpler but pretty much just as good practically?

The simpler the better I think. Just what is needed 

-- Query: How well will it do mobile?

We'll have to try. The stylesheet included in the plugin does not contain many styles for narrow screens, which results in tiddlers being positioned full-width, ignoring the columns button

Here users can add their preferred styles, I just wanted to leave it as close as possible to the standard tiddlywiki style for mobile devices, because I have no idea what works best there

Just want to add: the DREAM is, that some css wizard (JD, do you hear me?) creates a muuri stylesheet for mobile use :o)

... just dreaming ()

[Jan]

Hello Simon,

> I'm not planning to release any new hammer widget soon,

That is a pitty, I really was hoping for a version of the movable-widget
which I can import to my Wiki. So far I just got it to work by modifing
your Demo, I really don't know what was missing.
I looked at Brians Documentation which is indeed very fine...but I fear
a major step like the hammer-widget this will take me months.

Best Wishes Jan

[BurningTreeC]

Hi Jan,

the movable widget is really close to being very usable, that's true

Maybe I'll concentrate on finishing that one and making in universally usable and others can created later, by others, using it as an example

I'll have a look if I can do it without spending too much time

 

[BurningTreeC]

Wow, that's not good german, even I don't understand what I wrote

 Maybe I'll concentrate on finishing that one and making it universally usable - and others can be created later, by other people, using it as an example

[Jan]

Am 19.02.2019 um 15:50 schrieb BurningTreeC:

Maybe I'll concentrate on finishing that one and making it universally usable - and others can be created later, by other people, using it as an example

That would be absolutely greeaaaat! Suberbe...
 
For my usecase (emulating padlet) it would be fantastic if you could get the scalability of the frame into movable-widget...but I don't want to be to demanding.

Ahoi Jan.

[TonyM]

BTC

Good work, and moving it to a story view is a great approach, I believe it may extend the use and applicability because it has less impact.

With my big screen at home laying out the tiles looks fantastic, yet my thoughts immediately come to the possibility of being able to toggle at least three view template states

1. The Current full tiddler
2. Removing the toolbars and subtitle leaving only the title
3. Removing all "tiddler chrome" including the title to show only the content

In each case still enabling drag and drop, even a tiddler by tiddler toggle between the three states above (Whilst hiding the toggle mechanism unless hover or click?)

Finally for presentations if there could be a highlight on mouse hover it would be easy to show the audience where the focus should be.

I can see using the option 3 above to display a dashboard of dashboards

Only in the spirit of improvement, these suggestions in no way undermine how valuable the tool already is, thanks so much.

Regards

Tony

[BurningTreeC]

BTC

Good work, and moving it to a story view is a great approach, I believe it may extend the use and applicability because it has less impact.

With my big screen at home laying out the tiles looks fantastic, yet my thoughts immediately come to the possibility of being able to toggle at least three view template states

1. The Current full tiddler
2. Removing the toolbars and subtitle leaving only the title
3. Removing all "tiddler chrome" including the title to show only the content

In each case still enabling drag and drop, even a tiddler by tiddler toggle between the three states above (Whilst hiding the toggle mechanism unless hover or click?)

Finally for presentations if there could be a highlight on mouse hover it would be easy to show the audience where the focus should be.

I can see using the option 3 above to display a dashboard of dashboards

Only in the spirit of improvement, these suggestions in no way undermine how valuable the tool already is, thanks so much.

Hi Tony, thanks for your great feedback

I've found that such things shouldn't be part of the plugin because they can be made by anybody, it's just buttons css and wikitext

The problem is that I use things differently from wiki to wiki, that's why here I want to have the functionality not doable in wikitext,

later inventions can be addons or demos on the page I believe

There's already something new to discover on the page, probably with some issues that I'll try to fix soon ... we can drag from grid to grid, updating the corresponding list tiddlers. it's a great feature if everything works well

all the best,

Simon

[TonyM]

BTC

I understand. What mechanisium would you suggest I use?, a tiddler button to alter the viewtemplate of any given tiddler a tag that selects a css style that hides elements?

Thanks
Tony

[BurningTreeC]

BTC

I understand. What mechanisium would you suggest I use?, a tiddler button to alter the viewtemplate of any given tiddler a tag that selects a css style that hides elements?

Good question!

I think a button like the export-tiddler button would be useful, that stays within the more-tiddler-actions dropdown and opens a popup with a selection of options.

Then I think the viewtemplate needs to be modified, possibly just with a subfilter where it lists all tiddlers tagged $:/tags/ViewTemplate, so that the options mentioned above could just modify the subfilter

Maybe another subfilter where the userClass is defined, like userClass={{{ [subfilter{$:/config/tiddlers/viewtemplate/classes}] }}}, and the filter in $:/config/tiddlers/viewtemplate/classes: [all[tiddlers]prefix[$:/persistent/state/style/]suffix<currentTiddler>get[text]addsuffix[ ]addsuffix{!!class}] ~[{!!class}] ... or similar, so that buttons can just set tiddlers with the prefix $:/persistent/state/style/ and the suffix of the corresponding tiddler

just an idea

Thanks
Tony

[@TiddlyTweeter]

Ciao BTC

Quick question.

Is the gallery example "Muuri IN Muuri"?

Great potential I see in that.

Josiah

[BurningTreeC]

Ciao BTC

Quick question.

Is the gallery example "Muuri IN Muuri"?

Yes it is. A muuri IN/WITHIN another muuri is no problem. When dragging, it detects which muuri the drag corresponds to and moves only the items of that grid

 

Great potential I see in that.

Pretty cool it is 

Josiah

[@TiddlyTweeter]

BurningTreeC wrote:

TT: Great potential I see in that.

Pretty cool it is

It really is..

j. x 

[BurningTreeC]

Hi @all,

if you're interested in the functionality of connected grids that can interchange items by dragging,

the page https://burningtreec.github.io/tw5-muuri-view contains some new examples:

* dragging tags from one tiddler to another (hold control to copy / drag with two fingers to copy)

* a kanban demo

* two "image gallery" tiddlers that can interchange images

the base functionality is there and I'm seeking for ideas how to make it really accessible / comprehensible so that anybody can create this

currently, grids can be connected by providing a "connectedGrids" attribute with a css selector and all open grids matching that css selector will be connected so that items can be dragged from one to the other

<$list filter="[list[my-storylist-tiddler!!a-field]]" storyview="muuri" connectedGrids="[my-data-tag]" storyList="my-storylist-tiddler" storyField="a-field"/>

or

<$list filter="[list[my-storylist-tiddler!!a-field]]" storyview="muuri" connectedGrids=".tc-my-connected-grid-class" storyList="my-storylist-tiddler" storyField="a-field"/>

the documentation doesn't contain some of those attributes because I'd like to improve them so that they become usable

if you're interested, I'm happy about feedback!

all the best,

btc

[Mohammad]

Hello BTC,

 This is absolutely amazing! It can be used for many real cases! The kanban is an example you have given.

I would appreciate if you could improve the documentation and as you said in the post, anybody can do this!

One question:

 I did not understood the purpose of drag and drop of tags! I see the cat image moving backward and forward, but I did not 

get how it is done!

--Mohammad

[Mohammad]

One more suggestion,

 When editing a tiddler, it is good to have a button to simple occupy the whole story river and then back to its precious state.

Now, I have to click on number of column to cycle to get one column view!

This is just a suggestion, and I am not sure if it is straightforward or not but the button can have below states

* maximize: editor occupies the whole story river

* minimize: editor is in folded state (what is is available now in view mode)

* restore: editor gos to original state (e.g restore the same number of columns and it back to its original position)

Mohammad

[BurningTreeC]

Hello BTC,

 This is absolutely amazing! It can be used for many real cases! The kanban is an example you have given.

I would appreciate if you could improve the documentation and as you said in the post, anybody can do this!

Hi Mohammad, as I said, I will add the missing parts to the documentation when it's settled how the attributes should work, where they need improvement to be (easily) usable 

One question:

 I did not understood the purpose of drag and drop of tags! I see the cat image moving backward and forward, but I did not 

Which cat image?

Aren't you able to drag a tag from a tiddler to another?

[Mohammad]

One more question:

Is it possible to have several kanban list? Assume I follow up three projects each needs a Kanban?

--Mohammad

[BurningTreeC]

One more suggestion,

 When editing a tiddler, it is good to have a button to simple occupy the whole story river and then back to its precious state.

Now, I have to click on number of column to cycle to get one column view!

Do you mean that you want a tiddler that's being edited shown full-size?

In that case, create a stylesheet tiddler, put this inside:

@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
.tc-story-river.tc-muuri-river .tc-tiddler-frame.tc-tiddler-edit-frame {
width: calc(100% - (2 * {{$:/config/muuri/tiddler/margin}}));
}
}

 

This is just a suggestion, and I am not sure if it is straightforward or not but the button can have below states

* maximize: editor occupies the whole story river

like the example above or taking the full screen?

I think the latter could be a default when on narrow (mobile) screens, but I don't think that I'll add any additions for narrow screens to the plugin. But possibly as demos to the page later on

 

* minimize: editor is in folded state (what is is available now in view mode)

I don't see why it should be part of the plugin because it would involve changing the edit template. I don't want to change core tiddlers

[BurningTreeC]

One more question:

Is it possible to have several kanban list? Assume I follow up three projects each needs a Kanban?

Yes, as long as your device and browser can handle it ... try cloning the kanban demo ... you can change the lists of all clones so that they use different story lists and you have different kanbans using different lists

[Mohammad]

I can drag tags and it is amazing!
My question was about the "random distorted cat" image! When drag and drop tags, it seems this image disappears and reappears.

[Mohammad]

Yep!

That's it! Why not to have it!

Thank you

[BurningTreeC]

I can drag tags and it is amazing!
My question was about the "random distorted cat" image! When drag and drop tags, it seems this image disappears and reappears.

Do you see this on a mobile device? smartphone?

the random distorted cat is the only image that's embedded in the wiki, the others are online images... when dragging tags, the storyview makes a full refresh, which causes the image gallery to render again ... I guess that the cat image isn't cached by the browser and so it needs more time to load again and on less powerful machines you'll see that ... I don't see this on my desktop pc ... just an assumption.

I'm about to improve that refresh mechanism, maybe those kind of things are going to disappear ...

The current version is a draft / prerelease ... there are still issues. Thanks for reporting this one!

[Mohammad]

Got it!

Thank you

[BurningTreeC]

Yep!

That's it! Why not to have it!

Hm, I can see that it's useful when the columns are - say - more than three. then I could make tiddlers in edit-mode show at a configurable size.

That's a pretty good idea, thank you!

[@TiddlyTweeter]

 

There is a Wiki called Muuri,

Made to be friendly and furry.

It expands to your needs,

As infants it feeds.

And deals with bad rhyming. 

[BurningTreeC]

best poem in this thread. period 

[TonyM]

Btc

As the kanban demo illustrates I love this view in a tiddler approach. One thing it raises for me is in my gtd wiki I use a field to store the project, rather than tags, or I would have too many. Would it be feasible to specify a field rather than a tag for dropping on a story/column?

This would provide a nice way to apply field values.

If all that it does is move tiddlers between stories, could we have a button to set a tag or field for every item in a story?

Regards
Tony

[BurningTreeC]

Hi Tony, it already sets fields, not tags. you can give it a storyList attribute (which defaults to $:/StoryList) which is the tiddler title and a storyField attribute which defaults to "list"

If you omit those attributes it sets the $:/StoryList ... which is a caveat but like that I don't have to change $:/core/ui/PageTemplate/story and pack it in the plugin ...

The attribute changeStoryList can be set to "no" and it doesn't change any tiddler list or field at all

Regards
Tony

[TonyM]

BTC

Thanks So much, I realised after replying the field basis. It is still a little foggy on exact detail but I get the functionality and options.

I wonder if your same story approach could be applied to your design idea http://selectiondashboard.tiddlyspot.com/ I say this because this would be a beautiful way of both data capture (my reply on github), muuri layout design and dashboard design.

Love your work

Tony

[Canne]

Hi, great job! I tried Muuri StoryView v0.0.1 and was impressed by is quality and its potential in book authoring. Do you have plans to share regarding eventual 0.0.2/0.0.3 versions you mentioned or is this a proof of concept for something else you are working on?

Best regards,

Petri

On Monday, February 18, 2019 at 8:39:28 PM UTC+1, BurningTreeC wrote:

First draft, testing prerelease, version 0.0.1 of the Muuri StoryView plugin

I hope that 0.0.2 / 0.0.3 can be a first stable release

<snip>

[BurningTreeC]

Hi @Canne,

an update for the muuri StoryView is planned, but I currently don't find the time for updates

[Canne]

Thank your very much for the confirmation and for the excellent work!

[@TiddlyTweeter]

BTC

Hai lavorato molto. Ho imparato a guardarti.

In parte, non sei solo tu. Si tratta di vedere cosa stavi cercando di fare.

E imparare da te.

Josiah