A multi-column Layout / Storyview

,
#42

I dunno. I been testing on a Windows tablet (has pen and mouse) and a Chomebook in tablet mode (no mouse or pen). The MOUSE seems to mark the easiest difference.

It all gets a bit too esoteric for my brain working out what to do.

In terms of final usage. Well my users are mainly on touch-only devices so it is an issue to implement for them. But for DT work it is already brilliant.

A comment
TT

#43

It is really easy to use now, when ON the drag icon is almost always present. But then this will “compete” with other drag and drop or click to edit zones. However we can drag these tiddlers to another wiki Just tested).

It seems to me we need a few conventions so people know where to find a drag “handle” by default, with or without switching on. Then It would then be helpful if we could select what function the overall tiddler body has. For example

  • click to edit,
  • click to tag with current tag etc…
  • Drag and drop to another wiki
  • Drag and drop in story (I love that - it’s better than the open tab)
  • Drag and drop across multiple stories/columns
  • Drag and drop into sidebar tab or “basket” (title only)
  • I can see a need perhaps with large tiddlers to have an “overflow” set:, in these cases we may want to be able to drag the bottom to make the tiddler taller.

So my suggestion would be for us to agree on some conventions so that;

  • If a tiddler is story column/story draggable display an Icon we can drag with
    • Provide an option to allow the body to be draggable (as in @BurningTreeC multi-columns)
  • If we had a tool to make tiddlers click to edit (We already have a button)
    • Provide an option to allow the body to “click to edit”.
  • In another case we may want the tiddler to also be a customisable drop zone.
    • I am developing a solution to drop links on tiddlers and capture them in fields.

Note: We are not limited to current User Interface elements for example here on one of my wikis, I introduced new UI Elements;

Snag_46e4692

What I am suggesting is provide icons or area conventions for different operations but then also allow them to be switched between installed alternatives.

Then it we could have a switchable config to choose what individual tiddlers or all tiddlers body is;

  • Draggable
  • Can be dropped on
  • Can be clicked on
  • Can be modifier click etc…

So I suppose I think we need tiddlers to have a convention that we can plugin or configure for different functions.

I hope what I say makes sense (I know what I mean)

Slideshow / presenter based on horizontal storyview
#44

Hi folks,

now columns are dynamically creatable / removable :slight_smile:

https://burningtreec.github.io/tiddlywiki-multi-columns

If anyone is interested to dive in and help in the development process, here’s the GitHub page:

Best wishes,
Simon

2 Likes
#45

Ciao @BurningTreeC

Very neat. Very useful! The Ctrl+Alt+N to make new columns is super. And the Sidebar navigation to columns is also v. neat …

Screenshot 2022-04-02 115020
Screenshot 2022-04-02 115020906×212 36.4 KB

This is just a comment … allowing new columns can be a challenge horizontally … in that the overall total available width is preset and limited.

For my kind of use it might be interesting to allow infinite width? Meaning you’d get horizontal scrolling once the columns exceeded the standard width. I certainly think for this kind of app, with more than a few columns, overall width figures? I’d say it is likely better to have a “width of Tiddler” set and force horizonal scrolling to ensure it persists.

(I hope this is clear.)

Overall I think it great.

Tanto grazie, TT

1 Like
#46

Ciao @TiddlyTweeter

Thanks, I try my best …

The horizontal challenge:

  1. I’m inclined not to overflow the page horizontally
  2. Users should use the amount of columns that fits their screen
  3. But since this is hackable wikitext everyone can make this his own Layout
  4. To 3) … there are some adjustments that are not (yet?) in the core, so the hackability is not fully given at the moment

Overall it’s clear what you intend, thanks!

Grazie mille,
Simon

1 Like
#47

Very cool. Just opened on my phone and it glides very nicely from column to column in portrait and shows all three columns in landscape.

I can’t drag tiddlers from one to another.

Just spotted horizontal scroll bar!

Is this building on your muuri work?

#48

Hi Simon

Wonderful!
I can open the same tiddler in more than one column! This is amazing!
The new feature of adding/removing new columns is absolutely neat!

This is very useful!

1 Like
#49

A small issue: Clicking a link to a tiddler is open in story river (same column) does not scroll to that tiddler

Example:
img_1059_msedge

#50

A Sample Application of Multi-Column Layout:

This screencast shows one usecase for multi-column layout. It employs an editor with a select widget to select among tiddlers, edit in one column and live preview in another column.
The multi-column layout allows separate scrollbars. This is useful for long tiddlers, like the one contains solution to an exam question!

img_1067_msedge

2 Likes
#51

1 column, 2 columns, infinite columns.

There are all kinds of use cases for infinite columns. All related to the ability to see and/or navigate to more information.

First one that comes to mind is Kanban. The use cases for more than two Kanban columns, you could find the same kind of uses cases for more than two columns in TiddlyWiki. All about visual organization and navigation.

Same reasoning when you look at Ted Nelson’s Xanadu.

Same reasoning as why anybody would need more than two columns in a spreadsheet.

A use case: a column of current events and how they related to events of 50 years ago in a second column, and to 50 years before that in a third column, and so on and so forth.

#52

Nice one! Use case - storyboarding. Thanks BTC.

#53

Hi @Ste_W ,

this isn’t building on my muuri work, it’s all wikitext :slight_smile:
yes for mobile use I will have to add some css to make it work

1 Like
#54

Hi @Mohammad ,

yes there’s this navigation issue and I wanna solve it somehow
I’d be interested in what @jeremyruston would have to say about it :slight_smile:

#55

No problem, what is the issue?

#56

Thanks for jumping in @jeremyruston :slight_smile:

The issue is, that navigation within the different columns doesn’t work
What I mean is the automatic scrolling to the domNode when opening a link for example

#57

Hi @BurningTreeC
Thanks for this usefull innovation, which to mind has great potential.
Some Ideas:

  • Astonishingly I like the multicoulumn-view best on my mobilephone. There it could allow to navigate through through a long article where the chapters are columns. The abiltiy to snap ta collumn to the viewport on small screens is great, it would be great to have a switch allowing this on large screens as well.
  • With a smart navigation-mechanism, this could be the basis for a native reveal.js like presentation like Sukimas implementation here.
  • With many tiddlers open simultaneously, it would be great to integrate your dynaview-mechanism to load the content dynamically.

Best wishes Jan

#58

Hi @JanJo ,

Thank you for your feedback!

  • The trick with the snapping of columns to the viewport is stolen from @jeremyruston’s twpup-tools. I can integrate a switch to allow this on large screens as well, no problem
  • TiddlyWiki can do lots of stuff natively with the right ideas :slight_smile:
  • The dynaview mechanism is Jeremy’s innovation … but yes, it could be integrated, I just don’t know how well it would play with the drag-n-drop mechanism

Best wishes Simon

#59

Hi @JanJo again,

I’m currently working on the navigation mechanism so that it works

Best wishes,
Simon

#60

Hi @BurningTreeC the storyview attached to the story river list widget should handle that. Conceivably the list widget itself is getting refreshed when a navigation occurs? That would prevent the storyview animation from working.

#61

Thanks Jeremy,

now I found the issue. It was the missing “history” attribute on the list widget. I didn’t even know that it existed :slight_smile:

1 Like