Nametags for NAC3

The year 2020 started with a bang: Nili’s Apartment Cup 3 (NAC3) was the first major Age of Empires 2 tournament that was played on the new Definitive Edition, with a prize pool of over 30.000 dollars. It took place over the second week of January in Nili‘s apartment (hence the name) in Hamburg.

The weekend of the finals was to be accompanied by a public viewing event at a location in Hamburg. There was also a meet and greet event for the community, players, and casters on saturday evening at said location.

Community meetups are a great way to assign real faces to the names you meet online in Twitch chats and Discord servers. I am regularly astonished by the huge amount of good-looking people in the Age of Empires 2 community. From the way they act online, you would expect a horde of literal trolls to show up. But no!

In order to facilitate matching names to faces, I offered to provide nametags for everyone attending. The technical setup for this was rather simple: I borrowed a Dymo-450 label printer from my mother1, ordered some rolls of sticky labels on the internet, and brought my laptop to connect to the printer and print the labels from it.

My main concern was to avoid long wait times for people longing for nametags. The location was open to the public with no entry fee and no pre-registration required, so we did not know how many people would attend the event in the end. From the activity in the dedicated meet and greet Discord server I expected a few hundred people to show up at least.

The absolute worst-case scenario that I calculated with would have been around a hundred people showing up at the same time, right as the printer breaks down. Such a situation should be handled as smoothly as possible.

In case the printer decided to refuse further printing, I brought ten felt markers with which people would have been able to write their names onto the printer labels by hand. It would not have been as pretty, but the main goal of the nametags, telling people who you are without having to spell out your name all night long, would still be achieved. Problem solved!

Avoiding long queues while still printing beautiful name tags required a bit more preparation. We decided on a label design which included the name in bold at the top, a set of spoken languages in smaller print below (so you could decide in which language to address a person), a tagline in italics, also in small print, below that, which you could use to tell everyone your favourite joke or whatever you liked (as long as it still fit on the label), and finally a small bootleg NAC3 logo at the bottom right.

Nametags for NAC3
A sample nametag.

The absolute minimal amount of time needed to create one label is the time it takes to print and tear the label, which is about five seconds.
The things that take significantly longer are:

  • Having people think of a name they want to wear
  • Having people remember all the languages they can speak
  • Having people decide on a funny tagline (or decide they don’t want one)
  • Explaining to people all the textual elements of the nametag
  • Waiting for people to type everything into the computer to create the label

As you can easily see, people are the main issue. As usual.

A few points made my job easier on the technical level:

  • Using a library provided by pdfmake.org, we can take inputs from a html form and create a pdf file
  • Modern web browsers allow embedding pdf files in websites
  • Modern web browsers allow printing those embedded pdf files directly from the browser
  • You can print pdf files in the right format on the label printer, so I did not have to use dedicated label printing software

So I created just that: A html page where you can input your username, languages and tagline into a form. The page then creates a nametag pdf file that you can directly print if you have the right printer. Which I coincidentally2 had!

Not all usernames are equal though: Some are longer than others. Which makes them break onto two lines, and suddenly all that text on your nametag does not fit onto one single label anymore.

Nametags for NAC3
Poor platypus: One character too much! The little logo has been pushed down even further.

So I added an option to adjust the name’s text size. Easy fix!

Nametags for NAC3
Yaaaay!

One 1,80 m tall participant3 informed me that he mistook the “Size” input for a prompt to input the body height in centimeters. An interesting interpretation that I did not think of before. Remember, kids: Always label your input fields precisely!

Now on to the people issues we noticed earlier.

If we had a way to let people fill out the form somewhere else – at home, on a train, on the loo – and could just load them up and print them directly, that would solve all of our time problems.

In order to achieve this I wrote a small php script that did nothing else than take a json representation of a person’s nametag, generate a random five-digit number, store the json in a file with that number as the filename, and return the number. I also added a Save button to the html page that collected the data from the form, sent it to the php script, and displayed the number that it got as a response.

The second part was an input field where I could enter such a number and it would load the stored nametag information and put it back into the form fields and generate the nametag.

Aaaand we are basically done! Just get all the people to create their nametags in advance and write down their number, and I could use that number at the location to print their personal nametag. People could even just create another one and write down the new number if they wanted to change something.

Ok, maybe we are not done yet. Have you ever tried to make hundreds of people do what you want them to do?

I tried my best at least. I added the instructions at the top of the page. Tried to formulate them as simple and clear as possible. Then I put the thing online and advertised it in the meet and greet discord server multiple times.

And it kind of worked: We ended up with around 170 preconfigured nametags (some of which were duplicates).

There were obviously going to be people at the meetup who did not configure their nametag in advance. Still fearful of long queues, I decided they would be asked to fill out the form on their mobile device at the location and could then print it with the code they would get. The little issue with that: The location did not provide wifi. This means I could only ask that from people from the EU who have data roaming on their mobile devices. Luckily, the majority of attendees would match that criterion. In order to get their nametag data from the server I would have to get my laptop connected to the internet somehow as well. Opening a wifi hotspot on my mobile phone turned out to be sufficient for that task. Otherwise we would really have had to ask people to type their stuff directly on the laptop, since I would have had no way to get their nametag from the internet onto the label printer.

Days of truth

I arrived early at the public viewing location and successfully managed to procure a table for my setup pretty quickly. The internet connection for my laptop via wifi hotspot from my phone worked flawlessly.

Nametags for NAC3
The nametag printing station.

The longest queue I remember was maybe five to six people, and it was less a queue and more a group of friends getting their nametag printed one after the other.

Amazingly, most people had a number ready for me. It turned out I should have made that thing not just a javascript alert();, but actually a bit bigger. It was hard to read those tiny numbers on various variants of screenshots that people showed me. But those Age of Empires 2 fans seem to be a well organised bunch!

The people who did not have a number for me usually just ended up filling out the form on my laptop directly, since there was basically never a rush. This went against all of my concerns for which I planned, but I guess just being afraid of a horde of angry people is in this case better than actually being run over by a horde of angry people.

The biggest issue turned out to be the printer. Sometimes it was a little bit too generous, and did not only spit out one label, but then another blank label, and another blank label, and then another blank half label. Which is a bit annoying when you’re trying to run a free printed label business. Customers do not want their printing be distributed over two labels! So I spent a lot of time trying to fix the printer.

In the end I feeded it the single blank labels from previous “misprints”, which worked fine I guess. But in general you want a printer that prints just what you tell it to print. Dymo 450, you let me down.

And the people? They were happy with the nametags. Many told me it was a “cool idea” and thanked me for doing it. Which is all that counts, really ❤

The whole nametag website thing is free to re-use and can be found over on GitHub.

  1. Shoutout to my mother! Without her, this would not have been possible!
  2. Very coincidence. Much wow.
  3. No, I did not verify that information. But you thought I did, didn’t you.

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert