1<!-- 2 - QR Code generator input demo (HTML+JavaScript) 3 - 4 - Copyright (c) Project Nayuki. (MIT License) 5 - https://www.nayuki.io/page/qr-code-generator-library 6 - 7 - Permission is hereby granted, free of charge, to any person obtaining a copy of 8 - this software and associated documentation files (the "Software"), to deal in 9 - the Software without restriction, including without limitation the rights to 10 - use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 11 - the Software, and to permit persons to whom the Software is furnished to do so, 12 - subject to the following conditions: 13 - * The above copyright notice and this permission notice shall be included in 14 - all copies or substantial portions of the Software. 15 - * The Software is provided "as is", without warranty of any kind, express or 16 - implied, including but not limited to the warranties of merchantability, 17 - fitness for a particular purpose and noninfringement. In no event shall the 18 - authors or copyright holders be liable for any claim, damages or other 19 - liability, whether in an action of contract, tort or otherwise, arising from, 20 - out of or in connection with the Software or the use or other dealings in the 21 - Software. 22 --> 23<!DOCTYPE html> 24<html> 25 <head> 26 <meta charset="UTF-8"> 27 <title>QR Code generator input demo (JavaScript)</title> 28 <style type="text/css"> 29 html { 30 font-family: sans-serif; 31 } 32 td { 33 vertical-align: top; 34 padding-top: 0.2em; 35 padding-bottom: 0.2em; 36 } 37 td:first-child { 38 white-space: pre; 39 padding-right: 0.5em; 40 } 41 input[type=radio], input[type=checkbox] { 42 margin: 0em; 43 padding: 0em; 44 } 45 input[type=radio] + label, input[type=checkbox] + label { 46 margin-right: 0.8em; 47 padding-left: 0.2em; 48 } 49 </style> 50 </head> 51 52 <body> 53 <h1>QR Code generator input demo (JavaScript)</h1> 54 <div id="loading"> 55 <p>Loading application...</p> 56 <p>(Are the JavaScript files missing?)</p> 57 <p>(The JavaScript code needs to be compiled from the TypeScript code.)</p> 58 </div> 59 <form id="loaded" style="display:none" action="#" method="get" onsubmit="return false;"> 60 <table class="noborder" style="width:100%"> 61 <tbody> 62 <tr> 63 <td><strong>Text string:</strong></td> 64 <td style="width:100%"><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:100%; max-width:30em; height:5em; font-family:inherit"></textarea></td> 65 </tr> 66 <tr> 67 <td><strong>QR Code:</strong></td> 68 <td> 69 <canvas id="qrcode-canvas" style="padding:1em; background-color:#E8E8E8"></canvas> 70 <svg id="qrcode-svg" style="width:30em; height:30em; padding:1em; background-color:#E8E8E8"> 71 <rect width="100%" height="100%" fill="#FFFFFF" stroke-width="0"></rect> 72 <path d="" fill="#000000" stroke-width="0"></path> 73 </svg> 74 </td> 75 </tr> 76 <tr> 77 <td><strong>Error correction:</strong></td> 78 <td> 79 <input type="radio" name="errcorlvl" id="errcorlvl-low" checked="checked"><label for="errcorlvl-low">Low</label> 80 <input type="radio" name="errcorlvl" id="errcorlvl-medium"><label for="errcorlvl-medium">Medium</label> 81 <input type="radio" name="errcorlvl" id="errcorlvl-quartile"><label for="errcorlvl-quartile">Quartile</label> 82 <input type="radio" name="errcorlvl" id="errcorlvl-high"><label for="errcorlvl-high">High</label> 83 </td> 84 </tr> 85 <tr> 86 <td>Output format:</td> 87 <td> 88 <input type="radio" name="output-format" id="output-format-bitmap" checked="checked"><label for="output-format-bitmap">Bitmap</label> 89 <input type="radio" name="output-format" id="output-format-vector"><label for="output-format-vector">Vector</label> 90 </td> 91 </tr> 92 <tr> 93 <td>Border:</td> 94 <td><input type="number" value="4" min="0" max="100" step="1" id="border-input" style="width:4em"> modules</td> 95 </tr> 96 <tr id="scale-row"> 97 <td>Scale:</td> 98 <td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em"> pixels per module</td> 99 </tr> 100 <tr> 101 <td>Version range:</td> 102 <td> 103 Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="app.handleVersionMinMax('min');">, 104 maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="app.handleVersionMinMax('max');"> 105 </td> 106 </tr> 107 <tr> 108 <td>Mask pattern:</td> 109 <td><input type="number" value="-1" min="-1" max="7" step="1" id="mask-input" style="width:4em"> (−1 for automatic, 0 to 7 for manual)</td> 110 </tr> 111 <tr> 112 <td>Boost ECC:</td> 113 <td><input type="checkbox" checked="checked" id="boost-ecc-input"><label for="boost-ecc-input">Increase <abbr title="error-correcting code">ECC</abbr> level within same version</label></td> 114 </tr> 115 <tr> 116 <td>Statistics:</td> 117 <td id="statistics-output" style="white-space:pre"></td> 118 </tr> 119 <tr id="svg-xml-row"> 120 <td>SVG XML code:</td> 121 <td> 122 <textarea id="svg-xml-output" readonly="readonly" style="width:100%; max-width:50em; height:15em; font-family:monospace"></textarea> 123 </td> 124 </tr> 125 </tbody> 126 </table> 127 </form> 128 <script type="application/javascript" src="qrcodegen.js"></script> 129 <script type="application/javascript" src="qrcodegen-input-demo.js"></script> 130 131 <hr> 132 <p>Copyright © Project Nayuki – <a href="https://www.nayuki.io/page/qr-code-generator-library">https://www.nayuki.io/page/qr-code-generator-library</a></p> 133 </body> 134</html> 135