[TW5] The Pan Widget

[BurningTreeC]

Hello TW community,

I want to introduce the pan widget:

<$pan $targets $startactions $endactions>targets</$pan>

A widget that consists of 2 Tiddlers: the widget itself and the hammer.js library (~75kb)   

It's one of the spin-offs from the TiddlyTouch plugin I'm working on

What it does:

It recognizes when you pan on a html element

It stores all values from the pan event in a state tiddler which by default is $:/state/pan but can be defined by $statetiddler="anothertiddler" (starting coordinates, velocity, if mouse or touch, end coordinates, the element's width/height/top/left/bottom/right coordinates after/before and many more...)

It lets you specify (by css class) which elements to use. It can do it with more than one within its scope, too

It triggers actions at pan-start and pan-end if you provide action-strings with $startactions and $endactions

It's on/off switchable with $state="on" / $state="off"

$pointers="1|2|3..."

It can be stacked and so that more pan widgets can be used on the same element or on different elements

you can find it on top of http://muritest.tiddlyspot.com

What I have in mind is building sliders, x/y pads... but many more things could be done and triggered with it

cheers,

Simon

[Jan]

Hello Simon,
yeah, yeah, yeah ... you have built things I longed for for long:-)

I am just trying to apply them to $:/plugins/JR/MultiMenu/PageTemplate on http://smarties.tiddlyspot.com/ my smartphonemenu test.
Your test works there but not my application on the menu to make it disappear and trigger the sidebar instead...

What is the exact function of  $targets here and in the swipe-wiki. I thougt the target was specified by surrounding it <$swipe> swipe-element </$swipe>?


Yours Jan

Am 03.02.2018 um 17:16 schrieb BurningTreeC:

Hello TW community,

I want to introduce the pan widget:

<$pan $targets $startactions $endactions>targets</$pan>

A widget that consists of 2 Tiddlers: the widget itself and the hammer.js library (~75kb)   

It's one of the spin-offs from the TiddlyTouch plugin I'm working on

What it does:

It recognizes when you pan on a html element

It stores all values from the pan event in a state tiddler which by default is $:/state/pan but can be defined by $statetiddler="anothertiddler" (starting coordinates, velocity, if mouse or touch, end coordinates, the element's width/height/top/left/bottom/right coordinates after/before and many more...)

It lets you specify (by css class) which elements to use. It can do it with more than one within its scope, too

It triggers actions at pan-start and pan-end if you provide action-strings with $startactions and $endactions

It's on/off switchable with $state="on" / $state="off"

you can find it on top of http://muritest.tiddlyspot.com

What I have in mind is building sliders, x/y pads... but many more things could be done and triggered with it

cheers,

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/cdfd8ebd-268d-4a77-9e7a-892bc5a57f2f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

Hi Jan,

you must provide the $targets to have it work. $targets and $state are needed or nothing happens.

$targets works like this:

it defines the CLASS of the element within the widgets' scope that gets used for the actions.

<$swipe $targets="tc-my-class" $state="on">

<div class="not-my-class">

not swipeable

</div>

<div class="tc-my-class">

this element is swipeable

</div>

<div class="tc-my-class">

this element is swipeable

</div>

<div class="another class">

not swipeable

</div>

</$swipe>

[BurningTreeC]

the same for the pan and the tap widget

Simon

[BurningTreeC]

@Jan,

I took a look how you implemented it:

<$reveal state="$:/state/MultiMenu" type="match" text="" default="" retain="yes" animate="yes">

<$swipe $targets="tc-tid-frame" $velocity="1.0" $direction="left" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="yes"/>""" $state="on">

{{$:/plugins/JR/MultiMenu}}

</$swipe>

</$reveal>

you don't have no element with the class "tc-tid-frame" in the MultiMenu. But there's the big leftmenuwrapper that can be used.

I changed it to

<$reveal state="$:/state/MultiMenu" type="match" text="" default="" retain="yes" animate="yes">

<$swipe $targets="leftmenuwrapper" $velocity="1.0" $direction="left" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="yes"/>""" $state="on">

{{$:/plugins/JR/MultiMenu}}

</$swipe>

</$reveal>

and it worked. you can also

<$reveal state="$:/state/MultiMenu" type="match" text="" default="" retain="yes" animate="yes">

<$swipe $targets="leftmenuwrapper" $velocity="1.0" $direction="right" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="no"/>""" $state="on">

<$swipe $targets="leftmenuwrapper" $velocity="1.0" $direction="left" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="yes"/>""" $state="on">

{{$:/plugins/JR/MultiMenu}}

</$swipe>

</$swipe>

</$reveal>

works very well

happy hacking!

[BurningTreeC]

@all,

for the pan widget I'll make some adjustments to let you specify the values you want it to export to the state tiddler so that it doesn't calculate the others, that should make it lighter in terms of performance

for the swipe and tap widgets I'll implement options so that one can also get coordinates and values from them like with the pan widget.

Then I'll think about the rotate, pinch and press widgets

have a good sunday

[BurningTreeC]

@Jan,

you could also:

<$reveal state="$:/state/MultiMenu" type="match" text="" default="" retain="yes" animate="yes">

<$swipe $targets="leftmenuwrapper" $velocity="1.0" $direction="right" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="no"/><$action-setfield $field="swipe-right-state" $value="off"/><$action-setfield $field="swipe-left-state" $value="on"/>""" $state={{!!swipe-right-state}}>

<$swipe $targets="leftmenuwrapper" $velocity="1.0" $direction="left" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="yes"/><$action-setfield $field="swipe-left-state" $value="off"/><$action-setfield $field="swipe-right-state" $value="on"/>""" $state={{!!swipe-left-state}}>

[Jan]

Hallo Simon,
Heureka, it works!

Now I got an further task:
Because a lot of actions shall be triggerd by the swipe I tried to replace the actions with a macro <<showSideBar>> (defined in $:/core/ui/TopBar/menu).
Could you get macros to work in the widget?

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/1f87c970-9307-4084-9101-cc504b2a0aee%40googlegroups.com.

[BurningTreeC]

Hi Jan,

Macros work, I tried it on your site. I think the problem there is something else. If I remove the tag $:/tags/TopRightBar from the menu, it works.

I guess the TopRightBar tagged tiddlers get transcluded somewhere so that those macros don't have effect. I don't know

[BurningTreeC]

@Jan,

sorry - the tag wasn't the problem

It must have been something else. But I got it working

[BurningTreeC]

Jan, that's strange: on your site, if I remove the tag $:/tags/Macro, save the Tiddler, open it and readd $:/tags/Macro - then it works.

Must have something to do with the TopRightBar tag and how TW loads macros on startup.

I also changed your macro that it sets the sidebar to "yes"

[BurningTreeC]

Jan, forget everything I said

if I remove your tag $:/tags/Macro and I add my tag $:/tags/Macro (and change your macro to set sidebar to yes) - then it works

do you have a space in your tag?

[BurningTreeC]

@Jan,

the leftmenuwrapper in the "open" pane is covered by other divs, so I changed the swipe invocation to:

<$reveal state="$:/state/MultiMenu" type="match" text="" default="" retain="yes" animate="yes">

<$swipe $targets="leftmenuwrapper" $velocity="1.0" $direction="right" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="no"/>""" $state="on">

<$swipe $targets="leftmenuwrapper" $velocity="1.0" $direction="left" $actions="""<<showSideBar>>""" $state="on">

<$swipe $targets="open" $velocity="1.0" $direction="right" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="no"/>""" $state="on">

<$swipe $targets="open" $velocity="1.0" $direction="left" $actions="""<<showSideBar>>""" $state="on">

<$swipe $targets="mmenu" $velocity="1.0" $direction="right" $actions="""<$action-setfield $tiddler="$:/state/sidebar" $value="no"/>""" $state="on">

<$swipe $targets="mmenu" $velocity="1.0" $direction="left" $actions="""<<showSideBar>>""" $state="on">

{{$:/plugins/JR/MultiMenu}}

</$swipe>

</$swipe>

</$swipe>

</$swipe>

</$swipe>

</$swipe>

</$reveal>

so it covers all divs that appear there inside that leftbar and your actions get triggered in every leftbar-state

[BurningTreeC]

I think I'll change the swipe widget in the near future so that it accepts a list of classes

[BurningTreeC]

Some updates:

the swipe, pan and tap widgets now accept multiple classes in $targets="class1 class3 class2" (no commas, just spaces)

So you can do something like this in the story PageTemplate and swipe on tiddlers and the story river (with mouse or touch) to open and close the sidebar

<$swipe $targets="tc-story-river tc-tiddler-frame" $velocity="0.8" $state="on" $direction="right" $actions="""<$action-setfield $tiddler="$:/state/sidebar" text="no"/>""">

<$swipe $targets="tc-story-river tc-tiddler-frame" $velocity="0.8" $state="on" $direction="left" $actions="""<$action-setfield $tiddler="$:/state/sidebar" text="yes"/>""">

<section class="tc-story-river">

<section class="story-backdrop">

<$list filter="[all[shadows+tiddlers]tag[$:/tags/AboveStory]!has[draft.of]]">

<$transclude/>

</$list>

</section>

<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/ViewTemplate" editTemplate="$:/core/ui/EditTemplate" storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}/>

<section class="story-frontdrop">

<$list filter="[all[shadows+tiddlers]tag[$:/tags/BelowStory]!has[draft.of]]">

<$transclude/>

</$list>

</section>

</section>

</$swipe>

</$swipe>

[BurningTreeC]

two or three or four finger swipes/taps/pans also work if you provide $pointers="2"/$pointers="3" ...

so this does different things on the "testclass" element if you swipe with one or two fingers:

<$swipe $targets="testclass" $state="on" $velocity="1.0" $direction="left" $pointers="1" $actions="""someactions""">

<$swipe $targets="testclass" $state="on" $velocity="1.0" $direction="left" $pointers="2" $actions="""someotheractions""">

<div class="testclass">

swipe with one finger or mousepointer to do someactions

swipe with two fingers (won't be possible with mouse) to do someotheractions

</div>

</$swipe>

</$swipe>

[Jan]

Hi Simon,
now it works, I found my(!) bugs which prevented the menu from working. ( I just had inverted the functions to be triggered)
It works beautifully.
smarties.tiddlyspot.com
Thanks for making this possible.

Next weekend (I won't find the time before) I will have to put it on the tiddlers in the storyriver to show the menu.
and I will apply it to the slideshow


Yours Jan

Am 04.02.2018 um 19:59 schrieb BurningTreeC:

two or three or four finger swipes/taps/pans also work if you provide $pointers="2"/$pointers="3" ...

so this does different things on the "testclass" element if you swipe with one or two fingers:

<$swipe $targets="testclass" $state="on" $direction="left" $pointers="1" $actions="""someactions""">

<$swipe $targets="testclass" $state="on" $direction="left" $pointers="2" $actions="""someotheractions""">

<div class="testclass">

swipe with one finger or mousepointer to do someactions

swipe with two fingers (won't be possible with mouse) to do someotheractions

</div>

</$swipe>

</$swipe>

--
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/ee7616b1-2d2d-4c45-aa6b-5c9b88f43d0a%40googlegroups.com.

[Jan]

Hello Simon,
I have been playing around with the pan widget.
Perhaps I will replace swipe with pan for the menu because it could give you the impression of really dragging the menu in by using the delta-x value.
Before doing this: Is there a way of making it only listen to horizontal movements. I tried $directions="X" but this still prevents the scrolling of the storyriver.

Yours Jan



Am 03.02.2018 um 17:16 schrieb BurningTreeC:

Hello TW community,

I want to introduce the pan widget:

<$pan $targets $startactions $endactions>targets</$pan>

A widget that consists of 2 Tiddlers: the widget itself and the hammer.js library (~75kb)   

It's one of the spin-offs from the TiddlyTouch plugin I'm working on

What it does:

It recognizes when you pan on a html element

It stores all values from the pan event in a state tiddler which by default is $:/state/pan but can be defined by $statetiddler="anothertiddler" (starting coordinates, velocity, if mouse or touch, end coordinates, the element's width/height/top/left/bottom/right coordinates after/before and many more...)

It lets you specify (by css class) which elements to use. It can do it with more than one within its scope, too

It triggers actions at pan-start and pan-end if you provide action-strings with $startactions and $endactions

It's on/off switchable with $state="on" / $state="off"

you can find it on top of http://muritest.tiddlyspot.com

What I have in mind is building sliders, x/y pads... but many more things could be done and triggered with it

cheers,

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/cdfd8ebd-268d-4a77-9e7a-892bc5a57f2f%40googlegroups.com.

[BurningTreeC]

Hi Jan,

try $direction="horizontal"  (it accepts horizontal/vertical)

[BurningTreeC]

the pan widget currently is a bit heavy.

I'm about to change it to selectively calculate and save only the values the user chooses

[Jan]

Great!
I guessed that seeing the big heap of data it gathers.

Yours Jan

Am 05.02.2018 um 12:36 schrieb BurningTreeC:

the pan widget currently is a bit heavy.

I'm about to change it to selectively calculate and save only the values the user chooses

--
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/46276e89-c356-4c6b-83dc-11e0a096c99a%40googlegroups.com.

[BurningTreeC]

Am Montag, 5. Februar 2018 23:04:59 UTC+1 schrieb Jan:

Great!
I guessed that seeing the big heap of data it gathers.

yeah, most of it isn't needed I think

I changed it to only get the elements dimensions, the pointertype and the starting coordinates on panstart,

and during pan it gathers the delta-x and delta-y and the center-x and center-y of the mouse pointer

with these values one should be able to do a lot of stuff

You can also provide $steps="stepspersecond" (default is 24) ... this lets you adjust how many times per second it gathers values

$decimals="0" sets the decimal places to 0, default is 2

At muritest I have an example for how to slide the sidebar in and out

all the best,

Simon

[BurningTreeC]

@Jan,

for your usecase of the swipe widget:

you can play with $threshold="" (default is 30) and set it lower. the threshold defines the minimal amount of movement required to trigger the swipe. if you set it lower, your swipe will be triggered earlier.

If you want some transitions on the sidebar or leftbar when they show up, you could do it by css. there's the "animate.css" github repo I'm also using on muritest here.

you can change the $:/core/ui/PageTemplate/sidebar and change class="tc-sidebar-scrollable" to class="tc-sidebar-scrollable animated fadeInRight" so that it fades in from the right when it appears. you can tweak the animation time in the animate css stylesheet.

for the leftbar you could do the same

best wishes,

Simon

[BurningTreeC]

The pan widget now lets you define $steps="stepspersecond" (1/2/20/100...default:24) and $repeatactions="""actionstrings""" for actions you want to repeat each step.

have fun,

BTC