My Teaching Setup
Ramesh Yerraballi
To document the tools and techniques I use in my teaching setup. This applies both to, face-to-face teaching in a classroom, and online teaching in both live synchronous and pre-recorded asynchronous modes.
Hardware:
Software:
A lecture session could be in one of two modes:
In either case the fundamental building block of the setup is the lecturing tool YDraw. YDraw is used to present content by writing on a Tablet screen, like the Microsoft Surface Pro or the Surface Studio. I have used the tool on a Lenovo Thinkpad Yoga as well but find both these Microsoft products to be more ergonomic. Both devices support an active pen with pressure sensitivity which comes closest to emulating the feel and quality of writing on a physical whiteboard/blackboard like device.
The capturing/recording of the presentation varied depending on the mode. As the use of Zoom has become common and well-known to practitioners, I will focus on the recording for asynchronous delivery using the free tool that is FFmpeg. There are many GUI wrappers of this tool with varying features-set but, I found that accessing the tool in its bare-bones mode met my needs best.
A fundamental decision on my part was to make all interactions with the software (including launching and exiting from them) be completely seamless and non-intrusive to the viewer. To this end, I use the utility AutoHotKey to set up shortcuts to all activities that the software applications themselves cannot manage. Notably, launching YDraw, and launching, (pausing) and exiting FFmpeg are done using keyboard shortcuts facilitated through AutoHotKey. The heart of this utility is a script that allows one to customize the shortcut keys with a rich scripting language (example). Shown below is an example of a shortcut (Ctrl+Alt+r) that runs the recording tool described in more detail later in this document. Note the text in magenta, which:
^!r:: if FileExist("C:\ffmpeg\ffpid.txt") { FileRead, ffpid, C:\ffmpeg\ffpid.txt WinActivate, ahk_pid %ffpid% SendInput {Raw}q FileDelete, C:\ffmpeg\ffpid.txt return } audiodev = "Headset Microphone (Realtek High Definition Audio(SST))" ; Run ffmpeg to list all your audio devices: ; ffmpeg.exe -list_devices true -f dshow -i dummy -hide_banner ; "Microphone (Yeti Stereo Microphone)" ; to use the Yeti Blue mic - Better than the Shure ; "Microphone (Shure MV5)" ; to use the shure mic -- Good mobile mic ; "Microphone (3- Shure MV5)" ; to use the shure mic with usb hub connecting multiple usb devices ; "Microphone Array (Realtek High Definition Audio(SST))" ; to use the builtin mic -- ok ; "Headset Microphone (Realtek High Definition Audio(SST))" ; to use the headset mic -- poor Run %ComSpec% /C "C:\ffmpeg\ffmpeg.exe -y -rtbufsize 150M -f gdigrab -framerate 30 -offset_x 0 -offset_y 0 -video_size 4500x3000 -draw_mouse 1 -i desktop -f dshow -i audio=%audiodev% -c:v libx264 -r 30 -preset ultrafast -tune zerolatency -crf 28 -pix_fmt yuv420p -movflags +faststart -c:a aac -strict -2 -ac 2 -b:a 128k -loglevel quiet "%A_Now%.mp4"",C:\ffmpeg\recordings,min,ffpid FileAppend, %ffpid%, C:\ffmpeg\ffpid.txt WinActivate return |
To initiate a recording session, I simply type in the key combination “Ctrl+Alt+r” and when I am done recording I type the same combination again to end the recording. The recording is available as a time-stamped mp4 file under the directory C:\ffmpeg\recordings.
The preparation for a typical lecture session involves making an outline of the topics to be covered with supporting images. The images are chosen only when writing/drawing this content is more cumbersome and an image serves the purpose better. Figure 1 shows an example set of images used in a recording on device drivers, where a microcontroller communicates with an LCD Display (the ST7735). This is one of several videos that form the device drivers lecture in the Embedded Systems course. It was a pre-recorded asynchronous session recorded after the transition to online instruction in the Spring 2020 semester.
Figure 1. Four Pre-Planned Images retrievable as shortcuts 0,1,2, and 3 |
The four images were chosen so as to render detail that would otherwise be cumbersome to provide in writing. YDraw supports a maximum of ten images retrievable as shortcuts (keys ‘0’-’9’). So, the four images are accessible with shortcut keys 0,1,2, and 3 respectively. It is not necessary to name the images as shown in the example, as the software assigns shortcuts in a lexically sorted fashion.
The following screenshots from the video show how they were used in the delivery of the lecture content. They illustrate the following use cases: i) Adding finer detail, ii) Generalization, and iii) Visual articulation. As can be noted in Figure 2., the image of the ST7735 LCD display embedded into the lecture adds value to the flow of the lecture. Specifically, the pin names can be seen on the physical device as they are being alluded to in the presentation.
Figure 2. Example Use 1 - Finer Detail |
Figure 3. gives a second example. The image containing a list of characters in their 5x7 pixel format is being used to complement the showing of how the character ‘X’ would be displayed at the origin of the display. This supplementary information allows the student to generalize the concept.
Figure 3. Example Use 2 - Generalization |
The third screenshot from the video given in Figure 4., demonstrates the use of text with details that would have been cumbersome to write out. However, having the text on the screen lends itself to a visual articulation (using a flowchart) of what the underlying point of the sequence of steps listed.
Figure 4. Example Use 3 - Visual Articulation |
There are several other configurable properties that customize the experience in YDraw besides the location of the folder holding the pre-planned images. These properties are stored in the YDraw.properties file an example of which is shown below. The properties are
# Properties file for YDraw # Choose between fine(4),medium(6),thick(8),fat(12) can go up to 36 thickness=8 # Choose highlighter color between yellow/magenta/cyan/green highlighter=yellow # directory where upto 10 images in png/gif/jpg are stored in lexical order # These will become shortcuts for number keys 0-9 in the same order imagedir=images-i2e # default directory for ctrl-l ctrl-d and ctrl-x relative to user's home; # escape backslashes (windows) defaultdir=\\Box\\School # Debug information dumped to YDraw.dump Debug=off # Screen's can be scaled, if so by what factor # For example surface pro 5 has a screen resolution of 2736 x 1824; # At 200% scaling java thinks the screen is 1368x912 # Give ScreenScaling as 2 ScreenScaling=2 # Enable display of logo at bottom right corner # (file: Logo.png holds image 70wx32h) Logo=off # Pen Slant on makes the pen brush-like; off makes it a pencil Slant=on |
As of this writing there are two versions of YDraw, the first uses the JPen java library which works both on Windows and Mac, and the second uses the JWinPointer library which only works on Windows 10. The first version has been actively developed and used for eight years now, however, the Windows version is based on the Wintab api which is no longer supported by Microsoft. The second version bypasses this dependency as it makes native calls to Windows OS to obtain multi-touch events including pressure sensitivity. At this point, the version with JPen seems to have a slightly better responsiveness and writing quality. The writing quality is a function of how the pressure sensitivity is used in the rendering of a line. The pressure values and the end points for rendering a line are obtained from the api and these seem to be of a higher quality in JPen. A more thorough performance comparison of the two versions is planned for the future. The advantage of the second version is that it makes native calls to the OS, which seems to make it perform better with Zoom.
The choices for recording software abound, from pricey feature rich commercial products like Camtasia, to not too expensive products like Screencast-o-matic and FilmoraScrn, to freeware like OBS Studio and ffmpegX. I have used all of these and see value in each. Most if not all freeware are graphical user interfaces (GUIs) to the ffmpeg utility. ffmpeg is a command-line utility to record, convert and stream audio and video content. The command-line use of ffmpeg could be quite intimidating to most users hence the proliferation of GUIs.
I prefer the use of the command line as it saves me from having to install and learn yet another interface, and it allows me to automate actions using keyboard shortcuts. To this end, I mined the Internet and experimented with various command line options to figure out the “magic” line that correctly launches ffmpeg for the hardware (display and audio) particular to my setup. AutoHotKey scripting allows me to customize this magic line so I don’t have to type it in manually. I simplified the line string so it only needs two configurable inputs, i) the screen resolution (Width x Height in pixels ) and, ii) the audio source. These two inputs (video_size and audiodev) are shown in bold blue color in the script above. I choose the recording area to be the entire screen as YDraw itself uses the entire screen as a whiteboard.
Typical acts performed in post production (All of these I performed using ffmpeg from the command-line):
I have a “howto” document for all these and more things that can be done in ffmpeg along with actual working examples. Here is a link to it.
I use the following three publishing modes:
The advantages of this mode are the following: