Discussion:
[tw] [TW5] The Pan Widget
(too old to reply)
BurningTreeC
2018-02-03 16:16:21 UTC
Permalink
Raw Message
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 ***@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.
Jan
2018-02-03 22:48:20 UTC
Permalink
Raw Message
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
<http://smarties.tiddlyspot.com/#%24%3A%2Fplugins%2FJR%2FMultiMenu%2FPageTemplate>
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
Post by 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
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
<https://groups.google.com/d/msgid/tiddlywiki/cdfd8ebd-268d-4a77-9e7a-892bc5a57f2f%40googlegroups.com?utm_medium=email&utm_source=footer>.
For more options, visit https://groups.google.com/d/optout.
--
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 ***@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/5A763C34.3010105%40googlemail.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 06:38:29 UTC
Permalink
Raw Message
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>
--
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 ***@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/f61dead8-0232-4864-bc56-48f87cd487e2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 06:39:12 UTC
Permalink
Raw Message
the same for the pan and the tap widget

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 ***@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/6a4fb30d-373d-45be-b863-a67a35fdeb5a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 06:51:14 UTC
Permalink
Raw Message
@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!
--
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 ***@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.
For more options, visit https://groups.google.com/d/optout.
Jan
2018-02-04 09:24:28 UTC
Permalink
Raw Message
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
Post by BurningTreeC
@Jan,
<$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!
--
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
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
<https://groups.google.com/d/msgid/tiddlywiki/1f87c970-9307-4084-9101-cc504b2a0aee%40googlegroups.com?utm_medium=email&utm_source=footer>.
For more options, visit https://groups.google.com/d/optout.
--
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 ***@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/5A76D14C.9040106%40googlemail.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 09:50:34 UTC
Permalink
Raw Message
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
--
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 ***@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/ee1bd03b-f79e-4234-ad63-84a928ca6144%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 06:58:25 UTC
Permalink
Raw Message
@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
--
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 ***@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/733de1ea-4b46-4b01-afcd-187219fad13c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 07:02:38 UTC
Permalink
Raw Message
@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}}>
{{$:/plugins/JR/MultiMenu}}
</$swipe>
</$swipe>
</$reveal>
--
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 ***@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/67ffa227-81f8-41bb-bc90-4b53bf4eeca9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 10:02:21 UTC
Permalink
Raw Message
@Jan,

sorry - the tag wasn't the problem

It must have been something else. But I got it working
--
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 ***@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/549f2a51-8b24-47a4-833c-f99117ba7fde%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 10:07:26 UTC
Permalink
Raw Message
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"
--
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 ***@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/8399250a-d572-41a8-a79b-8fb448a92d6c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 10:16:48 UTC
Permalink
Raw Message
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?
Post by 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"
--
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 ***@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/000cf869-9064-433d-abde-76a1e65ee0e1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 16:23:54 UTC
Permalink
Raw Message
@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
--
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 ***@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/67c5edaa-f74a-4cf8-9887-274c53cd0672%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 16:25:30 UTC
Permalink
Raw Message
I think I'll change the swipe widget in the near future so that it accepts
a list of classes
--
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 ***@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/e5849f0f-6bd5-42f0-8c83-a09ffaf2a502%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 18:17:02 UTC
Permalink
Raw Message
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>
--
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 ***@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/f369ffb4-54fd-4acc-987f-feba0a704de7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-04 18:59:29 UTC
Permalink
Raw Message
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 ***@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.
For more options, visit https://groups.google.com/d/optout.
Jan
2018-02-04 21:56:26 UTC
Permalink
Raw Message
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
Post by 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
<$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
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
<https://groups.google.com/d/msgid/tiddlywiki/ee7616b1-2d2d-4c45-aa6b-5c9b88f43d0a%40googlegroups.com?utm_medium=email&utm_source=footer>.
For more options, visit https://groups.google.com/d/optout.
--
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 ***@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/5A77818A.9090503%40googlemail.com.
For more options, visit https://groups.google.com/d/optout.
Jan
2018-02-05 10:58:07 UTC
Permalink
Raw Message
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
Post by 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
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
<https://groups.google.com/d/msgid/tiddlywiki/cdfd8ebd-268d-4a77-9e7a-892bc5a57f2f%40googlegroups.com?utm_medium=email&utm_source=footer>.
For more options, visit https://groups.google.com/d/optout.
--
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 ***@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/5A7838BF.4020303%40googlemail.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-05 11:35:29 UTC
Permalink
Raw Message
Hi Jan,

try $direction="horizontal" (it accepts horizontal/vertical)
Post by 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
<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 ***@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/ff60286b-c05e-4e07-9ec7-728f0ad5a19e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-05 11:36:28 UTC
Permalink
Raw Message
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 ***@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.
For more options, visit https://groups.google.com/d/optout.
Jan
2018-02-05 22:04:44 UTC
Permalink
Raw Message
Great!
I guessed that seeing the big heap of data it gathers.

Yours Jan
Post by 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
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
<https://groups.google.com/d/msgid/tiddlywiki/46276e89-c356-4c6b-83dc-11e0a096c99a%40googlegroups.com?utm_medium=email&utm_source=footer>.
For more options, visit https://groups.google.com/d/optout.
--
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 ***@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/5A78D4FC.2070405%40googlemail.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-06 06:30:18 UTC
Permalink
Raw Message
Post by 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 <http://muritest.tiddlyspot.com> I have an example for how to
slide the sidebar in and out

all the best,
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 ***@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/d720ad75-f4d0-44a0-8c46-a546ec910dca%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-06 09:05:38 UTC
Permalink
Raw Message
@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 <http://muritest.tiddlyspot.com/#animate%20css>.

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
--
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 ***@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/87d498c8-3886-471c-922d-3f7f04203060%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-02-11 05:38:15 UTC
Permalink
Raw Message
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
--
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 ***@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/e79a2ffd-505c-4f1c-9dcc-a7af62fc4e56%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Loading...