Feature request: Presentation mode

[dpsanders]

It would be fantastic to have a presentation mode like RISE for Jupyter notebooks:

https://rise.readthedocs.io/en/stable/

Basically it would convert the notebook into a live presentation.

[fonsp]

Yes that would be cool!

My current idea to use h1 and h2 tags as slide delimiters (that's # or ## in markdown). There would be a presentation mode, which does nothing except add a large margin above every h1 or h2 tag, and some buttons to jump between them.

[fonsp]

You might see it in action next week!

[fonsp]

You need to write present() in the browser console to activate it, I will add a button later :)

[dpsanders]

I get

present()
VM148:1 Uncaught ReferenceError: present is not defined
    at <anonymous>:1:1

[fonsp]

I took it out again 😬 but I can easily add it back in if you like? I just noticed that Markdown-only slides are a bit limiting, you need to write a bit of HTML and CSS to make things look more flashy.

For example, I wrote a two_columns(md"I am on the left", md"I am on the ![](right.png)") function - I can send that too!

[dpsanders]

I'd definitely like to have a go to see if it's usable!

[fonsp]

I've added it to 0.9.8 - with the same hack to activate it :)

[dpsanders]

Great, thanks!

[briochemc]

Could you describe what the hack is to start a presentation?

[dpsanders]

Open the Javascript console in your browser (developer tools) and type present() there.

[briochemc]

Of course! For the record, I got confused because, on Firefox, there is a Web console and a Browser console, and present() can only be typed and work in the Web console...

[fonsp]

@briochemc Could you let us know what you think about the presentation mode after you have tried it out?

[briochemc]

My three cents up to now:

• Maybe increase the size to match the screen width when in presentation mode? I think something like is done by Remark could be a good guide?
• Use or h3 or even h4 as markers to split between slides? Or maybe have it in the present function, i.e., something like `present(h3) would mark anything h3 or higher as a slide separator?
• As mentioned in https://github.com/fonsp/PlutoUI.jl/issues/11, showing values next to sliders for presentations would be a nice feature!
• Being able to "recall" a slider is useful. For example, when you want to change a variable with a slider that was defined a few slides before. But I noticed the sliders are not synced then, as in this MWE (cell 1 creates slider, cell 2 "recalls" the slider, cell 3 shows its value): I can change the value of x by moving either slider. But it is a bit annoying that the other slider does not update its position (as you can see they are not synced). Maybe that's intended though?

[fonsp]

Thanks! 3 and 4 are useful for Pluto in general, I have added them to the suggestion box.

1 and 2 might be nice to have, but I think a bigger issue is that slides written in md"" are just not exciting enough. (That's why this is still a hidden feature.) What could be added to make slides more attractive?

Remark looks fun, but it's not trivial to integrate with Pluto

[briochemc]

FYI, I just mentioned remark for inspiration for the sizing (font size and spacing), but I guess there are plenty of other sources of inspiration out there, like, e.g., RISE. And 2 was because I felt like I had to manually zoom in on my browser to get a good font size, but then the h1 and h2 titles seemed too big.

BTW, I should mention that Pluto already looks great anyway! 😃

[fonsp]

note to self: the autoscrolling should be disabled in presentation mode

[GiggleLiu]

You need to write present() in the browser console to activate it, I will add a button later :)

you don't have to, users can do it by themselves.

Yep, now I can play presentations on my cell phone browser!

[GiggleLiu]

note to self: the autoscrolling should be disabled in presentation mode

I find it quite useful to allow autoscrolling when you want to demonstrate a long example. I think it is a feature rather than a flaw. It will be nicer to have an argument in present function to allow both modes.

In RISE, when the content overflows, the display looks terrible. Overflow can happen when you try to zoom the page, trigger a long error message or change your display device to one with a smaller screen.

When you scroll, you don’t have the overflow issue.

[AsafManela]

I love this feature. Two questions:

1. Is there a function to exit (e.g. unpresent())?
2. Can I put in a pause in the middle of a slide to gradually uncover cells?

[GiggleLiu]

1. Is there a function to exit (e.g. unpresent())?

Call present() again to exit.

[fonsp]

2. Can I put in a pause in the middle of a slide to gradually uncover cells?

No, but you can copy paste the same slide a couple of times, and delete parts of it

[fonsp]

Are we satisfied with the current presentation mode? Then I'll add a button in the export menu

[AsafManela]

2. Can I put in a pause in the middle of a slide to gradually uncover cells?

No, but you can copy paste the same slide a couple of times, and delete parts of it

That's certainly a workaround. Just requires a bit of code replication I was hoping to avoid.

I can open another issue with this feature request.

[Moelf]

one idea is when rendering a cell in presentation mode, if it has multiple ## under #, put them in separate slides when presenting

[AsafManela]

What I had in mind is like RISE's feature for fragment cells

[fonsp]

@Moelf what do you mean? this sounds like the current behavior

@AsafManela that sounds like something that an external package/code should do

[Moelf]

you're right

[p-gw]

@fonsp would you mind sharing the functions you used for layouting your JuliaCon presentation?

[jinjunsun]

nice to hear about that.

[fonsp]

Instructions

@andreasKroepelin wrote a wonderful guide about this feature:

https://andreaskroepelin.de/blog/plutoslides/

EDIT september 2023

You can now also keyboard arrows to move betweel slides (#2611) and there is a button to toggle presentation mode (#2660).

[schneiderfelipe]

It would be nice to be able to show the slide number next to the control buttons, in the corner of the screen. That could be made optional, of course.

[VivaldoMendes]

Regarding the presentation mode in Pluto, one particular point does not seem very convenient (if I am not missing some specific functionality in Pluto). When one increases the size of the display (Ctrl +) in Windows --- and with no Table of Contents (by mere option) and without the Live docs window (removed by the presentation mode) --- the Pluto display window keeps moving further to the left of the monitor. In this case, there will be a large area on the right-hand side of the monitor that will be left idle. Why not allowing the Pluto display to be seen in the center of the monitor if there are no Table of Contents neither Live docs on the right-hand side?

If we are presenting the materials online, there will be no problem (for obvious reasons). But if we are going to use a Pluto notebook in a classroom, I think this particular point may be unappealing to students.

[KingBoomie]

For anyone who wants to go (forward / back) a slide by right/left clicking anywhere (that isn't an interactive component), I'm using this small snippet:

SlideNextPrev() = @htl("""
<script id="first">

	var editor = document.querySelector("pluto-editor")
	var prev = document.querySelector("button.changeslide.prev")
	var next = document.querySelector("button.changeslide.next")
	
	const click_background = (e => {
		// debugger;
		if (editor != e.target) return;
		e.preventDefault();		
		console.log(e.button);
		if (e.button === 2 && prev) {
			prev.click();
		} else if (e.button === 0 && next) {
			next.click();
		} 
	})
	editor.addEventListener("click", click_background)
	editor.addEventListener("contextmenu", click_background)

	invalidation.then(() => { 
		editor.removeEventListener("click", click_background);
		editor.removeEventListener("contextmenu", click_background);
	})
	
	return true;
</script>
""")

~~EDIT: I forgot how to make pluto forget the event listeners when the object disappears. This will add too many listeners, when ran multiple times. so uh, beware!~~ EDIT 2: Updated to the latest pluto and (re)found the nifty invalidation variable

[gdalle]

Is there a keyboard shortcut to go forward - backward? If not, is it possible to define one myself?

[rgouveiamendes]

I don't know if anyone else has this problem, but the navigation buttons are not working in my machine.