Autoscroll in TW

[Adithya B M]

Hi All,

I have been using TW as a songs database for some time. I want to add Autoscroll functionality to individual tiddlies. The requirements are:

1) Add button to top of the tiddly (near the close button)

2) On click of this button, calculate the scrolling required from top to bottom of the chosen tiddly

3) Execute the scrolling action with appropriate speed.

Please guide me in the right direction for the above points.

Thanks!

[Mat]

Adithya B M wrote:

1) Add button to top of the tiddly (near the close button)

Study how e.g the close button is constructed: $:/core/ui/Buttons/close
It is the tag "$:/tags/ViewToolbar" that makes it appear there.

 

2) On click of this button, calculate the scrolling required from top to bottom of the chosen tiddly 

3) Execute the scrolling action with appropriate speed.

What is to scroll exactly? What is to end up at viewport top?

 

<:-)

[TW Tones]

Adithya

Do you mean to scroll the tiddler into view? The navigation mechanism does this as a rule.

For example this button will scroll to the open tiddler or open and scroll

<$button tooltip="Set focus on this tiddler" to=<<nammedTiddler>> class="tc-btn-invisible">
    {{$:/PSaT/focus-tiddler/image/unfocused-button}}
</$button>

In this case the button in the trigger. 

Does your step 2 include a drop-down to select the tiddler you want to focus or scroll to?

I am working on a solution for focused tiddlers now, if I understood your needs I could give a better answer.

Regards

Tony

[Eric Shulman]

On Tuesday, July 7, 2020 at 3:16:16 PM UTC-7, TW Tones wrote:

if I understood your needs I could give a better answer.

On Tuesday, July 7, 2020 at 11:37:23 PM UTC+10, Adithya B M wrote:

I have been using TW as a songs database for some time. I want to add Autoscroll functionality to individual tiddlers...

... 3) Execute the scrolling action with appropriate speed.

 

Based on their referring to a "songs database" and "scrolling...with appropriate speed"...

I would guess that they want to be able to scroll a "song" tiddler containing lyrics and perhaps musical notation,

and do so at a rate such that they can play along *hands-free* as the tiddler scrolls down up the page.

Something that lets them follow the music while using both hands to play their instrument.

Sort of like an automatic page turner for a performing piano player.  

I'm thinking perhaps some CSS transforms, e.g., translateY(-20em), to "scroll" the tiddler body content,

combined with some timed transitions, e.g., "transition: translateY 20s;" to control the rate at which it

moves, and perhaps some clipping with overflow:hidden so the content doesn't "leak out" into it's

neighboring tiddlers.

   https://www.w3schools.com/cssref/css3_pr_transform.asp

   https://www.w3schools.com/css/css3_transitions.asp

I've done some minor CSS animations using transforms and transitions, but it can be kind of tricky

to get it right.  If I have some time to play around with it, I'll see what I can do...

-e

[Adithya B M]

Eric, You understand the problem perfectly.

Mat, thanks for the direction. I have been able to add the button as per your direction. 

How do I proceed from here? Should I try to add an event handler for "tm-scrollthrough-tiddler"?

[Adithya B M]

To restate the problem statement:

I have a song tiddler containing lyrics and musical notation. I want to click on a button on the tiddler's toolbar and prompt the browser to slowly scrolldown to the end of the tiddler at a rate such that I can keep playing, hands free.

As eric says: "Sort of like an automatic page turner for a performing piano player. "

[Mat]

Is your tiddler longer than the viewport, i.e longer than one screen height? I would think it is doable in CSS as @Eric mentions but I suspect that if the scroll/rolled out text passes below viewport then there won't be anything that moves the viewport.

<:-)

[Mat]

I made this ticker a few years ago. Don't think I ever published it. Maybe it can be used as a starting point?

<:-)

[Adithya B M]

Hi Mat, 

The tiddler is longer than one viewport.

I am currently stuck at how to "do" something when the toolbar button is clicked. Are there any tutorials about this?

This is what I understand (I might be wrong) : Some "message" is sent on clicking of the button How to add a listener for this message? How can I execute some javascript on clicking of that button?

[Mat]

Adithya B M wrote:

I am currently stuck at how to "do" something when the toolbar button is clicked. Are there any tutorials about this?

Well, a toolbar button typically includes a ButtonWidget which is a typical widget used for firing actions, i.e by containing ActionWidgets. There are ways to send messages but this is definitely not my expertise, I extremely rarely use these and I do quite a bit of wikitext coding... but then, maybe I'm missing out on something.

You cannot execute some javascript in TW in the usual webpage sense. The TW system intentionally removes the <script> tags on load for safety. The JS instead has to be built into widgets or similar. I don't know any JS so this area is beyond me.

Sorry if this answer is not very helpful but maybe it gives some clues what to ask about.

<:-)

[Eric Shulman]

On Thursday, July 9, 2020 at 2:09:43 AM UTC-7, Adithya B M wrote:

The tiddler is longer than one viewport.

I am currently stuck at how to "do" something when the toolbar button is clicked. Are there any tutorials about this?

I did my experimenting with a CSS-based solution... and have it working and have posted it on my site:

   http://tiddlytools.com/autoscroll.html

Rather than add a toolbar item to each tiddler,

I created a "viewer" tiddler named "AutoScroller".

It provides a form that lets you:

• select a tiddler to view
• enter a duration for the scrolling (in seconds)
• press "start" button to begin scrolling
• press "stop" button to pause scrolling
• press "reset" button to return to top of content
• press "clear" button to reset selection and duration

Below the form is a display area that shows the selected tiddler's content in a scrollable area.

At the bottom is some debugging output that shows the CSS that is being used.

Give it a try and let me know what you think.

enjoy,

-e

[Adithya B M]

Eric, This is beautiful. It solves the problem!

This would be my wishlist: Would this scenario be hard to pull off?

1) There is an autoscroll button on the toolbar on each tiddler

2) On clicking, the button fires an actionwidget? which:

• Launches the Autoscroll Tiddler
• Prepopulates the tiddler to be scrolled

• Maybe use a field value from the original tiddler to populate the duration field. 
• The Autoscroll tiddler can continue to have a pause,stop and reset buttons

[TW Tones]

Eric,

Not something I am after right now but this is impressive. I wonder if there is a way to get a smoother scroll?

• I can see tiddlywiki being used as a tele prompter or prompter
• A recent plugin that allows inline audio would help with scripts and live audio insertion.

I have another idea that if we could play a video or audio podcast with the position in time being able to trigger an action such as at 3:10 seconds trigger a pause, or display a message. Alternatively click at time x, pause and allow the user to take a note that will appear, at that time in the future, when replayed. Without going into the detail it could allow a killer application. 

Regards

Tony

[Eric Shulman]

On Thursday, July 9, 2020 at 9:36:07 AM UTC-7, Adithya B M wrote:

Eric, This is beautiful. It solves the problem!

Thanks.  I'm particularly pleased with myself on this one.  CSS tricks are fun!

 

This would be my wishlist: Would this scenario be hard to pull off?

1) There is an autoscroll button on the toolbar on each tiddler

DONE!

AutoScroll/Toolbar adds a button to the toolbar of tiddlers that are tagged with "autoscroll" 

2) On clicking, the button fires an actionwidget? which:

• Launches the Autoscroll Tiddler
• Prepopulates the tiddler to be scrolled

NOT NEEDED!

AutoScroll/Template adds the autoscroll display ability directly on tiddlers that are tagged with "autoscroll" 

• Maybe use a field value from the original tiddler to populate the duration field. 

DONE!

Just add a field named "scrolltime" to the tiddler tagged with "autoscroll".

• The Autoscroll tiddler can continue to have a pause,stop and reset buttons

DONE!

AutoScroll/Toolbar button opens a popup panel with start, pause, and stop buttons

plus input field for setting the "scrolltime" value

Note that the original "AutoScroll/Viewer" form and display tiddler is also still there, so you

can use either the AutoScroll/Toolbar item, or the AutoScroll/Viewer, depending upon the

kind of user experience you want to present.

All these goodies are now posted online at: http://tiddlytools.com/autoscroll.html

enjoy,

-e

[Eric Shulman]

On Thursday, July 9, 2020 at 5:59:22 PM UTC-7, TW Tones wrote:

Eric,

Not something I am after right now but this is impressive. I wonder if there is a way to get a smoother scroll?

What do you mean by "smoother"?  The scrolling movement is done with CSS transform:translateY(-100%);

and the duration of the movement is done with CSS "transition:transform $(scrolltime)$", which uses

default "linear" motion (same rate for the whole transition).  "scrolltime" is specified as number of seconds

to be used to complete the full transform motion, and is controlled by a field value set on the tiddler

that is being scrolled

• I can see tiddlywiki being used as a tele prompter or prompter

Indeed!  That is a very good use-case for auto-scrolling tiddler content. 

• A recent plugin that allows inline audio would help with scripts and live audio insertion.

• I have another idea that if we could play a video or audio podcast with the position in time being able to trigger an action such as at 3:10 seconds trigger a pause, or display a message. Alternatively click at time x, pause and allow the user to take a note that will appear, at that time in the future, when replayed. Without going into the detail it could allow a killer application. 

While that could be an interesting application, that kind of functionality is much more complex,

and is definitely outside the scope of what can be achieved with a CSS-only solution.

I suspect that it would require use of Javascript code to trigger timer() function calls.

-e

[Felicia Crow]

Hi Eric,

first this is a wonderful tool, especially with the extensions you added.

One firefox exclusive bug: When using the toolbar the text keeps its transformed position when pressing pause then stop.

I don't think it would really need solving since start then stop resets it, just thought to let you know.

Regards,

Felicia

[Adithya B M]

Thank you Eric!

Amazing work.  Now to build my song database on TW.

[Eric Shulman]

On Friday, July 10, 2020 at 12:15:05 AM UTC-7, Felicia Crow wrote:

first this is a wonderful tool, especially with the extensions you added.

Thanks.

 

One firefox exclusive bug: When using the toolbar the text keeps its transformed position when pressing pause then stop.

I don't think it would really need solving since start then stop resets it, just thought to let you know.

I think I've fixed it.  The solution is to explicitly reset the CSS using:

transform:translateY(0px); transition:transform 0s

before deleting the styles entirely.  Can you check to see if this does indeed fix it?

-e

[Felicia Crow]

Eric,

sorry have to say the bug still persists.

I would assume firefox does something differently in the back compared to chrome, but I currently can't think of what seeing how start to stop works, but pause to stop does not.

Felicia

[Eric Shulman]

On Friday, July 10, 2020 at 1:16:16 AM UTC-7, Felicia Crow wrote:

sorry have to say the bug still persists.

hmmm... that's odd.  I also noticed that in your screen snapshot, it looks like the overflow:visible

is causing the shifted content to spill outside of the tiddler.  Of course, this wouldn't be happening

if the transform:translateY(0px) was working.  *sigh*

In any event, I've also just made another update.  Now the AutoScroll/Viewer gets the scrolltime

value from the selected tiddler, instead of using an independent "duration" setting.  This makes

more sense since the scrolltime is now always related to the content being viewed.  Note that this

also means that, just like AutoScroll/Toolbar, changing the value modifies the scrolltime field of the

tiddler being displayed.  

I would assume firefox does something differently in the back compared to chrome, but I currently can't think of what seeing how start to stop works, but pause to stop does not.

Perhaps it has to do with how "pause" works.  It's not actually stopping the transform. Its just setting

the duration of the transform to 1000000000s (that's 1 BILLION seconds!).  Even so, pressing "stop"

should set transform back to 0px with a speed of 0s.  I'm going to have to think about this a bit more,

but it might be "just one of those FireFox quirks" of which there are more than a few!

Thanks for testing the changes.  If you find anything else, please let me know.

-e

[Eric Shulman]

Another update:

in AutoScroll/Viewer:

* disable button actions if no tiddler is selected

* added "goto" and "open window" buttons for selected tiddler

* these buttons automatically stop/close any active scrolling/selected tiddler

in AutoScroll/Viewer and AutoScroll/Toolbar:

* use images instead of text for button labels

As usual, the lastest revision is here: http://tiddlytools.com/autoscroll.html

enjoy,

-e

[Felicia Crow]

Like the new look with the images and the added functionality.

As for the bug, thanks for trying to solve it even if firefox does not want to comply.

Felicia

[Eric Shulman]

On Friday, July 10, 2020 at 6:42:26 AM UTC-7, Felicia Crow wrote:

Like the new look with the images and the added functionality.

Thanks.  If you look at the button code, it's all just stuff that TiddlyWiki does well,

like $action-navigate and tm-open-window.

BTW, I've just made yet another "fix"... I had previously said that the scroll rate was linear... that is, the same

speed all the way through from top to bottom of the content.  However, the default was actually "ease in, ease out"

where the scrolling starts slow, speed up in the middle, and slows down towards the end.  I've just now changed

the transition CSS to actually use "linear" so the speed is consistent for the full range of scrolling.

Here's a reference on the various "easings" that are commonly used: https://easings.net/

As always, the latest update is here: http://tiddlytools.com/autoscroll.html

-e

[Eric Shulman]

Still more updates:

* clicking the "pause" button is now a toggle.

* when autoscrolling, clicking in the content itself also toggles pause

* code cleanup ($:/temp/autosave tiddlers use shorter names)

[Eric Shulman]

Another update:

* added handling for ENTER, SPACE, and ESCAPE to start, pause/resume, and stop auto-scrolling

* added documentation

-e

[Adithya B M]

Hi Eric,

Thanks for all the work. Superb stuff!

Some feedback:

1) In the latest version, the width of the content in autoscroll tiddlers is reduced in my TW (is it because of the new "scrollContent"/"scrollframe" container?). I see its not the case in your demo TW. I wonder why...

2) Also, could we do without adding a white background to the autoscroll tiddlers? I have a black themed TW, so i generally remove it manually.

Adithya

[Eric Shulman]

On Sunday, July 12, 2020 at 11:10:34 AM UTC-7, Adithya B M wrote:

Thanks for all the work. Superb stuff!

Thanks.

 

Some feedback:

1) In the latest version, the width of the content in autoscroll tiddlers is reduced in my TW (is it because of the new "scrollContent"/"scrollframe" container?). I see its not the case in your demo TW. I wonder why...

2) Also, could we do without adding a white background to the autoscroll tiddlers? I have a black themed TW, so i generally remove it manually.

Both of the above issues are most likely related to the "scrollframe" styles.

To address your customization needs for your black theme, I've refactored the style handling.

There is now one more tiddler in the package: TiddlyTools/AutoScroll/FrameStyles

which contains just the CSS declarations used for the scrollframe.  The default contents of this tiddler is:

border:1px solid; padding:1em; background:#ffe;

which gives a nice light yellow-ish colored background.

If you edit this tiddler, you can change the styles to suit your preferences.

You can also just delete that tiddler entirely, and the AutoScroll display

will have no border or padding or background color, allowing your

tiddler text/background colors to show up as you want.

Note: I also removed the "gray background when paused" style, since its

visually obvious when the scrolling is paused (i.e., things stop moving!)

All of this is now fully documented in the posted file, here:

   http://TiddlyTools.com/autoscroll.html

enjoy,

-e

[TiddlyTweeter]

Ciao Eric

Ha! Wonderful!

I been playing around with it see if it could be used alongside sound recordings.

So long as the tempo in the recording is reasonably consistent then it kinda works.

If I can get a nice example that starts a recording and scrolling set-up to start simultaneously I'll post it. I haven't quite figured out how to do that yet.

Just FYI the Martin Luther King "I have a dream" speech I was playing with for text using TW Sountcite plugin for playing this on-line .mp3.

Tx! And best wishes

TT

[Eric Shulman]

On Monday, July 13, 2020 at 12:34:19 AM UTC-7, TiddlyTweeter wrote:

If I can get a nice example that starts a recording and scrolling set-up to start simultaneously I'll post it. I haven't quite figured out how to do that yet.

Just FYI the Martin Luther King "I have a dream" speech I was playing with for text using TW Sountcite plugin for playing this on-line .mp3.

If you take a look at: http://tiddlytools.com/autoscroll.html#TiddlyTools%2FAutoScroll%2FToolbar

You will find this macro definition:

\define start()
<$action-setfield $tiddler="$:/temp/autoscroll/stylesheet" tags="$:/tags/Stylesheet" pause="false" text="""
   [data-tiddler-title="$(currentTiddler)$"] .scrollFrame   { $(framestyles)$;height:50vh;overflow:hidden; }
   [data-tiddler-title="$(currentTiddler)$"] .scrollContent { transform:translateY(-100%); transition:transform $(scrolltime)$s linear; }
"""/>
\end

As you can see in the above code, this is a $button action, that depend on two variables: $(currentTiddler)$ and $(scrolltime)$.

Assuming you have a button to start the mp3, you could add the following to the $button contents:

<$tiddler tiddler="..."><$vars scrolltime="...">

<$importvariables "TiddlyTools/AutoScroll/Toolbar">

<<start>>

</$importvariables>

</$vars></$tiddler>

where:

* the tiddler value is the title of a tiddler, tagged with "autoscroll", containing the text you want to scroll.

* the scrolltime value is specified in seconds

-e

[Adithya B M]

Hi Eric,

Please check out http://adithyab.tiddlyspot.com/

The issue with the width of the content is still persisting. Could you suggest what to do about it?

Thanks!

[Eric Shulman]

On Monday, July 13, 2020 at 8:46:17 AM UTC-7, Adithya B M wrote:

Please check out http://adithyab.tiddlyspot.com/

The issue with the width of the content is still persisting. Could you suggest what to do about it?

I think I've fixed it now.  The problem wasn't with the framestyle CSS.... it was a combination of two things:

1) Several updates ago, I changed the scrollFrame from a div to a $button so that it could handle "click to pause/resume", as well as $keyboard input (space/enter to start/pause/resume, escape to stop).  The problem was that the $button style had a default width, which meant it was only as wide as needed to fit the content.

2) My test tiddlers (US Constitution and Hamlet) both contain regular paragraphs of text that use the full tiddler width and word-wrap onto additional lines as needed.  Thus, the scrollFrame $button that contained that content was always showing as being as wide as the containing tc-tiddler-body.

To fix this, I simply added "width:100%" to the scrollFrame $button definitions (in TiddlyTools/AutoScroll/Viewer and TiddlyTools/AutoScroll/Template).

I've posted the update to http://TiddlyTools.com/autoscroll.html, and also dropped the updated Template into your document to test.  It seems OK now.

One minor note: in your document, you specify "padding:1em" in the framestyle setting.  This makes the scrollFrame a bit smaller than the non-scrolling default appearance of your tiddler content.  I suggest leaving "framestyle" setting blank to allow your tiddler to scroll without having any change in styles.

Let me know how it goes...

-e

[Eric Shulman]

I keep making changes in the interface!

* combined "start", "pause", and "resume" buttons 

* in Viewer, disable buttons when no tiddler selected

* updated documentation

-e

[Adithya B M]

Thanks Eric. This is becoming better and better!

Some more feedback:
1) Making the whole tiddler a button to start the scrolling doest work for me. Most of the time, I end up starting the autoscroll accidentally. Also, it doesnt let me select and copy text. Having the toolbar is good enough for me.

2) vertical height could also be configurable. I am using 80vh and it works for me.

3) This doesnt play well with the stroll plugin - the back-references from stroll end up on top of the tiddler content for all the 'autoscroll' tiddlers. Could this be fixed?

Adithya

[Eric Shulman]

On Tuesday, July 14, 2020 at 4:44:26 AM UTC-7, Adithya B M wrote:

1) Making the whole tiddler a button to start the scrolling doest work for me. Most of the time, I end up starting the autoscroll accidentally. Also, it doesnt let me select and copy text. Having the toolbar is good enough for me.

I've added "clickaction" setting in TiddlyTools/AutoScroll/Setup.  The default is "<<pause>>".  Clearing this value disables the "click (or space or enter) to start/pause/resume" behavior.  This allows you to select/copy text without also triggering the auto-scrolling behavior

 

2) vertical height could also be configurable. I am using 80vh and it works for me.

I've added "frameheight" setting in TiddlyTools/AutoScroll/Setup.  The default is "50vh".  You can change this to any valid CSS height value you like (e.g., "80vh", "10em", "5in", "20cm", etc).  Clearing this value uses hard-coded default of "50vh".

 

3) This doesnt play well with the stroll plugin - the back-references from stroll end up on top of the tiddler content for all the 'autoscroll' tiddlers. Could this be fixed?

I assume that "stroll plugin" uses a custom ViewTemplate to put the back-references *after* the $:/core/ui/ViewTemplate/body (".tc-tiddler-body" element).

I added list-before="$:/core/ui/ViewTemplate/body" to the TiddlyTools/AutoScroll/Template.  This moves the autoscroll content *before* the .tc-tiddler-body.

Hopefully, this *might* fix the problem.  I don't use "stroll", so I can't test it.  Let me know.

ALSO...

I added handling in TiddlyTools/AutoScroll/Template for responding to "folded" vs. "unfolded" states.

Note:

* if you fold the tiddler while scrolling is *active*, unfolding will result in the scrolled position being at the end of the content.

* if you fold the tiddler while scrolling is *paused*, unfolding will result in the scrolled position being at the start of the content.

* these behaviors are not explicitly coded into AutoScroll, but are simply default "side-effects" of the folding/unfolding actions.

Thanks for finding and testing all these use-cases that I hadn't considered.  It's really been a big help.

-e

[Eric Shulman]

another update:

* changed TiddlyTools/AutoTag/Setup "autotag" field to "autotags" (plural)

   - field now allows multiple tag values to be listed, e.g., "autoscroll song", will enable autoscroll handling for tiddlers tagged with "song" as well as those tagged "autoscroll"

* changed "max scroll" calculation

   - scrolling now ends when last line becomes visible at the *bottom* of the scrolling area.  Previously scrolling would end when last line reached the *top* of the scrolling area.

* changed symbols for "start/pause/resume" button.  Shows "chevron-down" when not scrolling (either at start, or when paused).  Shows "timestamp-off" when scrolling.

-e

[TiddlyTweeter]

Ciao Eric

Want you to know I not forgotten this. I could not figure out how to initialize SoundCite outside its interface. Likely because its in JS.

Lacking skill to hack his JS, I will ask the author to add macro ability to interface with start outside the interface.

Best wishes

TT

[Felicia Crow]

Hi Eric,

so took finally another look and while I can't say which update did it, I can say that it now also works in firefox without problems.

Regards,

Felicia

[Eric Shulman]

On Sunday, July 19, 2020 at 12:49:20 PM UTC-7, Felicia Crow wrote:

so took finally another look and while I can't say which update did it, I can say that it now also works in firefox without problems.

That is good news!  I also can't say which update did it, but my *guess* is it was a side effect of switching from

using a <div> to a <$button> for the "scrollFrame" in AutoScroll/Template.

The $button enables the use of keyboard to pause and resume (enter or space) and to stop (escape).  But it also means

that a different type of container is now being used to surround the scrollContent, and that would mean different

browser-internal code as well (for handling overflow on buttons vs divs).

Some things are just luck... or magic.   Whichever it is, I'm glad it's now working as intended.

-e

[Adithya B M]

Thanks Eric. Everything works as expected now :)