examples/common/QRCode/repo/typescript-javascript/qrcodegen-input-demo.html

   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>