Add Embed

greggman · Nov 18, 2024 · 8fb2edc · 8fb2edc
1 parent 3f9d1c2
commit 8fb2edc
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,21 @@ These are all over the net, spammed with ads. There are also
 a few here in github but often with too many options and clutter.
 I thought I'd throw together a simple one.
 
+## Embedding
+
+Make an frame `https://greggman.github.io/qr-code/embed.html?s=<msg/url/etc>`
+
+Example:
+
+```html
+<iframe
+  src="https://greggman.github.io/qr-code/embed/?s=https://threejs.org"
+  width="256"
+  height="256"
+  style="border: none"
+></iframe>
+```
+
 ## License
 
 MIT
diff --git a/embed/embed.js b/embed/embed.js
@@ -0,0 +1,23 @@
+import { showQRCode } from '../qr.js';
+
+const errorElem = document.querySelector('#error');
+const canvasElem = document.querySelector('canvas');
+const ctx = canvasElem.getContext('2d');
+
+function showError(msg) {
+  canvasElem.style.display = 'none';
+  errorElem.style.display = '';
+  errorElem.firstElementChild.textContent = msg;
+}
+
+try {
+  const url = new URL(window.location.href);
+  const s = url.searchParams.get('s');
+  if (!s) {
+    showError('no input')
+  } else {
+    showQRCode(ctx, s);
+  }
+} catch (e) {
+  showError(e.toString());
+}
diff --git a/embed/index.html b/embed/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <title>QR Code</title>
+    <script type="module" src="embed.js"></script>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg-color: #eee;
+        --error-color: red;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg-color: #333;
+        }
+      }
+      html {
+        box-sizing: border-box;
+      }
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+      html, body {
+        margin: 0;
+        font-family: monospace;
+        background-color: var(--bg-color);
+        height: 100%;
+      }
+      .center {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      #error {
+        color: var(--error-color)
+      }
+      canvas {
+        display: block;
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+        image-rendering: crisp-edges;
+        image-rendering: pixelated;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas></canvas>
+    <div id="error" class="center" style="display: none;">
+      <div></div>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -16,6 +16,12 @@
           --bg-color: #333;
         }
       }
+      html {
+        box-sizing: border-box;
+      }
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
       html, body {
         font-family: monospace;
         background-color: var(--bg-color);
@@ -33,10 +39,19 @@
       canvas {
         display: block;
       }
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      h1 {
+        margin-top: 0.25em;
+        margin-bottom: 0.25em;
+      }
     </style>
   </head>
   <body>
-    <h1>QR Code Generator</h1>
+    <div class="header"><h1>QR Code Generator</h1><a href="https://github.com/greggman/qr-code">github</a></div>
     <textarea id="text" placeholder="enter or paste url (etc...) here"></textarea>
     <button id="download" type="button" disabled>download qr code</button>
     <canvas></canvas>

diff --git a/index.js b/index.js
@@ -1,6 +1,4 @@
-console.log('here');
-
-import { QrCode, Ecc } from './qrcodegen.js';
+import { showQRCode } from './qr.js';
 
 const saveBlob = (function() {
   const a = document.createElement('a');
@@ -36,24 +34,5 @@ function updateQRCode(s) {
   if (!s) {
     return;
   }
-  let qr;
-  try {
-    qr = QrCode.encodeText(s, Ecc.MEDIUM);
-  } catch (e) {
-    errorElem.textContent = e.toString();
-  }
-  const scale = 4;
-  const padding = 3;
-  const size = qr.size + padding * 2;
-  ctx.canvas.width = size * scale;
-  ctx.canvas.height = size * scale;
-  ctx.scale(scale, scale);
-  for (let y = 0; y < size; y++) {
-    for (let x = 0; x < size; x++) {
-      ctx.fillStyle = qr.getModule(x - padding, y - padding) ? 'black' : 'white';
-      ctx.fillRect(x, y, 1, 1);
-    }
-  }
+  showQRCode(ctx, s);
 }
-
-console.log('here');
diff --git a/qr.js b/qr.js
@@ -0,0 +1,17 @@
+import { QrCode, Ecc } from './qrcodegen.js';
+
+export function showQRCode(ctx, s) {
+  const qr = QrCode.encodeText(s, Ecc.MEDIUM);
+  const scale = 4;
+  const padding = 3;
+  const size = qr.size + padding * 2;
+  ctx.canvas.width = size * scale;
+  ctx.canvas.height = size * scale;
+  ctx.scale(scale, scale);
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      ctx.fillStyle = qr.getModule(x - padding, y - padding) ? 'black' : 'white';
+      ctx.fillRect(x, y, 1, 1);
+    }
+  }
+}