Дошли руки, так что если есть интерес, то попробуем расписать механизм по частям. И начнём с механизма получения данных от сканера штрих-кода.
Если вкратце, то суть состоит в том, чтобы html-документ, при получении данных от клавиатуры, выполнял необходимый нам функционал.
В приложенном архиве три файла: index.htm (сам пользовательский интерфейс с данными), index.js (программный код обработчиков) и index.pdf (в нём три штрих-кода, использованные в файле index.htm).
Для проверки механизма следует извлечь файлы из архива в произвольный каталог и открыть браузером файл index.htm
Разумеется, браузер, в котором будет выполняться проверка, должен быть "свежим", т.е. "понимать" стандарты html-5. И, само собой, не должно быть запрещено выполнение java script. Впрочем, если не идёт речь о какой-либо экзотике или раритетах под старыми операционными системами, то вышеуказанное является само собой разумеющимся.
При этом к компьютеру (либо мобильному устройству, с которого будет открываться страница) должен быть подключён сканер штрих-кода в режиме клавиатуры. Это может быть как usb-подключение (к мобильным устройствам - посредством otg-адаптера), так и беспроводное соединение: в зависимости от модели сканера.
Выглядеть загруженная страница должна следующим образом:
Штрих-коды для проверки можно распечатать из файла index.pdf
Результат сканирования, в данном случае, выглядит следующим образом:
Разумеется, это лишь пример для демонстрации механизма.
Итак, перейдём к описанию.
Работа данного примера сводится к поиску некоего документа по присвоенному ему штрих-коду и отображению этого документа в пользовательском интерфейсе. При этом отображается как общее количество считанных документов, так и общая сумма по этим документам.
В данном случае все данные уже включены в тело .htm файла во вставке кода: это массив "var docs = […]", содержащий интересующие нас объекты. Это не обязательный механизм, но он допустим. В общем случае, если не говорить о детальных данных, несколько тысяч записей вида "штрих-код, ключ, представление" будут в таком виде занимать несколько сотен килобайт, что позволяет работать с данными полностью на стороне клиента.
В файле index.js реализована привязка события: "document.onkeypress = keypress_action", где в "keypress_action" реализован механизм сбора данных, поступающих с клавиатуры (а сканер штрих-кода в данном случае воспринимается системой именно как клавиатура, последовательно передающая коды символов).
Функция выглядит следующим образом:
function keypress_action(e){
let key_code = e.keyCode;
if(key_code > 47 && key_code < 58){
if(key_code == 48){res_code += '0'};
if(key_code == 49){res_code += '1'};
if(key_code == 50){res_code += '2'};
if(key_code == 51){res_code += '3'};
if(key_code == 52){res_code += '4'};
if(key_code == 53){res_code += '5'};
if(key_code == 54){res_code += '6'};
if(key_code == 55){res_code += '7'};
if(key_code == 56){res_code += '8'};
if(key_code == 57){res_code += '9'};
if(timer_eraser != undefined){
clearTimeout(timer_eraser);
}
timer_eraser = setTimeout(eraser, 100);
}
}
Т.е. входящие символы, если они являются цифрами, функция конкатенирует в переменную "res_code". Для того, чтобы изолировать вводимые в ручном режиме цифры, подключён обработчик ожидания с функцией "eraser", которая очищает значение переменной "res_code" каждые (в данном случае) десять миллисекунд. При этом при вводе нового символа выполнение данной функции прекращается для исключения удаления рабочих данных.
В данном примере функция очистки переменной со штрих-кодом совмещает в себе механизм поиска документа по штрих-коду и отображения данных.
function eraser(){
let tmp = Number(res_code).toString();
let work_table = document.getElementById('work_table');
let rows = work_table.getElementsByTagName('tr');
let id_exist = false;
let found = false;
docs.forEach(row => {
if(row.sc == tmp){
found = true;
for (let tbl_row of rows){
if(row.uid == tbl_row.id){
id_exist = true;
}
}
if(!id_exist){
let tr = document.createElement('tr');
tr.id = row.uid;
tr.doc = row.doc;
tr.sum = row.cnt;
tr.onclick = function(){
if(confirm('Удалить из списка ' + this.doc + '?')){
work_table.removeChild(this);
process_sum();
}
}
tr.innerHTML = '<td>' + row.doc + '</td><td>' + row.cnt + '</td>';
if(rows.length == 0){
work_table.appendChild(tr);
}
else{
work_table.insertBefore(tr, rows[0]);
}
process_sum();
}
}
});
res_code = '';
}
В приведённом примере использованы штрих-коды с усечёнными лидирующими (не значимыми) нулями, так что поступивший штрих-код преобразуется в число и затем снова в строку. Это не является необходимым, но в данном случае экономит трафик.
Приведённый в данном случае пример не является единственно возможным, однако он чрезвычайно прост для применения и без проблем может быть подключён к произвольному пользовательскому интерфейсу.
Особо следует отметить, что подобный подход ко взаимодействию со сканером штрих-кода снимает множество проблем, поскольку большинство подобных устройств по умолчанию работают в режиме клавиатуры, что исключает проблемы с маппингом портов, установкой дополнительного программного обеспечения, дополнительной настройкой.
Вступайте в нашу телеграмм-группу Инфостарт
