Right. I'm going to have a go at making a QR Code Generator (read: installing a package that does it, and tying it nicely to a portal or something). We use one quite often at work, and it's a paid for service. I'm not just going to jump in and claim it will be cheaper and better to do it in house, but I will have fun making it and then if it's useful, we will.
My plan here is to vaguely and very informally document what I'm doing as I'm going along. It won't be an indepth tutorial, more a few articles about things I do wrong. At the moment it looks like this:
- Create the front end thing that generates the code image
- Turn it into a Livewire component
- Create the Model and associated stuff for Laravel to handle 'Codes' in our DB
- Make it look nice in the Laravel set up
I think that's it for now... Let's see how it goes. I'm not going to write about them all here. In fact, it's sunny and I'm going to go for a walk in the snow shortly so let's just deal with step one today.
It's really straight forward at this stage as I'm not adding it to anything, I need index.html and my main JS file.
QRCode.JS is the JS library of choice for this one, so for this stage I put that in the header, provided through a CDN. It's pretty lightweight, so we'll do proper includes further down the line, for now the CDN is fine:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<script
src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js">
</script>
<link rel="stylesheet" href="/css/style.css">
</head>
I put some base CSS in because I prefer it that way, it's not anything special. It just makes my eyes hurt less.
At this stage I need an input field, which will give people a chance to say which URI they want a code for; a generate button, which will er... generate the code; and then maybe buttons to download a PNG and an SVG. I'm basing this losely on the third party provider we use at work, and that has the download options so I might as well start there. It also has some stats and folder and other such things, but that will come from the wrap around app later on. For now, we're just focussing on the code generation.
<input type="text" name="qr-url" id="qr-url" aria-label="URL for Code" placeholder="Enter text or URL">
<button id="qr-generate">Generate QR Code</button>
<button id="qr-download-png">Download PNG</button>
<button id="qr-download-svg">Download SVG</button>
<div id="qr-container" role="region" aria-live="polite">
<canvas id="qr-canvas" aria-label="QR Code"></canvas>
</div>
Now it's over to the JS, I've linked to a file (main.js) for this bit, I still like having JS outside of the HTML file for this kind of thing. Firstly, grab all the divs by their ID, I'll be using all of them at some point:
const qrTextInput = document.getElementById("qr-url");
const generateButton = document.getElementById("qr-generate");
const qrCanvas = document.getElementById("qr-canvas");
const downloadPNGButton = document.getElementById("qr-download-png");
const downloadSVGButton = document.getElementById("qr-download-svg");
Then a function to generate the actual QR code, note for this little demo I have put in no validation of the input. That would be something like if (!isValidURL(text)) {return;}, with a valid url checked in that function. I'll handle this properly in Livewire, and the Laravel model will have validation and restrictions there too.
I know it's not great to say, but seeing as this little demo I'm making will work only on the mac I'm typing on right now, I don't really care. Anyway - here's the function for code generation:
function generateQRCode(text) {
if (!text.trim()) {
alert("Please enter some text or URL!");
return;
}
// Get rid of an existing code, if it's there
qrCanvas.getContext("2d").clearRect(0, 0, 200, 200);
// Hook into qrcode.js magic
QRCode.toCanvas(qrCanvas, text, {
width: 200,
margin: 0,
errorCorrectionLevel: 'H'
}, function (error) {
if (error) {
console.error("Error generating QR code:", error);
alert("There was an error generating the QR code.");
}
});
}
You can use qrcode.js to style the output with colours and so on if you want. I don't, so I'll just leave it like it is. Like QR Codes should be, am I right?!
// Function to download the QR code as a PNG
function downloadPNG() {
const text = qrTextInput.value.trim();
if (text === "") {
alert("Please generate a QR code first.");
return;
}
QRCode.toDataURL(text, { width: 200, errorCorrectionLevel: 'H' }, function (error, url) {
if (error) {
console.error("Error generating PNG:", error);
alert("There was an error generating the PNG.");
return;
}
// Create a temporary link element to download the PNG
const link = document.createElement("a");
link.href = url;
link.download = "qrcode.png";
link.click();
});
}
// Function to download the QR code as an SVG
function downloadSVG() {
const text = qrTextInput.value.trim();
if (text === "") {
alert("Please generate a QR code first.");
return;
}
QRCode.toString(text, { type: 'svg', errorCorrectionLevel: 'H' }, function (error, svg) {
if (error) {
console.error("Error generating SVG:", error);
alert("There was an error generating the SVG.");
return;
}
// Create a temporary link element to download the SVG
const link = document.createElement("a");
const svgBlob = new Blob([svg], { type: "image/svg+xml" });
const svgURL = URL.createObjectURL(svgBlob);
link.href = svgURL;
link.download = "qrcode.svg";
link.click();
});
}
Then the event listener for the button itself, along with event listeners for the download buttons, and Enter key if you want. We're getting into specifics. But I did those... So the listener stuff looks like the below:
generateButton.addEventListener("click", function() {
const text = qrTextInput.value.trim();
generateQRCode(text);
});
// Button to download the PNG
downloadPNGButton.addEventListener("click", downloadPNG);
// Button to download the SVG
downloadSVGButton.addEventListener("click", downloadSVG);
// Event listener for the enter key
qrTextInput.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
const text = qrTextInput.value.trim();
generateQRCode(text);
}
});
Next steps on this front would be some kind of storage process, so that the image gets saved and is usable again. I'm very aware a lot of this will change as soon as I bring Livewire into it, and put it into something proper. But for now, it was just getting the JS working, so I'm not going to go much further just yet.
And here it is... a QRCode...
** Already need to add something **
Ok. I know I said 'making' a QR Code Generator, and I haven't made it at all, I've just used one. I think I was kinda clear about that throughout. The point at this stage is to turn this into something that could be used in other contexts...
Maybe I'll have a go at actually making a generator myself at some stage.