A um tempo atras me apareceu a necessidade de ler as informações de uma etiqueta em um formulário do LATROMI, porém a etiqueta não possuía código de barras ou Qrcode para realizar a leitura das informações.
Com isso iniciei uma pesquisa para localizar um recurso que possibilitasse a leitura da imagem da etiqueta e me deparei com tema Optical Character Recognition ou OCR que possibilita esse trabalho.
Para iniciarmos precisamos criar um formulário com os seguintes campos:
Upload
Deve ser configurado o destino em um local no servidor, no meu exemplo estou utilizando um único nome para todos os arquivos, logo, sempre que é realizado um novo upload a nova imagem irá substituída a antiga.
Também deve ser marcada a opção Captura de Imagem direto da câmera casos seja para uso em dispositivos moveis.
HTMLElement
Sempre que a imagem for enviada ao servidor o código abaixo deve ser inserido no HTMLElement. Lembrando que estou utilizando o banco de dados ORACLE. Para outros bancos de dados, o comando SELECT precisa ser adaptado:
SELECT
'<div id="main">
<img id="pic" src="http://seuservidor/LATROMI/img/Img_Volvo/Img_Atual.JPG" onload="recognize_image()">
<div id="transcription" class="teste_01"></div>
</div>' AS OCR
FROM DUAL
No campo do tipo Upload é necessário confirmar o upload antes de colocar o código acima em um record e popular o campo novamente.
TextBox
Será necessário localizar o Id do campos para colocar no código. Para verificar no navegador Chrome, clique com botão direito dou mouse e escolha a opção “Inspecionar”.
Também é necessário que você crie uma classe javaScripit com o código abaixo:
Repare que na ultima linha de código estou colocando o resultado recebido pelo parâmetro text em um campo no LATROMI por meio do Id do campo.
function recognize_image(){
OCRAD(document.getElementById("pic"), {numeric: true,}, // Para esse caso estou utilizando para numeros.
function(text){ // O valor recebido no parâmetro "text" contem a imagem convertida em numeros.
// No meu caso precisei utilizar replaceAll para retirar os espaços e substring para cortar
var vNvString = text.replaceAll(" ", "");
// as parder que gostaria de visualizar.
var vSku = vNvString.substring(0,5);
var vData = vNvString.substring(5,13);
var vTurno = vNvString.substring(14,15);
var vSec = vNvString.substring(15,19);
// Aqui estou utilizando o Id do campos no LATROMI para concatenar as informações.
document.getElementById('ctl00_Conteudo_frm_f289463').value = vSku + '.' + vData + '-T' + vTurno + '-' + vSec;
}
)
}
Espero que tenha ajudado, desculpe qualquer equivoco na explicação.
Segui as tuas instruções e criei este form para teste: Leitura OCR
Funcionou perfeitamente!
No entanto, você pode melhorar um pouco a implementação da seguinte forma:
Usando Código C# ao invés de SQL para gerar o código HTML.
Remover o elemento “transcription” pois não está sendo utilizado.
Não usar “Id” nos elemento HTML, para evitar possíveis conflitos com elementos existentes na página do Latromi.
Usar a API de manipulação do Formulário ao invés de usar o ID do elemento obtido através da inspeção do HTML. Este ID pode ser modificado caso o campo seja excluído e criado novamente no Formulário.
Vou repassar as instruções deste o início para ficar mais claro.
Formulário
O objeto deste Formulário é fazer a leitura do texto contido em uma imagem através da biblioteca OCRAD usando JavaScript.
Campos
Upload
Neste exemplo, o campo do tipo “Upload” vai se chamar “uplImage”. O objetivo deste campo é apenas enviar o arquivo para o servidor para que seja gerada uma URL para o mesmo.
Configure no “Destino” do arquivo um diretório do servidor que esteja publicado na Web.
Uma boa dica, é usar como “Destino” uma sub-pasta da pasta rais do LATROMI no IIS (onde estão as pastas “web” e "wsapp), pois esta pasta já está publicada:
HTMLElement
Campo do tipo “HTMLElement” onde a imagem será carregada logo após o Upload ser concluído. Neste exemplo, este campo vai se chamar “elmPreview”.
TextBox
Campo do tipo “TextBox” que vai receber o resultado da leitura da imagem. Ou seja, este campo será preenchido com o texto que a biblioteca OCRAD conseguir extrair da imagem.
JavaScript
ocrad.js
Baixe o arquivo ocrad.js, e importe-o para dentro do sistema usando o Gerenciador de Arquivos do Latromi Client.
Depois, vincule o arquivo importado no Formulário Dinâmico.
JavaScript do Formulário
Adicione um arquivo JavaScript no Formulário Dinâmico.
Adicione o código abaixo no arquivo criado
// Função que será usada no event "onload" da imagem
function recognize_image(pic){
// Preenche a TextBox com mensagem o status da leitura.
latromi.formManager.getFormInstance().setFieldValue('txtValue', '(fazendo leitura da imagem...)');
// Faz a leitura da imagem, passando um
// Callback para quando a leitura for concluída.
OCRAD(pic, function(text){
// Preenche o campo TextBox chamado "txtValue" com o resultado da leitura
latromi.formManager.getFormInstance().setFieldValue('txtValue', text);
}
)
}
A função “OCRAD” pode ser chamado com diferentes opções de formatação. Essa chamada é mais simples.
Eventos
FileUploaded
Evento dos campos do tipo “Upload”, que ocorre quando o arquivo foi recebido pelo servidor.
Vamos adicione um procedimento ao evento “FileUploaded” do nosso campo de Upload. Neste procedimento, vamos realizar as seguintes ações:
Confirmar Uploads (envia arquivos da área temporária para o destino especificado)
Preencher o campo HTMLElement (elmPreview) com o seguinte código HTML:
Lembrando que o caminho ../uploads/ocr/ deve ser substituído pelo caminho da URL da imagem conforme diretório informado na propriedade “Destino” do campo Upload.
Já o nome nome_da_imagem.jpg deve ser substituído de forma dinâmica, pelo nome da imagem enviada.
Para preencher o campo HTMLElement (elmPreview), vamos usar um “Código C#” ao invés de SQL, pois dessa maneira, evitamos o consumo de recursos desnecessário de banco de dados.
Adicione a ação “Executar Código C#” no procedimento, e informe o código abaixo:
var imageName = Fields["uplImage"].Value?.ToString();
var html = new StringBuilder()
.Append("<img style=\"height:100%;width:100%\"")
.Append(" src=\"../uploads/ocr/" + imageName + "\"")
.Append(" onload=\"recognize_image(event.target)\">");
Fields["elmPreview"].Value = html.ToString();
