código de barras

Lector de código de barras con Android

Leer código de barras con Android y ZXing (programación de app)

En este post voy a enseñarte cómo leer o escanear códigos de barras con Android usando la librería de Zebra Crossing (ZXing) con Java.

Además de que se permitirán leer códigos de barras también se podrán escanear códigos QR.

Lector de código de barras con Android

Lector de código de barras con Android

La app que vamos a programar será compatible con versiones de Android 4.4 y superiores; también vamos a manejar los permisos de acceso a la cámara en tiempo de ejecución y en el manifiesto.

Al final tendremos una app que lanza el lector de códigos de barras y devuelve el texto leído en forma de cadena.

Continue reading…

Código de barras generado con PHP escaneado

Generar y guardar imágenes de códigos de barras con PHP

Códigos de barras con PHP

Los códigos de barras sirven para muchísimas cosas, por ejemplo, identificar a productos. Podríamos tener un sistema de ventas y generar códigos de barras dependiendo del valor de cada uno de ellos.

Es por ello que en este artículo voy a explicar cómo generar códigos de barras con PHP y guardarlos en una imagen PNG o JPG, así como guardarlos en un archivo SVG o simplemente generar el código HTML necesario.

Por cierto, para esto vamos a usar la librería llamada PHP Barcode Generator cuyo repositorio encuentras aquí.

Este ejemplo es muy parecido al de combinar documentos PDF, porque también veremos cómo guardar la imagen en el disco duro, generarla en tiempo de ejecución o forzar la descarga.

Nota: mira cómo generar códigos de barras con AngularJS.

Código fuente y ejemplos

Si quieres navegar por el código fuente, visita el repositorio de GitHub. En caso de que quieras ver los ejemplos de los códigos de barras generados míralos en este enlace.

Instalar librería

Para instalar la librería necesitas instalar Composer. Si crees que composer no sirve, se te hace complicado o necesitas adaptar tu proyecto, por favor mira lo siguiente:

Te aseguro que Composer te hará un mejor desarrollador de PHP. Ahora sí a lo que estábamos, instala la librería con:

composer require picqer/php-barcode-generator

Luego de eso espera a que se termine de instalar, incluye tu autoload en donde lo necesites (ve los tutoriales de composer si no sabes cómo) y ya podemos continuar.

Primer vistazo al generador de códigos de barras de PHP

Aquí está el ejemplo más básico, simple y con lo mínimo de código. En él generamos un código de barras que dice “parzibyte.me” y lo mostramos como HTML. Veámoslo brillar:

Eso va a generar una serie de elementos div y los pondrá como HTML. No te preocupes, si quieres que se generen como imagen vamos a verlo más abajo.

Por ahora veamos que el código fue generado de manera perfecta, aquí la prueba (lo he escaneado con esta app) escaneada con mi teléfono:

Código de barras generado con PHP escaneado

Código de barras generado con PHP escaneado

De esta manera vemos que la calidad del código de barras es excelente, pues no es necesario ni imprimir ni leer con un lector para saber el contenido.

Los tipos de códigos de barras

Puedes usar cualquier tipo soportado por la librería. A la fecha son los siguientes:

  • TYPE_CODE_39
  • TYPE_CODE_39_CHECKSUM
  • TYPE_CODE_39E
  • TYPE_CODE_39E_CHECKSUM
  • TYPE_CODE_93
  • TYPE_STANDARD_2_5
  • TYPE_STANDARD_2_5_CHECKSUM
  • TYPE_INTERLEAVED_2_5
  • TYPE_INTERLEAVED_2_5_CHECKSUM
  • TYPE_CODE_128
  • TYPE_CODE_128_A
  • TYPE_CODE_128_B
  • TYPE_CODE_128_C
  • TYPE_EAN_2
  • TYPE_EAN_5
  • TYPE_EAN_8
  • TYPE_EAN_13
  • TYPE_UPC_A
  • TYPE_UPC_E
  • TYPE_MSI
  • TYPE_MSI_CHECKSUM
  • TYPE_POSTNET
  • TYPE_PLANET
  • TYPE_RMS4CC
  • TYPE_KIX
  • TYPE_IMB
  • TYPE_CODABAR
  • TYPE_CODE_11
  • TYPE_PHARMA_CODE
  • TYPE_PHARMA_CODE_TWO_TRACKS

También puedes leer más sobre los tipos. Lo que importa aquí es que para usar el tipo declara la variable así:

$tipo = $generador::EL_TIPO_AQUI;

Es decir, accede a los miembros estáticos del generador. No hablaremos de tipos aquí porque no es el punto del post, pero si quieres mi recomendación, usa el TYPE_CODE_128.

Generadores de códigos de barras

Ya vimos allá arriba el HTML, pero esta librería también permite generar códigos de barras como:

  • Imagen PNG
  • Imagen JPG
  • SVG

Para usarlo, simplemente cambiamos las clases. Por ejemplo:

Y cada generador devuelve los datos del código de barras, ya sea para ser guardados o para imprimirlos directamente. Veamos más ejemplos.

Código de barras como PNG en el navegador

Veamos cómo mostrar una imagen de un código de barras en el navegador. El formato es PNG pero sería lo mismo (cambiando la clase) para JPG, HTML y SVG. Aquí un ejemplo:

En ese caso se mostrará una imagen PNG que puede ser descargada o visualizada.

Guardar imagen PNG con código de barras usando PHP

Veamos ahora cómo guardar el código de barras generado dentro del disco duro. Para ello usamos file_put_contents.

Si todo va bien, la imagen será guardada. Ya dije que esto podemos hacerlo igualmente con una imagen JPG

Forzar descarga de código de barras PNG

Primero que todo te invito a leer este tutorial para saber más sobre el tema. Ahora sí veamos el código:

Es como en donde mostrábamos la imagen en el navegador pero con encabezados adicionales.

Generar código de barras a partir de parámetro GET

Para profundizar más dentro de todo este recorrido sobre códigos de barras veamos un ejemplo en donde se genera el código de barras dependiendo de lo que le pases en la URL. Por ejemplo, si la url es:

generar.php?texto=Hola

Debe generar una imagen con el código de barras correspondiente al texto Hola.

Con ese código, el script va a generar un nuevo código de barras dependiendo del texto que le mandes y va a mostrarlo como imagen PNG.

Poner código de barras en etiqueta HTML

Ahora veamos cómo combinar el ejemplo anterior con HTML para generar una serie de imágenes cuya fuente o src sea el script que genera códigos de barras. Quedaría así:

De esa forma armamos algo como una API para códigos de barras con el ejemplo 6 y la consumimos en este ejemplo. Aquí la salida:

Múltiples códigos de barras generados con PHP

Múltiples códigos de barras generados con PHP

Más opciones para personalizar código de barras

Para terminar con el tutorial, veamos otras opciones que se pueden personalizar y mandar como tercer, cuarto y quinto parámetro:

  • Anchura de la barra: un factor que dice qué tan ancha debería ser cada barra, debe ser un entero. Ojo que esto indica el factor por el que va a multiplicar la anchura de cada barra, no la anchura total.
  • Altura: la altura del código de barras, igualmente como entero
  • Color: un color RGB pero en forma de arreglo, por ejemplo [250, 125, 0]. Me costó media hora averiguar esto y tuve que analizar el código para saberlo.

Con el siguiente código se explica mejor:

De esta manera sale un código así:

Código de barras con color, altura y anchura personalizados

Código de barras con color, altura y anchura personalizados

Conclusiones

Así de fácil, sencillo y divertido es generar códigos de barras con PHP y esta maravillosa librería llamada PHP Barcode Generator.

Mira más sobre PHP aquí.

Códigos de barras con AngularJS

A veces es necesario generar códigos de barras o códigos qr con javascript o angularjs. En este caso mostraré cómo podemos hacerlo de una forma realmente rápida y fácil usando este poderoso framework.

Incluyendo lo necesario

Necesitaremos únicamente incluir a angularjs (obviamente) y una librería llamada angular-barcode que podemos encontrar en GitHub.

Nuestro encabezado lucirá algo así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body>

</body>

</html>

Ahora vamos a empezar a crear nuestro script para la app, y crear un pequeño controlador.

Comenzando a definir vistas y controladores

En nuestro script escribiremos lo siguiente:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {

  }]);

Como ya declaramos nuestra app en javascript, ahora vamos a ponerlo en HTML para que Angular se encargue de pegar la vista y el controlador. Así que en nuestra vista vamos a declarar la app y el controlador como se ve en el código:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">

  </div>
</body>

</html>

Ahora sí vamos a empezar a declarar nuestro código de barras. Simplemente tenemos que poner la etiqueta <angular-barcode> con algunas opciones. Entonces nuestra vista quedaría así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">
    <angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
  </div>
</body>

</html>

Como podemos ver, estamos definiendo los atributos bc-options, bc-type y el modelo. Vamos a analizar estos 3.

bc-options

Se encarga de declarar el tamaño, el color, y muchas propiedades del código de barras. Debemos definirlo en nuestro controlador.

bc-type

Puede ser svg, canvas o img. El código de barras puede ser pintado como una imagen, como un elemento svg o en canvas. Yo recomiendo usar svg porque permite una resolución bastante buena; sobre todo si vamos a imprimir.

Modelo o ng-model

Es el modelo de angularjs. Es el valor que tendrá nuestro código de barras.

 

Definiendo propiedades en controlador

Ya declaramos nuestras propiedades para que se reflejen en las vistas, ahora falta definir las opciones en nuestro controlador. Vamos a definir el modelo y las opciones:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.opciones = {
      format: 'CODE128',
      lineColor: '#000000',
      width: 2,
      height: 100,
      displayValue: true,
      fontOptions: '',
      font: 'monospace',
      textAlign: 'center',
      textPosition: 'bottom',
      textMargin: 2,
      fontSize: 20,
      background: '#ffffff',
      margin: 0,
      marginTop: undefined,
      marginBottom: undefined,
      marginLeft: undefined,
      marginRight: undefined,
      valid: function(valid) {}
    };

    $scope.codigoBarras = "parzibyte.me";
  }]);

Las opciones las he tomado directamente del ejemplo de la librería, podemos verlo aquí para obtener una idea de todo lo que podemos lograr. Con lo explicado arriba, el resultado que se obtuvo es el siguiente:

Haciendo que el código de barras cambie al escribir

Ya pusimos nuestro código de barras, pero es estático. Podemos hacer que sea dinámico y que conforme introduzcamos texto, cambie. Simplemente tenemos que agregar un input y ligarlo al modelo. Sólo tenemos que agregar el siguiente código:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">
    <input type="text" ng-model="codigoBarras">
    <br>
    <angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
  </div>
</body>

</html>

Agregando el input, conseguimos cambiar de forma dinámica al código de barras generado. Así se ve ahora:

ng-if, ng-repeat…

Como es una directiva de angularjs, podemos usar ng-if, ng-show, ng-repeat y cualquier otra cosa. Vamos a hacer que se pueda ocultar y mostrar, y también a hacer que se repita dependiendo de un arreglo.

Para ello, en lugar de definir una variable de tipo string, usaremos un arreglo. Por lo que nuestro script cambiará a esto:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.opciones = {
      format: 'CODE128',
      lineColor: '#000000',
      width: 2,
      height: 100,
      displayValue: true,
      fontOptions: '',
      font: 'monospace',
      textAlign: 'center',
      textPosition: 'bottom',
      textMargin: 2,
      fontSize: 20,
      background: '#ffffff',
      margin: 0,
      marginTop: undefined,
      marginBottom: undefined,
      marginLeft: undefined,
      marginRight: undefined,
      valid: function(valid) {}
    };

    $scope.codigos = ["hola", "mundo", "somos", "palabras"];
  }]);

Ahora usaremos ng-repeat en nuestra vista:

<angular-barcode ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>

Con lo que tendremos algo así:

Ahora vamos a agregar un checkbox para ocultar o mostrarlos. Simplemente hay que modificar a nuestra vista con el siguiente código:

<label for="mostrarCodigos">¿Mostrar?
    <input type="checkbox" ng-model="mostrarCodigos" />
    </label>
    <br>
    <angular-barcode ng-show="mostrarCodigos" ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>

El resultado ahora es el siguiente:

Imprimiendo códigos

Claro que podemos imprimir en javascript y angularjs, simplemente hay que llamar a window.print. Vamos a agregar un botón para imprimir nuestros códigos:

<button type="button" ng-click="imprimir()">Imprimir</button>

En nuestro controlador vamos a crear la función imprimir:

$scope.imprimir = function(){
      window.print();
    };

Ahora podemos probarlo:

Nota: si deseamos ocultar el botón al imprimir, recomiendo leer este post para ocultar elementos al imprimir usando CSS.

Conclusión

Así es como podemos generar códigos de barras. Hay muchas opciones que tal vez ponga en otro post. Por el momento sólo nos dedicamos a crearlos y a usar la magia del framework, pero falta ver cómo cambiar colores, tamaño, etcétera. Recomiendo ver el proyecto en GitHub, y visitar el ejemplo en donde nos muestran las opciones.