16 replies to this topic

[enecumene]

Pues eso, quisiera pedirles a los expertos de este tema, ¿Cómo se manejan las imágenes al estilo del reproductor Winamp?, me refiero, siempre veo que en las pieles del reproductor siempre veo dos imágenes iguales, uno negro y el otro con su diseño, me imagino que se superponen, pero no sé cómo se maneja eso, y la otra es que veo que los botones y demanes estan siempre en un sólo archivo todo junto, ¿cómo se determina la posición y centralización de esas imágenes?, bueno sé que ando pidiendo mucho, así que es mejor ir por partes .

Abro este hilo como modo de aprendizaje, ya que es una curiosidad que me persiste hace tiempo y no hay información congruente en la red, así que espero sus comentarios.

Saludos.

[escafandra]

Yo no soy ningún experto en el tema pero si te puedo decir alguna cosa. No se como lo hace Winamp pero analizando programas con pieles te puedo decir que su frontal no tiene o tiene muy pocos controles. Es decir, cada control clásico en windows es una ventana, en estas aplicaciones no aparecen mas que la ventana del frame.  Te iba a decir que jugaras con la pequeña utilidad que hice WinInfo y que colgué en la zona de descargas, pero ahora no aparece dicha zona. Si te interesa la subo.

Bueno, no es fácil el tema y se puede hacer de muchas formas. Básicamente se trata de usar un bitmap para representar la carátula y controles. Sobre ese bitmap se realiza una máscara bicolor o bien puede ser dada en otro bitmap. Esta máscara se usa para crear regiones. Una región en windows es una zona de una ventana que es sensible a entradas y pintado de la misma. Generalmente corresponde a todo el área de la ventana, pero podemos restringirlo. Es decir, todo lo que no se incluya en la región, es como si no perteneciese de la ventana. Así podemos usar imágenes de contornos caprichosos.

Ahora el truco está en dibujar bitmaps y regiones. La aplicación no puede ser diseñada con los controles clásicos, por lo que debemos establecer un sistema de localización de zonas sensibles del ratón, capturando sus mensajes y analizando en que región o zona de la misma está.

Una forma mas sencilla, pero menos elástica, sería diseñar nuestros controles derivados de los propios de windows, como el ejemplo que publiqué en el foro platino, SkinButton. Aquí uso bitmaps y regiones para crear el efecto. Con esta técnica es mas fácil trabajar después, ya que lo haremos como siempre, la desventaja está en que el usuario final tendrá menos plasticidad en los Skins.

Por último, te dejo un enlace donde explican un poco el tema de regiones y bitmap. Se pueden encontrar otros muchos en la Red.

Otra posibilidad es usar sistemas o controles Skin comerciales.


Saludos.

[escafandra]

Con la finalidad de ilustrar un poco el tema y realizar el ejercicio práctico, he preparado un pequeño ejemplo.

La filosofía empleada es la que expliqué arriba, usando Bitmap, máscara y regiones. En este ejemplo utilizo un Bitmap simple que sirve de Skin y de máscara al mismo tiempo.

El corazón es la función CreateBitmapRgn. Esta función que he implementado consigue una región a partir de un bitmap. la definición es la siguiente:

delphi

function CreateBitmapRgn(hbmp: HBITMAP; Color: COLORREF; Tr: boolean): HRGN;

hbmp: Es el bitmap a partir del que vamos a obtener una región.
Color: Es el color que va a definir la región dependiendo del valor de Tr.
Tr: Modifica el funcionamiento. Si Tr es true, Color se considerará que será transparente, en caso contrario, Color será opaco y todo lo demás transparente.

En el ejemplo aparece un Form presonalizado con un Skin y un botón para cerrar, nada mas.
La API PtInRegion nos localiza si pulsamos el botón.

Espero que te sirva de ayuda.


Saludos.
 

Attached Files

•  SkinForm delphi.rar   4.15KB   11 downloads

[escafandra]

He ahondado un poco mas en este tema y he preparado un ejemplo mas complejo.

La mecánica es preparar un formulario con los botones y su funcionalidad como haríamos normalmente. Se añade TImage que hará el Skin.

Partimos de tres bitmaps. Uno con el skin dibujado con los botones en reposo, otro con los botones pulsados y un tercero con máscaras de colores, un color por cada botón. Este último va a representar la zona sensible del ratón.

Creamos una región para todo el Skin que será la representación del formulario. Cada botón tendrá su región extraída de su máscara, aquí se asocia cada TButton con su "botón skin", la región la guardamos en la propiedad tag del TButton.

Solo queda pintar el bitmap pulsado en la región correspondiente cada vez que se pulsa un "Botón skin" o dibujar el estado de reposo al soltarlo.

Las acciones de cada botón se simulan llamando al evento OnClick correspondiente.


El diseño del formulario.



El skin en reposo y tras pulsar la tecla "PLAY"


Saludos.

Attached Files

•  SkinForm.rar   255.15KB   15 downloads

Edited by escafandra, 10 May 2015 - 10:10 AM.
Subo enlace roto, la última versión backup que encontré

[Caral]

Hola
Muy bueno, alucinante.
Me he quedado 
Impresionante Maestro.
Saludos

[seoane]

Impresionante 

[felipe]

No se cual será el problema con Imageshack, pero ya no deja ver imágenes para esta zona
solo aparece esta rana congelada:





Saludos!

[escafandra]

Gracias a vosotros por tanto elogio...

En realidad el diseño gráfico lo tomé prestado, sólo le hice algunos cambios para adaptarlo a lo que quería. La filosofía y el código funcionan perfectamente.

El ejemplo sólo usa botones, pero se puede extender a otros controles como Edits y barras de progreso usando semitransparecias o algún truco por el estilo. Para los TrackBar habrá que usar algún invento diferente... La imaginación es libre.

Todo está en el código que subí, pero para los que sólo vean la ranita, subo las imágenes al foro.
 


Saludos.

Attached Files

•  2341_aa7d18c53abc330affbb10587da5796dd4362fb7.jpg   181.79KB   9 downloads
•  2339_83ef065e988e768287aa21ce1738a0fc4cd53948.jpg   47.67KB   7 downloads

[enecumene]

Ah caray desde mi oficina no he podido descargar los fuentes, los enlaces de descargas están bloqueadas 

[escafandra]

Ah caray desde mi oficina no he podido descargar los fuentes, los enlaces de descargas están bloqueadas 

¿Quieres que te los envíe por correo? o ¿puedes desde casa? 

Saludos.

[enecumene]

Por correo amigo, en casa no tengo acceso aún y gracias por tomarse el tiempo en este asunto .

Saludos.

[escafandra]

Listo, ya te lo he mandado. 

Saludos.

[andres1569]

Flipante y alucinante  , Escafandra, qué manera de cambiarle a la cara a ese formulario lleno de botones clásicos 

[Wilson]

Muy buen trabajo Escafandra.  Gracias por compartir. 

[escafandra]

Gracias a vosotros.

He realizado algunas mejoras jugando con esta prueba de concepto:

1. Tipo de gráficos usado que ahora es png, mas ligero que el bmp (con el mismo código podría usarse otros formatos) .
2. Universalización en la creación de regiones desde un HBITMAP.
3. Automatización en la asignación de los eventos OnClick de los Botones.

Subo los nuevos archivos.


Saludos.

Attached Files

•  SkinForm.rar   255.15KB   13 downloads

[escafandra]

Tras una petición de adaptar el código a Berlin / Tokio publico la adaptación que solo varía en la función CreateHBITMAPFromFile debido al uso de UNICODE del que delphi7 carecía, estando escrito el código original para esa versión de delphi.

 

La función queda como sigue:

delphi

function CreateHBITMAPFromFile(FileName: PCHAR): HBITMAP;
var
  gdiplusToken: DWORD;
  GdiPlusStartupInput: array[0..2] of int64;
  GBitmap: THANDLE;
 
begin
  Result:= 0;
  // Initialize GDI+.
  GdiPlusStartupInput[0]:= 1; GdiPlusStartupInput[1]:= 0;
  if GdiplusStartup(gdiplusToken, @GdiPlusStartupInput, nil) = 0 then
  begin
    GdipCreateBitmapFromFile(FileName, GBitmap);
    GdipCreateHBITMAPFromBitmap(GBitmap, Result, 0);
 
    //shutdown GDI+
    GdiplusShutdown(gdiplusToken);
  end;
end;

Subo el proyecto completo.

 

 

Saludos.

Attached Files

•  SkinForm Berlin.rar   784.03KB   8 downloads

[egostar]

Se ve genial, gracias por compartir amigo.

 

Saludos