Live digital donation signature wall (source code included)
- By : Adnan Vilic
- Category : Code examples
I was recently involved in an non-profit related event, where guests could participate in a lottery and win prices. To make the event more interesting, when someone either digitally or physically donated money, their name would appear/update on a large TV-screen. If they had already donated money, their name would simply grow in font-size. Fun for everyone was ensured by making the font-size follow a logarithmic function, so that a person who donated $500 would not overshadow the average guest who contributes with ~$50.
How it works:
-
- Participants can throughout the event:
- pay entrance fee,
- donate money
- buy things.
- For every 10 DKK (~2.5$) – regardless what the money is spent on – participants get a virtual lottery ticket in the system.
- Payment can be done digitally (see MobilePay) or by paying physically to an organizer.
- Digital payments require no actions by organizers.
- Physical payments need to be registered by organizers via a very simple website form.
- In both scenarios, a mail is sent to a server.
- Participants can throughout the event:
- Every five seconds, the TV / projector names are updated by reading unread mails and either updating or adding new names.
- The displayed screen has two “hidden” buttons
- Pause/resume reading emails (left of the total raised money bar)
- Draw a winner (right of the total raised money bar)
- When “Draw” button is pressed, names are quickly and randomly rotated for five seconds before a winner is chosen. A participants number of tickets affects the chances for winning.
System overview:
The below diagram shows the different components involved. For the minimal viable solution, you need a mail server, a laptop and a projector. I’ll cover all parts here
Requirements:
- Projector / TV-screen hooked to a laptop.
- Windows XP or newer.
- A dedicated email address for the event.
- Visual Studio Community (free)
- (optional) A website for physical on-site transfers
- (optional) For physical transfers: Smartphone/laptop with internet browser
- (optional) For digital transfers: Android 4.3+
Download DDSignatureWall as Visual Studio solution (.zip) |
Setup:
System:
Below is an illustration of the application while it’s running on a small screen. The entire white field serves as canvas for names of donators. The names are movable, so if they for some reason overshadow each other, it is possible to move them by holding the left-mouse button. The user furthermore has two buttons which are subtly placed on each side of the blue bar. The left button can pause reading incoming e-mails, whereas the right button opens a new window that shuffles and picks a lottery winner.
The software application that runs from the laptop, and displays the donations and names, is provided as a visual studio solution rather than an executable application. The configuration part
has been left out on purpose because processing the email content needs to be setup manually. This, as well as setup of mail server can easily be edited in MainWindow.xaml.cs. To minimize code, EAGetMail was used for smooth and continuous email reading.
Web (manual payments):
For the on-site physical payments (and for when the automatic/digital transfers fail), I set up a website, and shared it with the other organizers. Since no website is linking to it and it was only supposed to run for about two weeks, there was little risk of someone posting false information. Hence, no login or security is necessary.
There’s a quick way of setting this one up. I used a service called JotForm, where you can design forms through their website and assign what the submit button does. In this case, I set it up to send an e-mail to a specific address with the content {<first name><last name> has donated <price> kr.}. The web part took about one hour in total to set up. I paid ~20$ for one month, which I think was worth it considering how much time it would have cost me to make a form that looks decent across all platforms – and yes, design matters if you want non-technical persons to use it š
|
Mobile (automatic/digital transfers):
Whenever someone transferred money to the NGO digitally, it would be done using the MobilePay app. It does not really matter which app it is though, because MobilePay in itself is secure and you cannot retrieve data from it. What’s more interesting are the notifications that apps send. In the case of Mobilepay it’s something like “You have received <amount> kr. from <firstname><lastname>, and that information is sufficient.
Notifications were read using Automate where you can design and start a process that is executed whenever the first condition is met. The flow (see left image) mimics what you, as a user, would do if you received a notification about money transfer and wanted to forward this information. The automate flow described: When a notification from the app in question comes in, remove the notification, send contents via email and wait for the next notification. My only concern with this approach was that it would not be fast enough, but the process runs very quickly and without delay.
|