imprimir

Pila dinámica en C

Implementación de una pila dinámica en C

Pila o stack dinámica en el lenguaje C

Una pila es una estructura de datos simple. Los datos se van apilando uno tras otro. Podemos abstraer cada elemento como un nodo que puede apuntar a otro nodo.

Su modo de acceso es LIFO: el último en entrar es el primero en salir. Las operaciones que tiene son 2: push y pop; la primera le pone un elemento y la segunda quita el último.

Pila dinámica en C

Pila dinámica en C

Veremos las operaciones básicas de una pila o stack en C; además de otras que hice para exponer aquí. Son:

  • Tamaño: devolver el tamaño de la pila
  • Apilar, también conocido como push: agregar un elemento
  • Desapilar, o la operación pop: quitar el último elemento; es decir, el elemento superior
  • Leer último: leer el elemento superior de la pila
  • Vacía: indica si la pila está vacía
  • Imprimir: recorrer la pila e imprimir sus valores

Por cierto, esta pila será dinámica: podremos poner elementos infinitos siempre y cuando nuestra memoria RAM alcance (cosa que es muy, muy difícil que ocurra)

Continue reading…

PHP: intval y strval para convertir variables

Introducción

PHP es un lenguaje débilmente tipado, aunque en la versión 7 incorporó la revisión de tipos en las funciones el lenguaje en sí lo sigue siendo.

Una de las ventajas de esto es que podemos castear o cambiar el tipo de una variable sin dificultad.

Lo que nos reúne hoy aquí son dos funciones que…

  1. Convierten un valor a entero
  2. Convierten un valor a cadena

Dichas funciones son intval y strval

Continue reading…

Imprimir stacktrace en Log de Android

Introducción

Cuando estamos depurando nuestras apps en Android necesitamos saber toda la información de una excepción en caso de que ésta sea lanzada. Si cachamos la excepción dentro de un try/catch podemos saber el mensaje de la excepción con el método getMessage pero nosotros necesitamos el detalle, y esto es el stacktrace. Por eso hoy veremos cómo imprimir stacktrace en Log de Android.

Continue reading…

Imprimir o convertir a PDF código fuente con VSCode

Imprimir o convertir a PDF código fuente con VSCode

Introducción

Nuestro código fuente luce bien en nuestro editor, pero cuando lo queremos pasar a otro lugar como un documento de texto o un documento PDF, se le quitan los colores y las tabulaciones.

Hoy veremos cómo podemos convertir nuestro código a PDF, para poder imprimirlo, presentarlo, enviarlo o lo que sea.

Este tutorial se basa en una extensión para el maravilloso editor de texto VSCode.

Imprimir código fuente

Lo que tenemos que hacer es tener instalado VSCode. Después, instalamos la extensión llamada PrintCode.

Podemos ir al enlace que dejo arriba, o en nuestro editor buscar la extensión:

La instalamos y recargamos nuestro IDE.

Ahora abrimos un archivo que tengamos y que deseemos imprimir. Presionamos F1 o Ctrl + Shift + P y escribimos PrintCode:

Presionamos enter y automáticamente se abrirá una pestaña en nuestro navegador preferido…

Si utilizamos Chrome o uno de sus hermanos, podemos guardar como PDF. También podremos imprimir a una impresora física.

En caso de utilizar otro navegador, las opciones cambian, pero siempre hay opciones para imprimir a una impresora virtual o convertir el documento a XPS.

Finalmente aquí dejo el documento PDF generado. Se trata de unos ejercicios de MySQL resueltos.

Imprimir el contenido de un div con HTML y Javascript

Introducción

Siempre vamos a necesitar imprimir en la mayoría de aplicaciones que desarrollemos, independientemente del lenguaje en el que lo hagamos. En este caso veremos cómo imprimir con HTML y Javascript, conservando los estilos y obteniendo una impresión que es exactamente igual a lo que vemos en pantalla.

Precisamente esta mañana tuve que investigar un método fácil, rápido y viable para imprimir contenedores, y aquí traigo los resultados.

Nota: para investigar la mayoría de lo que expongo aquí tomé como referencia la maravillosa respuesta a esta pregunta de StackOverflow

Actualización: he quitado los plunkers y he puesto enlaces directos; ya que que plnkr.co ha estado fallando y los estilos no se estaban cargando; por eso ahora mejor alojo los ejemplos en vivo en mi servidor. Abajo de cada explicación está el link. Sólo te contaba; porque esto no afectará tu experiencia de usuario ni el código expuesto; todo funciona como un encanto.

Función

Aquí pondré la función pero un poco modificada. Primero, eliminé el encabezado, ya que si queremos incluir un encabezado lo ponemos en el mismo div, y si no, no lo incluimos.

En segundo lugar hice que reciba un elemento, no el id de un elemento. Es decir, la función recibe un elemento del DOM (obtenido con document.querySelector o con document.getElementById) en lugar de una cadena.

Así que queda así:

Imprimiendo el hola mundo

Para este ejemplo vamos a crear 2 divs con diferente contenido y sólo imprimiremos uno de ellos. En el script ya puse la función que definimos arriba. Pondré un botón y cuando hagan click en él se imprimirá el contenido de un div.

El código para escuchar al botón es el siguiente:

Mira el ejemplo en acción aquí.

Ya imprimimos el hola mundo, podemos pasar a cosas más avanzadas

Añadiendo estilo al imprimir

El documento, sin estilos, a mi parecer se ve bonito; pero siempre tendremos la necesidad de cambiar alguna u otra cosa. Así que voy a agregar unos estilos sólo para demostrar el concepto. Para ello, le pondré al párrafo un padding de 18 px y un color de fondo color rosa.

Al encabezado le pondré el color azul. El estilo queda así:

Ahora vemos los cambios, pero si intentamos imprimir no se ve ningún estilo. Esto es porque al imprimir se crea un documento nuevo que no lleva los estilos css. Pero para cargarlos, podemos añadir lo siguiente a nuestra función para imprimir:

Nota: esta vez necesitamos modificar la función para imprimir y poner una función en el evento onload de la ventana, para que primero cargue los estilos y luego imprima. Esto no es necesario si tu documento no lleva estilos.

Y ahora sí, si imprimimos veremos algo así:

Si deseas probarlo en vivo haz click aquí.

Ahora sí podemos añadir cualquier estilo, e incluso podemos agregar 2, 3 o infinitas hojas de estilo. Para ello fue que esperamos al window.onload, para que termine de cargar los estilos y luego imprima.

Añadir estilo diferente del documento

Si queremos que nuestro documento, al ser visualizado se vea de una forma pero al ser impreso de otra, podemos manejar dos hojas de estilo. Una para imprimir y otra normal. Para ello voy a crear una hoja de estilos nueva, en donde ahora el encabezado será rojo y el fondo del párrafo verde:

También al imprimir, cambiaremos la función para que ahora cargue una diferente hoja de estilos.

Ahora veamos los resultados. Normalmente, el documento luce así:

Pero al imprimir, se ve así:

Míralo en vivo aquí.

Imprimir diferentes contenedores

Para terminar este tutorial demostraré cómo podemos imprimir diferentes contenedores, incluso aunque no sean divs.

Para ello crearé un párrafo con el id parrafo, y pondré igualmente un botón. Así que el código HTML queda así:

Y para escuchar a los botones:

Podemos probar el código en el siguiente enlace: ejemplo 4 de imprimir con HTML, JS y CSS.

Y así es como podemos jugar con los estilos y los elementos. Por cierto, podemos cambiar el tamaño de la ventana (que por defecto es de 400 x 600)

Imprimir ticket en impresora térmica usando Javascript

Introducción

Actualización agosto 2019

¿Quieres imprimir con JavaScript sin usar el diálogo de impresión, con la posibilidad de cortar el papel y abrir el cajón de dinero? mira este post.

Recientemente escribí un tutorial sobre cómo imprimir un ticket en una impresora térmica usando PHP. Veamos entonces cómo podemos imprimir ticket en impresora térmica usando JavaScript.

Las complicaciones que tenemos al imprimir con PHP son:

  • Confusión de cómo usar la librería
  • Forzar a que el lenguaje del servidor sea PHP

Así que ahora decidí hacer una entrada para saber cómo imprimir un ticket en una impresora térmica sin usar PHP, sólo Javascript. El resultado será el siguiente:

Continue reading…

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.