Механизм работы с одномерным штрих-кодом в независимом веб-интерфейсе

Публикация № 1202316

Администрирование - Торговое оборудование - Сканер штрих-кода

Веб-интерфейс

В продолжение предыдущей публикации приведу пример работы с одномерным штрих-кодом в простом веб-интерфейсе, посредством сканера одномерного цифрового штрих-кода.

Дошли руки, так что если есть интерес, то попробуем расписать механизм по частям. И начнём с механизма получения данных от сканера штрих-кода.

Если вкратце, то суть состоит в том, чтобы 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 = '';
}

В приведённом примере использованы штрих-коды с усечёнными лидирующими (не значимыми) нулями, так что поступивший штрих-код преобразуется в число и затем снова в строку. Это не является необходимым, но в данном случае экономит трафик.

Приведённый в данном случае пример не является единственно возможным, однако он чрезвычайно прост для применения и без проблем может быть подключён к произвольному пользовательскому интерфейсу.

Особо следует отметить, что подобный подход ко взаимодействию со сканером штрих-кода снимает множество проблем, поскольку большинство подобных устройств по умолчанию работают в режиме клавиатуры, что исключает проблемы с маппингом портов, установкой дополнительного программного обеспечения, дополнительной настройкой.

Скачать файлы

Наименование Файл Версия Размер
Механизм работы с одномерным штрих-кодом в независимом веб-интерфейсе:
.rar 3,65Kb
02.03.20
0
.rar 3,65Kb Скачать

Специальные предложения

Оставьте свое сообщение

См. также

Генератор штрихкодов. Формирование текста QR кода чека ККТ с проверкой на сайте ФНС

Инструменты и обработки Программист Пользователь Внешняя обработка (ert,epf) v8 1cv8.cf Абонемент ($m) Практика программирования Сканер штрих-кода Фискальный регистратор БСП (Библиотека стандартных подсистем)

Внешняя обработка. Позволяет генерировать штрих-коды разных типов. А также сформировать текст QR кода чека ККТ. Есть возможность проверить чек на корректность на сайте ФНС.

1 стартмани

02.04.2020    404    1    viplelik    3       

Готовые переносы данных из различных конфигураций 1C Промо

Рекомендуем готовые решения для переноса данных из различных конфигураций 1C. C техподдержкой от разработчиков и гарантией от Инфостарт.

СКУД с продажей билетов и управлением турникетом

Инструменты и обработки Программист Архив с данными v8 v8::УФ Розница Россия УУ Windows Абонемент ($m) Сканер штрих-кода Рабочее место

Обработка, позволяющая печатать билеты со штрихкодом и управлять турникетом. Система контроля доступа с одним считывателем (сканером штрихкода) и турникетом.

1 стартмани

30.03.2020    488    Sandmansss    0       

Автоматизированное рабочее место кладовщика для БП 3.0

Инструменты и обработки Программист Пользователь Внешняя обработка (ert,epf) v8 v8::БУ БП3.0 Россия БУ Абонемент ($m) Сканер штрих-кода Рабочее место Учет ТМЦ

Добрый день коллеги! Хочу поделиться опытом, как можно автоматизировать работу склада с помощью сканера штрихкода в конфигурации БП 3.0 не снимая конфигурацию с поддержки. Обработка тестировалась на релизе 3.0.67.74, но думаю, что еще долго будет актуальна, так как метаданные документов в БП меняются не часто.

1 стартмани

25.02.2020    844    5    BayoNet    2       

Онлайн-интенсив "1C:Предприятие для программистов: Бухгалтерские задачи" с 22 июня по 8 июля 2020 г. Промо

Данный онлайн-курс предусматривает изучение механизмов платформы “1С:Предприятие”, которые предназначены для решения задач бухгалтерского учета. Курс предназначен для тех, кто уже имеет определенные навыки конфигурирования и программирования в системе “1С:Предприятие”, а также для опытных пользователей прикладного решения “1С:Бухгалтерия” и прочих прикладных решений, в которых реализованы соответствующие механизмы для автоматизации бухгалтерских задач.

4900 рублей

Маркировка лекарств: Приемка товара

Инструменты и обработки Программист Внешняя обработка (ert,epf) v7.7 1cv7.md Фармацевтика, аптеки Россия Windows Абонемент ($m) Рабочее место Учет ТМЦ Сканер штрих-кода

С целью уйти от собственного штрих-кодирования и использования заводских ШК в свое время была написана обработка для приемки товара в Е-Фарме 1.2.7. Обработка позволяла проверять Наименование товара, Изготовителя, ШК на упаковке, Серии, Сроки годности. На ее основе была сделана обработка для приемки маркированного товара и проверки/внесения КИЗ.

1 стартмани

20.11.2019    1867    1    Vlx    0       

Программы для исполнения 488-ФЗ: Маркировка товаров Промо

1 января 2019 года вступил в силу ФЗ от 25.12.2018 № 488-ФЗ о единой информационной системе маркировки товаров с использованием контрольных (идентификационных) знаков, который позволяет проследить движение товара от производителя до конечного потребителя. Инфостарт предлагает подборку программ, связанных с применением 488-ФЗ и маркировкой товаров.

Вывод QR-кода типовыми средствами.

Инструменты и обработки no Внешняя обработка (ert,epf) v8 КА1 УТ10 УПП1 Windows Абонемент ($m) Универсальные печатные формы Сканер штрих-кода Универсальные функции

Вывод QR-кода типовыми средствами. На данный момент очень часто нужно вывести в печатную форму QR-код. Показываю как на примере типового кода из УТ11 это сделать. Можно использовать в любых конфигурациях с обычными формами.

1 стартмани

21.10.2019    7606    12    Емельянов Алексей    37       

Печать штрихкода Code 128 с помощью шрифта

Отчеты и формы Программист Архив с данными v8 1cv8.cf Россия Абонемент ($m) Печать Сканер штрих-кода

Открытые шрифты и кодировщик для встраивания в собственные доработки.

2 стартмани

13.10.2019    3310    4    avasl    5       

Лучшие программы за прошедший месяц Промо

Инфостарт подготовил ТОП-25 самых продаваемых и популярных на текущий момент программ. При формировании списка учитывается аналитика продаж и запросы клиентов за последний месяц.

Подборка решений для взаимодействия со ФГИС «Меркурий» Промо

С 1 июля 2019 года все компании, участвующие в обороте товаров животного происхождения, должны перейти на электронную ветеринарную сертификацию (ЭВС) через ФГИС «Меркурий». Инфостарт предлагает подборку программ, связанных с этим изменением.

Поиск по штрихкоду в подборе. УТ 11

Отчеты и формы Пользователь Расширение (cfe) v8::ОУ УТ11 УУ Windows Оптовая торговля Абонемент ($m) Сканер штрих-кода

Расширение реализует механизм подбора номенклатуры с помощью сканера штрих-кода в обработке подбор товаров в Реализацию.

2 стартмани

27.08.2019    2546    3    ch_igor    3       

Базовый курс по обмену данными в системе 1С:Предприятие. Онлайн-интенсив с 12 по 28 мая 2020 г. Промо

Данный онлайн-курс предусматривает изучение механизмов платформы “1С:Предприятие”, обеспечивающих обмен данными между различными прикладными 1С-решениями и взаимодействие с другими информационными системами. Курс предназначен для тех, кто уже имеет определенные навыки конфигурирования и программирования в системе “1С:Предприятие”.

5500 рублей

Используем сканер штрихкодов в подборе товаров

Инструменты и обработки Пользователь Расширение (cfe) v8 v8::ОУ УТ11 Оптовая торговля Абонемент ($m) Сканер штрих-кода

Расширение, позволяющее использовать сканер штрихкодов в обработке подбора товаров.

2 стартмани

31.07.2019    3192    6    rhtr    11       

Вступительные испытания в 1С:Университет с использованием сканера штрихкода

Инструменты и обработки Пользователь Архив с данными v8::УФ 1cv8.cf Общественные и некоммерческие структуры Абонемент ($m) Обработка документов Сканер штрих-кода Рабочее место

Небольшая попытка автоматизации проведения вступительных испытаний, включающая в себя распечатку обезличенных заданий (печатная форма с QR-кодом) и объективное (беспристрастное) оценивание их выполнения. Подключение сканера на основе БПО с помощью драйвера "1С:Сканер штрихкода".

1 стартмани

21.06.2019    2986    zannv    1       

Программы для исполнения 54-ФЗ Промо

С 01.02.2017 контрольно-кассовая техника должна отправлять электронные версии чеков оператору фискальных данных - правила установлены в 54-ФЗ ст.2 п.2. Инфостарт предлагает подборку программ, связанных с применением 54-ФЗ, ККТ и электронных чеков.

Подключение сканера штрихкодов АТОЛ 1101 к windows 7 64-x

Инструменты и обработки Системный администратор Архив с данными v8 1cv8.cf Windows Абонемент ($m) Сканер штрих-кода

Есть вещи невеликие по полету алгоритмической мысли или красоте кода, но и искать по полдня их решение тоже не хочется. Поэтому введу хештег #копилочка и положу туда свои 5 копеек. Сканер штрихкодов АТОЛ 1101 – ОС windows 7 64-x друзья они или нет? Сайт производителя считает что нет, кто с этим не согласен, прошу под кат...

5 стартмани

05.06.2019    4961    1    capitan    24       

[Расширение] для подключения мобильного устройства к УТ11.4/ КА 2/ERP 2 для работы с ордерным складом на базе Simple WMS. Для автоматизации склада нужен только телефон

Инструменты и обработки Программист Пользователь Расширение (cfe) v8 ERP2 УТ11 КА2 УУ Оптовая торговля Розничная торговля Учет ТМЦ Абонемент ($m) Сканер штрих-кода Терминал сбора данных Мобильная разработка Управление торговлей

Представляю готовое решение для работы с ордерами и проведения инвентаризаций в виде расширения на базе конструктора Simple WMS. Не требует доработки конфигурации, подключается как обычное расширение. Работать может с обычного телефона на Андроид либо с ТСД либо через RDP. Расширение содержит справочники, поэтому режим совместимости конфигурации должен быть не меньше 8.3.11. Расширение написано для конфигурации Управление торговлей 11.4.7 и тестировалось на Комплексная автоматизация 2.4.7.151.

5 стартмани

27.05.2019    8675    26    informa1555    20       

DevOps для 1С. Онлайн-курс проходит с 16 апреля по 11 июня 2020 года. Промо

Данный онлайн-курс предусматривает изучение процессов DevOps, их применение при разработке на платформе 1С. В результате прохождения онлайн-курса вы сможете: настроить ПО необходимое для проведения проверок и тестирования, создавать сценарии тестирования и объединять их в комплексные процессы, создавать скрипты для автоматизации процессов DevOps.

12000 рублей

Сверка приемки EMEX

Инструменты и обработки Программист Бухгалтер Пользователь Архив с данными v8 1cv8.cf Автомобили, автосервисы Россия УУ Оптовая торговля Учет ТМЦ Абонемент ($m) Внешние источники данных Сканер штрих-кода

Данный программный продукт позволяет автоматизировать сверку приходной накладной с наличием товара от EMEX. Это достигается считыванием с помощью сканера уникального штрих-кода с этикетки детали.

1 стартмани

06.05.2019    3408    user608421_alex_sh_777    2       

Базовый курс для начинающих 1С-программистов. Онлайн-интенсив со 2 июня по 2 июля 2020 г. Промо

Данный онлайн-курс является начальной ступенью по изучению базовых принципов программирования в системе “1С:Предприятие” и предназначен для обучения 1С-программированию “с нуля”.

4500-9500 рублей

Исходный код Native драйвера сканера штрихкода и терминала сбора данных через TCP VS C++ 2017

Инструменты и обработки Системный администратор Программист Стажер Архив с данными v8 1cv8.cf Россия Windows Абонемент ($m) Практика программирования Разработка Сканер штрих-кода Терминал сбора данных

Исходный код Native драйвера 1с 8.3. Сканер штрихкода и терминала сбора данных через интернет или локальную сеть VS С++ 2017. 1с 8.3 все версии, протестирован на БП 3.0,  УТ 10.3, УТ 11, УНФ 1.6.

5 стартмани

14.03.2019    4377    10    Grigoriy251    6       

Инструкция по применению мобильного приложения 1С:Штрихкоды

Инструменты и обработки Программист Приложение (apk) v8::Mobile Android Абонемент ($m) Мобильная разработка Практика программирования Сканер штрих-кода

После выпуска обзора на настраиваемое мобильное приложение для сканирования штрихкодов у заинтересованных лиц появилось множество вопросов о том, как этим пользоваться.

1 стартмани

18.01.2019    6036    2    inord777    0       

Онлайн-курс «Практические аспекты внедрения регламентированного учета и расчета себестоимости в 1С:ERP на крупных промышленных предприятиях» с 20 апреля по 15 мая 2020 года. Промо

Курс рассчитан для подготовки экспертов по регламентированному учету и учету затрат для внедрения на крупных промышленных предприятиях с «исторически сложившимся» учетом

9000 рублей

Ручная замена прав пользователя в РМК. 1С: Розница 2.2

Инструменты и обработки Программист Пользователь Расширение (cfe) v8::УФ v8::Права 1С7:Комплекс Розница Розничная и сетевая торговля (FMCG) Россия УУ ОС Кассовые операции Розничная торговля Абонемент ($m) Сканер штрих-кода Рабочее место Роли и права

Расширение позволяет сделать замену прав пользователя в РМК без использования сканера ШК, путем ввода пароля. Расширение не изменяет механизмы основной конфигурации.

1 стартмани

18.01.2019    5453    15    m.denis123    13       

Сканер штрих-кодов Сервер + Клиент

Инструменты и обработки Программист Пользователь Архив с данными v8::Mobile 1cv8.cf Россия Windows Розничная торговля Абонемент ($m) Мобильная разработка Сканер штрих-кода

Мобильное приложение для магазинов одежды, продавец сканирует товар, и ему мобилка выдает остаток +сумму+ склад+ цвет+ размер+ свойство товара.

1 стартмани

18.01.2019    4598    1    enot_tut    0       

Онлайн-курс «Автоматизация процессов управления МТО: методика сбора и формализации требований» с 1 апреля по 13 мая 2020 года. Промо

Цель курса - повысить полноту и качество сбора и формализации требований к автоматизации процессов управления материально-техническим обеспечением. Курс основан на процессном подходе, позволяет в полном объеме выявить и учесть все факторы, влияющие на специфику процессов управления МТО. Участники курса получают теоретические знания в области организации процессов управления МТО и готовый инструментарий для сбора и формализации требований по автоматизации этих процессов (шаблоны, опросники, модели).

40000 рублей

Настраиваемое мобильное приложение для сканирования штрихкодов

Инструменты и обработки Программист Приложение (apk) Android Абонемент ($m) Практика программирования Сканер штрих-кода Мобильная разработка

Обзор приложения для сканирования штрихкодов с возможностью обработки результата сканирования произвольным кодом для совместного использования с Android приложениями через Intent и взаимодействие с 1С конфигурациями через web-сервис.

1 стартмани

14.01.2019    5946    3    inord777    9       

Конструктор мобильного клиента Simple WMS Client: способ создать полноценный ТСД без мобильной разработки. Теперь новая версия - Simple UI (обновлено 14.11.2019)

Инструменты и обработки Программист Архив с данными v8 v8::Mobile БУ УУ Android Оптовая торговля Производство готовой продукции (работ, услуг) Розничная торговля Учет ОС и НМА Учет ТМЦ Абонемент ($m) Инструментарий разработчика Сканер штрих-кода Терминал сбора данных Мобильная разработка

Simple WMS Client – это визуальный конструктор мобильного клиента для терминала сбора данных(ТСД) или обычного телефона на Android. Приложение работает в онлайн режиме через интернет или WI-FI, постоянно общаясь с базой посредством http-запросов (вариант для 1С-клиента общается с 1С напрямую как обычный клиент). Можно создавать любые конфигурации мобильного клиента с помощью конструктора и обработчиков на языке 1С (НЕ мобильная платформа). Вся логика приложения и интеграции содержится в обработчиках на стороне 1С. Это очень простой способ создать и развернуть клиентскую часть для WMS системы или для любой другой конфигурации 1С (УТ, УПП, ERP, самописной) с минимумом программирования. Например, можно добавить в учетную систему адресное хранение, учет оборудования и любые другие задачи. Приложение умеет работать не только со штрих-кодами, но и с распознаванием голоса от Google. Это бесплатная и открытая система, не требующая обучения, с возможностью быстро получить результат.

5 стартмани

09.01.2019    32966    246    informa1555    200       

Екатеринбург.Online: Голосование продолжается Промо

Продолжается голосование за доклады на INFOSTART MEETUP Екатеринбург.Online! Лучшие из них попадут в окончательную программу онлайн-митапа! Присоединяйтесь к голосованию и покупайте билеты - 3 000 рублей за 8 часов продуктивной пятницы!

3000