talkytalky next slide mechanism

[Dave]

Hi, I like how the down arrow in the upper left of https://tiddlywiki.com/talkytalky/ advances perfectly regardless of the window size.

Pressing the space bar also advances to the next slide, but it doesn't line up right.  

A) Is there an easy fix to make the spacebar use the same mechanism as the down arrow so it lines up right every time?

B) Is there a way to have an option to have a "back" arrow for those times that someone requests to go back a slide or two in the middle of a presentation?

Thanks,

- Dave

[@TiddlyTweeter]

I think the interesting thing about Talky-Talk is it could be so easy in TW more generally.

Recent grid layouts will, hopefully, make that kind of visual layout a doddle.

Navigation will be the only issue.

Those horizontally sectored webpages are so common now I hope that TW will be able to do them out-of-the-box soon.

Josiah

[BurningTreeC]

Hi @Dave, @TiddlyTweeter

for the talkytalky look I put this in a stylesheet:

.tc-story-river {

padding: 0px 0px 0px 0px;

}

.tc-tiddler-frame {

height: 100vh;

margin: 0;

}

.tc-tiddler-body {

position: relative;

text-align: center;

height: 100%;

}

.tc-tags-wrapper, .tc-titlebar .tc-title, .tc-subtitle {

display: none;

}

.tc-tiddler-controls button svg {

fill: <<colour tiddler-background>>;

}

and I create two tiddlers, both tagged $:/tags/ViewTemplate. the first has the field "list-before" with the content "$:/core/ui/ViewTemplate/title" and its text is copied from talkytalky:

<div class="tc-next" style="margin-left:-30px;margin-top:-30px;">

<$list filter="[all[current]next[$:/StoryList]]">

<$link to={{!!title}}>

{{$:/core/images/down-arrow}}

</$link>

</$list>

</div>

the next tiddler creates the previous button. in a "list-after" field put $:/core/ui/ViewTemplate/body and as text:

<div class="tc-previous" style="position: absolute; z-index: 20;right:10px;bottom:0px;">

<$list filter="[all[current]previous[$:/StoryList]]">

<$link to={{!!title}}>

{{$:/core/images/up-arrow}}

</$link>

</$list>

</div>

with a little bit of color by tags and a bit of tweaking its the talkytalky look :)

[Dave]

Thanks, I'll try that :)

[Ed]

Hi BurningTreeC,

Big thanks! 8-))

Function
I tried it out and it works beautiful, btw on a fresh TW5.1.17.
I made 10 "Trialtiddlers" and they were displaying the right way up and down.
Nice those chevrons.

Naming the three tiddlers?
Is there any special way to name the three tiddlers I had to make?

Placement Text in Slide Tiddlers
I do have a separate question about the way text is displayed in this TalkyTalk incarnation
Hope you or somebody can help me with some way of justifying the text in the tiddlers.

Now the text is totally centred, that is ok, but I would love to be able to left-justify it. (Is that
the correct term?) So the whole text IN  the centre, but every line starting right under the start
of previous line of text. Sorry, crummy English, but I hope I convey what I mean.

When I look at the tiddler with the title: "Serverlessness FTW!" made by Jeremy in the original
TalkyTalky then it is even possible to do it in columns. Looks great. But al I see in the tiddler
is "<div class="tc-diatribe">". Somewhere is the code of this "rant", but for me over my head..
Choosing the number of columns would be great, though I think I would need maybe two, anyway
I wait with anticipation. 8-))

Thanks in avance for the assistance!!
Salut! Ed
= = = = =
.
.

Op zaterdag 27 januari 2018 21:33:13 UTC+1 schreef BurningTreeC:

[BurningTreeC]

Hi BurningTreeC,

Big thanks! 8-))

you're welcome, glad it works! 

Function
I tried it out and it works beautiful, btw on a fresh TW5.1.17.
I made 10 "Trialtiddlers" and they were displaying the right way up and down.
Nice those chevrons.

Naming the three tiddlers?
Is there any special way to name the three tiddlers I had to make?

No, naming isn't important there. You could name them $:/_styles/talky/... so that they don't appear in the Recent Tab but in the More Tab under System on top... however you like 

Placement Text in Slide Tiddlers
I do have a separate question about the way text is displayed in this TalkyTalk incarnation
Hope you or somebody can help me with some way of justifying the text in the tiddlers.

Now the text is totally centred, that is ok, but I would love to be able to left-justify it. (Is that
the correct term?) So the whole text IN  the centre, but every line starting right under the start
of previous line of text. Sorry, crummy English, but I hope I convey what I mean.

Ah, I get what you mean ...

When I look at the tiddler with the title: "Serverlessness FTW!" made by Jeremy in the original
TalkyTalky then it is even possible to do it in columns. Looks great. But al I see in the tiddler
is "<div class="tc-diatribe">". Somewhere is the code of this "rant", but for me over my head..
Choosing the number of columns would be great, though I think I would need maybe two, anyway
I wait with anticipation. 8-))

That's what I find if I inspect the "Serverlessness FTW" by clicking right and "Inspect":

The style for the tc-diatribe div:

body.tc-body .tc-tiddler-frame .tc-tiddler-body .tc-diatribe {

1.    max-height: 85vh;
   -moz-columns: 3;
   -webkit-columns: 3;
2.    columns: 3;
3.    font-size: 10px;

}

 If you put that in a Stylesheet tiddler you'll get the three columns

 To align the text inside the columns to the left:

body.tc-body .tc-tiddler-frame .tc-tiddler-body .tc-diatribe ul, body.tc-body .tc-tiddler-frame .tc-tiddler-body .tc-diatribe ol, body.tc-body .tc-tiddler-frame .tc-tiddler-body .tc-diatribe p {

1.    font-size: 10px;
2.    text-align: left;

}

It should be enough to use only

.tc-diatribe {

for the first one

and

.tc-diatribe p {

for the second one instead of the whole "body.tc-body ... ... ... .tc-diatribe { ... } but both variants should work

Thanks in avance for the assistance!!
Salut! Ed
= = = = =
.
.

happy tiddlytinkering! 

[Mohammad]

@BurningTreeC

Wonderful ! Just a question

1. When you are in Zoomin storyview, after closing the sidebar, still there is a ribbon uncovered by Tiddler in the right side of screen. This issue in not true for classic storyview. This issue is also in TalkyTalky (https://tiddlywiki.com/talkytalky/) original version. So you have to set story view to classic before closing the sidebar and go to full screen
2. In another post (https://groups.google.com/d/msg/tiddlywiki/jLymP4WvovI/AG5rd5oqBgAJ) you kindly advised me how to switch from zoomin to classic and vice versa but I asked there, how we can hide the sidebar! I think we need to hide the side bar
3. Another solution proposed by twMat in (http://pptw.tiddlyspot.com/). He used a button top-left of screen to switch a Stylesheet. It this way a tiddler with slide tag goes to cove the whole screen. I am not sure how this works but it cover the whole screen in zoomin and classic storyview.

In overall, I think a button to close (hide) the sidebars, and go to full screen and perhaps switch to classic story view should work.

Thank you again for your time and useful advise @BurningTreeC

Useful information

• David Graford list of Tiddlywiki for presentation / slideshow: https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM#z=daq3QPYxpdVcebRQi2N6gc8A

Best

Mohammad

[Birthe C]

Hi Mohammad,

The button in the top left corner toggles $:/tags/Stylesheet to http://pptw.tiddlyspot.com/#pptw%2Fstylesheet_showtime from pptw/stylesheet_admintime.

Thus the active stylesheet decides if the tiddler cover the whole screen or not (a all the other stuff changing of course.

Birthe

[BurningTreeC]

@Mohammad 

try that in a Stylesheet:

.tc-storyview-zoomin-tiddler{
    width: 100%;
}

[Birthe C]

Hi Mohammad,

https://groups.google.com/d/msg/tiddlywiki/jLymP4WvovI/AG5rd5oqBgAJ BurningTreeC explained that the sidebar state is in "$:/state/sidebar". If the text is yes sidebar is shown if the text is no is i hidden.

In the example  code you got "$:/state/sidebar" is transcluded, but you could that will transclude the text that is already there. You could inset in you code:

<$action-setfield $tiddler="$:/state/sidebar" text="no"/> and of course also  again with the text yes.

Birthe

[Mohammad]

@Birthe C

@BurningTreeC

Thank you both! I think the everything works fine now except some minor items.

I will share the final result later on this forum.

Best

Mohammad

[Mohammad]

@BurningTreeC

 After adding this css, the small ribbon at right side remained uncovered!

So, the method does not work.

[@TiddlyTweeter]

I wonder if we could work this up into a modularised approach that could embrace the various modes of presentation? Like "slide wordage", "image galleries", "forking stories" etc.

It seems to me that "presentations" could actually be a very good basis for a fully responsive interface. The simplification of the viewport contents in them seems to work well for responsive design in a way that other layouts don't. Maybe the approach could become a general interface?

Just thoughts.

Best wishes
josiah

BurningTreeC wrote:

for the talkytalky look I put this in a stylesheet...

[Birthe C]

Hi Mohammad.

.tc-storyview-zoomin-tiddler {
    width: 100%;
    left:0;
}

Birthe

[Mohammad]

Hello Birthe,

 It does not work. seems the layout is different at Zoomin story view!

[BurningTreeC]

@Mohammad

if you can show what you mean - either with a demo or a screenshot, it's easier to help

BTC

[Mohammad]

Hi again Birthe, by inspecting I found when you use zoomin storyview, some style as below is applied. It is part of original zoomin css code 

@media (min-width: 960px)

<style>…</style>

body.tc-body .tc-storyview-zoomin-tiddler{

1.    /* width: 100%; */
2.    width: calc(100% - 42px);

}

/Mohammad

On Sunday, May 20, 2018 at 1:37:35 AM UTC+4:30, Birthe C wrote:

[Mohammad]

@BurningTreeC,

 Sure, let's upload it to Tiddlyspot! I share the link, just a minutes

[Mohammad]

@BurningTreeC

I have attached a demo (Couldn't make a TW5 demo on tiddlyspot so, I send it directly)

To reproduce the issue:

1. Set storyview as classic and click on the small circle (slideshow button) on top-left. Navigate through the slides one by one, everything works fine. This is true for pop storyview 
2. Set the storyview to Zoomin and click on slideshow button (small circle on top-left), you will see part of screen at the right is empty and the Next navigation button on the right has a distance like 50px from right edge.

The question is, when pressing the slideshow button your tiddler shall occupy the whole screen for any storyview type. 

More:

It would be great if we could have keyboard shorcuts (like arrow keys, page up/down or space) to navigate through slides.

Cheers

Mohammad

On Sunday, May 20, 2018 at 10:07:18 AM UTC+4:30, BurningTreeC wrote:

[BurningTreeC]

@BurningTreeC

I have attached a demo (Couldn't make a TW5 demo on tiddlyspot so, I send it directly)

To reproduce the issue:

1. Set storyview as classic and click on the small circle (slideshow button) on top-left. Navigate through the slides one by one, everything works fine. This is true for pop storyview 
2. Set the storyview to Zoomin and click on slideshow button (small circle on top-left), you will see part of screen at the right is empty and the Next navigation button on the right has a distance like 50px from right edge.

The question is, when pressing the slideshow button your tiddler shall occupy the whole screen for any storyview type. 

Ok thanks for the file, I found the problem. Apparently you need to use this:

body.tc-body .tc-storyview-zoomin-tiddler {

width: 100%;

}

or 

@media (min-width: 960px) {

body.tc-body .tc-storyview-zoomin-tiddler {

width: 100%;

}
}

.. where the second one only applies when the browser is wider than 960px
 

More:

It would be great if we could have keyboard shorcuts (like arrow keys, page up/down or space) to navigate through slides.

Keyboard shortcuts are possibly coming 

[BurningTreeC]

... And compliments for that very good looking Slideshow Plugin!

BTC

[Mohammad]

Many thanks @BurningTreeC

I hope I can finalize it and share it in Tiddlyspot or github! 

Still I could not manage how I can assign common shortcut keys in slideshow mode!

For now, I will use the accessKey, but I hope I can find a solution.

Best

Mohammad