New Style Media Handling

Clean. Consistent. Robust.

06.02.2022

Arthur Author

Chair for Human-Computer Interaction, University of Würzburg

Some Settings

Reveal

Name	Value
`width`	1244.0
`height`	700.0
`margin`	5.0e-2
`center`	0.0

Decker

Name	Value
`resource-pack`	nwburg

Colors

Shades	Accents
`shade0`	`accent0`
`shade1`	`accent1`
`shade2`	`accent2`
`shade3`	`accent3`
`shade4`	`accent4`
`shade5`	`accent5`
`shade6`	`accent6`
`shade7`	`accent7`

Slide Structure

<section class="slide level1 present">
  <div class="decker">
    <div class="alignment">
      <h1>Licht</h1>
      <div class="layout">
        <div class="area">
          <div class="block">
            <h2>Some Header</h2>
            <p>Something or other</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

General structure of all slides

Media Structure

<div class="media">
  <figure class="image">
    <img src="include/06-metal.png" alt="06-metal.png" />
    <figcaption>
      Alt Caption <span class="math inline">\(e=mc^2\)</span>
    </figcaption>
  </figure>
</div>

General structure of all media embeddings

Development Path

Branch `develop-layout`

Contains new slide and media renderer
Is up to date with branch develop

Branch `develop`

Reveal 4 and Pandoc 2.14
Default resource pack decker
Resource packs wburg and mario

The plan

Cherry-pick fixes and features from master to develop
On develop-layout
- Port wburg CSS
- Port mario CSS
Merge develop-master to develop
Merge develop to master

Local Image

include/06-metal.png — Alt Caption $e=mc^2$

Embedded SVG

Caption

Local Media in 2 columns

Left

Right

function rainbow(numOfSteps, step) {
  // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
  // Adam Cole, 2011-Sept-14
  var r, g, b;
  var h = step / numOfSteps;

Captioned code.

More function CODE(here) {return true;} here

Local Media in 2 columns

Left

Right

function rainbow(numOfSteps, step) {
  // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
  // Adam Cole, 2011-Sept-14
  var r, g, b;
  var h = step / numOfSteps;

Captioned code.

More function CODE(here) {return true;} here

Local Media in 2 columns

Left

Right

function rainbow(numOfSteps, step) {
  // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
  // Adam Cole, 2011-Sept-14
  var r, g, b;
  var h = step / numOfSteps;

Captioned code.

More function CODE(here) {return true;} here

More Images in 2 columns

Left

Also left

Right

And some more text

Block distance fits.

2 images in a row

include/06-metal-v.png — Alt Caption $e=mc^2$

Empty line block

3 somethings in a row

Blocks

One

One slightly longer line.
Should align with neighbors.

Should align

One slightly longer line.

Should align with neighbors.

All right!

One slightly longer line.

Should align with.

Should align

One slightly longer line.
Should align with neighbors.

All right!

Three

Three 🍔🍔🍔
Four 🍺🍺🍺🍺

Source code is always nice

## Three {popup="center-up" .fragment .accent3}

1.  Three 🍔🍔🍔
2.  Four 🍺🍺🍺🍺

How is my driving?

Too flashy?

Call the style police at

015773846827

Local Image with caption block

Local Image

`{width=50%}`

Local Image

`{height=200px align=right}`

HTML for the last one

<section id="local-image-height200px" class="slide level1">
<div class="decker">
<div class="section level1 alignment">
<h1>Local Image height=200px</h1>
<div class="layout">
<div class="area">
<div class="media" align="right">
<figure class="image" style="height:auto;width:auto;">
<img src="include/06-metal.png" style="height:200px;width:auto;" alt="06-metal.png" />
<figcaption>
Overwriting Block Caption <span class="math inline">\(e=mc^2\)</span>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>

Code blocks can have captions too.

Local Image

`{width=80% height=200px}`

Local Inline Media

Some text some more export { hello }; function hello(div, color) { div.innerHTML = `<svg viewBox="0 0 200 100" style="background-color:${color};width:90%;height:70%;"></svg>`; } code.

include/06-metal.png OneTwoThree

HTML for the last one

<section id="local-inline-media" class="slide level1">
<div class="decker">
<div class="section level1 alignment">
<h1>Local Inline Media</h1>
<div class="layout">
<div class="area">
<p>Some text <span class="media"><span class="figure video" style="height:auto;width:200px;"><video controls="1" allow="autoplay" data-autoplay="1" style="height:auto;width:100%;" src="pacman-perfect-game.mp4"></video></span></span> some more.</p>
<p><span class="media"><span class="figure image"><img src="include/06-metal.png" alt="06-metal.png" /><span class="figcaption"><span>One</span></span></span></span> <span class="media"><span class="figure image" style="height:auto;width:auto;"><img src="include/06-metal.png" style="height:100px;width:auto;" alt="06-metal.png" /><span class="figcaption"><span>Two</span></span></span></span></p>
</div>
</div>
</div>
</div>
</section>

Iframe

Homepage of the man.

YouTube Video Stream

Avatar.

Local Video

The perfect game.

PDF Object

Embeded SVG

Why is it called dumbell?

Embeded SVG

With fragments.

Rendered Code

Rendered CodeBlock

media-deck-code-f45f290c.dot.svg — Graphviz is cool.

Rendered Code Inline

Really TINY shit: graph.dot.svg

Execute Javascript

Fuck YEAH!

Execute Javascript CodeBlock

What?

Execute Javascript Inline

Animation is followed by text

An Mview Iframe

Markdown

![The Utah teapot](assets/teapot.off)

Renders as

The Utah teapot

Behind the Iron Curtain

AST structure synthesis

Branch `master`

caption = [Str "Caption", Space, Strong [Str "text"]]
html = toHtml caption
block = RawHtml ("<figcaption>" <> html <> "</figcaption>")

Just like PHP in the 90s

Branch `develop-layout`

caption = [Str "Caption", Space, Strong [Str "text"]]
block = tag "figcaption" $ Div nullAttr [Plain caption]

More like JSX in the 20s

AST structure synthesis

Conversion status

Embedded local media (Image, Video, PDF, …)
Code blocks (highlighted, rendered, executed)
Iframes (generic URLs, Mview models)
Streaming videos (Youtube, Vimeo, Twitch, …)
Quizzes
Polls

Some Settings

Reveal

Decker

Colors

Slide Structure

Media Structure

Development Path

Branch develop-layout

Branch develop

The plan

Local Image

Embedded SVG

Local Media in 2 columns

Left

Right

Local Media in 2 columns

Left

Right

Local Media in 2 columns

Left

Right

More Images in 2 columns

Left

Also left

Right

And some more text

2 images in a row

Empty line block

3 somethings in a row

Blocks

One

Should align

One slightly longer line.

Should align

Three

Source code is always nice

How is my driving?

Local Image with caption block

Local Image

{width=50%}

Local Image

{height=200px align=right}

HTML for the last one

Local Image

{width=80% height=200px}

Local Inline Media

HTML for the last one

Iframe

YouTube Video Stream

Local Video

PDF Object

Embeded SVG

Embeded SVG

Rendered Code

Rendered CodeBlock

Rendered Code Inline

Execute Javascript

Execute Javascript CodeBlock

Execute Javascript Inline

An Mview Iframe

Markdown

Renders as

Behind the Iron Curtain

AST structure synthesis

Branch master

Branch develop-layout

AST structure synthesis

Conversion status

Branch `develop-layout`

Branch `develop`

`{width=50%}`

`{height=200px align=right}`

`{width=80% height=200px}`

Branch `master`

Branch `develop-layout`