diff --git a/index.html b/index.html index e20e26f..d0dfd9c 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,11 @@

Meshtastic QR Code Generator

+
+ + +
+ diff --git a/src/main.ts b/src/main.ts index b4ecf94..4658100 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,8 +8,9 @@ import { fromByteArray } from "base64-js"; * @returns void */ document.addEventListener('DOMContentLoaded', () => { - document.getElementById('generateQRCode')?.addEventListener('click', generateQRCode); - document.getElementById('generatePSK')?.addEventListener('click', generatePSK); + document.getElementById('generateQRCode')?.addEventListener('click', generateQRCode); + document.getElementById('generatePSK')?.addEventListener('click', generatePSK); + document.getElementById('copyUrlButton')?.addEventListener('click', copyUrlToClipboard); }); /** @@ -18,14 +19,14 @@ document.addEventListener('DOMContentLoaded', () => { * @returns void */ function generatePSK(): void { - const pskField = document.getElementById('psk') as HTMLInputElement; - const randomBytes = new Uint8Array(16); - window.crypto.getRandomValues(randomBytes); - let psk = ''; - for (let i = 0; i < randomBytes.length; i++) { - psk += ('0' + randomBytes[i].toString(16)).slice(-2); - } - pskField.value = psk; + const pskField = document.getElementById('psk') as HTMLInputElement; + const randomBytes = new Uint8Array(16); + window.crypto.getRandomValues(randomBytes); + let psk = ''; + for (let i = 0; i < randomBytes.length; i++) { + psk += ('0' + randomBytes[i].toString(16)).slice(-2); + } + pskField.value = psk; } /** @@ -34,52 +35,65 @@ function generatePSK(): void { * @returns void */ async function generateQRCode(): Promise { - const channelName = (document.getElementById('channelName') as HTMLInputElement).value; - const psk = (document.getElementById('psk') as HTMLInputElement).value; - const region = (document.getElementById('region') as HTMLSelectElement).value; + const channelName = (document.getElementById('channelName') as HTMLInputElement).value; + const psk = (document.getElementById('psk') as HTMLInputElement).value; + const region = (document.getElementById('region') as HTMLSelectElement).value; - if (psk.length !== 32) { - alert("PSK must be exactly 32 characters long."); - return; - } + if (psk.length !== 32) { + alert("PSK must be exactly 32 characters long."); + return; + } - const loraConfig = new Protobuf.Config.Config_LoRaConfig({ - region: Protobuf.Config.Config_LoRaConfig_RegionCode[region as keyof typeof Protobuf.Config.Config_LoRaConfig_RegionCode] - }); + const loraConfig = new Protobuf.Config.Config_LoRaConfig({ + region: Protobuf.Config.Config_LoRaConfig_RegionCode[region as keyof typeof Protobuf.Config.Config_LoRaConfig_RegionCode] + }); - const channel = new Protobuf.Channel.ChannelSettings({ - name: channelName, - psk: new TextEncoder().encode(psk) - }); + const channel = new Protobuf.Channel.ChannelSettings({ + name: channelName, + psk: new TextEncoder().encode(psk) + }); - const channelSet = new Protobuf.AppOnly.ChannelSet({ - loraConfig, - settings: [channel] - }); + const channelSet = new Protobuf.AppOnly.ChannelSet({ + loraConfig, + settings: [channel] + }); - const encoded = channelSet.toBinary(); - const base64 = fromByteArray(encoded) - .replace(/=/g, "") - .replace(/\+/g, "-") - .replace(/\//g, "_"); + const encoded = channelSet.toBinary(); + const base64 = fromByteArray(encoded) + .replace(/=/g, "") + .replace(/\+/g, "-") + .replace(/\//g, "_"); - const meshtasticUrl = `https://meshtastic.org/e/#${base64}`; + const meshtasticUrl = `https://meshtastic.org/e/#${base64}`; - console.log("Generated Meshtastic URL:", meshtasticUrl); + const urlField = document.getElementById('generatedUrl') as HTMLInputElement; + urlField.value = meshtasticUrl; - const qrCodeElement = document.getElementById('qrcode') as HTMLCanvasElement; - qrCodeElement.innerHTML = ""; // Clear previous QR code + console.log("Generated Meshtastic URL:", meshtasticUrl); - try { - await QRCode.toCanvas(qrCodeElement, meshtasticUrl); - console.log('QR code generated successfully!'); - } catch (error) { - if (error instanceof Error) { - console.error(error.message); - alert('QR Code generation failed: ' + error.message); - } else { - console.error('An unknown error occurred:', error); - alert('An unknown error occurred'); - } + const qrCodeElement = document.getElementById('qrcode') as HTMLCanvasElement; + qrCodeElement.innerHTML = ""; // Clear previous QR code + try { + await QRCode.toCanvas(qrCodeElement, meshtasticUrl); + console.log('QR code generated successfully!'); +} catch (error) { + if (error instanceof Error) { + console.error(error.message); + alert('QR Code generation failed: ' + error.message); + } else { + console.error('An unknown error occurred:', error); + alert('An unknown error occurred'); } + } +} + +/** + * Copy the generated URL to the clipboard. + * @returns void + */ +function copyUrlToClipboard(): void { + const urlField = document.getElementById('generatedUrl') as HTMLInputElement; + urlField.select(); + document.execCommand('copy'); + alert('URL copied to clipboard!'); }