2016-04-10 06:11:57 +00:00
<!--
2019-07-30 18:11:21 +00:00
- QR Code generator input demo (HTML+JavaScript)
2016-04-10 06:11:57 +00:00
-
2017-04-24 20:41:54 +00:00
- Copyright (c) Project Nayuki. (MIT License)
2016-04-10 06:11:57 +00:00
- https://www.nayuki.io/page/qr-code-generator-library
-
- Permission is hereby granted, free of charge, to any person obtaining a copy of
- this software and associated documentation files (the "Software"), to deal in
- the Software without restriction, including without limitation the rights to
- use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- the Software, and to permit persons to whom the Software is furnished to do so,
- subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in
- all copies or substantial portions of the Software.
- * The Software is provided "as is", without warranty of any kind, express or
- implied, including but not limited to the warranties of merchantability,
- fitness for a particular purpose and noninfringement. In no event shall the
- authors or copyright holders be liable for any claim, damages or other
- liability, whether in an action of contract, tort or otherwise, arising from,
- out of or in connection with the Software or the use or other dealings in the
- Software.
-->
<!DOCTYPE html>
< html >
2019-07-30 18:09:42 +00:00
< head >
< meta charset = "UTF-8" >
2019-07-30 18:11:21 +00:00
< title > QR Code generator input demo (JavaScript)</ title >
2019-07-30 18:09:42 +00:00
< style type = "text/css" >
html {
font-family : sans-serif ;
}
td {
vertical-align : top ;
padding-top : 0.2 em ;
padding-bottom : 0.2 em ;
}
td : first-child {
white-space : pre ;
padding-right : 0.5 em ;
}
input [ type = radio ], input [ type = checkbox ] {
margin : 0 em ;
padding : 0 em ;
}
input [ type = radio ] + label , input [ type = checkbox ] + label {
margin-right : 0.8 em ;
padding-left : 0.2 em ;
}
</ style >
</ head >
< body >
2019-07-30 18:11:21 +00:00
< h1 > QR Code generator input demo (JavaScript)</ h1 >
2019-07-30 18:09:42 +00:00
< div id = "loading" >
< p > Loading application...</ p >
< p > (Are the JavaScript files missing?)</ p >
< p > (The JavaScript code needs to be compiled from the TypeScript code.)</ p >
</ div >
< form id = "loaded" style = "display:none" action = "#" method = "get" onsubmit = "return false;" >
< table class = "noborder" style = "width:100%" >
< tbody >
< tr >
< td >< strong > Text string:</ strong ></ td >
< 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 >
</ tr >
< tr >
< td >< strong > QR Code:</ strong ></ td >
< td >
< canvas id = "qrcode-canvas" style = "padding:1em; background-color:#E8E8E8" ></ canvas >
< svg id = "qrcode-svg" style = "width:30em; height:30em; padding:1em; background-color:#E8E8E8" >
< rect width = "100%" height = "100%" fill = "#FFFFFF" stroke-width = "0" ></ rect >
< path d = "" fill = "#000000" stroke-width = "0" ></ path >
</ svg >
</ td >
</ tr >
< tr >
< td >< strong > Error correction:</ strong ></ td >
< td >
< input type = "radio" name = "errcorlvl" id = "errcorlvl-low" checked = "checked" >< label for = "errcorlvl-low" > Low</ label >
< input type = "radio" name = "errcorlvl" id = "errcorlvl-medium" >< label for = "errcorlvl-medium" > Medium</ label >
< input type = "radio" name = "errcorlvl" id = "errcorlvl-quartile" >< label for = "errcorlvl-quartile" > Quartile</ label >
< input type = "radio" name = "errcorlvl" id = "errcorlvl-high" >< label for = "errcorlvl-high" > High</ label >
</ td >
</ tr >
< tr >
< td > Output format:</ td >
< td >
< input type = "radio" name = "output-format" id = "output-format-bitmap" checked = "checked" >< label for = "output-format-bitmap" > Bitmap</ label >
< input type = "radio" name = "output-format" id = "output-format-vector" >< label for = "output-format-vector" > Vector</ label >
</ td >
</ tr >
< tr >
< td > Border:</ td >
< td >< input type = "number" value = "4" min = "0" max = "100" step = "1" id = "border-input" style = "width:4em" > modules</ td >
</ tr >
< tr id = "scale-row" >
< td > Scale:</ td >
< td >< input type = "number" value = "8" min = "1" max = "30" step = "1" id = "scale-input" style = "width:4em" > pixels per module</ td >
</ tr >
< tr >
< td > Version range:</ td >
< td >
Minimum = < input type = "number" value = "1" min = "1" max = "40" step = "1" id = "version-min-input" style = "width:4em" oninput = "app.handleVersionMinMax('min');" > ,
maximum = < input type = "number" value = "40" min = "1" max = "40" step = "1" id = "version-max-input" style = "width:4em" oninput = "app.handleVersionMinMax('max');" >
</ td >
</ tr >
< tr >
< td > Mask pattern:</ td >
< td >< input type = "number" value = "-1" min = "-1" max = "7" step = "1" id = "mask-input" style = "width:4em" > (− </ td >
</ tr >
< tr >
< td > Boost ECC:</ td >
< 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 >
</ tr >
< tr >
< td > Statistics:</ td >
< td id = "statistics-output" style = "white-space:pre" ></ td >
</ tr >
< tr id = "svg-xml-row" >
< td > SVG XML code:</ td >
< td >
< textarea id = "svg-xml-output" readonly = "readonly" style = "width:100%; max-width:50em; height:15em; font-family:monospace" ></ textarea >
</ td >
</ tr >
</ tbody >
</ table >
</ form >
< script type = "application/javascript" src = "qrcodegen.js" ></ script >
< script type = "application/javascript" src = "qrcodegen-input-demo.js" ></ script >
< hr >
< 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 >
</ body >
2016-04-10 06:11:57 +00:00
</ html >
