Skip to content

RFE: special-page for making printable pages with QRCodes dynamically #4

@ankostis

Description

@ankostis

Design

Use case

We need to print QRCodes with the URL of our articles on a clean sheet of paper (without the content of that articles) We want to have a pre-configured "to-be-printed" page containing a QRCode placeholder. Then each article would provide a "link" to that page, but with its page-url as a parameter, which would set the actual QRCode generated.

Good-to-have: open those links directly in browser's print dialog.

Problem

The extension's parser-function generates "static" QRCodes, in the sense, that its arguments are stored in some page. As it is now, in order change the qrcode, the above to-be-printed page must be edited, saved and then printed. This is not user-friendly, and requires edit-permissions.

Alternatives i have thought of are

  1. to always create one extra page for each article with just its QRCode, or
  2. to dynamically apply @media css to hide all but the QRCode of the page.

(1) is a waste of effort/resources and a bit complex to setup, (2) feels clumsy.

Preferred solution

It would be nice to have a special page which allow to generate QRs based on parameters of its url, eg:

https://server.com/wiki/Special:QRLite/SomeTemplate/firstparam/otherparam=bar

Or

https://server.com/wiki/Special:QRLite?template=fooTemplate&firstparam&otherparam=bar

Workaround

I managed to workarounp this and created a "dynamic' page for generating QRs by using Extension:UrlGetParameters.
I'm sharing the code here to explain what i have in mind, and also for future reference.

PrintQRLite: the "special"-like page to be printed embedding just a QR-code

Note: the template name {{Template:QRLitePrintContent}} in my page below is "pinned", but it could also come from the url.

<!-- 
  DEBUG: set a default value to the 2 {{#urlget:qrcode4page|DEFAULT}} below.
-->{{#if: 
 {{#urlget:qrcode-text}}
 |{{QRLitePrintContent|{{#urldecode: {{#urlget:qrcode-text}} }}
    |format={{#urlget:qrcode-format|}} 
    |ecc={{#urlget:qrcode-ecc|}} 
    |size={{#urlget:qrcode-size|}} 
    |margin={{#urlget:qrcode-margin|}} 
  }}
 |
== No page specified for QRCode! ==
This is a "special"-like page that will print the QRCode of the text given in the <code>qrcode-text</code> url-param
(the page-to-be-printed is based on the [[Template:QRLitePrintContent]]).  

Invoke it like:
 {{localurl:{{FULLPAGENAME}}|action=render&qrcode-text={{urlencode:Hello Wiki}}}}

Attention: Remember to escape text when building the URL query-part, like: 

  <nowiki>...&qrcode-text={{urlencode:"strange" text!}}</nowiki>

=== URL parameters ===
; qrcode-text
: what to print as QRCode

; qrcode-(format, ecc, size, margin)
: Correspond to the parameters of the [https://www.mediawiki.org/wiki/Extension:QRLite Extension:QRLite].
}}

[[Category:QRCode machinery]]

The page above dependes on this following template defining the content to print.

Template:QRLitePrintContent: my QRCode content of the special-page above.

<noinclude>
The content for the special-like- page in [[PrintQRLite]] which prints arbitrary QRCodes.

Syntax:
  <nowiki>{{</nowiki>{{PAGENAME}}|<qrcode-text eg. URL>|format=svg|ecc=2|size=|margin=}}

For params, see https://www.mediawiki.org/wiki/Extension:QRLite

[[Category:QRCode machinery]]
</noinclude><includeonly><div style="text-align: center;">
{{#qrlite: {{{1}}}
 |format={{#if:{{{format|}}}|{{{format}}}|svg}}
 |ecc={{#if:{{{ecc|}}}|{{{ecc}}}|2}}
 |{{#if:{{{size|}}}|size={{{size}}}}}
 |{{#if:{{{margin|}}}|margin={{{margin}}}}}
}}

<span style="font-size: large; font-weight: bold;">{{{1}}}</span><span style="font-size: small;">({{CURRENTTIMESTAMP}})</span>
</div>
{{DISPLAYTITLE:QRCode for {{{1}}}}}
</includeonly>

Template:DataPageQRCode: my template for presenting a QRCode along with a "print..." link leading to the special-page

<noinclude>
Adds a floating QRCode to the right for the page using it.
The floating panel has printable links using [[PrintQRLite]] "special" page.

Syntax:
 <nowiki>{{</nowiki>{{PAGENAME}}|format=svg|ecc=2|size=|margin=0}}

[[Category:Data LEGOs]][[Category:QRCode machinery]]
</noinclude><includeonly>{{#vardefine:qrtext|{{canonicalurl:{{FULLPAGENAME}}}}}}
<div class="data-page-qrcode">
{{#qrlite:{{#var:qrtext}}|format={{{format|svg}}}|ecc={{{ecc|2}}}|size={{{size|6}}}|margin={{{margin|0}}}}}

<span class="print-qrcode-links">[{{fullurl:PrintQRLite
  |action=render&qrcode-text={{urlencode:{{#var:qrtext}}}}&qrcode-size=6
}} Print...]</span>
</div>

MediaWiki:Common.js: add this to make the "print..." links above open in browser's "print" dialog

// Open [[PrintQRLit]] with [[QRLitePrintContent]] in window.print().
// From https://stackoverflow.com/a/45923929/548792
$(function () {
	$('.data-page-qrcode .print-qrcode-links a').each(function() {
		$(this).click(function() {
			open(this.href).print(); 
			return false;
		});
	});
});

// [[Category:QRCode_machinery]]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions