Skip to content

Instantly share code, notes, and snippets.

@plwalters

plwalters/index.html

Last active January 10, 2021 22:23
Show Gist options
  • Save plwalters/0e314c6e716c95b4d00c2d652210d8b7 to your computer and use it in GitHub Desktop.
Save plwalters/0e314c6e716c95b4d00c2d652210d8b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Node URI Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>QR Code Example</h1>
<p>Make sure the QR Code has ample whitespace around it to allow easy scanning</p>
<!--Put the following <div></div> wherever you want the QR Code to display-->
<div class="qr-code-control" style="padding: 20px; background-color: white; border: 2px solid black;"></div>
<p>Use a disabled input element to make selecting uris easier</p>
<input disabled="disabled" class="uri-text" style="width: 100%; font-size: 1.5em;" />
<!--Load qrcode.min.js from cdn to render the QR Code-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
<!--You can load the script.js javascript manually or insert it in a script tag in your html-->
<script src="script.js">
</script>
</body>
</html>
Raw
script.js
// Create reference to the <div class="qr-code-control"> above
let control = document.querySelector('.qr-code-control');
// Socket / pubkey of the node
let socket = '104.248.124.73:9735';
let pubkey = '0276c5e7cac95039994619d34238ce9ab32502199a931b4246d6e6baba979f2f3b';
let nodeUri = `${pubkey}@${socket}`;
// Display 'myaddress' as a QRCode (replace nodeUri variable with whatever you want to encode)
let qrCode = new QRCode(control, {
text: nodeUri,
width: 250,
height: 250
});
// Not needed for QR Code, just to show updating an input
let textControl = document.querySelector('.uri-text');
textControl.value = nodeUri;
Raw
styles.css
/* todo: add styles */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment