QRCodePlugin < TWiki

TWiki Web>QRCodePlugin (2024-03-02, TWikiAdminUser) (raw view)
---+!! !QRCodePlugin
<!--
   Contributions to this plugin are appreciated. Please update the plugin page at
   http://twiki.org/cgi-bin/view/Plugins/QRCodePlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/QRCodePluginDev.
   If you are a TWiki contributor please update the plugin in the SVN repository.
-->
<sticky><div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div>
<div style="float:right; margin:0 0 20px 20px;">
<img src="%ATTACHURLPATH%/qrcode-example-1.png" alt="qrcode-example-1.png" width="99" height="99" />
</div></sticky>
%SHORTDESCRIPTION%

---++ Introduction

This plugin generates [[Wikipedia:QR_Code][QR Code]] in TWiki pages. A QR Code is a specific matrix barcode (or two-dimensional code), readable by dedicated QR barcode readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be any text, such as phone numbers, URLs, gelocation, vCard, vCal and more.

---++ Syntax Rules

=%<nop>QRCODE{ "text" ... }%=

| *Parameter* | *Description* | *Default* |
| ="text"= | Text to encode as 2D barcode. | (required) |
| =ecc="M"= | Error Correction Capability. Valid values ="L"=, ="M"=, ="Q"=, ="H"=. | ="M"= |
| =version="..."= | Symbol version of QR Code, or size of matrix. Valid values ="1"= ... ="40"=, and ="auto"= for automatic versioning. See details below. | ="8"= |
| =size="..."= | Module size, e.g. pixel size of a block (bit) that makes up the matrix of the barcode. | ="4"= |
| =format="..."= | Format of HTML =img= tag of generated QR Code image. Supported variables: =$urlpath= - URL path of image, =$width= - image width, =$height= - image height. | ="&lt;img src='$urlpath' width='$width' height='$height' border='0' alt='' /&gt;"= |

QR Code has error correction capability (ECC) to restore data if the code is dirty or damaged:
   * level ="L"= - about 7%
   * level ="M"= - about 15%
   * level ="Q"= - about 25%
   * level ="H"= - about 30%

The length of text (number of bytes) and the ECC determine the symbol version (e.g. matrix size) required to encode some text. A =version="auto"= selects the version automatically based on text length and ECC. See "Attention" note in the "Plugin Installation &amp; Configuration" section below before using ="auto"=.

Overview of [[http://www.denso-wave.com/qrcode/vertable1-e.html][symbol version]] for default ECC level ="M"=:

<table cellpadding="10">
<tr><td valign="top">
| *Version* |  *Matrix size*  |  *Max. bytes*  |
|  1  |  21x21  |  14  |
|  2  |  25x25  |  26  |
|  3  |  29x29  |  42  |
|  4  |  33x33  |  62  |
|  5  |  37x37  |  84  |
|  6  |  41x41  |  106  |
|  7  |  45x45  |  122  |
|  8  |  49x49  |  152  |
|  9  |  53x53  |  180  |
|  10  |  57x57  |  213  |
</td><td valign="top">
| *Version* |  *Matrix size*  |  *Max. bytes*  |
|  11  |  61x61  |  251  |
|  12  |  65x65  |  287  |
|  13  |  69x69  |  331  |
|  14  |  73x73  |  362  |
|  15  |  77x77  |  412  |
|  16  |  81x81  |  450  |
|  17  |  85x85  |  504  |
|  18  |  89x89  |  560  |
|  19  |  93x93  |  624  |
|  20  |  97x97  |  666  |
</td><td valign="top">
| *Version* |  *Matrix size*  |  *Max. bytes*  |
|  21  |  101x101  |  711  |
|  22  |  105x105  |  779  |
|  23  |  109x109  |  857  |
|  24  |  113x113  |  911  |
|  25  |  117x117  |  997  |
|  26  |  121x121  |  1059  |
|  27  |  125x125  |  1125  |
|  28  |  129x129  |  1190  |
|  29  |  133x133  |  1264  |
|  30  |  137x137  |  1370  |
</td><td valign="top">
| *Version* |  *Matrix size*  |  *Max. bytes*  |
|  31  |  141x141  |  1452  |
|  32  |  145x145  |  1538  |
|  33  |  149x149  |  1628  |
|  34  |  153x153  |  1722  |
|  35  |  157x157  |  1809  |
|  36  |  161x161  |  1911  |
|  37  |  165x165  |  1989  |
|  38  |  169x169  |  2099  |
|  39  |  173x173  |  2213  |
|  40  |  177x177  |  2331  |
</td></tr></table>

The size of the generated image depends on the symbol version and the module size. For example, =version="2"= and =size="3"= results in a 99x99 pixels image. Version 2 has matrix size 25x25. A module size 3 turns that into 3 times 25x25 pixels, or 75x75 pixels. There is some required whitespace, which results in a 99x99 pixels image size.

See also VarQRCODE documentation for %SYSTEMWEB%.TWikiVariables.

---++ Examples

---+++ Small QR Code for URL!! =http://twiki.org/=

<table border="0" cellpadding="10" cellspacing="2">
<tr bgcolor="#dddddd">
<th> *You type* </th>
<th> *You get (if installed)* </th>
<th> *Simulated example* </th>
</tr><tr bgcolor="#f4f4f8">
<td valign="top">
<verbatim>
%QRCODE{
 "http://twiki.org/"
 version="2"
 size="3"
}%
</verbatim>
</td><td valign="top">
%QRCODE{
 "http://twiki.org/"
 version="2"
 size="3"
}%
</td><td valign="top">
<img src="%ATTACHURLPATH%/qrcode-example-1.png" alt="qrcode-example-1.png" width="99" height="99" />
</td></tr></table>

---+++ Encode URL of current topic

The QR Code of the current topic can be placed in a TWiki skin so that the URL can easily be read by smart phones. We use symbol version 8, e.g. the URL cannot be longer than 152 characters.

<table border="0" cellpadding="10" cellspacing="2">
<tr bgcolor="#dddddd">
<th> *You type* </th>
<th> *You get (if installed)* </th>
<th> *Simulated example* </th>
</tr><tr bgcolor="#f4f4f8">
<td valign="top">
<verbatim>
%QRCODE{
 "%SCRIPTURL{view}%/%WEB%/%TOPIC%"
 version="8"
 size="4"
}%
</verbatim>
</td><td valign="top">
%QRCODE{
 "%SCRIPTURL{view}%/%WEB%/%TOPIC%"
 version="8"
 size="4"
}%
</td><td valign="top">
<img src="%ATTACHURLPATH%/qrcode-example-2.png" alt="qrcode-example-2.png" width="228" height="228" />
</td></tr></table>

---+++ Pulldown menu with QR Code

You can add a QR Code pulldown to the %SYSTEMWEB%.TopMenuSkin so that smartphone users can easily bookmark any TWiki page. Add the following to your %SYSTEMWEB%.TopMenuSkinTopicMenu after the Edit pulldown bullets:

<table border="0" cellpadding="10" cellspacing="2">
<tr bgcolor="#dddddd">
<th> *You type* </th>
<th> *You get (if installed)* </th>
<th> *Simulated example* </th>
</tr><tr bgcolor="#f4f4f8">
<td valign="top">
<verbatim>
   * [[%BASEWEB%.%BASETOPIC%][<img 
src="%PUBURLPATH%/%SYSTEMWEB%/QRCodePlugin/
qrcode.gif" alt="" width="16" height="16" 
/> %ICON{menu-down}%]]
      * [[%SYSTEMWEB%.QRCodePlugin][%QRCODE{ 
"%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%" 
version="auto" size="4" }%]]
</verbatim>
</td><td valign="top">
%INCLUDE{"%SYSTEMWEB%.TopMenuSkin"}%
<div class="twTopMenuTab">
%INCLUDE{"%SYSTEMWEB%.TopMenuSkinTopicMenu"}%
   * [[%BASEWEB%.%BASETOPIC%][<img src="%PUBURLPATH%/%SYSTEMWEB%/QRCodePlugin/qrcode.gif" alt="" width="16" height="16" /> %ICON{menu-down}%]]
      * [[%SYSTEMWEB%.QRCodePlugin][%QRCODE{ "%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%" version="auto" size="4" }%]]
</div>
</td><td valign="top">
  <img src="%ATTACHURLPATH%/qrcode-example-4.png" alt="qrcode-example-4.png" width="304" height="194" />
</td></tr></table>

#QrForm
---+++ Interactive example

You can encode any text with this interactive form. The matrix size is set automatically using =version="auto"=.

<table border="0" cellpadding="10" cellspacing="2">
<tr bgcolor="#dddddd">
<th> *You type* </th>
<th> *You get (if installed)* </th>
<th> *Simulated example* </th>
</tr><tr bgcolor="#f4f4f8">
<td valign="top">
=&lt;form action="%<nop>SCRIPTURL{view}%/%<nop>WEB%/%<nop>TOPIC%#QrForm"&gt;= %BR%
=&lt;input type="text" name="qrcode" value="%<nop>URLPARAM{ "qrcode" encode="entity" default="Enter text" }%" size="20" class="twikiInputField" /&gt;&lt;br /&gt;s= %BR%
=&lt;input type="submit" value="Generate QR Code" class="twikiSubmit" /&gt;= %BR%
=&lt;/form&gt;= %BR%
%BR%
=%<nop>QRCODE{= %BR%
=<nop> "%<nop>URLPARAM{ "qrcode" encode="quote" default="Enter text" }%"= %BR%
=<nop> version="auto"= %BR%
=}%= %BR%
</td><td valign="top">
<form action="%SCRIPTURL{view}%/%WEB%/%TOPIC%#QrForm">
<input type="text" name="qrcode" value="%URLPARAM{ "qrcode" encode="entity" default="Enter text" }%" size="20" class="twikiInputField" />%BR%
<input type="submit" value="Generate QR Code" class="twikiSubmit" />
</form>

%QRCODE{
 "%URLPARAM{ "qrcode" encode="quote" default="Enter text" }%"
 version="auto"
}%
</td><td valign="top">
<form action="%SCRIPTURL{view}%/%WEB%/%TOPIC%#QrForm">
<input type="text" name="qrcode" value="Enter text" size="20" class="twikiInputField" disabled="disabled" />%BR%
<input type="submit" value="Generate QR Code" class="twikiSubmit" disabled="disabled" />
</form>

<img src="%ATTACHURLPATH%/qrcode-example-3.png" alt="qrcode-example-3.png" width="116" height="116" />
</td></tr></table>

---++ Plugin Installation &amp; Configuration

__Note:__ You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the TWiki server.

   * For an __automated installation__, run the [[%SCRIPTURL{configure}%][configure]] script and follow "Find More Extensions" in the in the __Extensions__ section.

   * Or, follow these __manual installation__ steps:
      * Download the ZIP file from the Plugins home (see below).
      * Unzip ==%TOPIC%.zip== in your twiki installation directory. Content:
        | *File:* | *Description:* |
        | ==data/TWiki/%TOPIC%.txt== | Plugin topic |
        | ==data/TWiki/VarQRCODE.txt== | QRCODE variable documentation topic |
        | ==lib/TWiki/Plugins/%TOPIC%.pm== | Plugin Perl module |
        | ==lib/TWiki/Plugins/%TOPIC%/Core.pm== | Plugin core module |
        | ==pub/TWiki/%TOPIC%/twiki-logo-80x40-t.gif== | Logo file |
        | ==pub/TWiki/%TOPIC%/qrcode-example-*.png== | Example QR Code image files |
      * Set the ownership of the extracted directories and files to the webserver user.
      * Install the dependencies.

   * Plugin __configuration and testing__:
      * Run the [[%SCRIPTURL{configure}%][configure]] script and enable the plugin in the __Plugins__ section.
      * Test if the installation was successful: See example above.

%X% Attention, CPAN:GD::Barcode::QRcode version 1.15 needs to be patched as follows before you can use =version="auto"=:
<verbatim>
--- /usr/lib/perl5/site_perl/5.8.0/GD/Barcode/QRcode.pm.save1	2004-04-23 23:35:34.000000000 -0700
+++ /usr/lib/perl5/site_perl/5.8.0/GD/Barcode/QRcode.pm	2011-02-11 22:37:13.000000000 -0800
@@ -37,7 +37,7 @@
     $oSelf->{text} = $sTxt;
     $oSelf->{Ecc} = $rhPrm->{Ecc} || ' ';
     $oSelf->{Ecc} =~ tr/LMHQ/M/c;    #Not /LMQH/ => M
-    $oSelf->{Version} = $rhPrm->{Version} || 1;
+    $oSelf->{Version} = $rhPrm->{Version} || 0;
     $oSelf->{ModuleSize} = $rhPrm->{ModuleSize} || 1;
     $oSelf->{ModuleSize} = int($oSelf->{ModuleSize});
 
</verbatim>

---++ Plugin Info

   * One line description, is shown in the %SYSTEMWEB%.TextFormattingRules topic:
      * Set SHORTDESCRIPTION = Create QR Code (a matrix barcode) in TWiki pages, useful for mobile applications

|  Plugin Author: | TWiki:Main.PeterThoeny |
|  Copyright: | &copy; 2011-2018 TWiki:Main.PeterThoeny, [[http://twiki.org/][TWiki.org]] <br /> &copy; 2011-2018 TWiki:TWiki.TWikiContributor |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Plugin Version: | 2018-07-07 |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  2018-07-17: | TWikibug:Item7852: Make version="auto" work even if the 3rd part QR library does not support it; Remove newlines from error message so that code can be placed in a TWiki table -- TWiki:Main.PeterThoeny |
|  2012-11-14: | TWikibug:Item7020: Categorize TWiki Variable QRCODE -- TWiki:Main.PeterThoeny |
|  2012-09-03: | TWikibug:Item6837: Added missing example screenshot qrcode-example-4.png |
|  2011-07-12: | TWikibug:Item6725: Change global package variables from "use vars" to "our" |
|  2011-02-15: | TWikibug:Item6647: Added TopMenuSkin example; added qrcode.gif 16x16 pixels icon |
|  2011-02-13: | TWikibug:Item6647: Added format=..."; XHTML fix for HTML img tag |
|  2011-02-12: | TWikibug:Item6647: Lazy loading of core and CPAN modules for better performance when QRCODE is not used; adding interactive example |
|  2011-02-11: | TWikibug:Item6647: Added version="auto" |
|  2011-02-09: | TWikibug:Item6647: Initial version |
|  TWiki Dependency: | $TWiki::Plugins::VERSION 1.1 |
|  CPAN Dependencies: | CPAN:GD, CPAN:GD::Barcode, CPAN:GD::Barcode::QRcode, CPAN:Digest::MD5 |
|  Other Dependencies: | gd (see http://www.libgd.org/) |
|  Perl Version: | 5.005 |
|  TWiki:Plugins.Benchmark: | %SYSTEMWEB%.GoodStyle nn%, %SYSTEMWEB%.FormattedSearch nn%, %TOPIC% nn% |
|  Plugin Home: | http://TWiki.org/cgi-bin/view/Plugins/QRCodePlugin |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/QRCodePluginDev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/QRCodePluginAppraisal |

__Related Topics:__ VarQRCODE, %SYSTEMWEB%.TWikiPlugins, %SYSTEMWEB%.DeveloperDocumentationCategory, %SYSTEMWEB%.AdminDocumentationCategory, %SYSTEMWEB%.TWikiPreferences
Attachments
Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
png	qrcode-example-1.png	r1	manage	0.3 K	2018-07-18 - 05:27	TWikiAdminUser	Saved by install script
png	qrcode-example-2.png	r1	manage	0.7 K	2018-07-18 - 05:27	TWikiAdminUser	Saved by install script
png	qrcode-example-3.png	r1	manage	0.2 K	2018-07-18 - 05:27	TWikiAdminUser	Saved by install script
png	qrcode-example-4.png	r1	manage	5.9 K	2018-07-18 - 05:27	TWikiAdminUser	Saved by install script
gif	qrcode.gif	r1	manage	0.1 K	2018-07-18 - 05:27	TWikiAdminUser	Saved by install script
Topic revision: r2 - 2024-03-02 - TWikiAdminUser
TWiki
Webs
Blog
TWiki
ZMobile
Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.QRCodePlugin.