Skip to content

QR Codes for Everything

Jump to bottom
Dave edited this page Dec 7, 2021 · 3 revisions

Summary

This article demonstrates how to build a simple, self-hosted QR code generator web site. By pasting text or URLs into the form, you can retrieve a GIF file image of the encoded information.

Why?

Most mobile devices can use the camera app to read and decode a QR code. If it's a URL for a web site, you can tap the link and go right to the page in a browser. It sure beats typing, and it gives your home network a bit of flair.

QR codes can also be used to back up small bits of information as an easily recoverable paper copy. For example, you could generate a QR for the private key of your self-hosted root certificate authority, print it out, and lock it in a safe deposit box. That's a rather extreme example, but it shows what's possible.

How It Works

All of the hard work is done by a rather brilliant JavaScript library written by Alois Zingl. All I've done is to wrap it up in some HTML (shown below.)

Here's how you set it up:

  1. Create a /srv/www/qr directory.
  2. Download the barcode.js library from https://github.com/zingl/2D-Barcode/ and save it in the /srv/www/qr directory.
  3. Copy the HTML below into a text file called index.html, also in the /srv/www/qr directory.

Now visit the web page on your Pi and start labeling everything.

QR code for Dog    QR code for Cat    QR code for Baby

HTML Page Markup

Copy and save as index.html

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="barcode.js"></script>
  <!-- barcode.js by Alois Zingl https://zingl.github.io/ -->
  <script>
    function generateQR() {
      var text = unescape(encodeURIComponent(form.text.value));
      gif.src = toGif(quickresponse(form.text.value), 6);
    }
    function detectOS() {
      if (navigator.userAgent.match(/Windows/i)) {
        form.text.cols = "60";
      }
    }
  </script>
  <style>
    body {
      background: whitesmoke;
      color: dimgray;
      font-family: sans-serif;
      margin-left: 1em;
    }
    div {
      float: left;
      margin-right: 1em;
    }
    h1 {
      color: black;
    }
  </style>
</head>

<body onload="detectOS(); generateQR(); document.getElementById('text').focus();">
  <h1>QR Code Generator</h1>
  <div>
    <p>Enter Text or Web Site URL Here</p>
    <form id="form">
      <textarea id="text" rows="10" cols="40" onclick="this.select();" onkeyup="generateQR()">https://github.com/DavesCodeMusings/CloudPi/wiki</textarea>
    </form>
  </div>
  <div>
    <p>Receive Awesomeness Here</p>
    <p><img id="gif" /></p>
  </div>
</body>

</html>
Clone this wiki locally