Introducing VC Tools @ volunteer.systems (name badge & scheduling tools)

jaredhk · September 4, 2024, 5:42am

Very niche post ahead, geared towards Volunteer Coordinators for official FIRST events. If that’s not you, no hard feelings. Forward to your favorite Volunteer Coordinator, if you’d like!

Introducing VC Tools (volunteer.systems), a suite of productivity tools for FIRST Volunteer Coordinators

If you are a Volunteer Coordinator for an official FIRST program, you know that the FIRST Volunteer Management System (VMS) is a powerful tool with a lot of limitations. HQ is known to be working on a long-term replacement for much of their IT stack, but in the meantime, the system we have is the one we will continue using.

I’ve developed two tools so far (and hope that you, the community, will contribute more). Those tools are:

Name Badge Generator

Take the VMS “Name Badges” report and turn it into easy-to-ready name badges for Avery or Dymo labels with just one-click. No mail merges. No manipulating spreadsheets.

A VMS export yields the following example badges in just one click. You can customize text in either of the bottom corners and along the top banner. Further customization is not available at this time.

Volunteer List Parser

Anyone who has worked with VMS before knows that getting a report with one volunteer per line is not easy. For the uninitiated, the “Assigned Volunteers Report” lists each volunteer-day-role combo as its own line on a spreadsheet. Meaning, if someone is assigned to a single role for three days, they will appear three times on the export. If one of those days, they have multiple roles, they’ll appear twice.

Two years ago, I introduced a spreadsheet-based tool to FRC Volunteer Coordinators to combat this. While folks were generally happy with the sheet, I got some feedback that the sheet broke under certain conditions and wasn’t intuitive for the non-techies among us.

Now, in one click and right from your browser, convert a VMS report to something easily manageable.

All the other stuff

Why now? I am releasing this now (in September) rather than waiting until FRC season. I know many FRC VCs don’t currently have access to VMS. However, FLL and FTC season are upon us, and the number of FLL and FTC VCs greatly exceeds those in FRC. I’m hopeful to use these smaller scale events to get some feedback and make the tools even more solid before FRC season. I’ve had a few folks look at the tools, but please try to break them, if you are a VMS user and you can. Now is the time!
Personally Identifiable Information (PII): No data leaves your web browser when using VC Tools. All processing happens client-side (on your device) to ensure PII compliance. As is the case when you download an export from VMS, please keep exports from VC Tools safe if they contain PII. The software is open source and you can inspect the tools to confirm that no data is being sent to any third party.
I’m not a coder. I just play one on TV. Seriously, though, folks. I really don’t know how to program. I know enough to be dangerous, and completed this project with more help than I’d like to admit from some AI tools (they’re credited on the webpages and in GitHub). If you know how to write in JavaScript, please help make my code better, or consider adding some new tools.

I made these tools, primarily, to make my workflows easier. As a year-round VMS user (for FLL, FRC, and the FIRST Championship), I’m thinking about this stuff all the time. I’d love to hear your experiences and feedback, if you use these tools.

timtim17 · September 4, 2024, 6:11am

Nice! Looking forward to more tools…

As I recall, VIMS supports (as of recent?) pronouns on a volunteer’s profile. I’ve had a VC make a custom badge before that had that info from my profile. I’m not a VC, so not at all familiar with the export from VIMS (i.e. if it’s included) – any way that could be added as a badge field?

jaredhk · September 4, 2024, 6:20am

The pronoun field does exist on the FIRST Dashboard, but because it’s newer, many volunteers have the field blank in their profile. A lot of events have started to offer stickers, buttons, or ribbons with pronouns as a solution to this, but yes, a VC could print these directly on the badges using VMS data.

I don’t know that there’s enough data in the system yet to warrant building into the tool yet, but certainly a possibility for the future.

kingc95 · September 4, 2024, 12:32pm

This is not an issue with me at all (including the credits is a good idea). It helped you to be able to take something in your head and generate a real world website with code. You weren’t a coder, but you are now (as long as you attempted to understand what you were doing as you copy-pasted stuff in). You might not be a professional, but you tried something new and that’s never a bad thing!

Also HTML/JS is high level enough that if you took a random person off the street and asked them to explain what was happening with a websites source html files im sure they could make a rough guess. Most HTML elements are named or an abbreviation of a common document element (paragraph, heading, list, etc). As long as the js isn’t obfuscated or using a bunch of weird APIs/advanced programming techniques it should also be easy-ish to follow along as well.

Great work!

jaredhk · September 4, 2024, 1:26pm

kingc95 · September 4, 2024, 3:25pm

The jsPDF API is not too bad. It takes some getting used to, but the “wonkiness” comes in trying to use HTML items and then convert them over.

From jsPDF example website about fromHTML:

This (BETA level. API is subject to change!) plugin allows one to scrape formatted text from an HTML fragment into PDF. Font size, styles are copied. The long-running text is split to stated content width.

Instead if you just use the default text functions it goes much smoother. You just declare it’s x, y and the text to print.

Example jsPDF :

var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');

doc.save('Test.pdf');

You can specify stuff like the units the page should use (inches, cm, mm, etc) and then any other size/formatting when you first create the doc object. After that it’s really easy to just place items where they are supposed to go. When you don’t specify anything it defaults to mm and I believe an A4 paper size in portrait layout.

Where it gets tough is if your layout is very dynamic and the format changes where text should be. If it’s a static layout this is about all you really need.

devyntk · September 4, 2024, 6:31pm

These are all great - I’ve always been a bit confused why VMS doesn’t have name badge generation built in, and I’m glad to see something more public to be used.

In the spirit of sharing, I’ve been using various markup tools like LaTeX for creating volunteer name badges for a few years, and most recently I switched to the incredibly powerful typst. I find this incredibly powerful and useful, and you could even embed a Typst compiler in your browser with something like typst.ts.

I’ve attached the template I used this summer, and has some very nice features including a double sided badge with role-specific information on the back. It’s not setup to work with VMS’s output format, but I plan on adapting it soon for FTC events that I’ll be helping with in the near future. I hope this is useful for somebody involved, and I might consider making this better supported/open in the future.

badges-1.typ.txt (7.5 KB)