Thursday, 30 October 2008

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.

Tuesday, 28 October 2008

Pasar un array como parámetro en Delphi

Para pasar un array como parámetro de un método o procedimiento, hay que asociarlo a un clase. Por lo tanto si queremos hacer esto:


function PasarArrayComoParametro(var a : array of double; valor : double);
var
iPosArray : integer;
begin
iPosArray := Length(a);
SetLength(a, iPosArray + 1);
a[iPosArray] := valor;
end;

Debemos hacer esto:


type
TArrayDouble = array of TDouble;


function PasarArrayComoParametro(var a : TArrayDouble; valor : double);
var
iPosArray : integer;
begin
iPosArray := Length(a);
SetLength(a, iPosArray + 1);
a[iPosArray] := valor;
end;

Tuesday, 21 October 2008

Asignar un icono a un componente de Delphi 2007

Una vez tenemos creado nuestro componente en Delphi, y queremos que muestre un icono en la paleta de herramientas, debemos crear un recurso y poner el icono dentro de este. Luego desde el fichero .dpk asignarle la ruta del recurso y instalarlo.

  • Creando el fichero de recursos (.dcr)
En Delphi 2007, no disponemos de ningún editor de este tipo, así que para poder hacerlo, utilizaremos el Resource Builder de SiComponents.
Una vez lo tenemos instalado, seleccionamos nuestro componente, y crearemos un fichero .dcr que coincida con el nombre .pas que contiene nuestro componente:


En este caso tenemos un componente de los mios, y he creado una carpeta Resources dentro del proyecto, que es donde crearé mi fichero de recursos .dcr que coincide con el nombre de mi .pas que contiene mi clase.
En este caso la clase se llama TTHDXDynamicPlot, y éste será el nombre que le pondremos a nuestro icono dentro del fichero de recursos.

  • Editando el recurso


Seleccionamos en el árbol - Bitmap, y añadimos nuestro icono, y le asignamos el mismo nombre que nuestra clase principal.

  • Llamando al recurso
Ahora, debemos editar el fichero .dpk del proyecto, o desde el mismo project manager, hacemos botón derecho sobre el .bpl y le damos al view Source:



Añadimos la línea {$R 'Resources\ComponentPlotTHDX.dcr'}, y luego, volvemos a compilar y buildear.

  • Instalando el componente
Una vez hemos hecho los pasos anteriores, cerramos el proyecto y lo volvemos a abrir, y nos aparecerá la carpeta del Resources. Ahora para acabar, debemos coger el fichero ComponentPlotTHDX.pas, y hacemos un Remove de nuestro proyecto. Luego lo volvemos a llamar, haciendo un Add.
Una vez lo tenemos en nuestro proyecto, hacemos un build i un install, y ahora en nuestra paleta tendremos nuestro componente con su imagen:


Thursday, 16 October 2008

Crear un recuadro de texto en HTML con color de fondo utilizando un div tag


  
<div style="background: rgb(217, 217, 217) none repeat scroll 0% 0%;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;"><span style="font-size:85%;
"><pre><span style="font-weight: normal; color: rgb(0, 0, 0);font
-family:courier new;font-size:130%;" >
C:\> sc create svnserve binpath=
"\"C:\Program Files\Subversion\bin\svnserve.exe\"
--service --root c:\SVNRepoCode" displayname= "Subversion"
depend= tcpip start= auto</span>
</pre></span></div>


El resultado final es el siguiente



C:\> sc create svnserve binpath=
"\"C:\Program Files\Subversion\bin\svnserve.exe\"
--service --root c:\SVNRepoCode" displayname= "Subversion"
depend= tcpip start= auto

Como evitar cerrar y mover un formulario en Delphi

Solo tenemos que capturar los mensajes que se envían de esta manera, y evitar que el formulario actue:




type
TForm1 = class(TForm)
procedure WMNCHitTest(var Msg: TWMNCHitTest); message WM_NCHitTest;
private
{ Private declarations }
public
{ Public declarations }
end;

var
Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.WMNCHitTest(var Msg: TWMNCHitTest);
begin
inherited;
if Msg.Result = htClose then Msg.Result := 0;
if Msg.Result = htCaption then Msg.Result := htClient;
end;

Sunday, 12 October 2008

Instalar i manejar un sistema de control de versiones con Subversion, TortoiseSVN y Redmine en Windows Vista (Parte IV)

  • Configurando Redmine:
Ahora que ya disponemos de todas las herramientas y funcionan correctamente, tenemos que configurar nuestros proyectos del subversion en el Redmine. Para eso, nos tenemos que conectar en redmine como usuario administrador, y empezar a linkar nuestro repositorio:

Primero, nos dirigimos a la parte de conexión, y entramos el siguiente usuario:

user : admin
password : admin





Una vez estamos dentro con el usuario administrador, nos dirigimos a la pestaña de administración:



Desde este apartado, podemos configurar nuestros proyectos y conectarlos con nuestro repositorio y configurar usuarios, y otros parámetros.

  • Configurando un proyecto:
Mostraré un ejemplo de un proyecto web que tengo hecho. Primero nos dirigimos a New Project, y añadimos la información referente al proyecto:



Ahora desde la pestaña repository, configuramos en enlace con nuestro repositorio de subversion. En este caso:



Una vez añadido, podemos visualizar todos los ficheros del repositiory y consultar el historial de cambios:



Luego, la actividad del proyecto:



Mientras jugamos con el Redmine, podemos ver como el Webrick va ejecutando acciones:



Espero que haya sido de ayuda. Más información en la página de Redmine.

Friday, 10 October 2008

Instalar i manejar un sistema de control de versiones con Subversion, TortoiseSVN y Redmine en Windows Vista (Parte III)

Una vez disponemos de nuestros proyectos activados y subversionados con el subversion y hemos cogido soltura utilizando el TortoiseSVN, podemos configurar y arrancar el Redmine en local (Lo de hacerlo público lo explicaré otro dia, para poder trabajar en grupo).

Para poder configurarlo, necesitamos la última versión de Redmine, la última versión de Ruby y la última versión de MySQL.

Podemos encontrarlos aquí:
Remine 0.7.3. (Descarga directa aquí).
Ruby on Rails 1.8.4. (Descarga directa aquí).
MySQL 5.0. (Descarga directa aquí. También podemos utilizar Postgree o SQLite).

Una vez instaladas todas las aplicaciones sin problemas, continuamos con la configuración.

  • Configurando MySQL:
Primero debemos crear la tabla para el Redmine. Desde el MySQL Command Line Client:


create database redmine character set utf8;


Una vez creada la tabla, hay que ir a la ruta del Redmine, y copiar el fichero:



config\database.yml.example -> config\database.yml

Luego dentro del fichero .yml, configurar la parte:


production:
adapter: mysql
database: redmine
host: localhost
username: bduser
password: bdpasswd

por esta :

(Configuración personal):


# MySQL (default setup). Versions 4.1 and 5.0 are recommended.
#
# Get the fast C bindings:
# gem install mysql
# (on OS X: gem install mysql -- --include=/usr/local/lib)
# And be sure to use new-style password hashing:
# http://dev.mysql.com/doc/refman/5.0/en/old-client.html

production:
adapter: mysql
database: redmine
host: localhost
username: root
password: 1234
encoding: utf8

development:
adapter: mysql
database: redmine_development
host: localhost
username: root
password: 1234
encoding: utf8

test:
adapter: mysql
database: redmine_test
host: localhost
username: root
password: 1234
encoding: utf8

test_pgsql:
adapter: postgresql
database: redmine_test
host: localhost
username: postgres
password: "postgres"

test_sqlite3:
adapter: sqlite3
dbfile: db/test.db

demo:
adapter: sqlite3
dbfile: db/demo.db

  • Creando la estructura con Ruby:
Comprobamos que realmente la variable de entorno %PATH%, contiene la ruta de Ruby. Luego si tenemos visibilidad de sus binarios desde la C:\ podemos hacer:


rake db:migrate RAILS_ENV="production"


Esto creará las tablas y los usuarios dentro del MySQL.
Ahora solo falta añadir los parámetros de configuración, con la siguiente instruccion:


rake redmine:load_default_data RAILS_ENV="production"

Una vez hecho todo esto, ya podemos empezar a usar Redmine.

  • Mostrando resultados de MySQL:
Una vez hemos creado BD de redmine, y sus tablas, podemos comprobar que todo se ha creado, consultandolo en el MySQL Command Line Client, por lo tanto una vez arrancado entramos en password del MySQL (En este caso "1234"):



Hacemos un uses de la BD de redmine, para conectarnos a esta.

MySQL> use Remine;

Una vez conectados, podemos hacer que nos muestre todas la tablas con un show tables:

MySQL>show tables;



  • Arrancando Redmine:
Para arrancarlo, podemos hacer un pequeño script, que contenga la siguiente línea:


ruby script/server -e production


Yo tengo hecho un pequeño script llamado webrick.cmd que contiene:


c:\ruby\bin\ruby script/server -e production


Esto ejecutará la aplicación que gestiona la web del Redmine. Una vez esté rodando, podemos acceder a la web mediante la ruta siguiente:

http://localhost:3000/.

Desde aquí accederemos a la página principal del Redmine, y podremos configurar nuestro repositiorio para que aparezca. Podremos utilizar el Scheduler, la Wiki, y todas sus herramientas.

Una vez arrancamos el Script, nos aparece:



Ahora ya podemos acceder a la web localhost:3000 para poder visualizar el Redmine:



Ahora ya podemos empezar a disfrutar de Redmine.
más información en Redmine.

Thursday, 9 October 2008

Instalar i manejar un sistema de control de versiones con Subversion, TortoiseSVN y Redmine en Windows Vista (Parte II)

Una vez tengamos instalado el servicio, lo podemos comprobar desde el administrador de tareas o el administrador de servicios:



Desde la opción de servicios, lo podemos buscar y consultar su configuración:




  • Configurando el Repositorio:
Una vez tenemos todo el software instalado y el servicio arrancado, podemos empezar a configurar nuestro repositorio. En nuestro caso, dispongo de unos cuantos proyectos Delphi y un par de páginas web para mostrar. La mejor organización de las carpetas la tenéis que decidir vosotros, hay muchos enlaces como este, donde indican como manejar las versiones, branches, etc, para que podamos desarrollar mejor la versiones.
En mi caso, solo creo una carpeta por proyecto y solo sigue una rama de desarrollo.

Para abrir el repositorio, nos vamos a la carpeta C:\SVNRepo\Code y allí hacemos botón derecho y abrimos el Repo-Browser.



Una vez abierto, podemos examinar los proyectos que tenemos y crear nuevas carpetas para ubicar nuestros nuevos proyectos:



También lo que se puede hacer, es crear la carpeta, y desde el menú contextual de windows subir esa carpeta como proyecto al Subversion. Pero yo prefiero hacerlo de la otra manera.

Desde el Repo-Browser, podemos examinar nuestros ficheros y ver su historial de cambios y revisiones, por ejemplo:



También podemos ver las estadísticas de actualizaciones:



Luego desde la carpeta de windows, podemos ver si el proyecto esta actualizado o no, y se muestra de la siguiente manera:



Si se modifica alguno de los ficheros, el servicio lo reconoce, y nos lo marca como modificado y hay que actualizarlo:



Desde el mismo menú contextual, nos aparece el menú de TortoiseSVN, y nos permite hacer las operaciones de update, Commit y Add. De esta manera podremos deshacer cambios, actualizar cambios y añadir ficheros nuevos.



También podemos comparar diferentes ficheros y visualizar las diferencias, en este caso he hecho servir Araxis Merge, pero podemos hacer servir el que lleva el TortoiseSVN o utilizar por ejemplo el WinMerge que es gratuito.





Wednesday, 8 October 2008

Instalar i manejar un sistema de control de versiones con Subversion, TortoiseSVN y Redmine en Windows Vista (Parte I)

  • Configuración del Subversion en Windows Vista.
Des de la página principal de Subversion, podemos encontrar los binarios para instarlos en nuestro sistema.
  • Descargar Subversion:

Desde este enlace, podremos descargar el último release de Subversion en función de la versión que tengamos instalada de Apache. En el caso de que no tengamos instalado ningun servidor de apache, descargar cualquier de los 2 ficheros, ya que estos disponen de los bindings para apache.

Sin Apache : Subversion_1.5.1.en

Con Apache : Subversion_1.5.2.win32.py2.5

Si no funciona ninguno de los enlaces anteriores probar directamente con este:
Descargas Windows.


  • Instalando Subversion:


Hacemos click en Next, hasta finalizar la instalación.

  • Instalar TortoiseSVN:



Podemos descargar la aplicación desde el siguiente link: TortoiseSVN.



La instalación, al igual que subversion es bastante senzilla, y solo hay que seguir las instrucciones del asistente de instalación.



Una vez instalada la aplicación, nos aparecerá en el menú de programas TortoiseSVN:



  • Configurando el Repositorio:

Una vez tenemos descargadas las aplicaciones anteriores, podemos empezar a configurar el repositorio donde tendremos nuestro código u otros documentos. Por lo tanto, crearemos la carpeta C:\SVNRepo y dentro de esta, crearemos el repositorio llamado "Code".

Para crear este repositorio, solo hay que utilizar las herramientas de las que dispone Subversion, desde el svnadmin:



Una vez creado el repositorio, obtendremos una estructura de este tipo creada por el Subversion:



PD : Sobretodo, hay que tener bien configuradas la variables de entorno y comprobar que en la variable de entorno %PATH%, podemos ver correctamente la ruta del Subversion, sinó no podremos ejecutar svnadmin.

  • Comprovaciones prévias antes de continuar:
Subversion, dispone de un servicio que es el que tendremos que poner en marcha, y se encargará ir comprovando las versiones, etc. Hay que comprobar que la versión de la aplicación corresponde con la aplicación del servicio o que no es una versión anterior, ya que sinó se configura de manera diferente.

Desde C:\Program Files\Subversion\bin, ejecutamos las aplicaciones svn y svnserve con el parámetro --version:





Podemos comprobar que la versión es la 1.5.1 en las 2 aplicaciones.

  • Instalando el servicio de Subversion:
Una vez las comprobaciones anteriores funcionan correctamente, y la aplicacion está correctamente instalada, copiamos los siguientes archivos en una carpeta en la C:\ por ejemplo:
C:\SVNServe\

Por lo tanto, desde C:\Program Files\Subversion\bin, copiaremos los siguientes archivos en C:\SVNServe:


  • Activando el servicio SVNServe:

Para activar al servicio de Subversion que hemos copiado dentro de la carpeta C:\SVNServe, tenemos que hacer:
Desde el Command de windows (cmd):


C:\>sc create svnserve binpath=
"c:\SVNserve\svnserve.exe
--service --root c:\SVNRepo\Code" displayname=
"Subversion" depend= tcpip start= auto



Si lo queremos llamar desde C:\Program Files\Subversion\Bin, sin tener que copiarlo en una carpeta a parte en la C:\, hay que hacer la llamada un poco diferente, ya que hay espacios entre las palabras y hay que ubicarlos entre \" y "/:


C:\>sc create svnserve binpath=
"\"C:\Program Files\Subversion\bin\svnserve.exe\"
--service --root c:\SVNRepo\Code" displayname=
"Subversion" depend= tcpip start= auto



Para añadir una descripción al servicio, y que lo podamos visualizar desde el Administrador de tareas de windows o el servicio de tareas, podemos hacer:


C:\>sc description svnserve
"Servicio Subversion Server (SVNserve)"



Más información en : Ayuda SVNServe.

Sunday, 5 October 2008

D-Link DNS-323

Por fin!, ya tengo instalado mi NAS (Network attached Storage), es un servidor dedicado, para poder disponer de todos mis recursos en red (Documentos, programas, música, etc.).
Es muy fácil de configurar, ya que dispone de un Sistema Server fácilmente accesible via FTP o web. Dispone de 2 bahías para ubicar 2 discos de hasta 750 Gb (Serial ATA). Permite múltiples configuraciones tipo RAID, para que haga copias automáticas de tus ficheros mediante mirroring. También dispone de una herramienta Memeo Autobackup, que permite gestionar las copias de seguridad de tu sistema. La verdad es que es una buena compra. Lo integras en tu red local, y el aparato es visible desde cualquier punto, además dispone de un servidor de impresión donde puedes conectar la impresora, para que todo el mundo pueda imprimir.
Podéis encontrar más información aquí : D-link DNS-323
Información referente al funcionamiento : DNS-323 Wiki.