Creando un componente: Ingeniería inversa

Estoy creando una pequeña aplicación para monitorizar el registro de entradas y salidas de la tabla IP del sistema. También quería monitorizar el estado de las conexiones, así como los bytes descargados, etc. Y lo quería hacer con un componente de estilo del administrador de tareas:

La idea es intentar crear un componente parecido al del administrador de tareas, y para eso utilizaré delphi, ya que me ofrece varias herramientas para esto.
Para la impresión del gráfico utilizaré un TImage, para no tener que utilizar las librerías GDI, ya que lo que quiero hacer es bastante sencillo, con un par de ajustes y mejoras.

• Primeros pasos:

Crear una clase que permita interpolar el valor a mostrar con el tamaño del TImage. Para poder representar un punto en el TImage, por ejemplo el valor 23, debemos saber donde lo tenemos que pintar, ya que la clase TCanvas se guia por el tamaño en pixels del TImage. Por lo tanto la primera parte es esta, crear una pequeña clase que a partir de un punto en el mundo real de devuelva su posición en el plano del TImage.

• Representación temporal:

Ahora que tenemos ubicado el valor en el TImage, nos tenemos que preocupar del tiempo de muestreo, es decir cada cuando queremos dibujar un punto en nuestro gráfico. Lo que yo he hecho es crear un hilo de ejecución que dependiendo del tiempo que escojas, irá añadiendo un nuevo valor o no.

• Ingenieria Inversa:

¿Porqué lo de ingeniería inversa?, porqué realmente no sabemos como funciona el componente de windows, pero nos lo podemos imaginar, no?. De esto se trata, de intentar utilizar nuestro ingenio para descubrir como hicieron ese componente.

Bueno, pues yo os diré como lo he hecho yo:
Es bastante sencillo, lo que he hecho, es crear un pequeño array dinámico, que lo único que hace es ir registrando cada x tiempo el valor de entrada. Luego dentro del hilo de ejecución, lo único que hay que ir haciendo a través de nuestra clase que modela la ubicación del plano con el valor real en el componente y usa el TCanvas para ir pintando cada punto A[i] con A[i+1], de esta manera conectamos los puntos con una línea. Por lo tanto, lo que hago cada x segundos o milisegundos, es pintar todo el gráfico. Suena absurdo, pero es la única manera, ya que el TImage no tiene ningún componente incrustado que sea persistente y que dibuje gráficos...

El resultado final viene a ser algo parecido a esto:

Si os fijáis es bastante parecido, pero he añadido varias cosas:
- Muestro la descripción de la plumilla, el valor actual i el tiempo de muestreo.

Para la creación de las líneas horizontales y verticales, debemos decidir también si queremos mostrar números negativos o no, ya que esto hace que nuestro componente también cambie. En mi caso, he decidido permitir los números negativos, y por lo tanto en el momento que aparecen estos, dibujo líneas horizontales por encima y debajo del 0.

Como dibujamos las líneas?
De la misma manera que los valores. A partir de una propiedad del componente, decidimos cuantas líneas queremos, y luego como tenemos una clase que mapea el valor y la posición, escogemos esta para que también pinte las líneas. Lo que hago para pintar las líneas, es crear también un array para las líneas verticales, que se irá moviendo con nuestro valor. En este caso si el array tiene 20 posiciones [0..19] , y quiero 5 líneas, iré a las posiciones 3, 7, 11, 17 y 19 y las marcaré para que dibujen una línea. Luego iré avanzando el Array de la misma manera que el valor, dentro del mismo hilo de ejecución.

• Propiedades del componente:

Podéis ver las principales propiedades que encuentro que son las necesarias para el componente, y que además ayudan al programador a personalizar el componente a medida.

• El componente : Thundax Dynamic Plot

Podéis ver algunas imágenes de este aquí:

Podéis descargaros el proyecto demo, los dcu's (delphi compiled user) y el bpl (Borland package library), para instalarlo en vuestra máquina y probarlo: Dynamic Plot.

El componente permite:

- Activar el pintado del interior. Lo que hago es dibujar un pequeño polígono dentro de los valores:

- Cambiar el color de fondo y de las líneas horizontales y verticales.
- Modo demo (Permite visualizar el componente activo, además de elegir el tipo: con valores aleatorios o una señal triangular.
- Desplazamiento de las líneas. Podemos elegir si queremos que se muevan con el valor o que estén quietas.
- Modo línea. Con este modo podemos elegir si conectar los puntos con una línea, de esta manera da vida al valor, o mostramos solo la nube de puntos:

- Número de líneas Horizontales y verticales. Modifica la rejilla que queremos dibujar.
- Modificar las descripciones y la unidad del valor a mostrar.