summaryrefslogblamecommitdiffstats
path: root/qr.html
blob: bcb7b9f8c0b99f68f210eadca98f86e6cc32897a (plain) (tree)
























































































































                                                                                                       
<!doctype html>
<html>
	<head>
    <meta charset="UTF-8">
		<title>upn softver</title>
    <!--[if ie]><script type="text/javascript" src="vendors/excanvas/excanvas.js"></script><![endif]-->
    <script src="qrcode.js"></script>
		<script src="qrcode.tosjis.js"></script>
		<script src="iso-8859-2.js"></script>
		<style>
      .container { display: flex; }
      .controls {
        display: flex; flex-direction: column;
        width: 100%;
        padding: 0 5px 0 5px;
        background-color: ghostwhite;
      }
      .controls > label { margin-bottom: 5px; margin-top: 10px; }
      .controls > textarea { flex: 1; margin-bottom: 10px; }
      .controls > input { width: 100%; margin: 0; padding: 0; flex: 1; }
      .qrcode-container {
        display: flex; align-items: center; justify-content: center;
        min-height: 300px; min-width: 300px; padding: 10px;
        background-color: ghostwhite;
      }
      .qrcode-image { box-shadow: 2px 2px 12px lightgray; }
      .error { color: red; max-width: 280px; }
    </style>
	</head>
	<body>
    <div class="container">
      <div class="controls" style="max-width: 320px;">
        <div class="container">

        <div class="controls" style="flex: 1;">
          <textarea rows=19 id="input-text">UPNQR
X

SI56051008010486080
Novo podjetje d.o.o.
Lepa cesta 15
3698 Loški Potok
00000013167
11.07.2016
X
SUSB
Letna naročnina na ZZYS
11.11.2020
DE12500105170648489890
RF45SBO2010
Gesselshaft GmbH
Rosenthal 15
DE-86807 Buchloe
222
</textarea>
        </div>

      </div>
      <div class="qrcode-container">
        <p id="error" class="error"></p>
        <canvas id="canvas" class="qrcode-image"></canvas>
      </div>
    </div>

		<script>
      var canvasEl = document.getElementById('canvas')
      var textEl = document.getElementById('input-text')
	  var errorEl = document.getElementById('error')
      function debounce (func, wait, immediate) {
        var timeout
        return function () {
          var context = this
          var args = arguments
          var later = function () {
            timeout = null
            if (!immediate) func.apply(context, args)
          }

          var callNow = immediate && !timeout
          clearTimeout(timeout)
          timeout = setTimeout(later, wait)
          if (callNow) func.apply(context, args)
        }
      }

      function drawQR (text) {
        errorEl.style.display = 'none'
        canvasEl.style.display = 'block'

        QRCode.toCanvas(canvasEl, text, {
          version: 15,
          errorCorrectionLevel: "M",
          margin: 0,
          color: {
            light: "#ffffff",
            dark: "#000000"
          },
          toSJISFunc: QRCode.toSJIS
        }, function (error, canvas) {
          if (error) {
            canvasEl.style.display = 'none'
            errorEl.style.display = 'inline'
            errorEl.textContent = error
          }
        })
      }

      var updateQR = debounce(function () {
        var mode = "Byte";
        if (mode !== 'Auto') {
          drawQR([{ data: iso88592.encode(textEl.value.replace(/[\t\n]/g,)), mode: mode }])
        } else {
          drawQR(iso88592.encode(textEl.value.replace(/[\t\n]/g,)))
        }
      }, 250)
	  textEl.addEventListener('keyup', updateQR, false);
	  updateQR();
		</script>

	</body>
</html>