Working Title... 📚

Project I have been working on.

What?

  • Presentation generator.
  • Recorder using Puppeteer.

Why?

  • Teach kids - GCSE Computer Science & Code Club.
    • Started writing Power Point lessons.
    • Limitations: Time consuming, Highlighting 😦
  • Use Markdown & Highlight.js 😎
  • What else can I do... 🤔

Generator 💻

  • Presentation generator - Markdown -> HTML.
    • Regular Presentation using RevealJS.
    • Virtual Reality Presentation using A-Frame.
    • Extrude 2D SVG -> 3D Scene.

Example

Regular/2D Presentation

# Slide 1

This is a slide

## Nested slide

::: notes
Here are some speaker notes.
:::

Headings -> <section>.

notes -> <aside>.

VR Presentation

# Basic scene

* This is a basic scene.
* We can also have text here.
  * **Style with CSS**{style="color:red;font-size:40px"}

<a-entity>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-entity>

Headings -> Viewing platforms.

Pipeline

👉

  • Process HTML.

👉

👇

HTML Presentation
Bulma | jQuery UI | Chart.js | Anime.js... and many more.

Recorder 📹

Startup

const browser = await puppeteer.launch({headless: true});
const page = await browser.newPage();
await page.goto(_INSERT URL HERE_);

Control

// Using ‘page.mouse’ to trace a 100x100 square.
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.move(100, 100);
await page.mouse.move(100, 0);
await page.mouse.move(0, 0);
await page.mouse.up();

Mouse API

await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');

await page.keyboard.down('Shift');
for (let i = 0; i < ' World'.length; i++)
  await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');

await page.keyboard.press('Backspace');
// Result text will end up saying 'Hello!'

Keyboard API

Points in the presentation

let presentationPoints = [
    { id: "title", duration: 2000, transition: 600 /* ms */ },
    { id: "content-page", duration: 2000, transition: 600 /* ms */ },
    { id: "content-fragment1", duration: 600, transition: 300 /* ms */ },
    { id: "content-fragment2", duration: 600, transition: 300 /* ms */ },
    { id: "content-fragment3", duration: 600, transition: 600 /* ms */ },
    ...

Two threads

let progressThread = new Promise(async (resolve, reject) => {
    let presentationPoint = presentationPoints[currentPresentationPoint];
    setTimeout(recursiveTimeout(resolve), 1);
})
let captureThread = new Promise(async (resolve, reject) => {
  progressTimerId = setTimeout(captureInterval(resolve), 1000 / fps);
});

Merge screenshots

function createVideo() {
    ffmpeg
        .addInput("stills/still-%d.png")
        .inputFps('3/1')
        .on("error", error => {
            console.log("error");
        })
        .on("end", async (out, error) => {
            await browser.close();
        })
        .save("out/presentation.avi");
}

Another way?

🤔

Nope.

That's All Folks!

Thank you for listening 😃