[TW5] "Muuri-Touch" plugin

[BurningTreeC]

Hello there,

currently I'm working on a plugin that creates a drag&drop-enabled storyview

it's based on the muuri widget by https://ustuehler.github.io/tw5-material/ which is based on https://github.com/haltu/muuri

it also uses https://github.com/hammerjs/hammer.js and https://github.com/Popmotion/popmotion for touch-actions/drag-actions and pinch-to-zoom

the code repository is on github: https://github.com/BurningTreeC/TW5-muuri-touch

It's a work in progress!  

And ... I'm very open to contributions, so don't hesitate to change, add, comment!

A PREVIEW of the actual state is found on http://muritest.tiddlyspot.com

what's missing?

• a stylesheet for mobile view wip
• buttons to set tiddler-widths by klicking (currently only by pinch-zoom) - the button would only have to apply a class ( span-2 | span-3 | span-4 | span-6 | span-9 | span-12 ) to the tiddler-frame not needed, use tw css
• a packed plugin
• a button to keep tiddlers on its position ... necessary?
• a different approach would be a second container on the left/right that can hold tiddlers from the story river - simply by moving them from the river to the container - see here:
• https://codepen.io/niklasramo/pen/wJKMQz
  

• editing a tiddler should take place on tiddlers position (move tiddler-draft to tiddler-grid-index inside muuri-widget / muuri-storyview)  fixed
• fix "setData" error when dragging inside editor  fixed
• error only occurs with codemirror editor
• default editor prevents dragging etc inside textareas
• question: how is that done?
• ... more to come

cheers, BurningTreeC

[@TiddlyTweeter]

Ciao BurningTreeC

Seriously good!!! Clean design. Nice the base model echoes the visuality of the original vanilla TW look.

I wonder if it could also support tiddlers that are more than one column wide mixed in with tiddlers a column wide?

On better mobile look: some of what Thomas has just launched may be relevant. His approach handles menus very well.

Best wishes
Josiah

On Thursday, 21 December 2017 07:04:51 UTC+1, BurningTreeC wrote:

Hello there,

currently I'm working on a plugin that creates a drag&drop-enabled storyview

it's based on the muuri widget by https://ustuehler.github.io/tw5-material/ which is based on https://github.com/haltu/muuri

it also uses https://github.com/hammerjs/hammer.js and https://github.com/Popmotion/popmotion for touch-actions/drag-actions and pinch-to-zoom

the code repository is on github: https://github.com/BurningTreeC/TW5-muuri-touch

It's a work in progress!  

And ... I'm very open to contributions, so don't hesitate to change, add, comment!

A PREVIEW of the actual state is found on http://muritest.tiddlyspot.com

what's missing?

• a stylesheet for mobile view

• buttons to set tiddler-widths by klicking (currently only by pinch-zoom) - the button would only have to apply a class ( span-2 | span-3 | span-4 | span-6 | span-9 | span-12 ) to the tiddler-frame

• a packed plugin
• a button to keep tiddlers on its position

• editing a tiddler should take place on tiddlers position (move tiddler-draft to tiddler-grid-index inside muuri-widget / muuri-storyview)

• fix "setData" error when dragging inside editor

• error only occurs with codemirror editor
• default editor prevents dragging etc inside textareas
• question: how is that done?
• ... more to come

cheers, BurningTreeC

[BurningTreeC]

Ciao Joshua,

it already mixes different widths ... i have a touch laptop, on such devices you can try it very well... zooming (with your fingers) on a tiddler makes him wider/smaller, from 1/5 story-width over 1/4, 1/2, 3/4 to full width.

alternatively, at the moment, you can set a field named "span" on a single tiddler. supported values are [2 - 12] where 12 is full width.

I'm gonna take a look at Thomas' work, saw it before but didn't have time to look closer. Thanks for the hint!

Edit: I'm gonna adopt the view for smartphone - views to be able to try it out if one doesn't have a touch notebook...

Tiddlers are gonna be small there, but I would like to have 2 - 3 columns on small-screen devices in landscape mode

Edit: now I see that the workaround by setting the span field doesn't work anymore. I've added the possibility to set widths by pinch-zooming and that interferes with that first solution.

This will not be fixed, it will be replaced by a button or something similar to set a width for each tiddler.

Best wishes,

Simon

[BurningTreeC]

@Joshua

some of what Thomas has just launched may be relevant. His approach handles menus very well.

what was your idea there? I took a look inside and it's very cool and useful, but there's a lot of niceness... could you post a link or a screenshot?

Am Donnerstag, 21. Dezember 2017 18:04:29 UTC+1 schrieb @TiddlyTweeter:

[BurningTreeC]

Merry Christmas to all!

I have some time now, and here are some muuri updates

• There are new Buttons to try
• enable/disable dragging
• vertical/horizontal view
• align tiddlers right/left
• switch from muuri to tiddlywiki-view and vice versa
• gaps filling behaviour on/off - this is pretty useful when switched off. leaves more open gaps when tiddlers have different sizes, but keeps them at their position when editing them for example
• ...
• There are some variables to explore in $:/config/muuri

I've tested different things now

• different widths for tiddlers
• it's possible to set widths automatically based on the tiddler height
• atm zooming with two fingers makes tiddlers bigger/smaller in defined steps
• synchronizing the StoryList when dragging
• works, I know where to hack and have it working somehow, but ...
• dragging Tiddlers refreshes the StoryList, but because of muuri's free sorting this doesn't behave like the user expects.
• I need to figure out how to adjust muuri's sorting to have this working good
• this isn't online, if you're interested, I could update it on tiddlyspot for a demo
• providing the actionTiddler variable when dragging a Tiddler
• should make possible to drag Tiddlers onto droppable widgets to have some fun

This is it from me,

BurningTreeC

Am Donnerstag, 21. Dezember 2017 07:04:51 UTC+1 schrieb BurningTreeC:

Hello there,

currently I'm working on a plugin that creates a drag&drop-enabled storyview

it's based on the muuri widget by https://ustuehler.github.io/tw5-material/ which is based on https://github.com/haltu/muuri

it also uses https://github.com/hammerjs/hammer.js and https://github.com/Popmotion/popmotion for touch-actions/drag-actions and pinch-to-zoom

the code repository is on github: https://github.com/BurningTreeC/TW5-muuri-touch

It's a work in progress!  

And ... I'm very open to contributions, so don't hesitate to change, add, comment!

A PREVIEW of the actual state is found on http://muritest.tiddlyspot.com

what's missing?

• a stylesheet for mobile view

• buttons to set tiddler-widths by klicking (currently only by pinch-zoom) - the button would only have to apply a class ( span-2 | span-3 | span-4 | span-6 | span-9 | span-12 ) to the tiddler-frame

• a packed plugin
• a button to keep tiddlers on its position

• editing a tiddler should take place on tiddlers position (move tiddler-draft to tiddler-grid-index inside muuri-widget / muuri-storyview)  fixed
• fix "setData" error when dragging inside editor  fixed
• error only occurs with codemirror editor
• default editor prevents dragging etc inside textareas
• question: how is that done?
• ... more to come

cheers, BurningTreeC

[BurningTreeC]

UPDATES:

There are a lot of new features and fixes to try out on http://muritest.tiddlyspot.com

I've adopted the different views for mobile devices, I guess they need to be tested and refined

If you're interested, please test it and report here if you find some strange behaviour or if you have an idea how to make things differently, or just leave a comment if you like it :)

*works best on chromium, google chrome

best wishes,

BurningTreeC

Am Donnerstag, 21. Dezember 2017 07:04:51 UTC+1 schrieb BurningTreeC:

[@TiddlyTweeter]

Ciao BurningTreeC

Looking good.

Commenting on an earlier post you made to me about Thomas' CSS work that is mobile friendly ... I was thinking most about his implementation of the Sidebar Menu as a "SLIDE OVER" that does not force column narrowing where you don't want it. The right side bar come in without changing the dimensions of the story river.

One other point. (Maybe I am unusual) I use my PC desktop a lot in Portrait, not Landscape. And Muri works well except for titles that get a bit stretched out at the font size. Its not so apparent in Landscape. Just a comment. Couple of screen shots ...





This is not so much a fault as a need to Alter Font Size on Orientation OR (maybe) enforce reasonable Minimal Widths for Tiddlers?

Some thoughts.

Best wishes
Josiah

[BurningTreeC]

Thanks for your input, Joshua

about the sidebar: have you seen the horizontal view? there the sidebar is sort of an overlay

I'm thinking about a setting for vertical view to have it fixed or like in horizontal view... yes, I'm making that, it's an instant plus

About portrait mode, that's on my todo list, I know, the widths are a bit disturbing.

I just don't know if I should use an additional media query like "orientation" or "device-aspect-ratio" or if I should go with min-width max-width media queries

I'll figure that out, suggestions welcome!

Thanks for your screens, they help!

salut, Simon

[Dave Gifford - http://www.giffmex.org/]

WOW a lot of great stuff in there!

[BurningTreeC]

Hi @Dave Gifford,

thank you!

do you find something useful about the whole concept?

kind regards,

Simon

[David Gifford]

Hi BurningTreeC

1. I could see using this myself as a format for sharing quotes and insights on a topic in a visually pleasing way.

2. I could see using it as a photo gallery, but I would probaby try to find a way to reduce the side and bottom margins, and even hide the tiddler title area, so that the tiddlers are pure photos with an edit menu on hover.

3. I could see the horizontal menu being great for presentations or tutorials, anything that is step-by-step or progressive in some way.

4. I am not sure I understand what exactly is happening when I click the button in the 'create a bunch of image tiddlers' or how it might be used. Are those in fact tiddlers of the images? Yet they have no titlebar or editing. And yet they can be dragged. Can you describe what is actually happening? And use case - would it be for opening a gallery of images with a given tag?

5. I don't know that I would use them myself, but the "this is so cool it needs to be showcased" effects are really neat.

6. I think I would probably also want a 'safe' version that is just scaffolding without the ability to drag or resize, for publishing materials for others. It can get disorienting for end users when things slide around and you wonder if you lost something. For example, I have no idea what I did to create this mess, which blocks my access to a good portion of the sidebar and looks chaotic.

7. Maybe a button or dropdown to toggle the number of columns would be nice, it that is a workable possibility?

Anyway, this opens up some interesting possibilities. Thanks a bunch for all your work on this.

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/DJjkZRGwwQw/unsubscribe.
To unsubscribe from this group and all its topics, 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/7cddf7e4-1bdb-4081-bc93-7d675523c961%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[David Gifford]

Sorry, I meant reduce the side margins and bottom margins of the tiddlers. Should have made that clearer.

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

[BurningTreeC]

Hi David, thanks a lot! Every comment helps

2. I could see using it as a photo gallery, but I would probaby try to find a way to reduce the side and bottom margins, and even hide the tiddler title area, so that the tiddlers are pure photos with an edit menu on hover.

this can easily be done with a stylesheet:

.tc-tiddler-frame .tc-title, .tc-tiddler-frame .tc-subtitle, .tc-tiddler-frame .tc-tiddler-title-icon {

     display: none;

}

...hides title, subtitle and tiddler-title icon (if there is one)

4. I am not sure I understand what exactly is happening when I click the button in the 'create a bunch of image tiddlers' or how it might be used

thats just for demonstrating purposes in this demo site. they are all tiddlers where title, subtitle, tags and control buttons are hidden similar to the example to hide title, subtitle and icon.

the button just creates new tiddlers with a filter that filters all system images, applies a tag "sampletag" to each of them and opens them.

in a stylesheet there is:

.tc-tagged-sampletag .tc-tiddler-frame .tc-title, .tc-tagged-sampletag .tc-tiddler-frame .tc-subtitle, .tc-tagged-sampletag .tc-tiddler-frame .tc-tiddler-title-icon ... ... ... and so on {

     display: none;

}

every tiddler with the tag "sampletag" then shows no title, subtitle, tag ... they are just visually hidden. ".tc-tagged-" means: each tiddler with the tag that comes after ".tc-tagged-" should have this style.

This is just to have something to play with, to drag around, to be inspired. And an idea for a usecase, like an image gallery.

"this is so cool it needs to be showcased"

this is actually a plugin called "TiddlyWikiFormula" that's being developed these days and weeks and these are some examples he provides on the plugin page http://evanbalster.com/tiddlywiki/formulas.html

I think it's a great piece of work and it offers so many possibilities I'm getting a head-ache. It's not related with my little project.

For example, I have no idea what I did to create this mess, which blocks my access to a good portion of the sidebar and looks chaotic

This is a mess that's possible at the moment ... dragging worked better before, until I began working on something that's not finished. I don't like that, too and I'll fix it soon.

Thanks for the idea with the Button for more/less columns! That's a no-brainer and an instant plus. I'm gonna make one.

thanks for your reply and help!

best wishes,

Simon

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

[BurningTreeC]

yes, that's easily doable in css with a stylesheet, no problem

6. I think I would probably also want a 'safe' version that is just scaffolding without the ability to drag or resize, for publishing materials for others

First, the MESS now is gone, I fixed it :)

#2: now if you drag Tiddlers around, the StoryList updates. That may help a little bit not to get lost

#3: there already is a button to disable dragging, every Tiddler has one in the top right corner and there is one for the pagecontrols, just check him in the control panel

#4: you can also disable dragging by changing "drag-enabled" in the "$:/config/muuri" tiddler to "no" - then you switch to tiddly view and back - and dragging is disabled. With the buttons it's easier, though

#5: the "fill-gaps" button toggles between two ways, muuri lays the Tiddlers on the screen. with fill-gaps enabled, tiddlers move more, because muuri tries to fill gaps and the sort-order changes more often because of that. with fill-gaps disabled there's less movement and less changes.

all the best,

Simon 

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

[David Gifford]

.tc-tiddler-frame { padding: 0px 0px 0px 0px;} is another step towards making a borderless image gallery. (Makes text tiddlers look terrible, of course) There is still the top and bottom edges that have white space.

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

To unsubscribe from this group and all its topics, 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/1f5f5363-617d-4bff-ae52-f3f3665fcec2%40googlegroups.com.

[BurningTreeC]

@David Grifford, @TiddlyTweeter,

now there's a button to change columns, works very well, thanks for your help!

I'd like to have one last feature, triggering the droppable widget when dropping a tiddler onto it.

I have a JSON string that contains the tiddler title when Tiddlers are dragged around

I believe there's not that much missing, but I'd need some Info what's needed to trigger

If there's someone who can provide me some short info, that would be great and much appreciated!

kind regards,

BurningTreeC
Am Donnerstag, 21. Dezember 2017 07:04:51 UTC+1 schrieb BurningTreeC:

[David Gifford]

Cool! I am curious why the two and three column options don't expand to fill the screen width as scaffolding usually does. But definitely a nice feature. Thanks!

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/DJjkZRGwwQw/unsubscribe.
To unsubscribe from this group and all its topics, 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/a71ea122-393f-4a89-938d-883179338687%40googlegroups.com.

[BurningTreeC]

@David Grifford, don't they? :'D ... they should if I understand what you mean

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

[David Gifford]

Here are my screenshots.

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

To unsubscribe from this group and all its topics, 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/2e1e3544-b458-4e99-886d-8946cc44daa6%40googlegroups.com.

[Dave Gifford - http://www.giffmex.org/]

Here are my screenshots

[BurningTreeC]

oh, I see

that's because they should be two columns - three columns - 4 columns but they are too wide, so they don't show up side-by-side

there's only a bit of css tinkering that's missing. it's done in the "toggle muuri columns macro" tiddler. there's some calculation and I knew, I didn't get it totally right.

maybe you come up with something that works for you

there's actually two "4 column" views, one where all tiddlers have fixed width, the other where you can make them bigger/smaller by tags or by zooming.

anyway, this was a fast implementation and will get tuned

the stylesheet has to be cleaned up at the end - you can of course change everything with your own stylesheets

kind regards

[BurningTreeC]

An alpha state plugin is now available on http://muritest.tiddlyspot.com

It's meant for you if you like tinkering and testing

If you get it, if you find a solution for something or some errors, I'd ask you to give a short feedback, that'd be great!

p.s. there's an error when dragging links with dragging switched on - switch it off to do that

I'm curious about your feedback,

best wishes,

Simon

[Evgeniy Degtyar]

It looks like "toggle colums" button doesn't work.

I tried to install it on my and empty wiki but it just doesn't work.

четверг, 28 декабря 2017 г., 23:55:16 UTC+3 пользователь BurningTreeC написал:

[BurningTreeC]

Hello @Evgeniy Degtyar,

you need the eval plugin by @tobibeer to have it work,

I forgot to mention that, thanks for pointing this out!

get it here: http://tobibeer.github.io/tw5-plugins/#eval

and get also the math.js library on that site, it's needed to have the eval plugin work

though, it's possible to have it work also without that plugin, changing some lines...

I think that in the future the eval plugin will no more be a dependency. Right now, get it to have the columns working, or ... you can hack around in $:/plugins/BTC/tiddly-touch/macros and change the "toggle-muuri-columns" macro to your needs.

Also, if you're experiencing that columns are not side-by-side (tiddlers may  be a little bit too wide), change a value in that line: <$set name="computedDiff" filter="[eval[84 / <<columnCount>> + 16 / <<columnCount>>]]"> to <$set name="computedDiff" filter="[eval[84 / <<columnCount>> + 18 / <<columnCount>>]]"> or something higher ...

This calculation is not thought-out well, just a fast tinkering... if anyone finds a good solution for this calculation (the different tiddler-widths for 2, 3 and 4 columns) I'd appreciate :) 

Math makes me head-aches ;)

best wishes,

Simon

[Jed Carty]

If you don't need everything in the eval plugin you may be able to just use the css calc functions. https://developer.mozilla.org/en-US/docs/Web/CSS/calc

If you don't have a tiddlers type set to text/css than you can do transclusions in the css styles and it works as expected.

[BurningTreeC]

@Jed Carty,

thanks! I there I tried to have the css in a macro and from the Stylesheet just call the macros. To have a cleaner Stylesheet that's easier to read and to change.

To have a fast working demo I used the eval plugin, but a little bit of tinkering will make it work with the available tw filters I guess

I don't know if I want everything in the Stylesheet, gets very complicated for me to keep everything clean and overviewable (if that's a word)

so that's an attempt for having a slightly different logic.

Also, I can generate repeating css stuff with simple lists through such a macro, had some difficulties doing this directly in the stylesheet

maybe there's no reason for that?

[BurningTreeC]

@all,

someone willing to make/get/change/fix buttons (design, css, fit) that are used here?

also, which buttons should be kept, which aren't that useful - additions, changes, ideas?

saluti a tutti,

Simon

[BurningTreeC]

TiddlyTouch/MuuriTouch (TWTiddlyMuuriTouch/TiddlyMuuriTouchWiki ... you get it) on BeakerBrowser

CHANGED! NEW: dat://f65d17930d0325cc3ecc217fb8b35823d43c014ebcfb76a6d1f0c7397a1b05e3/tiddly-touch.html

I'd like to experiment with this on beaker browser. You may be able to get the time right when it's on and I'm not at the end of the world like I am right now, with at-the-and-of-the-world internet speed.

Gonna change place soon to a place with more reliable speed.

BeakerBrowser doesn't like the css transparency and full-screen doesn't work on my linux machine. I haven't found other issues in comparison to chromium/chrome - oh, well ... pinch-to-zoom (page-zoom) doesn't work there, but who needs that... zooming tiddlers works

What I'd like to see is (if there's interest in it) if this can be put forward together

cheers,

BurningTreeC

[Evgeniy Degtyar]

When I installed eval and math.js it started to work very slow. And it was not so smooth. It's freezing a little bit every time when you click any link. I'll try it to understand why this is happening.Or will change macro.

[BurningTreeC]

interesting, works smoothless here on chrome, firefox and beaker

I've experienced that generally tw runs faster on my linuxes than my windowses

If this has something to do with the eval plugin itself ... I doubt a little

[BurningTreeC]

change the macro to this, should work.

the columns-button also uses the eval filter, I'm changing that too.

best wishes

\define toggle-muuri-columns()

<$reveal state="$:/config/muuri!!column-count" type="nomatch" text="">

<$reveal state="$:/config/muuri!!align-horizontal" type="nomatch" text="yes">

<$set name="columnCount" value={{$:/config/muuri!!column-count}}>

.tc-tiddler-frame, .tc-tiddler-edit-frame {

    width: calc((100% / <<columnCount>>) - 16px) !important;

    min-width: calc((100% / <<columnCount>>) - 16px) !important;

}

@media (min-width: 500px) {

.tc-tiddler-frame, .tc-tiddler-edit-frame {

    width: calc((100% / <<columnCount>>) - 16px) !important;

    min-width: calc((100% / <<columnCount>>) - 16px) !important;

}

}

</$set>

</$reveal>

</$reveal>

<$reveal state="$:/config/muuri!!column-count" type="nomatch" text="">

<$reveal state="$:/config/muuri!!align-horizontal" type="match" text="yes">

<$set name="columnCount" value={{$:/config/muuri!!column-count}}>

<$set name="computedWidth" filter="[eval[100 / <<columnCount>>]]">

.tc-tiddler-frame, .tc-tiddler-edit-frame {

    width: calc((100vw - 84px) / <<columnCount>> - 16px) !important;

    min-width: calc((100vw - 84px) / <<columnCount>> - 16px) !important;

}

@media (min-width: 500px) {

.tc-tiddler-frame, .tc-tiddler-edit-frame {

    width: calc((100vw - 84px) / <<columnCount>> - 16px) !important;

    min-width: calc((100vw - 84px) / <<columnCount>> - 16px) !important;

}

}

</$set>

</$set>

</$reveal>

</$reveal>

\end

Am Freitag, 29. Dezember 2017 12:44:22 UTC+1 schrieb Evgeniy Degtyar:

[BurningTreeC]

... and the column button

the button tiddler needs a field "list" containing "2 3 4"

\define columnicons()

<$list filter="[[$(columns)$]!regexp[2]]">

<<material looks_$(columns)$>>

</$list>

<$list filter="[[$(columns)$]regexp[2]]">

<<material looks_two>>

</$list>

\end

<$reveal state="$:/config/muuri!!column-count" type="nomatch" text="">

<$set name="columns" value={{$:/config/muuri!!column-count}}>

<$set name="nextValue" filter="[<columns>] +[next[$:/plugins/BTC/tiddly-touch/Buttons/toggle-columns]]">

<$button class="tc-btn-invisible tc-toolbar-icon" tooltip="toggle columns">

<$list filter="[<columns>!regexp[^4$]]">

<$action-setfield $tiddler="$:/config/muuri" $field="column-count" $value=<<nextValue>>/></$list>

<$list filter="[<columns>regexp[^4$]]">

<$action-setfield $tiddler="$:/config/muuri" $field="column-count" $value=""/>

</$list>@@font-size:0.7rem;float:right;<<columnicons>>@@</$button></$set></$set></$reveal>

<$reveal state="$:/config/muuri!!column-count" type="match" text="">

<$set name="columns" value={{$:/config/muuri!!column-count}}>

<$button class="tc-btn-invisible tc-toolbar-icon" tooltip="toggle columns">

<$action-setfield $tiddler="$:/config/muuri" $field="column-count" $value="2"/>@@font-size:0.7rem;float:right;<<material looks_one>>@@</$button>

</$set>

</$reveal>

[BurningTreeC]

I've updated http://muritest.tiddlyspot.com

added licenses and removed eval dependencies

[Jed Carty]

I really like the interface you have set up. The only thing I have found that doesn't work the way I expect is changing the number of columns to 1 doesn't do anything. Changing to any other number works nicely.

[BurningTreeC]

yes, that's something to decide

pinch zoom on tiddlers is meant to change their widths. that's done by applying a "span" class (span-2 span-3 span-4 span-6 span-9 span-12)

at the moment, this works only when set to 1

it's a missing implementation in the columns macro. it should generate also the widths for each span-class ... the classes are applied in either column-view

I just let column "1" not be influenced by this macro to still be able to pinch-zoom, but it should change so that then tiddlers fill the whole width

[BurningTreeC]

replace the button with this:

\define columnicons()

<$list filter="[[$(columns)$]!regexp[^2$]!regexp[^1$]]">

<<material looks_$(columns)$>>

</$list>

<$list filter="[[$(columns)$]regexp[^2$]]">

<<material looks_two>>

</$list>

<$list filter="[[$(columns)$]regexp[^1$]]">

<<material looks_one>>

</$list>

\end

<$set name="columns" value={{$:/config/muuri!!column-count}}>

<$set name="nextValue" filter="[<columns>] +[next[$:/plugins/BTC/tiddly-touch/Buttons/toggle-columns]]">

<$button class="tc-btn-invisible tc-toolbar-icon" tooltip="toggle columns">

<$list filter="[<columns>!regexp[^6$]]">

<$action-setfield $tiddler="$:/config/muuri" $field="column-count" $value=<<nextValue>>/></$list>

<$list filter="[<columns>regexp[^6$]]">

<$action-setfield $tiddler="$:/config/muuri" $field="column-count" $value="1"/>

</$list>@@font-size:0.7rem;float:right;<<columnicons>>@@</$button></$set></$set>

and put in the list field: 1 2 3 4 5 6

then you'll have 6 columns to cycle through and 1 works as expected

edit: you can have more columns but there are only 6 material icons. but possible with this logic

Am Freitag, 29. Dezember 2017 21:18:05 UTC+1 schrieb Jed Carty:

[BurningTreeC]

Updates:

• v0.0.4 alpha on http://muritest.tiddlyspot.com
• the button to cycle through columns now works as users expect
• 6 columns now (the limiting factor is just the number of material icons available. one can easily have 1000 columns ;) if nothing breaks .. fingers crossed)
• eval plugin not needed anymore

Now I'm going to work on the Stylesheet and macros to have pinch-zoom set different widths for all possible columns

The Stylesheet gets an overhaul and gets cleaned up to use my macro-css-logic ... I'll put comments inside to make it easy for users to change

After that, I'll address things like

• StoryList sync when dragging - not working correctly sometimes ... quick fix
• stupid fade-in animation on tiddler titles
• reset of applied tiddler-widths ... not-so-quick fix
• ?
• include invisible save-wiki button in bottom-left corner in plugin? shows up only when red ... very useful for me, how about you?

If you find other things to be addressed, please report :)

greets from cold Austria,

BurningTreeC

[BurningTreeC]

I'm thinking about making the column-count user-configurable, thoughts?

[TonyM]

BurningTreeC,

Would a column-count 1-N with a little slide bar, work like Zoom in and Out, with 0 or 1 representing no tiling?

Just a thought

Tony

[BurningTreeC]

!! cool thought!

:)

I guess that would work, do you want to hack it?

Simon

[BurningTreeC]

@TonyM,

see the sidebar on the plugin page,

works nicely

---

if you provide a styled slider, maybe vertical, for the left bar or a better place, this makes it into 0.0.6

Am Samstag, 30. Dezember 2017 11:17:21 UTC+1 schrieb TonyM:

[BurningTreeC]

@TonyM,

did you mean just changing the width or scaling the whole thing?

Am Samstag, 30. Dezember 2017 11:17:21 UTC+1 schrieb TonyM:

[TonyM]

BurningTreeC

Sorry for the delayed response. Yes a slide bar like you showed, at http://muritest.tiddlyspot.com? (not working for me in Chrome, or firefox) effectivly just a drag-able version of your toggle columns, but where is it best placed?, I wonder if a vertical one on the left hand side icons would work?.

My idea was for tiddlywiki to behave as normal until the columns are changed from 1 into using the muuri layout. However at present the side bar is not behaving as in a standard tiddlywiki (widths and overlay etc...), although the idea of allowing a "flyover" sidebar is a good idea it would be nice to toggle it.

Don't take my suggestions too seriously as I have only being lurking, watching the progress of your plugin. It is however my feeling that it would not be unreasonable to add this kind of functionality into the core UI, after all tiddlywiki is all about tiddlers and using multi-column responsive tiles, Kanban views, alternative story views and tabs are all just different ways of showing off tiddlers and extend tiddlywiki's applications from presentations, to whiteboards, project tools and dashboards.

To me murri seems suited to providing a multiple tiddler dashboard, or if we had a button or click to open a tiddler into full screen from all those in a tilled view it would be a great way to jump between slides in a working presentation.

For the desktop I wonder if we could open the Murri view in a new window with the selected tiddler opening in the original story view?

From me, Just some not well informed speculation,

But thanks for your work, it looks great.

Tony

[BurningTreeC]

@TonyM,

no offense, but a reasoning

you gotta see the actual state and what's doable at the moment. your suggestions are pretty good but are jumping some steps ahead.

I've already given some thoughts to zooming tiddlers - the option to open in a new page can be something that you can implement easily with a bit of your own tinkering.

At the moment this has no priority but I may come back to it later on.

If you can provide some informations what's not working on your browser, that'd be a useful feedback

as said in a post before, there are some things I'm addressing now, they have priority and the things built on top of that then will only profit and make it easier to implement your own stuff

On a later point, I'm gonna come back to your ideas,

kind regards,

Simon

[@TiddlyTweeter]

I really like this. i'm gonna comment bit by bit as I play with it. I really appreciate that you doing a step at a time and need feedback at each stage. I think that is a great approach.

First comment: the use of Toggle buttons is good. And the multi-state toggle button that cycles through column numbers is really excellent.

Best wishes
Josiah

[TonyM]

No offence,

All I hope to do is share ideas and vision, I understand how this is a community and you will deliver what you want when you can.

Good work so far, we recognise your effort, and support your direction.

I am available for testing, support and in time a lot more.

Great stuff
Tony

[BurningTreeC]

Thanks, @TonyM!

I wish all of you a good new year 2018, here it's 9 hours away.

Read you next year!

Best wishes,

Simon

[BurningTreeC]

New year new updates,

Hi everyone!

• StoryList sync when dragging - not working correctly sometimes ... quick fix
• stupid fade-in animation on tiddler titles
• reset of applied tiddler-widths ... not-so-quick fix

• this is something that's going to be addressed on a later point - have to figure out which way to go
• include invisible save-wiki button in bottom-left corner in plugin ... theres a tiddler now that holds various additions and contributions to get if one likes

There's something new on the page, the muuri widget is getting modified to accept user parameters

You can make your own grids with draggable elements

You will be able to store them as lists in fields so that reordering saves their position

Another thing I'm interested in is this:

https://codepen.io/niklasramo/pen/wJKMQz

https://codepen.io/niklasramo/pen/zPVBLq

one could drag elements from one grid to the other. the second link shows how elements get copied to the second grid ...

I'm still trying to figure out how to trigger droppable widgets, if someone knows something about that and wouldn't mind to share, I'd offer a beer!

best wishes to all and happy new year,

BurningTreeC

[Dave Gifford - http://www.giffmex.org/]

I don't know if this has been mentioned, but since you have the tiddler toolbar displayed vertically and off to the right side of the tiddlers, I would suggest that the close tiddler button be at the top, above the other three tiddler toolbar buttons, for two reasons:

1. Of the four main tiddler toolbar buttons, it is the one with the action that will be executed most frequently. So it should be given the location that is most natural and doesn't force the user to visually scan to find it. The eye most naturally goes to the top right and from there scans downward.

2. Having it at the top also means it will be pretty much exactly where it is in the normal tiddler layout. So that is an added benefit. The most used button is in its place, and only the lesser used functions are out of their normal places.

I don't have any opinions about the order of the other buttons.

Dave

[TonyM]

BurningTreeC

I realised it is possible to simply create another tiddler (called sidebar?) with the following content;

<$transclude tiddler="$:/core/ui/SideBarLists" mode="inline"/>

Which provides a tiddler in the tile set to do anything you would otherwise do by opening the side bar.

I then realised if you send this or any other tiddler such as the table of contents to a new window you can chose which tiddlers to open (see tableofcontents) or close (see open tab)

You can do this in fullscreen mode + a navigation window, to great effect.

With a little work the side bar tiddler opened in another window could show the page controls and wiki title, and the Left hand side menus could be closed to maximise space for tiles.

Wow, this is cool.

Regards

Tony 

[BurningTreeC]

@Dave Grifford,

thanks! that's true, it's the same like one is used with closing windows. I changed it on the site.

@TonyM,

that's a very cool discovery! I made an optional setting for that in the new settings tab for the control panel!

edit: having played around with it I must say this is GREAT:

• you can work with other programs and have something in the sidebar to make notes, to do other stuff, without having to switch to your wiki
• if you toggle "open sidebar in new window" in the new control-panel tab under "Appearance" only the leftbar-button for the sidebar opens it in a new window, the top right button opens it the normal way
• you can use the sidebar window to control presentations from a second screen (for example)
• one could make has made :) a list of open tiddlers with an edit button that opens them in edit mode inside the sidebar - for quick notes

edit (2): new-window-sidebar now holds a killer demo feature!

all the best,

BurningTreeC

[BurningTreeC]

@everyone,

what do you think about mobile view?

• how could/should the interface be
  
• where to put the sidebar
• how to handle dragging with less space available
• how to handle scrolling
• ...

kind regards,

BurningTreeC

[Ste Wilson]

I keep accessing this on my phone...
Scrolling has been ok as the tool bar area on the left can be reliably used for that. An option to switch to the right would be nice.

The pinch and zoom/ moving things around functionality doesn't seem to work very well on my phone.

[BurningTreeC]

hi, @Ste Wilson

I think I'll make an option to switch to the right, that's good

For zooming I've seen you need some power under the hood, doesn't work well on my sony z3compact, too

But those new pricy phones in the electronics stores work better... in landscape mode.

In portrait mode i find it pretty useless.

Tablets and laptops with touch work pretty good, though

looks really good on an ipad pro for example

(yeah, was in a local store and tried the site on multiple devices ;D )

thanks for your feedback,

I'm gonna work on mobile css to make it better

best wishes,

Simon

[@TiddlyTweeter]

BurningTreeC wrote:

what do you think about mobile view?

• how could/should the interface be
  

IMO better you don't see any menus till you need them

• where to put the sidebar

One thought. A drop down at TOP when you hover into a few pixel high minimal line at screen top?

My thinking is that mobile usage needs to avoid over complex menus and concentrate on basic functions. Frankly I find the full sidebar (on desktop seen ALONGSIDE the river) is not really optimal for most average size smartphones. Much of it is overkill on a phone. The problem here is, I think, not just about how to get it working sweetly, its also about WHAT is shown.

Best wishes
Josiah

[@TiddlyTweeter]

BurningTreeC wrote:

what do you think about mobile view?

how could/should the interface be

I'm not sure if mobiles support it but DOUBLE-TAP to edit could be neat way to improve screen estate. Daniello made a double-click to edit a tiddler a long time ago. Its very useful when you want to reduce screen icons as much as possible.

FWIW Danielo's plugin is here: https://danielorodriguez.com/TW5-2click2edit/

Best wishes
Josiah

[BurningTreeC]

thanks Josiah,

Am Dienstag, 2. Januar 2018 13:47:34 UTC+1 schrieb @TiddlyTweeter:

BurningTreeC wrote:

what do you think about mobile view?

• how could/should the interface be
  

IMO better you don't see any menus till you need them

Have you seen the new sidebar in new window? there's a currently nasty-named tab where you can edit tiddlers that are present in the story directly in that window.

Would that be something for mobile view, too?

One could put a media query in the stylesheet and

.tc-story-river .tc-tiddler-edit-frame {

    display: none !important;

}

So if you edit tiddlers they hide in the story and only show up in the sidebar to edit

• where to put the sidebar

One thought. A drop down at TOP when you hover into a few pixel high minimal line at screen top?

Yes, another way to do it. how do you hover with your fingers? something like a slide-down thing?

Right now on smartphones in portrait mode the sidebar should be shown at the top, like a dropdown. I'm thinking about making the sidebar a popup that closes if you click outside. 

My thinking is that mobile usage needs to avoid over complex menus and concentrate on basic functions. Frankly I find the full sidebar (on desktop seen ALONGSIDE the river) is not really optimal for most average size smartphones. Much of it is overkill on a phone. The problem here is, I think, not just about how to get it working sweetly, its also about WHAT is shown.

I also think so

Best wishes
Josiah

[BurningTreeC]

oh, yes! I could easily make this happen, I've already thought about that and successfully tried recognizing multiple taps. Inside muuri (thanks to hammer.js) you can recognize doubleclicks, tripleclicks, quadrupleclicks, long press, swipes ... see: http://hammerjs.github.io/recognizer-tap/

that's also possible on mobile devices because that functionality comes with the plugin

[@TiddlyTweeter]

BurningTreeC wrote:

what do you think about mobile view?

• how could/should the interface be

This is a general comment about the use of VERTICAL ICONS in Tiddler. The problem is space sometimes. The menu goes on ...

To take a real use case. I write weird Tiddlers that get Tweeted like this: "#Crusoe likes that Crusoe likes Crusoe. Crusoe is not so sure Crusoe is so sure."  The problem is my brief style means the text truncates before the menu finishes.

I think, overall, that the horizontal menu could still work better. But, of course, on narrowing, one may hit a limit too with too many icons.

This is more a design puzzle issue than asking you to change anything. Its just a comment.

Best wishes
Josiah

[BurningTreeC]

I made it a setting in the ControlPanel, things like this are no problem and easy to make configurable

[Ste Wilson]

Don't know what you have done but the pinch zoom resizing thing now works on my phone :)

[BurningTreeC]

@all,

be aware, at the moment in mobile portrait view tiddlers disappear from the storyriver when you edit them.

they show up in the sidebar and appear again in the storyriver when you leave editing

it's meant to test how having a second window with just the sidebar works

[BurningTreeC]

:) maybe it didn't work last time you tried because I currently disabled it for the toggle-columns-button overhaul

but anyways, they get reset when you drag them to new positions. that will be addressed, just don't know when

[@TiddlyTweeter]

BurningTreeC wrote:

what do you think about mobile view?

• how could/should the interface be
  

@TiddlyTweeter:

IMO better you don't see any menus till you need them

 

Have you seen the new sidebar in new window? there's a currently nasty-named tab where you can edit tiddlers that are present in the story directly in that window.

I looked at QUICKIES. Its a neat system for editing shorter posts ad hoc. Definitely a plus in some use cases. Not so sure on the transparency of the editor. If you not familiar with TW that might be a bit disorientating.
 

Would that be something for mobile view, too?

I think with the right design concept it could BE THE access route to the editor INCLUDING new Tiddler authoring. Especially on mobiles! 

• where to put the sidebar

One thought. A drop down at TOP when you hover into a few pixel high minimal line at screen top?

 

Yes, another way to do it. how do you hover with your fingers? something like a slide-down thing?

YES.
 

Right now on smartphones in portrait mode the sidebar should be shown at the top, like a dropdown. I'm thinking about making the sidebar a popup that closes if you click outside.

That could work too. The issue is visual semantics, I think. Pop-ups usually relate to some content popped from. But no reason to slavishly follow that. But maybe a full screen would do as well with an auto-close on action? Just thoughts.

Best wishes
Josiah

[BurningTreeC]

Am Dienstag, 2. Januar 2018 15:17:45 UTC+1 schrieb @TiddlyTweeter:

BurningTreeC wrote:

what do you think about mobile view?

• how could/should the interface be
  

@TiddlyTweeter:

IMO better you don't see any menus till you need them

 

Have you seen the new sidebar in new window? there's a currently nasty-named tab where you can edit tiddlers that are present in the story directly in that window.

I looked at QUICKIES. Its a neat system for editing shorter posts ad hoc. Definitely a plus in some use cases. Not so sure on the transparency of the editor. If you not familiar with TW that might be a bit disorientating.

there's a button to change the transparency - you can set no transparency. it just has a nice effect when dragging and let's you keep an overview of what's below when you open the sidebar. But as standard setting, I also think no transparency is best. The button I'm talking about is not in the plugin but on the site under community additions (last tiddler in river I think)

 

Would that be something for mobile view, too?

I think with the right design concept it could BE THE access route to the editor INCLUDING new Tiddler authoring. Especially on mobiles! 

I love this sidebar in a window. I'm trying to figure out if we can switch back with a button. 

• where to put the sidebar

One thought. A drop down at TOP when you hover into a few pixel high minimal line at screen top?

 

Yes, another way to do it. how do you hover with your fingers? something like a slide-down thing?

YES.

yeah, swipe-recognition ... tried it once and gave up soon because other things were more important. at a later point I could see what I can do. Before this, I want to clean up the code and get other things done, so this is a when-it's done feature. 

 

Right now on smartphones in portrait mode the sidebar should be shown at the top, like a dropdown. I'm thinking about making the sidebar a popup that closes if you click outside.

That could work too. The issue is visual semantics, I think. Pop-ups usually relate to some content popped from. But no reason to slavishly follow that. But maybe a full screen would do as well with an auto-close on action? Just thoughts.

the tiddler-info area is a popup - technically. so, a button on top in mobile view that drops the sidebar down from above, height maybe 40% - 45% relative to the screen-height so there's space below to see tiddlers. 

I think there could be an option to choose between new window and dropdown-style

Best wishes
Josiah

best wishes,

Simon 

[BurningTreeC]

the tiddler-info area is a popup - technically. so, a button on top in mobile view that drops the sidebar down from above, height maybe 40% - 45% relative to the screen-height so there's space below to see tiddlers. 

I think there could be an option to choose between new window and dropdown-style

GOTCHA! The option is already there 

[@TiddlyTweeter]

BurningTreeC wrote:

New year new updates

http://muritest.tiddlyspot.com/

Muuri WITHIN Muuri is exactly right.

As was your previous demo of auto-populate muuri Tiddlers with images
 

This gadget is in a different league.

Its brilliant.

Your biggest problem is likely going to be explaining it once you get out of alpha :-).
 
Great appreciation
Josiah

[BurningTreeC]

@TiddlyTweeter, thanks!

Am Dienstag, 2. Januar 2018 15:56:39 UTC+1 schrieb @TiddlyTweeter:

BurningTreeC wrote:

New year new updates

http://muritest.tiddlyspot.com/

Muuri WITHIN Muuri is exactly right.

As was your previous demo of auto-populate muuri Tiddlers with images

I didn't realize that that was a good thing, I can put that back on if there's interest. It's an easy hack but yes, more impressive with this storyview than the classic tiddlywiki view.

I have something like a "magic tiddly button" coming up that should be able to perform actions like that one but with selectables to choose from a catalogue of widgets and a set of actions.

There could also be a tiddler that holds contributions of community members, so that they get accessable for all in one place.

The "populate storyview with images" action could be one 

 

This gadget is in a different league.

Its brilliant.

Your biggest problem is likely going to be explaining it once you get out of alpha :-).

I'm not thinking about that right now, but when it comes to that point I guess I'll make a nice demonstration wiki with a bit of easy documentation.

It's not that much as it seems - tricky, but not magic. I'm good at explaining so they say

 
Great appreciation

thank you very much 

Josiah

all the best,

Simon 

[BurningTreeC]

about the sidebar in new window on mobile devices

it seems that android or the mobile browser in my case limits the processes in the background so that the sidebar in a new window doesn't directly trigger actions in the story river and vice versa. if i click "edit" in the sidebar window i have to switch to the story window and back to the sidebar to have the edit tiddler open. I'll find out if there's a way, if not then I'll go with the dropdown thing for the sidebar and a fixed full-height full-width solution for editing tiddlers.

on desktop browsers this limit doesn't exist as far as I know and it works great. The switch to turn editing in the sidebar on/off should be right there in the sidebar I think.

this is very useful for notetaking - it's a bit like onenote's feature to have "quick note" on the left/right while working on other programs/notes

[TonyM]

BurningTreeC,

The open in new window is excellent for Desktop, especially in my three screen office setting, And in two screen presentations be it standard tiddlywiki or murri boards.

truth is its value on mobile is dodgy, Instead it would be nice if someone (not necessarily yourself) could build  a generic solution on tiddlywiki somewhat slimier to Open in new window where a tiddler could be opened in top/bottom/left right slide out positions, perhaps even if tagged just as we currently have.

• $:/tags/TopLeftBar
• $:/tags/TopRightBar
• $:/tags/AboveStory
• $:/tags/BelowStory

Executed carefully the mouse would open it in desktop and swipe from off screen would open the tagged tiddler on mobile.

Rather than pack too many features in the one plugin this could complement murri but also help mobile first tiddlywikis, as well as building quick menus (which I have always felt lacking in tiddltywiki.

If anyone thinks they can do this and its a worthy project please contact me and I can help you develop it, at least from a functional design perspective.

I  murris case a Left had slide out menu, a righthand slide out SideBar and a dropdown wikimenu would be fabulous.

PS I think the choice of menus and interaction on mobiles should try and follow widely known mobile design standards, I expect some in the community would be familiar with these.

Such a tool would complement your solution well.

Food for thought

Tony

[BurningTreeC]

Hi @TonyM,

Am Dienstag, 2. Januar 2018 23:43:55 UTC+1 schrieb TonyM:

BurningTreeC,

The open in new window is excellent for Desktop, especially in my three screen office setting, And in two screen presentations be it standard tiddlywiki or murri boards.

yes, it has something. do you have some ideas about this? editing tiddlers opens them in the new-window-sidebar, too. is that something desired, a toggle button in the sidebar maybe? 

truth is its value on mobile is dodgy, Instead it would be nice if someone (not necessarily yourself) could build  a generic solution on tiddlywiki somewhat slimier to Open in new window where a tiddler could be opened in top/bottom/left right slide out positions, perhaps even if tagged just as we currently have.

• $:/tags/TopLeftBar
• $:/tags/TopRightBar
• $:/tags/AboveStory
• $:/tags/BelowStory

interesting, I'm not gonna do that but as you say, someone who's interested could do something like that

 

Executed carefully the mouse would open it in desktop and swipe from off screen would open the tagged tiddler on mobile.

Rather than pack too many features in the one plugin this could complement murri but also help mobile first tiddlywikis, as well as building quick menus (which I have always felt lacking in tiddltywiki.

If anyone thinks they can do this and its a worthy project please contact me and I can help you develop it, at least from a functional design perspective.

I  murris case a Left had slide out menu, a righthand slide out SideBar and a dropdown wikimenu would be fabulous.

I'm trying to adopt this for mobile view: http://j.d.simplemobile.tiddlyspot.com/

It's great and very clean and the creator has put a lot of work into it, looks very stable.

[BurningTreeC]

Hello community!

I've put an updated version online (v0.0.10)

it's focus is pinch-zoom on tiddlers to set different widths. If you like testing, please do so, I'd be thankful if you give me a short report if you find errors or strange behaviour

The tiddlers now should preserve their widths you set when zooming, also after dragging and after reloading the wiki (if you have a testing wiki with the plugin)

I don't know if I should make a small indicator ( a dot or so.. ) on tiddlers that have fixed widths that's clickable to remove the fixed width

edit: a big mess can happen at the moment, tiddlers can disappear when zooming. I will fix that tomorrow, til then - have a tiddly time!

edit 2: reverted to previous version. too buggy

cheers, BurningTreeC

[BurningTreeC]

UPDATE: now there's a testing version online that works better. still I don't know if it works stable in regard of zooming.

there's no packed plugin right now, just the preview version

please leave a comment if you test it and it doesn't make sense to you, and if it does, please leave a comment, too ;)

there's a new button on the tiddlers that's meant to reset the applied widths that get set when you pinch-zoom on tiddlers. This button could be a simple dot in the top left corner for example. now I'd just focus on function and if it's useful.

the toggle columns button resets applied widths by pinch-zoom. I think that's more what one expects when toggling through columns.

I could make a "backup" of applied widths while toggling throug columns and the before mentioned "reset button" could be two-state, so that he also can reset a backed-up width.

I'm curious what you think about this whole functionality, it surely has to be refined and debugged.

edit: reverted it again, still too buggy and I'm a bit tired of this so it stays as it is. - don't change a winning team

maybe coming back on a later point.

kind regards,

BurningTreeC

[@TiddlyTweeter]

Ciao Simon,

@TiddlyTweeter:

As was your previous demo of auto-populate muuri Tiddlers with images

@BurningTreeC wrote:

I didn't realize that that was a good thing, I can put that back on if there's interest. It's an easy hack but yes, more impressive with this storyview than the classic tiddlywiki view.

I think its VERY useful to see a few examples of how to AUTO-POPULATE.

For instance I have a use case I'm slowly working on to create image galleries.

The muuri within a muuri tiddler could be a great way forward on that.  (1) you auto-populate a tiddler with thumbnails (all external small image files; some variant sizes, some portrait, some landscape); (2) drag-n-drop to get a pleasing layout; (3) when you click in a thumbnail a MODAL opens to display the full image. I think the muuri approach could be brilliant for supporting that in an easier way than was the case before.

Seeing code that does the populating is really useful for users like me who are not so technically minded but can copy and paste code and change a few values to get it to do what I need.

Just an example
Best wishes

 

[BurningTreeC]

Ciao @TiddlyTweeter,

I've put the auto-populate thing back on the page, now it generates images that open a modal

Now muuri is able to store the ordering of grids in lists, there are two simple demos on the page if you switch to classic storyview

working on refinements,

all the best,

Simon

[@TiddlyTweeter]

Ciao Simon

Thank you very much for making time to do that.

BTW, in design terms I think modals fit well with gridded layouts, especially for showing imagery.

Anyway that auto-populate with modal invoke really helps me get a next step. Grazie mille!

Josiah

Ciao BurningTreeC wrote ...

[Jan]

Hi BurningTree
A great job you did there. The gridview is a very useful feature.
I would be especially keen to use the hammer.js library you implemented. I would love to have the swipe gesture it also could procure for my own purposes.
Can I use or configure it somehow?

Yours Jan

One minor bug. Muri show two red screens on my firefox but works fine with safari and chrome.

Am 04.01.2018 um 11:34 schrieb BurningTreeC:

UPDATE: now there's a testing version online that works better. still I don't know if it works stable in regard of zooming.

there's no packed plugin right now, just the preview version

please leave a comment if you test it and it doesn't make sense to you, and if it does, please leave a comment, too ;)

there's a new button on the tiddlers that's meant to reset the applied widths that get set when you pinch-zoom on tiddlers. This button could be a simple dot in the top left corner for example. now I'd just focus on function and if it's useful.

the toggle columns button resets applied widths by pinch-zoom. I think that's more what one expects when toggling through columns.

I could make a "backup" of applied widths while toggling throug columns and the before mentioned "reset button" could be two-state, so that he also can reset a backed-up width.

I'm curious what you think about this whole functionality, it surely has to be refined and debugged.

kind regards,

BurningTreeC

--
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/eb1e13c0-b416-46ff-beb0-ff78d87734d8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

Hello Jan,

thank you very much,

kudos should also go to https://ustuehler.github.io/tw5-material/ who made the plugin my hacks are built on

could you describe when the red screens happen on your firefox? it's been a while that I tried it on other browsers than chromium

a known issue is, that dragging links can cause something with "cannot set effectAllowed of undefined" - that's because my hammer.js dragging and tiddlywiki dragging are not best friends at the moment

For the hammer.js library you'd like to use - do you just want permission to grab it - you have my go it's OSS you can get it on github - or do you need something more?

What do you mean by swipe gesture? Right now, there's no swipe gesture implemented.

There are different recognizers inside hammer - dragging, pinch/zoom, tapping, swipe, press, ... see here: http://hammerjs.github.io/getting-started/

In my demo there's the Pan and the Pinch recognizer working

kind regards,

Simon

[BurningTreeC]

@TiddlyTweeter,

you're welcome!

it was a quick thing, I have everything backed up, just copy-paste

what you say about modals is true - having an overview inside the grid and a big picture with a modal is a fine thing

have you seen the magic tiddly button on the page? do you get where this wants to go and what do you think about it

best wishes,

Simon

[Dave Gifford - http://www.giffmex.org/]

You keep taking tiddlers out of your muritest wiki. Where are the links to the interesting visual formulas on a different TW? I went to your site to find those links to add them to my index

On Thursday, December 21, 2017 at 1:04:51 AM UTC-5, BurningTreeC wrote:

Hello there,

currently I'm working on a plugin that creates a drag&drop-enabled storyview

it's based on the muuri widget by https://ustuehler.github.io/tw5-material/ which is based on https://github.com/haltu/muuri

it also uses https://github.com/hammerjs/hammer.js and https://github.com/Popmotion/popmotion for touch-actions/drag-actions and pinch-to-zoom

the code repository is on github: https://github.com/BurningTreeC/TW5-muuri-touch

It's a work in progress!  

And ... I'm very open to contributions, so don't hesitate to change, add, comment!

A PREVIEW of the actual state is found on http://muritest.tiddlyspot.com

what's missing?

• a stylesheet for mobile view wip
• buttons to set tiddler-widths by klicking (currently only by pinch-zoom) - the button would only have to apply a class ( span-2 | span-3 | span-4 | span-6 | span-9 | span-12 ) to the tiddler-frame not needed, use tw css
• a packed plugin
• a button to keep tiddlers on its position ... necessary?
• a different approach would be a second container on the left/right that can hold tiddlers from the story river - simply by moving them from the river to the container - see here:
• https://codepen.io/niklasramo/pen/wJKMQz
  

• editing a tiddler should take place on tiddlers position (move tiddler-draft to tiddler-grid-index inside muuri-widget / muuri-storyview)  fixed
• fix "setData" error when dragging inside editor  fixed
• error only occurs with codemirror editor
• default editor prevents dragging etc inside textareas
• question: how is that done?
• ... more to come

cheers, BurningTreeC

[Jan]

Hi Simon, with pleasure

below you will find the two errorscreens it shows. They can be closed but the effect in my firefox is that all Tiddlers are stacked one over the other in the same place, as well as the images.
The touch effect in you implemented is great...i could not find that on the material side.

As I told you I would like to swipe to move forward or backward or show the menu. The pinching and twisting possible in your demonstration is a great UserExperience. I like it best before it snaps to the grid.  I would love to have a view in TW where it is possible to arrange Tiddlers arbitrarily. Jeremy did Test called cecily https://jermolene.com/cecily/index.html which aimed to establish this...it survived  here https://tiddlywiki.com/editions/introduction/ but theres no way to save cecily views. Perhaps this libray could make this possible.

Best wishes Jan

Internal JavaScript Error

Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser

TypeError: Muuri is not a constructor

Internal JavaScript Error

Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser

Syntax error in boot module $:/plugins/BTC/tiddly-touch/lib/muuri.js:4303: _boot/$tw.utils.evalGlobal@http://muritest.tiddlyspot.com/:21769:8 _boot/$tw.modules.execute@http://muritest.tiddlyspot.com/:22058:5 _boot/$tw.modules.execute/sandbox.require@http://muritest.tiddlyspot.com/:22005:12 @$:/plugins/BTC/tiddly-touch/widgets/muuri.js:19:15 @$:/plugins/BTC/tiddly-touch/widgets/muuri.js:10:1 @$:/plugins/BTC/tiddly-touch/widgets/muuri.js:1:106 _boot/$tw.utils.evalGlobal@http://muritest.tiddlyspot.com/:21774:9 _boot/$tw.modules.execute@http://muritest.tiddlyspot.com/:22058:5 _boot/$tw.modules.forEachModuleOfType/<@http://muritest.tiddlyspot.com/:22098:18 _boot/$tw.utils.each@http://muritest.tiddlyspot.com/:21404:12 _boot/$tw.modules.forEachModuleOfType@http://muritest.tiddlyspot.com/:22097:2 _boot/$tw.modules.applyMethods@http://muritest.tiddlyspot.com/:22121:2 Widget.prototype.initialise@$:/core/modules/widgets/widget.js:50:36 Widget@$:/core/modules/widgets/widget.js:27:3 exports.startup@$:/core/modules/startup.js:95:20 _boot/$tw.boot.executeNextStartupTask@http://muritest.tiddlyspot.com/:23398:5 _boot/$tw.boot.executeNextStartupTask@http://muritest.tiddlyspot.com/:23402:12 _boot/$tw.boot.executeNextStartupTask@http://muritest.tiddlyspot.com/:23402:12 _boot/$tw.boot.startup@http://muritest.tiddlyspot.com/:23355:2 _boot/$tw.boot.boot/<@http://muritest.tiddlyspot.com/:23508:3 _boot/$tw.boot.decryptEncryptedTiddlers@http://muritest.tiddlyspot.com/:22700:3 _boot/$tw.boot.boot@http://muritest.tiddlyspot.com/:23506:2 _boot@http://muritest.tiddlyspot.com/:23515:2 @http://muritest.tiddlyspot.com/:23525:2

--
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/985527ab-6b17-4639-98cd-4f40e15a9007%40googlegroups.com.

[BurningTreeC]

Hello Jan,

what version of firefox are you using? are you on windows osx or mac? is this happening on muritest.tiddlyspot.com or do you have a testing wiki where you put the plugin inside?

the currently used plugin version is not packed, there are some shadow tiddlers that have changed. if you get the plugin right now you get it without those changes and it may be that there's a typo somewhere or an inconsistent state.

I'm going to pack it with the actual state which seems to be the best til now. so if you want to hack on it, I'm gonna call it 0.0.12 - wait until that version is online, that's the current state

For the swiping gestures, if you like we can try to hack on it a bit. I could make a tiddlyspot wiki for that and leave some infos there where to look into.

What do you think?

best wishes,

Simon

Am Samstag, 6. Januar 2018 03:14:30 UTC+1 schrieb Jan:

Hi Simon, with pleasure

below you will find the two errorscreens it shows. They can be closed but the effect in my firefox is that all Tiddlers are stacked one over the other in the same place, as well as the images.
The touch effect in you implemented is great...i could not find that on the material side.

As I told you I would like to swipe to move forward or backward or show the menu. The pinching and twisting possible in your demonstration is a great UserExperience. I like it best before it snaps to the grid.  I would love to have a view in TW where it is possible to arrange Tiddlers arbitrarily. Jeremy did Test called cecily https://jermolene.com/cecily/index.html which aimed to establish this...it survived  here https://tiddlywiki.com/editions/introduction/ but theres no way to save cecily views. Perhaps this libray could make this possible.

Best wishes Jan

Internal JavaScript Error

Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser

TypeError: Muuri is not a constructor

Internal JavaScript Error

Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser

Syntax error in boot module $:/plugins/BTC/tiddly-touch/lib/muuri.js:4303: _boot/$tw.utils.evalGlobal@http://muritest.tiddlyspot.com/:21769:8 _boot/$tw.modules.execute@http://muritest.tiddlyspot.com/:22058:5 _boot/$tw.modules.execute/sandbox.require@http://muritest.tiddlyspot.com/:22005:12 @$:/plugins/BTC/tiddly-touch/widgets/muuri.js:19:15 @$:/plugins/BTC/tiddly-touch/widgets/muuri.js:10:1 @$:/plugins/BTC/tiddly-touch/widgets/muuri.js:1:106 _boot/$tw.utils.evalGlobal@http://muritest.tiddlyspot.com/:21774:9 _boot/$tw.modules.execute@http://muritest.tiddlyspot.com/:22058:5 _boot/$tw.modules.forEachModuleOfType/<@http://muritest.tiddlyspot.com/:22098:18 _boot/$tw.utils.each@http://muritest.tiddlyspot.com/:21404:12 _boot/$tw.modules.forEachModuleOfType@http://muritest.tiddlyspot.com/:22097:2 _boot/$tw.modules.applyMethods@http://muritest.tiddlyspot.com/:22121:2 Widget.protot...@$:/core/modules/widgets/widget.js:50:36 Wid...@$:/core/modules/widgets/widget.js:27:3 exports...@$:/core/modules/startup.js:95:20 _boot/$tw.boot.executeNextStartupTask@http://muritest.tiddlyspot.com/:23398:5 _boot/$tw.boot.executeNextStartupTask@http://muritest.tiddlyspot.com/:23402:12 _boot/$tw.boot.executeNextStartupTask@http://muritest.tiddlyspot.com/:23402:12 _boot/$tw.boot.startup@http://muritest.tiddlyspot.com/:23355:2 _boot/$tw.boot.boot/<@http://muritest.tiddlyspot.com/:23508:3 _boot/$tw.boot.decryptEncryptedTiddlers@http://muritest.tiddlyspot.com/:22700:3 _boot/$tw.boot.boot@http://muritest.tiddlyspot.com/:23506:2 _boot@http://muritest.tiddlyspot.com/:23515:2 @http://muritest.tiddlyspot.com/:23525:2

[BurningTreeC]

@Jan,

http://hammer-it.tiddlyspot.com/

[BurningTreeC]

@Dave Grifford

Am Freitag, 5. Januar 2018 21:41:27 UTC+1 schrieb Dave Gifford - http://www.giffmex.org/:

You keep taking tiddlers out of your muritest wiki. Where are the links to the interesting visual formulas on a different TW? I went to your site to find those links to add them to my index

Sorry, I can put them back online. Could you please explain a bit which links you're interested in?

kind regards,

Simon 

[BurningTreeC]

UPDATE:

updated to v0.0.12

[@TiddlyTweeter]

BurningTreeC

I love how you plough on with work on muuri. Its really interesting to see you work & play with innovation so quickly.

Today I'm seeing a bit of a mess on open (FF 52.5.2, 64 bit, Windows 7, screen in Portrait on desktop) :-).

I'm sure tomorrow it with be cleaned up :-)

Josiah, x

BurningTreeC wrote:

UPDATE:

updated to v0.0.12

[David Gifford]

The tiddler title was 'These are so cool I have to show them off' or something like that. Links to...don't know what you would call them, but animations you can manipulate with controls

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/DJjkZRGwwQw/unsubscribe.
To unsubscribe from this group and all its topics, 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/83b32ac6-5bae-4f52-9f7d-7ae5c5f9fb47%40googlegroups.com.

[David Gifford]

p.s. Gifford, not Grifford

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

[Dave Gifford - http://www.giffmex.org/]

I have the same thing on Firefox on Windows 10

[BurningTreeC]

@David Gifford,

sorry for the spelling error!

The links were all examples from this page: http://evanbalster.com/tiddlywiki/formulas.html

you'll find the examples under "Demo..."

I hope you don't get the errors anymore, I'm not sure what this is, I'll have to inspect it on my windows+firefox

all the best,

Simon

[David Gifford]

Thanks Simon! I had that one on the Dynalist site, but didn't realize those were demos of that.

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/DJjkZRGwwQw/unsubscribe.
To unsubscribe from this group and all its topics, 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/0073e1c8-be1a-43f3-b4d4-95349da6471c%40googlegroups.com.

[Jan]

Hello Simon,
 
Thanks a lot. I tried it on the muritest site. Good news: After updating to FF 55 the problem is gone.  But also you seem to have invested a lot of coding meanwhile...

***For the swiping gestures, if you like we can try to hack on it a bit. I could make a tiddlyspot wiki for that and leave some infos there where to look into.***

This would be absolutely great. Swipe would help me a lot getting onward with the presenter_plugin and the smartphonemenu I work on (both visible at slidesnstories.tiddlyspot.com).

Best wishes  Jan

[BurningTreeC]

After updating to FF 55 the problem is gone.  But also you seem to have invested a lot of coding meanwhile...

that's good news! not much coding in the meantime, I just removed the css animations I added yesterday. I had the suspicion that FF doesn't like 

***For the swiping gestures, if you like we can try to hack on it a bit. I could make a tiddlyspot wiki for that and leave some infos there where to look into.***

This would be absolutely great. Swipe would help me a lot getting onward with the presenter_plugin and the smartphonemenu I work on (both visible at slidesnstories.tiddlyspot.com)

let's do it - see your private inbox

Best wishes  Jan 

thanks, all the best,

Simon 

[BurningTreeC]

Hello community,

I'd need some help with a Button, maybe someone of you knows if this is possible

the patient that needs surgery is the enable/disable dragging button

the problem is that he must toggle a full reload of muuri and that causes the storyview to scroll to the top

now if you trigger it from within a tiddler you have the storyTiddler variable with its title available inside the button

with that variable I'd like to scroll back to the tiddler where it was triggered.

here the code of the Button:

<$reveal state="$:/config/muuri!!drag-enabled" type="nomatch" text="yes">

<$button class="tc-btn-invisible tc-toolbar-icon tc-dragging-button" tooltip="enable dragging">

this is the "reload muuri" stuff:

<$fieldmangler tiddler="$:/core/ui/PageTemplate/muuri">

<$action-sendmessage $message="tm-remove-tag" $param="$:/tags/PageTemplate"/></$fieldmangler><$action-setfield $tiddler="$:/view" $value=""/><$action-setfield $tiddler="$:/config/muuri" $field="drag-enabled" $value="yes"/><$action-setfield $tiddler="$:/view" $value="muuri"/><$fieldmangler tiddler="$:/core/ui/PageTemplate/muuri"><$action-sendmessage $message="tm-add-tag" $param="$:/tags/PageTemplate"/></$fieldmangler>

here reloading was triggered but takes some time. I tried <$action-navigate $to=<<storyTiddler>> $scroll="yes"/> and also <$action-sendmessage $message="tm-navigate" navigateTo=<<storyTiddler>>/>

tried it in various ways, with some filters to prevent triggering navigation from the leftbar, with "waitLoops" before the navigate message that create senseless invisible lists just to wait long enough that the storyriver is rerendered ...

I have the suspicion that something doesn't work like I'm imaging it. I thought I had done something like this before but I can't remember if I stacked it in macros or whatever the trick was... 

<<material touch_app>>

</$button>

</$reveal>

I appreciate every comment!

kind regards,

BurningTreeC

[Mat]

Some basic questions, sorry if this is already answered*

1) Would this work in single file TW?

2) If 'no'; does it work in nodejs TW without external libraries

Thanx

<:-)

* ~100 post thread is just too much to read.Maybe @BurningTreeC could summarize the need-to-know stuff and edit it into the initial post?

[BurningTreeC]

Hello @Mat,

Am Sonntag, 7. Januar 2018 14:50:49 UTC+1 schrieb Mat:

Some basic questions, sorry if this is already answered*

1) Would this work in single file TW?

it's working on single-file TiddlyWiki and node.js TiddlyWiki, too. I've never tried it with tiddlyDesktop though

 

2) If 'no'; does it work in nodejs TW without external libraries

stupid question coming here:  what do you mean with external? muuri.js, hammer.js, web-animations.js and popmotion.js are external libraries used here. they're included in the plugin, that's why I ask what you mean with external.

you can drag the plugin to your single-file wiki as to your wiki running on nodejs (and hope it works, fingers crossed)

Thanx

<:-)

* ~100 post thread is just too much to read.Maybe @BurningTreeC could summarize the need-to-know stuff and edit it into the initial post?

yes, thanks for the note! it went a little bit out of control on my side...

I need some time to pre-summarize it in my head then @BurningTreeC will edit the initial post

thanks and cheers from austria,

Simon

[Wei-Ting Lin]

Hi there,

This is a fantastic plugin. I always think that tiddlywiki should have a story view like this. Now I think it can replace Google Keep and actually much better.

I have some ideas:

1. Resizing or zooming by mouse:
There are still laptops without touch screens, like mine. And I guess most desktop displays do not have touch screens, either.

2. Manual mode:
The automatic grid layout is remarkable, but sometimes we would still like to arrange notes by ourselves, in order to get a suitable view of the workplace.
I would say this is a big advantage of Microsoft OneNote: You can put anything anywhere on the workplace.

If this can be made, then we can not just turn on/off necessary notes, but also put them wherever we want! I would say this can beat OneNote.

These just my random thoughts. Anyway, thanks for your great work!

[BurningTreeC]

Hello, Wei-Ting Lin,

Am Dienstag, 9. Januar 2018 18:15:20 UTC+1 schrieb Wei-Ting Lin:

Hi there,

This is a fantastic plugin. I always think that tiddlywiki should have a story view like this. Now I think it can replace Google Keep and actually much better.

I have some ideas:

1. Resizing or zooming by mouse:
There are still laptops without touch screens, like mine. And I guess most desktop displays do not have touch screens, either.

I've thought about that before, I want to implement that but there are other things that come first.

Right now you can add a field called "span" to tiddlers containing a value from 2 - 12. that applies different widths to them 

2. Manual mode:
The automatic grid layout is remarkable, but sometimes we would still like to arrange notes by ourselves, in order to get a suitable view of the workplace.
I would say this is a big advantage of Microsoft OneNote: You can put anything anywhere on the workplace.

Yes, that'd be a nice thing to have. It's not that intuitive to implement with the underlying muuri engine. muuri in fact is about sorting in grid layouts. but with a little different approach this could be done.

I think about having an invisible grid with smaller invisible tiles where you can move your tiddlers freely.

Try the "populate this wiki with images" button on the demo page. If those small elements were invisible they would hold tiddlers in place where you put them 

If this can be made, then we can not just turn on/off necessary notes, but also put them wherever we want! I would say this can beat OneNote.

These just my random thoughts. Anyway, thanks for your great work!

the idea to be able to beat onenote is a good motivation ;)

best wishes,

Simon