Walking across the stage at their convocation ceremony is a symbolic moment in the lives of graduating students. For the families and friends of graduates at Loyalist College, that moment has been made more visible by the addition of a graphics system engineered by Chris Wilms (@cwilms-loyalist).

Chris is a Senior A/V Broadcast Technologist at Loyalist College in Belleville, Ontario, Canada. He’s also a Vuo Founder. Since 2011 he’s been augmenting Loyalist’s convocation ceremonies with video and graphics technology, and for the June 2017 convocation he revamped his system to use Vuo. Chris told me about it in an email interview.

Remote video URL

Who all was involved in making and operating the convocation graphics system?

I started this project several years ago for our 2011 Convocation Ceremonies with the goal of improving the experience for those attending. We’re a relatively small college and we don’t have a single auditorium large enough to accommodate the entire event. Our dining hall and gymnasium, where our Ceremonies are held, are adjacent to one another with a partially removable wall between them. One of the issues we deal with has to do with sight lines and so I came up with the idea of creating an IMAG [Image Magnification] system that would give everyone a good view of the stage and also add interesting and relevant graphic content that could assist those attending with knowing where we were in the ceremony.

Because we have limited staff and still have a sound system and live video-streaming operating during the event as well, I designed the live graphics system to be able to be operated by one person, which has historically been myself. However my next goal with this project, now that I’ve been able to use Vuo to greatly simplify the operation of the system by giving it a proper GUI, is to streamline the project further so that someone other than myself could create the graphics content, easily make last-minute changes and operate the event with minimal involvement from myself.


Was it used in all of Loyalist’s convocation ceremonies this year?

We had four 2-3 hour ceremonies over the course of two days. Each ceremony has its own set of graphics that are unique to the programs and schools being represented. I created a single Vuo composition that I then exported into an app which was made to call the appropriate graphic for the current ceremony. I created hot-keys which allowed me to easily toggle to the next ceremony on the fly.

How did the graphics display improve the experience for graduating students and their families?

This graphics system is designed to add visual interest, provide instruction as well as present information relevant to the ceremony. For example, the ceremony begins with a full-screen motion graphic showing student life photos from the current school year and then transitions to a live camera and asks the audience to please stand and welcome the graduating students. It then shows the events happening on stage accompanied by text graphics such as name-keys for each of the almost 2000 graduating students, special guests and officiating members as the ceremony progresses. There are also custom graphics for O Canada and a few other key points during the ceremony that need on-screen information displayed. In total there are 21 different graphics and videos that can be selected via the 24 buttons built into the GUI. The new graphic is first shown in the Preview window before you press “Take” and send it out to the Program window which is live to the projectors in the gymnasium. I’ve also made it so you can select either a cut or dissolve transition between the different graphics.


What made you decide to use Vuo for this project?

The first version of my project was initially built back in 2011 in Quartz Composer (QC) on an early 2011 MacBook Pro and controlled wirelessly with the Luminair lighting control app on my iPad 3. Since then the project has gone through multiple revisions and improvements, such as better projectors and more complex graphics and video content. Throughout the design I was often running into the limitations in QC and had concerns about reliability due to how complex the system had become. Since its announcement I had been closely following the progression of Vuo, voting on important features and coming up with a few feature requests on my own as well, all with the intent of transitioning this project over to it when the time was right. The Vuo project I had been slowly developing on-the-side suddenly became high priority when an unexpected stability issue on my QC MacBook Pro made it no longer suitable to trust for live events.

In a way I’m glad I was forced to accelerate this project, I came to really appreciate just how well Vuo was made and how great the Vuo Team and community really are. I really appreciated been given the opportunity to be an alpha tester for the XML nodes, and for the amazing and timely fix for the AMD crashing issue, and for just answering all my many questions, it really made this project possible.


What did your setup look like?

The GUI itself was designed right in Vuo. The GUI contains Preview and Program areas, 24 buttons that switch between the video, graphic with live video feed or select the Data Matrix card reader that auto-generates the student’s name graphics so over 500 students can have their name, program and school as well as any awards they’ve won displayed on screen as they cross the stage. There are two selectable transitions (dissolve and cut) and a switch button to actually send the preview feed to the program output. It also contains a live video area showing the Data Matrix camera feed with controls for adjusting the position, zoom and rotation of the camera image being fed to the barcode node. This ensures I can deal with any alignment issues with the barcode reader.


What led you to use barcodes as the method of inputting student information?

We needed a way of automatically generating the name keys for the almost 2000 students who crossed the stage. It had to accommodate issues such as absences, graduates switching spots in line, changes in pace of the ceremony, and avoid spelling errors. Since each student is already issued a “graduate card” with their name, program and awards written on it, and this card is placed in front of a video camera just prior to the student walking across the stage so their name and awards can be read from the podium’s teleprompter, it made sense to add a barcode to the card as well for the graphics system to read. A USB webcam reads this Data Matrix barcode and the graphics system takes that information, cross-references it to a database and formats the text and graphics for display as their name is announced.


Do you plan to use Vuo at the next convocation or other events at Loyalist College?

I plan to continue to develop our live graphics system in Vuo and without a doubt will be using it again next year. As time permits I would like to make this project more flexible in allowing easier last-minute changes so that may open doors for other uses in itself. Vuo certainly has unlimited possibilities so I will definitely be keeping it in my toolbelt.

Update (2019.06.18): Chris recently gave a talk about this project at the OCCCIO Conference. Here are his presentation slides: