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.

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