Как я Подружил React и сканер HP LJ M127

Дружба трех друзей React, Delphi, HP LJ M127

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

Начну наверное с того что все началось с написания софтверного приложения на delphi для сканирования документов и сохранения их blob данных в БД MSSQL SERVER 20212, ниже я приведу скриншот этого приложения, но как говорится в заголовке моей статьи сегодня речь пойдет, о другом приложении

Вообще идея пришла с того что хотелось сделать приложение, которое можно было запускать на любом компьютере, но тут как раз и появилась первая проблема, reactjs как и все веб фреймворки не работает с железом с драйверами, и тут на помощь пришел мои опыт работы с высокоуровневым языком программирования Delphi

Приложение на React

Представляю вашему вниманию страницу входа авторизации

Авторизация у меня по сути построена на двух функциях, одна функция это проверка авторизовался ли ранее этот пользователь, а вторая функцию уже авторизует пользователя

    ReallyAut=()=>
    {
        axios.get(Conf.API_URL+'user/really_aut/'+localStorage.getItem('hash'))
            .then(res => {
                const data= res.data;
                let autentificate = data.autentificate;
                this.setState({autentificate : autentificate.success});

                this.props.aut(data.data.hash,data.success,data.data.username);
                this.props.autentificate(autentificate);

            })

    }

Данная функция как раз и занимается проверкой авторизован ли пользователь, эту функцию я вызываю в жизненном цикле react в ComponentDidMount ( эта функция выполняется после добавления объекта в дерево DOM) и конечно же я использую hash значения для работы с авторизациями

    Autorize = (event) => {
        event.preventDefault();

        let passwd = this.passwdRef.current.value;
        let login = this.loginRef.current.value;
        Toast.loading('Ожидание ответа....');
        axios.get(Conf.API_URL+'user/autorize/'+login+'/'+passwd)
            .then(res => {

                const data = res.data;
                Toast.hide();
                if(data.success){
                    this.props.aut(data.token,data.success,data.name);
                    localStorage.setItem('hash',data.token);
                    localStorage.setItem('userName',data.token);
                } else
                {
                    NotificationManager.error('Неверный логин или пароль, повторите ввод','Ошибка авторизации',3000);
                }

            }).catch(err => {
            if (err.response) {
                // client received an error response (5xx, 4xx)
            } else if (err.request) {
                // client never received a response, or request never left
            } else {
                // anything else
            }
           NotificationManager.error('Нет доступа....','Ошибка',3000);
            console.log(err);
            Toast.hide();
        });


    }

Ну вот мы и добрались до второй функции которая авторизует нас на сервере и выдает нам token

Главная форма имеет следующий вид, и как видно из скриншота позволяет нам в быстром наборе, выбирать заказчика и исполнителя, но основной функционал заключается в другом, а именно в сканировании и сохранении документа, побочные функции это удаление, перемещение , добавление сканированных документов

В общем уже заполненная форма сканированными документами, как видно на скриншоте их можно перемещать удалять

Как в общем производится сканирование, тут в принципе все просто, в программе на DELPHI которая сидит в трее заключена вся сила, а именно это связь со сканером HP LJ M127 , приложение закрепляет на порту слушатель , теперь перейдем к приложению на Delphi

Приложение Delphi

Опишем основные объекты, один из которых это объект который хранит в себе информацию об отсканированных изображения, тут основная хитрость в том чтобы хранить изображение в зашифрованном виде в виде строки чтобы удобно ее передавать и хранить

type
  TScanImage = class(Tobject)
  public
    Image: TBitmap;
    thumbnail: TJPEGImage;
    StreamBitmap: TMemoryStream;
    base64_image: String;
    sended: Byte;
    heigh: Integer;
    width: Integer;
    date_scan: TDateTime;
    constructor Create(zimg: TBitmap; zh, zw: Integer; zds: TDateTime);
  end;

Второй объект нужен для информирования нашего веб приложения о текущих задачах которые выполняет наше приложение, событии всего несколько

• Событии нету

• Сканирование Документа

• Поворот картинки

• Конвертация в PDF

• Сохранение на сервер

type
  TEvents = class(Tobject)
  public
    procedure SetEvent(EventCode: Byte; EventStatus: Byte;
      EventData: TJSONArray);
    procedure SetEventName(EventName: String; EventCode: Byte);
    procedure SetStatusEvent(EventStatus: Byte);
    procedure SetEventData(EventData: TJSONArray);

    function GetEvent: TJSONObject;

  private
    constructor Create();

  protected
    event_name: String;
    event_code: Byte;
    event_status: Byte;
    event_date: Int64;
    event_data: TJSONArray;
    event_message: String;

  end;

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

1. Веб приложение на React посредством http запросов (через axios) дает команду на сканирование документа, приложение на Delphi слушает порт и получает команду начинает выполнять и записывает в события что происходит в данный момент в приложении на delphi

2. Веб приложение через определенный промежуток запрашивает статус задачи которая выполняется или уже выполнилась

3. Приложение на Delphi когда завершила сканирование документа (Это может быть и автоподачик и ручное сканирование) записывает в статус события объекты которые отсканировала и при запросе от веб приложения их отдает

Вернемся к веб приложению на ReactJS

На данном скриншоте представлены документы которые уже отсканированы и их можно просмотреть, удалить

Просмотр документа с возможностью его загрузки

Удаление документа