Full screen Slides referencing cells in other notebooks

Community Help
1

I am trying to create a slide show that brings in cells from other notebooks that also resizes them to fullscreen.

I have managed to create a slide show that brings in cells from other notebooks, using Mike’s slide show notebook and Mike’s fullscreen notebook, combining this with a notebook embedding another notebook by Jeremy Ashkenas’s.

However whilst I can reference the cell and it runs nicely in normal mode, when I click fullscreen it does not resize to fullscreen. Instead the the cell remains the same size and moves to the top left corner and is surrounded by black. (and in the case of the Mike’s fullscreen canvas, it does not animate in fullscreen mode either.

I have managed to get some of my own cell tests to work interactively with dragging in fullscreen, but not to get them to resize to the window width. To get the link, I clicked on share link in my notebooks and then download code to get the .js address.

Here are the key parts of the code I used:

new Promise((resolve) => {
  Runtime.load(notebook1, (variable) => {
    if (variable.name === "canvas") return {fulfilled: resolve};
  });
})

notebook1 = (await import(“https://api.observablehq.com/@mbostock/fullscreen-canvas.js”)).default

Runtime = (await import(“@observablehq/notebook-runtime”)).Runtime

Is there a way to compile different notebooks with code and draggable events into one ‘slideshow’ notebook that will work fullscreen?

Am I missing a trick? Is there a simple solution? Or have I run into something that is not possible?

Compiling different notebooks with code and draggable events into one ‘slideshow’ notebook that will work fullscreen would be of enormous benefit as then code for different examples can live in separate notebooks, but then specific cells be referenced for a presentation.

Your insights would be most welcome.

1 Like
2

Here’s one approach (with slight modifications from your original import statements so that it works in Firefox):

The key cell is this one:

{
  const hello = html``;
  Runtime.load(notebook1, (variable) => {
    if (variable.name === "canvas") return {
      fulfilled: (value) => {
        while (hello.firstChild) {
          hello.removeChild(hello.firstChild);
        }
        hello.appendChild(value);
      }
    };
  });
  return hello;
}

I think what’s happening with your code is related to what @mootari described in this forum post. In particular, when the width variable changes, the cell has to be re-evaluated, but the promise / minimal cell inspector that you were using doesn’t catch that.

1 Like
3

Thank you so much for your suggestion and notebook example. This worked great

1 Like