Slides | Ben Dêivide

R como uma ferramenta acadêmica

Tue, 05 Feb 2019 00:00:00 +0000

R como uma ferramenta acadêmica

Apresentação com selo DC

Acesso ao material dessa apresentação

Nota

Essa apresentação terá um viés, pois apesar do poder que a ambiente R tem, muitos dos exemplos estarão dentro das minhas necessidades/limitações pessoais e profissionais. Portanto, um resultado do que experimento e venho experienciando!

Histórico sobre o ambiente `R`

Criadores Ross Ihaka e por Robert Gentleman (Nova Zelândia), 1993
Baseado na linguagem S, criado por John Chambers e colaboradores (Primeira versão 1976)
Atualmente é mantida por colaboradores voluntários em todo o mundo

Histórico sobre o ambiente `R`

Linguagem pode ser orientada a objetos, Código aberto, funcional, metapragmática, Licença GNU
Repositório CRAN
Popularidade com o RStudio (Joseph J. Allaire)
Como instalar o R? Como instalar o RStudio?
Como usar o R?

Curso R (Nível Básico)

Curso R (NI)

Rapidinhas do R

Ferramentas do `R` além do fim Estatístico

Análises Estatísticas ❌
Criação e divulgação de materiais científicos:
- Materiais Dinâmicos (HTML, JavaScript, CSS, $\LaTeX$, R, PDF) ✔️
- Materiais estatísticos (HTML, PDF, EPUB, WORD, SLIDES) ✔️

Ferramentas do `R` além do fim Estatístico

Desenvolvimento de pacotes ✔️
- Criação de GUIs para pacotes (Pacotes tcltk, GTK+, shiny) ✔️
- Documentação de pacotes (Vignettes, tutorial de pacote) ✔️
Divulgação de todos esses materiais ✔️

O que será necessário para usar essas ferramentas?

Instalação do R e RStudio/Pandoc
No R instalar os pacotes:
- rmarkdown e knitr - Pacotes mais importantes!
- shiny - Pacote para criação de materiais dinâmicos
- devtools e usethis - kit de ferramentas
- rsconnect - Pacote para enviar seu arquivo para shinyapps.io

O que será necessário para usar essas ferramentas?

No R instalar os pacotes:
- tinytex - Latex (Caso você não queira instalar o $\LaTeX$)
- rticles - Escrever Artigos
- thesisdown - Escrever Teses
- bookdown - Escrever Livros (HTML, PDF, ePub, Kindle)

O que será necessário para usar essas ferramentas?

No R instalar os pacotes:
- blogdown e distill - Criação de blogs, websites
- postcards - Criação de um cartão de visita
- learnr - Criação de tutoriais para aprender R
- pkgdown(Documentação em HTML para pacotes R) e usethis ou rmarkdown(Criação de Vignettes)

O que será necessário para usar essas ferramentas?

No R instalar os pacotes:
- tcltk (Existem muitos outros pacotes!) - GUI’s
- manipulate e shiny - gráficos interativos no RStudio e scatterplot3d - Gráficos em 3d
- exams - Criação de Provas para disciplinas + MOODLE
$\LaTeX$, MS Word (ou similares)

`R` Markdown

Três componentes básicos:

Metadados: O corpo do documento
Texto: Assunto dissertado
Código: Linguagem de interesse

LEMBRETE: A extensão de um arquivo R Markdown é: .Rmd

Material de apoio ao `R` Markdown

O básico no R Markdown: https://rmarkdown.rstudio.com/authoring_basics.html

A ideia dos pacotes nos documentos dinâmicos: https://jreduardo.github.io/semanest-ufpr2017/

Para leitura: http://cursos.leg.ufpr.br/prr/capDocDin.html

`R` Markdown: Documentos estatísticos

Aplicações:

`R` Markdown: Documentos dinâmicos

Recursos do Shiny:

Exemplos:

Criação de Websites

Website (pacote distill): Rapidinhas do R, ex. Curso R
Website via blogdown e Hugo (temas)

Exemplos de Websites

Exemplos:

R Markdown no RStudio
Website pessoal de Rob J Hyndman
Website pessoal de Amber Thomas
Website pessoal de Emi Tanaka

Exemplo de Postcard

Exemplo: Ben Dêivide

Exemplo de Dashboard

Outros exemplos de Dashboards

R Markdown: Relatórios programados

Exemplo: Mine Çetinkaya-Rundel

R Markdown: Relatórios programados (Aplicação)

Nomes dos professores do DEFIM/UFSJ e númerode suas salas;
Vamos fazer um documento em PDF, cujo nome desses arquivos serão os nomes dos professores, com algum texto identificando as suas salas.

R Markdown: Livros

Site: https://bookdown.org/
Exemplo: EPAEC, EAMBR

R Markdown: Artigos e Teses

Pacote bookdown (Tese)
Pacote rticles (Artigo): install.packages("rticles")
Pacote thesisdown (Tese):

if (!require("remotes")) 
  install.packages("remotes", repos = "https://cran.rstudio.org")
remotes::install_github("rstudio/bookdown")
remotes::install_github("ismayc/thesisdown")

R Markdown: Livros (Aplicações)

R Markdown: Slides (Aplicações)

Documentação para pacotes

Pacote pkgdown: ex.: midrangeMCP
Vignettes (Pacote usethis): usethis::use_vignette()

Interface Gráfica ao Usuário

Exemplo do pacote tcltk: MCPtests

Exemplo do pacote shiny: esquisse

Documentos para aprendizagem do `R`

Pacote learnr: ex.: Estatística Experimental

Aplicação de provas (Academia)

Pacote exams e uso no MOODLE

Gráficos 3D ($\LaTeX$ e `R`)

Pacote scatterplot3d

Tabelas com ilustrações animadas + `Sweave`

Onde publicamos esses materiais?

Questões?

Dúvidas e Sugestões

Contato

Slides

Tue, 05 Feb 2019 00:00:00 +0000

Create slides in Markdown with Wowchemy

Wowchemy | Documentation

Features

Efficiently write slides in Markdown
3-in-1: Create, Present, and Publish your slides
Supports speaker notes
Mobile friendly slides

Controls

Next: Right Arrow or Space
Previous: Left Arrow
Start: Home
Finish: End
Overview: Esc
Speaker notes: S
Fullscreen: F
Zoom: Alt + Click
PDF Export: E

Code Highlighting

Inline code: variable

Code block:

porridge = "blueberry"
if porridge == "blueberry":
    print("Eating...")

Math

In-line math: $x + y = z$

Block math:

$$ f\left( x \right) = \;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}} $$

Fragments

Make content appear incrementally

{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} **Two** {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}

Press Space to play!

One **Two** Three

A fragment can accept two optional parameters:

class: use a custom style (requires definition in custom CSS)
weight: sets the order in which a fragment appears

Speaker Notes

Add speaker notes to your presentation

{{% speaker_note %}}
- Only the speaker can read these notes
- Press `S` key to view
{{% /speaker_note %}}

Press the S key to view the speaker notes!

Themes

black: Black background, white text, blue links (default)
white: White background, black text, blue links
league: Gray background, white text, blue links
beige: Beige background, dark text, brown links
sky: Blue background, thin dark text, blue links

night: Black background, thick white text, orange links
serif: Cappuccino background, gray text, brown links
simple: White background, black text, blue links
solarized: Cream-colored background, dark green text, blue links

Custom Slide

Customize the slide style and background

{{< slide background-image="/media/boards.jpg" >}}
{{< slide background-color="#0000FF" >}}
{{< slide class="my-style" >}}

Custom CSS Example

Let’s make headers navy colored.

Create assets/css/reveal_custom.css with:

.reveal section h1 {
  color: navy;
},
.reveal section h2,
.reveal section h3 {
  color: navy;
}

Questions?

Ask

Documentation

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

If the autoSlide feature is set or if the audio-slideshow plugin is used, pre-recorded chalkboard drawings can be played. The slideshow plays back the user interaction with the chalkboard in the same way as it was conducted when recording the data.

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

If the slideshow is opened in print mode, the chalkboard drawings in the session storage (see storage option - print version must be opened in the same tab or window as the original slideshow) or provided in a file (see src option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings on the notes canvas are not included in the PDF-file.

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

The following configuration options allow to change the appearance of the notes canvas and the chalkboard. All of these options require two values, the first gives the value for the notes canvas, the second for the chalkboard.

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Notes

Mon, 01 Jan 0001 00:00:00 +0000

Chalkboard

With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

you can make notes directly on the slides, e.g. to comment on certain aspects,
you can open a chalkboard or whiteboard on which you can make notes.

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.

Installation

Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.

Usage

Mouse or touch

Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
Click the left mouse button and drag to write on notes canvas or chalkboard
Click the right mouse button and drag to wipe away previous drawings
Touch and move to write on notes canvas or chalkboard
Touch and hold for half a second, then move to wipe away previous drawings

Keyboard

Press the ‘BACKSPACE’ key to delete all chalkboard drawings
Press the ‘DEL’ key to clear the notes canvas or chalkboard
Press the ‘c’ key to toggle the notes canvas
Press the ‘b’ key to toggle the chalkboard
Press the ’d’ key to download drawings
Press the ‘x’ key to cycle colors forward
Press the ‘y’ key to cycle colors backward

Playback

Multiplexing

The plugin supports multiplexing via the multiplex plugin or the seminar plugin.

PDF-Export

Configuration

The plugin has several configuration options:

boardmarkerWidth: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
chalkWidth: an integer, the drawing width of the chalk; larger values draw thicker lines.
chalkEffect: a float in the range [0.0, 1.0], the intesity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
storage: Optional variable name for session storage of drawings.
src: Optional filename for pre-recorded drawings.
readOnly: Configuation option allowing to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made, if unset or set to undefined no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the ‘DEL’ key (i.e. by using the RevealChalkboard.clear() function).
transition: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
theme: Can be set to either "chalkboard" or "whiteboard".

background: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
grid: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Alternatively, the grid can be removed by setting the value to false.
eraser: An image path and radius for the eraser.
boardmarkers: A list of boardmarkers with given color and cursor.
chalks: A list of chalks with given color and cursor.
rememberColor: Whether to remember the last selected color for the slide canvas or the board.

All of the configurations are optional and the default values shown below are used if the options are not provided.

Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});

License

MIT licensed

Mon, 01 Jan 0001 00:00:00 +0000

reveal.js - Speaker View

Loading speaker view...

Upcoming

Time Click to Reset

0:00 AM

00:00:00

Pacing – Time to finish current slide

00:00:00

Slides | Ben Dêivide

R como uma ferramenta acadêmica

R como uma ferramenta acadêmica

Apresentação com selo DC

Acesso ao material dessa apresentação

Nota

Histórico sobre o ambiente R

Histórico sobre o ambiente R

Curso R (Nível Básico)

Curso R (NI)

Rapidinhas do R

Ferramentas do R além do fim Estatístico

Ferramentas do R além do fim Estatístico

O que será necessário para usar essas ferramentas?

O que será necessário para usar essas ferramentas?

O que será necessário para usar essas ferramentas?

O que será necessário para usar essas ferramentas?

R Markdown

Material de apoio ao R Markdown

Material de apoio ao R Markdown

R Markdown: Documentos estatísticos

R Markdown: Documentos dinâmicos

Criação de Websites

Exemplos de Websites

Exemplo de Postcard

Exemplo de Dashboard

Outros exemplos de Dashboards

R Markdown: Relatórios programados

R Markdown: Relatórios programados (Aplicação)

R Markdown: Livros

R Markdown: Artigos e Teses

R Markdown: Livros (Aplicações)

R Markdown: Slides (Aplicações)

Documentação para pacotes

Interface Gráfica ao Usuário

Documentos para aprendizagem do R

Aplicação de provas (Academia)

Gráficos 3D ($\LaTeX$ e R)

Tabelas com ilustrações animadas + Sweave

Onde publicamos esses materiais?

Questões?

Slides

Create slides in Markdown with Wowchemy

Features

Controls

Code Highlighting

Math

Fragments

Speaker Notes

Themes

Custom Slide

Custom CSS Example

Questions?

Time Click to Reset

Pacing – Time to finish current slide

Notes

Chalkboard

Installation

Usage

Mouse or touch

Keyboard

Playback

Multiplexing

PDF-Export

Configuration

License

Time Click to Reset

Pacing – Time to finish current slide

Notes

Chalkboard

Installation

Usage

Mouse or touch

Keyboard

Playback

Multiplexing

PDF-Export

Configuration

License

Time Click to Reset

Histórico sobre o ambiente `R`

Histórico sobre o ambiente `R`

Ferramentas do `R` além do fim Estatístico

Ferramentas do `R` além do fim Estatístico

`R` Markdown

Material de apoio ao `R` Markdown

Material de apoio ao `R` Markdown

`R` Markdown: Documentos estatísticos

`R` Markdown: Documentos dinâmicos

Documentos para aprendizagem do `R`

Gráficos 3D ($\LaTeX$ e `R`)

Tabelas com ilustrações animadas + `Sweave`