Next-level Screen Annotation

Using a drawing monitor and xaringanExtra for online teaching. Now with Quarto!
Author
Affiliation
Published

Sunday, March 21, 2021

Remote teaching during the SARS-CoV2 pandemic isn’t much different from what I normally do, insofar as I’m still teaching from my home office to students that (mostly) were planning on being online, regardless.

I’d been wondering what I can do to improve my engagement with the on-screen content during live class sessions. Like many, I’m using Zoom (which I’ve talked about in terms of using OBS to spice up your Zoom calls and, while I think the annotation tools provided are decent if a little clunky, I can’t bear trying to “write” on a screen using a mouse.

The Drawing Monitor

Luckily, digital artists have sussed out this problem ages ago when the drawing tablets like the Wacom came out.

(This ⬇️ is not a drawing monitor; this it’s a drawing tablet. )

Drawing tablets have been around for a while

Drawing tablets have been around for a while

And these are great for particular things but (and I tried it) manipulating the Zoom annotation tools is not one of them.

Enter the drawing monitor: think of it as a combination of the drawing tablet (above) and a touch screen. So you can do this kind of thing (this ⬇️ is a drawing monitor):

Now you can actually see what you’re drawing.

Now you can actually see what you’re drawing.

Powerful for artists but why would it be of value for teaching online? Let’s talk about that.

Application

What’s it great for? How about:

  • Code highlighting or debugging
  • Emphasizing and analyzing data visualization
  • Doing traditional paper markup
  • Demonstrating image manipulation
  • Using browser-based slide deck and a blank New Tab gives you an on-demand whiteboard without having to switch between screen shares
  • Compared to an iPad, this is one less device, login, et cetera, to have to worry about. It’s just another monitor.

That said, it struck me how janky the whole process was. Switching the annotation on and off, finding the button to change from pencil back to mouse, having to clear the annotations before moving on. It was really frustrating. Why not just have some keyboard shortcuts to do these things? One hand on the keyboard, one hand holding the pen, and you’re good to go.

Wish list

So I tweeted about the lack of annotation-specific keyboard shortcuts and whoever runs the Zoom Twitter account actually replied, which was unexpected:

Which I did. Who knows what will come of that. 🤷

But wait!

Enter xaringanExtra’s scribble option

I’ve talked about it before but just as a little refresher: for my slide decks, I use an RMarkdown package called xaringan by Yihui Xie, a software engineer at RStudio. (Remember, this site is build with blogdown, another RMarkdown package.) Everything is written in plain text and is human-readable (it’s just a version of Markdown) and incorporates R code natively. It allows you to easily do all the neat stuff you see around here.

Xaringan slide decks are so useful for a variety of reasons, one of which is their extensibility. One manifestation of that is the xaringanExtra package by Garrick Aden-Buie, who is also with RStudio. Want an audio signal when your slides change. Try use_slide_tone(). Want to add a logo to all your slides? use_logo() to the rescue. Make your slides editiable? use_editable()! The list goes on.

Check this out: how’s this for simple but super effective on-screen annotation? This is the demo for the scribble function in a Xaringan slide deck. Either click the ✏️ or the s key on your keyboard while using the slide deck. Try flipping between slides. See how the annotations stay only on the slide you scribbled on? That’s a huge improvement on using Zoom to annotate over a slide and then having those scribbles carry on into the next slide.

And big shout-out to Matt Warkentin for “doing the heavy lifting” to get scribble to work!

I got to use that particular package last night for the first time in class and I can’t begin to express how smooth and easy it made the process. Simply the ability to switch back and forth between slides that maintained their respective annotations was a game-changer. You often don’t realize just how much effort you’re putting forth trying to make something work until it works without friction.

So, if you’re teaching or presenting online and you want to annotate a slide deck, give scribble a try.

Enter Quarto

Guess what: Quarto has this feature built in! See Quarto - Presenting Slides for details on how to use the feature. Quarto presentations can use revealjs, just like xaringan, so it has the same kind of feel. Neat, huh?

Reuse

Citation

BibTeX citation:
@misc{straight2021,
  author = {Straight, Ryan},
  title = {Next-Level {Screen} {Annotation}},
  date = {2021-03-21},
  url = {https://ryanstraight.com/posts/next-level-screen-annotation/},
  langid = {en}
}
For attribution, please cite this work as:
Straight, R. (2021, March 21). Next-level Screen Annotation. https://ryanstraight.com/posts/next-level-screen-annotation/