Updated on | #ludwigqrcode, #modx, #geo | 3 User comments

LudwigQRcode - SVG QR-Code online generator for Modx

Quick Response Codes (QR Codes) are used to take a piece of information from a transitory media and put it in to your smartphone or tablet. The reason why they are more useful than a standard barcode is that they can store much more data, including text, emails, websites, phone numbers, geo coordinates, SMS message, contact information, e-mail message or WIFI access. This Extra is called LudwigQRcode and it is using the PHPQRCode library, that provides an API for creating QR Code barcode images in Scalable Vector Graphics (SVG) for Modx.

LudwigQRcode

The Extra LudwigQRcode for Modx is using the PHP QR Code library, that provides the possibility to generate QR Code in Scalable Vector Graphics (SVG). SVG itself consist of circles, rectangles, and paths created in XML and combined into drawings. So, SVG provides drawing instructions rather than a bitmap like PNG or JPG. Thats the biggest advantage of QR Code in SVG format: It is a vector graphic, that can scale to fit the web page, while bitmap images such as JPEG and GIF cannot, or at least, can’t scale cleanly.

Demo and Documentation

If you have no experience with the installation of an ModX Add-on Package via the Package Management, it would be the best for you to follow the Package Installation Guide. After a successful installation you can directly generate your own QR Code by inserting the snippet ludwigqrcode in your template (see demo).

Options

The Extra is using SVG, that is cached by Modx. This is because the snippet is stored as a temporary, dynamic function in the cache. Furthermore, the snippet ludwigqrcode has the following parameters that can be used:

ParameterDescription
typeChange between types like Link, Bookmark, Geo etc.
fcolorForeground color
widthWidth of the SVG
chunkChoose another chunk than qrcode
txtString for the message text
numSpecial string: Only needed sometime (see demo)

QR Code background, position and foreground color

You can find a color table here for the foreground color. The QR Code has an transparent background. Hence, you can use CSS to manipulate the background.

QR-Code generated with LudwigQRCode &fcolor=`0xFF00FF`
QR-Code generated with LudwigQRCode &fcolor=`0x000066`
QR-Code generated with LudwigQRCode &fcolor=`0xFFFFFF`

QR Code width

QR-Code generated with LudwigQRCode &width=`50` QR-Code generated with LudwigQRCode &width=`60` QR-Code generated with LudwigQRCode &width=`70` QR-Code generated with LudwigQRCode &width=`80` QR-Code generated with LudwigQRCode &width=`90` QR-Code generated with LudwigQRCode &width=`110`

Text

QR-Code generated with LudwigQRCode
Write a message.
  • Syntax: [[ludwigqrcode? &txt=`Message`]]
  • Example: [[ludwigqrcode? &txt=`Text example: Check this!` &width=`100`]]
QR-Code generated with LudwigQRCode
Generate a link of the actual webpage in Modx.
  • Syntax: [[ludwigqrcode? &type=`link`]]
  • Example: [[ludwigqrcode? &type=`link`]]
Github
Generates an external link
  • Syntax: [[ludwigqrcode? &type=`linkext` &txt=`Your Link` &alt=`Text`]]
  • Example: [[ludwigqrcode? &type=`linkext` &txt=`https://github.com` &alt=`Github`]]

Bookmark

QR-Code generated with LudwigQRCode
Add your website to the bookmarks.
  • Syntax: [[ludwigqrcode? &type=`bookmark` &txt=`Message`]]
  • Example: [[ludwigqrcode? &type=`bookmark` &txt=`This is a great website!`]]

Phone Number

QR-Code generated with LudwigQRCode
A customer can easily call your office.
  • Syntax: [[ludwigqrcode? &type=`phone` &num=`Phone Number` &txt=`Name or Text`]]
  • Example: [[ludwigqrcode? &type=`phone` &num=`+49 171 55555555555` &txt=`Max Mustermann`]]

Send SMS

QR-Code generated with LudwigQRCode
Send an SMS with a defined message.
  • Syntax: [[ludwigqrcode? &type=`sms` &num=`Phone Number` &txt=`Message`]]
  • Example: [[ludwigqrcode? &type=`sms` &num=`+49 171 55555555555` &txt=`Hello, this is an SMS example!`]]

Skype Call

QR-Code generated with LudwigQRCode
Open Skype and call a contact.
  • Syntax: [[ludwigqrcode? &type=`skype` &num=`Skype Contact`]]
  • Example: [[ludwigqrcode? &type=`skype` &num=`echo123`]]

Whatsapp

QR-Code generated with LudwigQRCode
Open Whatsapp and send a message.
  • Syntax: [[ludwigqrcode? &type=`whatsapp` &txt=`Message`]]
  • Example: [[ludwigqrcode? &type=`whatsapp` &txt=`Great Website; please share!`]]

Bitcoin

QR-Code generated with LudwigQRCode
Payment address for a bitcoin wallet
  • Syntax: [[ludwigqrcode? &type=`bitcoin` &txt=`Your Wallet`]]
  • Example: [[ludwigqrcode? &type=`bitcoin` &txt=`1445z47UdhgUKpt91EiUkFMGvYNUmmxBgy`]]

Email

QR-Code generated with LudwigQRCode
This will open an email client with your email address, subject and a text template.
  • Syntax: [[ludwigqrcode? &type=`email` &txt=`Email Address|Subject|Message`]]
  • Example: [[ludwigqrcode? &type=`email` &txt=`max@mustermann.com|Subject Text|This is a test`]]

MeCard

QR-Code generated with LudwigQRCode
MeCard is a format similar to Vcard but it is optimized for Qr Code.
  • Syntax: [[ludwigqrcode? &type=`mecard` &txt=`Name|Address|Phone|Email`]]
  • Example: [[ludwigqrcode? &type=`mecard` &txt=`Mustermann,Max|Country,Postal-code City,Street No.|+49 171 55555555555|max@test.test`]]

VCard simple

QR-Code generated with LudwigQRCode
vCard is a standard format for electronic business cards.
  • Syntax: [[ludwigqrcode? &type=`vcard` &num=`Phone Number` &txt=`NAME`]]
  • Example: [[ludwigqrcode? &type=`vcard` &num=`+49 171 55555555555` &txt=`Max Mustermann`]]

Geo location

QR-Code generated with LudwigQRCode
Link a user to your Address by using Geo-Location
  • Syntax: [[ludwigqrcode? &type=`geo` &txt=`deg N latitude|deg W longitude|elevation`]]
  • Example: [[ludwigqrcode? &type=`geo` &txt=`50.9333333|6.95|100`]]

GoogleMaps

QR-Code generated with LudwigQRCode
Use GoogleMaps
  • Syntax: [[ludwigqrcode? &type=`geo` &txt=`deg N latitude|deg W longitude|elevation` &num=`GoogleMaps`]]
  • Example: [[ludwigqrcode? &type=`geo` &txt=`50.9333333|6.95|100` &num=`GoogleMaps`]]

OpenStreetMaps

QR-Code generated with LudwigQRCode
Use OpenStreetMaps
  • Syntax: [[ludwigqrcode? &type=`geo` &txt=`deg N latitude|deg W longitude|elevation` &num=`OpenStreet`]]
  • Example: [[ludwigqrcode? &type=`geo` &txt=`50.9333333|6.95|100` &num=`OpenStreet`]]

Google Playstore

QR-Code generated with LudwigQRCode
Use this QR-Code to open APPs in Google's Android Playstore
  • Syntax: [[ludwigqrcode? &type=`playstore` &txt=`Google play store uri, eg. org.example.app`]]
  • Example: [[ludwigqrcode? &type=`playstore` &txt=`de.gavitec.android`]]

Source Code

All source code can be seen on GitHub.

Build from GitHub

At first you have to clone the code from GitHub:

  1. cd /tmp
  2. git clone --recursive https://github.com/MoonMaker/modx.git
  3. cd modx/QRCode/_build/

Change your modx path in build.config.php:

  1. nano /tmp/modx/QRCode/_build/build.config.php
  1. define('MODX_BASE_PATH', '/var/www/modx/');

The last step is to build the transport package and to change the package owner:

  1. php -f /tmp/modx/QRCode/_build/build.transport.php
  2. chown -R www-data:www-data /var/www/modx/core/packages/ludwigqrcode*

The Add-on package will be generated in /var/www/modx/core/packages. You can use the ModX Package Manager to install it.

Beer edition

You would like to use tracker or gradient colors in your QR-Code? It's so easy, treat me to a beer!


QR-Code generated with LudwigQRCodeThis is my bitcoin address:
1445z47UdhgUKpt91EiUkFMGvYNUmmxBgy

Please send me an email after you treat me to a beer. Thank you! I will sent you a small code, that will activate the following features:

ParameterDescription
pcolorPosition/tracker color
gcolorGradient effect color
strokeThickness from 0-1
QR-Code generated with LudwigQRCode &fcolor=`0x000066` &pcolor=`0x660000`
QR-Code generated with LudwigQRCode &fcolor=`0xFF6699` &pcolor=`0xFF6633` &gcolor=`0x0000FF` &stroke=`0.5`

Well, what do you think?

Menno Pietersen said
Very cool!
Is there any way to generate the QR code for a other resource?
I would like to have a page will the CQ code for all product pages, so would need something like:

QR-Code generated with LudwigQRCode
Thomas Ludwig said
Hi Menno,
this feature is not implemented. I will include it when I have time.
Thomas Ludwig said
Hi Menno,

I added this feature in the official release 1.1.0

Cheers,

Thomas
Comments powered by LudwigDisqus for ModX