Author Topic: QR codes for player profiles  (Read 3921 times)

kungfauxn00b

  • Newbie
  • *
  • Posts: 6
    • View Profile
QR codes for player profiles
« on: May 06, 2023, 01:09:12 PM »
I've bought a reciept printer and customised the buy-in receipt to show a players QR code. However, as it's not a standard field, the workaround I've used is to take the Internal ID field value, create a QR code, and add it to the players profile image. I then use some Javascript to add it to the reciept.

I have a hand-held scanner which I can use to do player re-buys/add-ons.







It works, however, it's not elegant. It means I have to manually generate the QR each time there's a new player and I must make sure I add the right QR code to the player's profile.

It would be awesome if there was a way to select a field, have the app generate a QR code from the value, and have it as a variable to use on receipts.

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 6216
    • View Profile
Re: QR codes for player profiles
« Reply #1 on: May 07, 2023, 04:23:50 PM »
This is a great idea, and quite doable, so I'll be looking into this for the next version.  What suggestions do you have for it?  I can see a token for embedding something in the receipt that generates a QR code from a specified field, like <qrcode field="internalid">, or from whatever value you want like <qrcode value="https://thetournamentdirector.net">.

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 6216
    • View Profile
Re: QR codes for player profiles
« Reply #2 on: May 07, 2023, 04:59:02 PM »
By the way you can actually do this today with just a little addition to your receipt file.  I did a very quick search for a QRCode Javascript implementation and used the first one I found.  Add this to your receipts template:

Code: [Select]
<script type="text/javascript" src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script>
  window.addEventListener("load", e => {
    let q = new QRCode("qrcode", { height: 128, width: 128 });
    q.makeCode("<internalid>")
  })
</script>

Then add an element wherever you want your QR code to be displayed:

Code: [Select]
<div id="qrcode"></div>
This one makes a QR code from the player's internal ID, but you could make it whatever you want.  <internalid> is great for using the QR code to lookup a player.  <id> is also probably a good choice for look up, if you use the ID field.

There are options for generating the QR code.  The library is found here: https://github.com/davidshimjs/qrcodejs

The only thing that might be an issue is that currently receipts are printed immediately, and sometimes the print action can occur before the page is fully rendered (for example if large images are displayed on the receipt).  So it could be printed before the QR code has time to generate.  I had to rebuild my PC last week and printing is currently not working so I can't test it.  This bug is on my list to have the print action wait for the page to fully render.

kungfauxn00b

  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: QR codes for player profiles
« Reply #3 on: September 08, 2023, 02:46:59 PM »
I completely forgot to check back here once I'd posted this.
Quote
This is a great idea, and quite doable, so I'll be looking into this for the next version.  What suggestions do you have for it?  I can see a token for embedding something in the receipt that generates a QR code from a specified field, like <qrcode field="internalid">, or from whatever value you want like <qrcode value="https://thetournamentdirector.net">.

For me, it's something I can use to identify a player when I scan it so internal ID works a treat.

Quote
By the way you can actually do this today with just a little addition to your receipt file.  I did a very quick search for a QRCode Javascript implementation and used the first one I found.

That script is awesome and I never thought of generating it on the fly (wouldn't even have known where to start). I've just tried it now and it works perfectly!! Thanks so much. Looking forward to the new version!  :D