barcode_hid_reader/test.html at master · FragsterAt/barcode_hid_reader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Barcode HID reader</title>
  </head>
  <body>
    <script type="module">
      import barcode from "./index.js"

      function processBarcode(barcode) {
        let el = document.getElementById("output")
        el.innerHTML += barcode + "\n"
      }
      function log(...args) {
        console.log(...args)
        let el = document.getElementById("log")
        el.innerHTML +=
          args.reduce((res, elem) => (res + res ? "\t" : "" + elem), "") + "\n"
      }

      barcode.defaults.callback = processBarcode
      barcode.defaults.log = log

      barcode.startCapturing(document)

      function applySettings(event) {
        let form = event.target

        barcode.stopCapturing()
        let options = {
          prefix: form.prefix.value,
          suffix: form.suffix.value,
          convertToLatin: form.convertToLatin.checked,
          timeout: Number.parseInt(form.timeout.value),
        }
        console.log(options)

        barcode.startCapturing(document, options)
        event.preventDefault()
      }

      document
        .getElementById("settings")
        .addEventListener("submit", applySettings)
    </script>
    <h1>Тест клавиатурного СШК</h1>
    <h2>Настройки</h2>
    <form id="settings">
      <table>
        <tr>
          <td>Prefix</td>
          <td>
            <input name="prefix" value="" />
          </td>
        </tr>
        <tr>
          <td>Suffix</td>
          <td>
            <input name="suffix" value="Enter" />
          </td>
        </tr>
        <tr>
          <td>Convert to latin</td>
          <td>
            <input name="convertToLatin" type="checkbox" checked />
          </td>
        </tr>
        <tr>
          <td>Timeout</td>
          <td>
            <input name="timeout" value="30" />
          </td>
        </tr>
        <tr>
          <td colspan="2"><button type="submit">Apply</button></td>
        </tr>
      </table>
    </form>
    <p>
      Чтобы работало, в качестве активного элемента не должно быть выбрано поле
      ввода (просто кликните на свободное место страницы)
    </p>
    <h2>Результат</h2>
    <pre id="output"></pre>
    <h2>Log</h2>
    <pre id="log"></pre>
  </body>
</html>