2D slideshows

Markdown

Markdown

nbText: """
### Header
Text can be *italic*, **bold** or ~~crossed over~~.
- List item 1
- List item 2
 
[A Link](https://github.com/HugoGranstrom/nimiSlides)
"""

Markdown in Code

Markdown in Code

vs

Code in Markdown

Installation

nimble install nimiSlides

Setting up

import nimib, nimiSlides
nbInit(theme = revealTheme)

The slide API

slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"
slide:
  nbText: "1"
slide:
  nbText: "2"
 
slide:
  slide:
    nbText: "3"
  slide:
    nbText: "4"
  slide:
    nbText: "5"

1 ➡️ 2 ➡️ 3
         ⬇️
         4
         ⬇️
         5

Code Blocks

let a = 1
let b = 2
echo a + b

3

Code Blocks

nbCode:
  let a = 1
  let b = 2
  echo a + b

let a = 1
let b = 2
echo a + b

3

Animating code

echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5

1
2
3
4
5

Animating code

animateCode(1, 3..4, 2, 3..5):
  echo 1
  echo 2
  echo 3
  echo 4
  echo 5

echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5
echo 1
echo 2
echo 3
echo 4
echo 5

1
2
3
4
5

Animating code

It works for long codes as well

echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5
echo "1"
echo 2
echo 3
echo 4
echo 5

Typewriter

typewriter("This text will be typed, one char at a time")

Fragments

fragmentFadeIn:
  nbText: "First"
fragmentFadeIn:
  nbText: "Second"

Nesting Fragments

fragment(grows):
  fragment(shrinks):
    nbText: "This will grow, then shrink"

End Fragments

fragmentEnd(semiFadeOut):
  fragmentFadeIn:
    nbText: "First"
  fragmentFadeIn:
    nbText: "Second"

Incremental Lists

This appears first

Then this

Then this (nested list)

This is also nested

Back again

unorderedList:
  listItem:
    nbText: "First item"
  unorderedList:
    listItem:
      nbText: "One level deeper"
    listItem(highlightCurrentGreen):
      nbText: "Still deep"
  listItem(@[highlightCurrentRed]):
    nbText: "Back again"
unorderedList:
  listItem:
    nbText: "First item"
  unorderedList:
    listItem:
      nbText: "One level deeper"
    listItem(highlightCurrentGreen):
      nbText: "Still deep"
  listItem(@[highlightCurrentRed]):
    nbText: "Back again"
unorderedList:
  listItem:
    nbText: "First item"
  unorderedList:
    listItem:
      nbText: "One level deeper"
    listItem(highlightCurrentGreen):
      nbText: "Still deep"
  listItem(@[highlightCurrentRed]):
    nbText: "Back again"
unorderedList:
  listItem:
    nbText: "First item"
  unorderedList:
    listItem:
      nbText: "One level deeper"
    listItem(highlightCurrentGreen):
      nbText: "Still deep"
  listItem(@[highlightCurrentRed]):
    nbText: "Back again"
unorderedList:
  listItem:
    nbText: "First item"
  unorderedList:
    listItem:
      nbText: "One level deeper"
    listItem(highlightCurrentGreen):
      nbText: "Still deep"
  listItem(@[highlightCurrentRed]):
    nbText: "Back again"
unorderedList:
  listItem:
    nbText: "First item"
  unorderedList:
    listItem:
      nbText: "One level deeper"
    listItem(highlightCurrentGreen):
      nbText: "Still deep"
  listItem(@[highlightCurrentRed]):
    nbText: "Back again"
unorderedList:
  listItem:
    nbText: "First item"
  unorderedList:
    listItem:
      nbText: "One level deeper"
    listItem(highlightCurrentGreen):
      nbText: "Still deep"
  listItem(@[highlightCurrentRed]):
    nbText: "Back again"

Columns

Columns

columns:
  column:
    nbText: "Left"
  column:
    nbText: "Middle"
  column:
    nbText: "Right"
columns:
  column:
    nbText: "Left"
  column:
    nbText: "Middle"
  column:
    nbText: "Right"
columns:
  column:
    nbText: "Left"
  column:
    nbText: "Middle"
  column:
    nbText: "Right"
columns:
  column:
    nbText: "Left"
  column:
    nbText: "Middle"
  column:
    nbText: "Right"
columns:
  column:
    nbText: "Left"
  column:
    nbText: "Middle"
  column:
    nbText: "Right"

Math Equations

$e^{\pi i} = -1$

Math Equations

nb.useLatex
nbText: """
This is some inline math: $\alpha^2 + \beta^2 = \gamma^2$
 
Here we have a standalone equation:
$$e^{\pi i} = -1$$
"""

Speaker View & Notes

speakerNote: "Show the **viewer** this note in the *speaker view*"

Image Background

Image Background

slide(slideOptions(imageBackground = "https://github.com/nim-lang/assets/raw/master/Art/logo-crown.png")):
  discard

Iframe Background

slide(slideOptions(iframeBackground = "https://nim-lang.org/")):
  discard

Video Background

slide(slideOptions(videoBackground = "link/to/videofile.mp4")):
  discard

Auto Animate

• First

Auto Animate

• First
• Second

Auto Animate

• First
• Second
• Third

Auto Animate

• First
• Second
• Third
• What comes next?

slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
- Third
"""
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
- Third
"""
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
- Third
"""
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
"""
 
slide(slideOptions(autoAnimate=true)):
  nbText: """
- First
- Second
- Third
"""

cornerImage(
  "https://github.com/nim-lang/assets/raw/master/Art/logo-crown.png",
  corner=UpperRight)

cornerImage(
  "https://github.com/nim-lang/assets/raw/master/Art/logo-crown.png",
  corner=LowerRight)

cornerImage(
  "https://github.com/nim-lang/assets/raw/master/Art/logo-crown.png",
  corner=LowerLeft)

cornerImage(
  "https://github.com/nim-lang/assets/raw/master/Art/logo-crown.png",
  corner=UpperLeft)

Using Templates

slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
  nbText: "Animate this"
slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
  nbText: "Animate this"
  nbText: "And this"
slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
  nbText: "Animate this"
slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
  nbText: "Animate this"
  nbText: "And this"

Using Templates

template slideAutoAnimate(body: untyped) =
  slide(slideOptions(autoAnimate=true)):
    body
 
slideAutoAnimate:
  nbText: "## Animate header"
template slideAutoAnimate(body: untyped) =
  slide(slideOptions(autoAnimate=true)):
    body
 
slideAutoAnimate:
  nbText: "## Animate header"
template slideAutoAnimate(body: untyped) =
  slide(slideOptions(autoAnimate=true)):
    body
 
slideAutoAnimate:
  nbText: "## Animate header"
template slideAutoAnimate(body: untyped) =
  slide(slideOptions(autoAnimate=true)):
    body
 
slideAutoAnimate:
  nbText: "## Animate header"
template slideAutoAnimate(body: untyped) =
  slide(slideOptions(autoAnimate=true)):
    body
 
slideAutoAnimate:
  nbText: "## Animate header"

Using Templates

slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
  nbText: "Animate this"
slide(slideOptions(autoAnimate=true)):
  nbText: "## Animate header"
  nbText: "Animate this"
  nbText: "And this"

slideAutoAnimate:
  nbText: "## Animate header"
slideAutoAnimate:
  nbText: "## Animate header"
  nbText: "Animate this"
slideAutoAnimate:
  nbText: "## Animate header"
  nbText: "Animate this"
  nbText: "And this"

Loops ♻️ + Generate images 🖼️

Example: Histogram of Gaussian for different N

Loops ♻️ + Generate images 🖼️

for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)
for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)
for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)
for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)
for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)
for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)
for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)
for n in [50, 100, 1000, 10000]:
  let filename = &"images/gauss-{n}.png"
  let samples = newSeqWith[float](n, gauss(0.0, 1.0))
  let df = toDf(samples)
  ggplot(df, aes("samples")) +
    geom_histogram(fillColor="green") +
    ggsave(filename)
 
  slide:
    nbText: &"## Gauss Samples (N = {n})"
    nbImage(filename)

Gauss Samples (N = 100)

Gauss Samples (N = 1000)

Gauss Samples (N = 10000)

The End

Thanks for watching 😄

The End

Thanks for watching 😄

Have a great day!