Automate your conference badges generation for all attendees

Automate your conference badges generation for all attendees

As a member of a developers conference team I searched on the web for a simple and open source solution to generate conference badges without any success. I found some business solutions but regarding the maturity of the event, the cost was too high.

So I decided to create a simple way to automate the generation of all conference badges from a template and an attendees list. I wanted also the ability for attendees to flash QRCode on the badge too keep details of the holder as phone contact.

the idea scheme

Building the solution

I choose bash scripting to write the application.

Step 1 - Read an attendees list

I choose csv as format to read the attendees list. This is an output you could easely get from event management systems such as Eventbrite

my csv data file

while IFS=";" read f1 f2 f3 f4 f5 f6 f7 f8
do

...
done < $CSV_FILENAME

*fx representing all the field on my csv attendees list

Step 2 - Describe the badge format

CSV_FILENAME="data.csv"
BADGE_TEMPLATE_FILENAME="badge_template.jpg"

QRCODE_OFFSET_X_Y=-300+670 #FORMAT: +XXX-YYY
QRCODE_SIZE="250x250"       #FORMAT: 800x800

TEXT1_OFFSET_X_Y=+00-100
TEXT1_FONT_FILENAME="fonts/StagSans-Medium.otf"

TEXT2_OFFSET_X_Y=+00+50
TEXT2_FONT_FILENAME="fonts/StagSans-Medium.otf"

TEXT3_OFFSET_X_Y=+00+200
TEXT3_FONT_FILENAME="fonts/StagSans-Light.otf"

TEXT4_OFFSET_X_Y=+00+350
TEXT4_FONT_FILENAME="fonts/StagSans-Light.otf"

TEXT_SIZE=130
TEXT_COLOR="black"

Step 3 - Generate a QR code

I use the Google Chart API using the VCard format for the data to trigger correctly the QRCode on iOS and Android natively

QRCode APIs

url="https://chart.googleapis.com/chart?chld=L|0&chs=255x255&cht=qr&chl=BEGIN%3AVCARD%0AN%3A${f7}%20${f8}%0ATEL%3A${f5}%0AEMAIL%3A${f6}%0AEND%3AVCARD"
wget -O out/temp_qrcode.png $url

Step 4 - Inserting the text data on the badge

First I create my badge template as below :

my template badge

To insert texts and images like names, logos… I used imagemagick, a command line tool to create, edit, compose, or convert bitmap images.

convert -resize $QRCODE_SIZE out/temp_qrcode.png out/temp_qrcode.png
composite -gravity center  -quality 100 -geometry $QRCODE_OFFSET_X_Y out/temp_qrcode.png $BADGE_TEMPLATE_FILENAME out/result.png

# insert the firsname of a participant
convert -font $TEXT1_FONT_FILENAME -fill $TEXT_COLOR -pointsize $TEXT_SIZE -gravity center  -quality 100  -draw "text $TEXT1_OFFSET_X_Y '${f1}'" out/result.png out/result_withtext1_${counter}.png
# insert the lastname of a participant
convert -font $TEXT2_FONT_FILENAME -fill $TEXT_COLOR -pointsize $TEXT_SIZE -gravity center  -quality 100  -draw "text $TEXT2_OFFSET_X_Y '${f2}'" out/result_withtext1_${counter}.png out/result_withtext2_${counter}.png
# insert the company of a participant
convert -font $TEXT3_FONT_FILENAME -fill $TEXT_COLOR -pointsize $TEXT_SIZE -gravity center  -quality 100  -draw "text $TEXT3_OFFSET_X_Y '${f3}'" out/result_withtext2_${counter}.png out/result_withtext3_${counter}.png
# insert the country of a participant
convert -font $TEXT4_FONT_FILENAME -fill $TEXT_COLOR -pointsize $TEXT_SIZE -gravity center  -quality 100  -draw "text $TEXT4_OFFSET_X_Y '${f4}'" out/result_withtext3_${counter}.png out/result_withtext4_${counter}.png

Usage

  1. Define all vars on the script sh file to give a path for text fonts, badge image template , csv data.
  2. And then, you can call the script as below :
user:/home/user$./badge_generator.sh
--2019-07-26 17:34:11--  https://chart.googleapis.com/chart?chld=L%7C0&chs=255x255&cht=qr&chl=BEGIN%3AVCARD%0AN%3Alorem1%20Ipsum%0D%0ATEL%3A%2B436763964598%0AEMAIL%3Alorem1@ipsum.com%0AEND%3AVCARD
Length: 1641 (1.6K) [image/png]
Saving to: ‘out/temp_qrcode.png’
out/temp_qrcode.png           100%[=================================================>]   1.60K  --.-KB/s    in 0s
2019-07-26 17:34:11 (6.28 MB/s) - ‘out/temp_qrcode.png’ saved [1641/1641]

--2019-07-26 17:34:20--  https://chart.googleapis.com/chart?chld=L%7C0&chs=255x255&cht=qr&chl=BEGIN%3AVCARD%0AN%3Alorem1%20Ipsum%0D%0ATEL%3A%2B436763964598%0AEMAIL%3Alorem1@ipsum.com%0AEND%3AVCARD
Length: 1641 (1.6K) [image/png]
Saving to: ‘out/temp_qrcode.png’
out/temp_qrcode.png           100%[=================================================>]   1.60K  --.-KB/s    in 0s

2019-07-26 17:34:20 (6.21 MB/s) - ‘out/temp_qrcode.png’ saved [1641/1641]

Badge generation result

  1. Check the out folder … tadaa ! All your badges are generated !

Badge generation result2

Improvements

  • Better command line management : Parameters instead of variables
  • Scripting performances : 30 min for 700 attendees. Perhaps a local QRCode generation could do the trick ?
  • Special chars support : Right now you need for the VCard to HTML encode special chars on the csv file directly
  • Develop a frontend : Web to be able to use it on the cloud or a Java app for a better UX

That’s all for today !

The project can be forked with the final script here