class: center, middle, inverse, title-slide

.title[
# Scribble <br>.gray[for xaringan]
]
.subtitle[
## 👩‍🎨
]
.author[
### <a href='https://pkg.garrickadenbuie.com/xaringanExtra'>xaringanExtra<a>
]
.date[
### .purple[Scribble] on your xaringan slides
]

---

class: center middle

<style type="text/css">
.gray { color: #999; }
.big { font-size: 1.5em; }
.purple { color: #A53B87; }
.green { color: #42B983; }
.vibur { font-family: Vibur, sans-serif; }
.tr { text-align: right; }
.remark-slide-content h1,
.remark-slide-content h2,
.remark-slide-content h3 {
  font-family: 'Permanent Marker', sans-serif;
}
.remark-slide-content,
.remark-slide-content.title-slide h3 {
  font-size: 28px;
  font-family:  'Gaegu', sans-serif;
}
.remark-slide-content .remark-inline-code {
  font-size: 0.9em;
  font-family: 'Pangolin', monospace;
}
</style>

# Draw on me!

.big[
Press <kbd>S</kbd> to start drawing<br>
or click the **pencil** icon<br>
in the upper right corner.
]

.gray[Press <kbd>S</kbd> or click again to stop.]

---
class: middle center

# Scribble Controls

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<div><div id="pencil-icon" style="color: var(--xe-scribble--button-inactive-color)"></div><div style="padding: 1em"><strong style="color: red">Draw</strong><br>on your slides</div></div>
<div><div id="erase-icon" style="color: var(--xe-scribble--button-inactive-color)"></div><div style="padding: 1em"><strong style="color: red">Erase</strong><br>individual lines</div></div>
<div><div id="clear-icon" style="color: var(--xe-scribble--button-inactive-color)"></div><div style="padding: 1em"><strong style="color: red">Clear</strong><br>drawings from a slide</div></div>
</div>

---

# How to Use Scribble

Add **scribble** to your slides.

````
```{r xaringanExtra-scribble, echo=FALSE}
xaringanExtra::use_scribble()
```
````

--

### Choose your options

- `pen_color` sets the starting pen color

- `pen_size` sets the size of the drawing line

- `eraser_size` sets the size of the eraser

---
class: center middle inverse

# Try It Now!

.green[**scribble** works great with touch devices]

---
layout: true

## Perfect for teaching

---

Draw your own regression lines!

<img src="index_files/figure-html/mtcars-plot-1.png" width="65%" style="display: block; margin: auto;" />

---

How close were you?

<img src="index_files/figure-html/mtcars-regression-1.png" width="65%" style="display: block; margin: auto;" />

---

layout: false
class: no-scribble

### Disabling Scribble for specific slides

- You can add the `no-scribble` class to any slide (including the title slide!) to disable Scribble for that slide without affecting your other slides
    + Note: this slide doesn't have Scribble!

- Example usage:

````md
class: no-scribble

# My Awesome Slide

- This slide won't have Scribble enabled!
````

---
layout: false
class: middle

.center[
# Thanks &#x1F64F;

Scribble was built for [xaringan] by

- [Matt Warkentin](https://mattwarkentin.github.io/) and 
- [Garrick Aden-Buie](https://www.garrickadenbuie.com)

using the amazing [fabric.js][fabric] library
]

[fabric]: http://fabricjs.com/
[xaringan]: https://slides.yihui.org/xaringan

---
layout: false
class: center middle

<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="25%" alt="GitHub Octocat Logo" />

### [gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra)

Notes for current slide

Notes for next slide

Scribble
for xaringan

👩‍🎨

xaringanExtra

Scribble on your xaringan slides

1 / 11

Draw on me!

Press S to start drawing
or click the pencil icon
in the upper right corner.

Press S or click again to stop.

2 / 11

Scribble Controls
Draw
on your slides
Erase
individual lines
Clear
drawings from a slide
3 / 11

How to Use Scribble

Add scribble to your slides.

```{r xaringanExtra-scribble, echo=FALSE}
xaringanExtra::use_scribble()
```

4 / 11

How to Use Scribble

Add scribble to your slides.

```{r xaringanExtra-scribble, echo=FALSE}
xaringanExtra::use_scribble()
```

Choose your options

pen_color sets the starting pen color
pen_size sets the size of the drawing line
eraser_size sets the size of the eraser

5 / 11

Try It Now!

scribble works great with touch devices

6 / 11

Perfect for teaching

Draw your own regression lines!

7 / 11

Perfect for teaching

How close were you?

8 / 11

Disabling Scribble for specific slides

You can add the no-scribble class to any slide (including the title slide!) to disable Scribble for that slide without affecting your other slides
- Note: this slide doesn't have Scribble!
Example usage:

class: no-scribble
# My Awesome Slide
- This slide won't have Scribble enabled!

9 / 11

Thanks 🙏

Scribble was built for xaringan by

Matt Warkentin and
Garrick Aden-Buie

using the amazing fabric.js library

10 / 11

GitHub Octocat Logo

gadenbuie/xaringanExtra

11 / 11

Draw on me!

Press S to start drawing
or click the pencil icon
in the upper right corner.

Press S or click again to stop.

2 / 11

Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help
s	Toggle scribble toolbox

Esc	Back to slideshow