HammerWidgets UPDATE

[BurningTreeC]

Hi all,

I've updated all 5 hammer - widgets

these are the changes:

• improved stability
• no "$" anymore in front of the widget attributes - before: <$swipe $targets="mytargets" $actions="myactions">    now: <$swipe targets="mytargets" actions="myactions">
• pan widget: now also stores the absolute coordinates (relative to the top of the page) of the pointer in the state tiddler as absolute-x and absolute-y
• pan widget: also stores the top and left coordinates of the element's ancestor as parent-y (top) and parent-x (left)
• pan widget: changes in naming of the fields in the state tiddler:
• center-x becomes relative-x
• center-y becomes relative-y

the most has been done for the pan widget. with the new values now it's easier to move elements (even tiddlers) freely around

examples and docs on http://hammerwidgets.tiddlyspot.com are updated

BurningTreeC

[@TiddlyTweeter]

Quick note. The performance also seems a lot better. Reliability on non-touch desktops much improved.

Best wishes
Josiah

[Jan]

Hi Simon,
the Pinboard-Demo is absolutely stunning. I would love to see more of that.

It would be perfect if
*you could drag-resize the Images at the same time.
*and if there was a drag mechanism to add Tiddlers.


Thanks again for this great piece of work.

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/4a0ff1af-e20b-4be3-a2c8-fe2447a603ec%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

Quick note. The performance also seems a lot better. Reliability on non-touch desktops much improved.

Best wishes
Josiah

Thanks Josiah! 

[BurningTreeC]

Hi Simon,
the Pinboard-Demo is absolutely stunning. I would love to see more of that.

It would be perfect if
*you could drag-resize the Images at the same time.
*and if there was a drag mechanism to add Tiddlers.


Thanks again for this great piece of work.

Jan

Thank you Jan, how do you imagine the drag-to-add-tiddlers and the drag-resize mechanisms?

with drag-resize, do you mean the ability to resize when gripping the image/div at its edges and dragging?

Simon 

[Jan]

Hi Simon,
I guess the bottom-right edge would be sufficient...and perhaps it only adjusts the width leaving height to auto.

I guess you already encountered Jeremies kind of secret cecilyView https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/cecily
Perhaps the panfunction could be used to make it work at last...

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/b82a88e3-3291-46fc-a643-adddcbedd162%40googlegroups.com.

[@TiddlyTweeter]

Ciao BTC

Just general comment on "touch tools" & "gestures". This is not observation on your excellent tuning of Hammer.js which is working well, I think. But has some bearing, I think, on its reception and documentation in TW.

I only just began to get my head round cross-platform issues. Its been quite difficult to differentiate what are intrinsic issues from implementation issues. Your latest works well so it easier to see the "problems"--well, better, "differences."

I try be brief ...

-- there are some variations between platforms, due, probably, to their OS? One thing is the "gestures" tend to differ a bit. Its not so much a problem. But on each platform (& maybe browser too?) there is a kind of gestural finesse you need to learn (in your hand) to make the use seamless. I think that is a normal problem. iOS, Android & Windows do work a bit differently.

-- finger/pen tap rate and mouse-clicks I think is an issue. I can click a mouse at speed. I can tap a pen only slightly slower. Finger is relatively sluggish. This can matter for practical usage on TAP. On desktop (mouse click) rate is a doddle, on tablet its not always (finger) perfect at the default speed.

Suggestion: Maybe a more upfront "performance tuner" for TAP Rate could help alleviate such issues between platforms?

I'd like spend a moment on WINDOWS touch-tablets. Its quite a complex situation. On a SurfacePro 4 with Win10, for instance, you could be in "keyboard" (physical keyboard) mode, or "tablet only" mode--and in both cases either with or without a mouse and, or, a stylus. Too many combinations to test thoroughly. But...

-- PINCH looks unworkable as the OS, I think, reserves it as basic to its own working for global sizing;
-- PRESS (for the sound in your example) doesn't work reliably. Sometimes it does. Sometimes it doesn't. I will try it in other browsers than FF to check if its an OS or browser issue.
-- SWIPE works as expected
-- PAN works well. BUT you need learn a specific gesture in some circumstances so as override the OS default behaviour first. If you want more info on this issue let me know.

On Windows 7 touchless Desktop, as expected I could make everything work except pinch, (which desktops, basically, don't support).

I think the point in this, without having to get bogged down in a million variants, is simply to document that you need to play a bit on each platform/browser combo to finesse its exact gestures.

Best wishes
Josiah

[JD]

Cool! 

Is it just me, or am I getting a better performance on the Swipe gesture with this update? 

[BurningTreeC]

Cool! 

Is it just me, or am I getting a better performance on the Swipe gesture with this update? 

thanks!

that's possible, I've changed a small part that handles swipe recognition

BTC

[BurningTreeC]

UPDATE II 

The widgets have undergone another update that changes their attributes

instead of the "targets" attribute they now use "class" and "tag"

Now they create the gesture-enabled element applying the class and the tag passed as attributes

Before the element had to be created by the user - that caused some trouble

I hope they only get more usable and you like them

Have a nice weekend all,

BTC

[BurningTreeC]

Hi Simon,
I guess the bottom-right edge would be sufficient...and perhaps it only adjusts the width leaving height to auto.

@Jan , the pan widget now has a demo that does moving + resizing

I guess you already encountered Jeremies kind of secret cecilyView https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/cecily
Perhaps the panfunction could be used to make it work at last...

Hm, I know it ... I was thinking about something like this ... tiddlers can be positioned everywhere and moved around

With the pan widget, the dynaview plugin and the new css improvements of the prerelease, anyone could try making that happen

Simon

[BurningTreeC]

The Widgets are now bundled as a plugin on http://hammerwidgets.tiddlyspot.com

There's also a new demo for dragging tiddlers freely through the story river :P

Look for the $:/panmacros tiddler to see a macro the lets you make any element movable

That macro is used in $:/core/ui/ViewTemplate (and EditTemplate) and in $:/core/ui/EditTemplate/body/editor (to move the editor toolbar)

[Jan]

Hi Simon,
This is an enormous step forward!
eeenormoouus.  great.  thanks.

I think it will take me half a year to accomplish this Cecily-Thing ... but I will go for it.

Yours 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/08af5692-75b0-4e43-bf9c-5424163a8a95%40googlegroups.com.

[BurningTreeC]

Hi Simon,
This is an enormous step forward!
eeenormoouus.  great.  thanks.

I think it will take me half a year to accomplish this Cecily-Thing ... but I will go for it.

Yours Jan

When there are more macros for commonly-used cases, it will be much easier to accomplish things

The current "movable" macro you find in $:/panmacros uses a template tiddler to generate the needed css. All one has to do to make a tiddler draggable is getting the $:/panmacros tiddler, my modified $:/core/ui/ViewTemplate and the $:/template/positioning tiddler - and the hammerjs plugin + my widgets + the formula plugin

Any help by anyone for creating macros is much appreciated!

If there's a set of usable macros, I'd like to make another plugin or add them to the widgets plugin

Simon

[Jan]

Hi Simon
I did a little deconstruction-work to see how the cecilyView is configured.
The result http://szenio.de/Pinnwand/ should be more easy to understand...

Yours Jan

Am 23.04.2018 um 11:45 schrieb BurningTreeC:

Hi Simon,
This is an enormous step forward!
eeenormoouus.  great.  thanks.

I think it will take me half a year to accomplish this Cecily-Thing ... but I will go for it.

Yours Jan

When there are more macros for commonly-used cases, it will be much easier to accomplish things

The current "movable" macro you find in $:/panmacros uses a template tiddler to generate the needed css. All one has to do to make a tiddler draggable is getting the $:/panmacros tiddler, my modified $:/core/ui/ViewTemplate and the $:/template/positioning tiddler - and the hammerjs plugin + my widgets

Any help by anyone for creating macros is much appreciated!

If there's a set of usable macros, I'd like to make another plugin or add them to the widgets plugin

Simon

--
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/0d6d55d7-d73a-43b8-b060-33a59b0b78bf%40googlegroups.com.

[BurningTreeC]

Hi Simon
I did a little deconstruction-work to see how the cecilyView is configured.
The result http://szenio.de/Pinnwand/ should be more easy to understand...

Yours Jan

Hi Jan, I think it's better not to follow HOW cecily does it but more what it does

- it creates something like a desk where you can move your papers around

- it zooms in and out (necessary or too much?)

- it lets you resize tiddlers

- it lets you navigate in 2d space from tiddler to tiddler

Some of that is already accomplished on the hammerwidgets page:

- moving tiddlers

- resizing (can be adapted for tiddlers)

- navigation works out of the box

I'm not a fan of the zooming functionality per tiddler because the space in 2d isn't limited and I don't see the benefit of it - besides the coolness factor :P

BTC

[Jeremy Ruston]

Hi Simon, Jan,

Just for background on the design of the Cecily prototype, the motivation for the ability to move and resize tiddlers was so that the creator of a map can use the size and position of tiddlers to convey their relationships. For example, a bunch of similarly sized items all lined up invites the user to infer that they are related. Or, one item much larger than the others implies that it is the most important.

The zooming behaviour is needed so that tiddlers of very different sizes can be readable. Otherwise the range of practical tiddler sizes would be constrained by the readability of the font size.

Best wishes

Jeremy

--

Jeremy Ruston

jer...@jermolene.com

https://jermolene.com

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
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/21794c05-7e49-4851-9371-d122a7e96cd0%40googlegroups.com.

[BurningTreeC]

Hi Simon, Jan,

Just for background on the design of the Cecily prototype, the motivation for the ability to move and resize tiddlers was so that the creator of a map can use the size and position of tiddlers to convey their relationships. For example, a bunch of similarly sized items all lined up invites the user to infer that they are related. Or, one item much larger than the others implies that it is the most important.

The zooming behaviour is needed so that tiddlers of very different sizes can be readable. Otherwise the range of practical tiddler sizes would be constrained by the readability of the font size.

Thanks for explaining Jeremy!

As I understand the idea is basically something like a "tiddler-cloud" where one or more are the parents and the children are smaller in size and one can zoom into the children and out from the children to their parents

Such a "cloud" could be made with the tools the hammerwidgets provide - tiddlers can be positioned relative to other tiddlers

The missing part is a tm-navigate message that accepts a zoom attribute that scales the viewport by a value saved in a tiddler-field or a related tiddler

Simon