Ir al contenido



Foto

Manejo de imágenes Bitmap estilo Winamp


  • Por favor identifícate para responder
16 respuestas en este tema

#1 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.409 mensajes
  • LocationRepública Dominicana

Escrito 29 marzo 2011 - 09:07

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 :D.

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.
  • 0

#2 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 29 marzo 2011 - 11:19

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.


  • 0

#3 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 30 marzo 2011 - 08:41

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
  1. 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.
 

Archivos adjuntos


  • 0

#4 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 01 abril 2011 - 12:59

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.

post-175-14275693556543.jpg
El diseño del formulario.


post-175-14275693556797.jpg
El skin en reposo y tras pulsar la tecla "PLAY"


Saludos.

Archivos adjuntos


Editado por escafandra, 10 mayo 2015 - 10:10 .
Subo enlace roto, la última versión backup que encontré

  • 1

#5 Caral

Caral

    Advanced Member

  • Administrador
  • 4.241 mensajes
  • LocationCosta Rica

Escrito 01 abril 2011 - 01:16

Hola
Muy bueno, alucinante. (y) (y) (y)
Me he quedado  :|
Impresionante Maestro. (b)
Saludos
  • 0

#6 seoane

seoane

    Advanced Member

  • Administrador
  • 1.249 mensajes
  • LocationEspaña

Escrito 01 abril 2011 - 01:41

Impresionante  (y)
  • 0

#7 felipe

felipe

    Advanced Member

  • Administrador
  • 3.283 mensajes
  • LocationColombia

Escrito 01 abril 2011 - 03:20

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

Imagen Enviada



Saludos!
  • 0

#8 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 01 abril 2011 - 03:38

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.

Archivos adjuntos


  • 0

#9 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.409 mensajes
  • LocationRepública Dominicana

Escrito 04 abril 2011 - 06:09

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

#10 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 04 abril 2011 - 06:30

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.
  • 0

#11 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.409 mensajes
  • LocationRepública Dominicana

Escrito 04 abril 2011 - 06:34

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

Saludos.
  • 0

#12 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 04 abril 2011 - 07:01

Listo, ya te lo he mandado.  :)

Saludos.
  • 0

#13 andres1569

andres1569

    Advanced Member

  • Miembro Platino
  • PipPipPip
  • 431 mensajes

Escrito 05 abril 2011 - 11:59

Flipante y alucinante  :| , Escafandra, qué manera de cambiarle a la cara a ese formulario lleno de botones clásicos  (y) (y) (y)
  • 0

#14 Wilson

Wilson

    Advanced Member

  • Moderadores
  • PipPipPip
  • 2.137 mensajes

Escrito 05 abril 2011 - 05:31

Muy buen trabajo Escafandra.  Gracias por compartir.  (y) (y) (y)
  • 0

#15 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 07 abril 2011 - 04:54

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.

Archivos adjuntos


  • 0

#16 escafandra

escafandra

    Advanced Member

  • Moderadores
  • PipPipPip
  • 3.878 mensajes
  • LocationMadrid - España

Escrito 23 noviembre 2018 - 05:31

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
  1. function CreateHBITMAPFromFile(FileName: PCHAR): HBITMAP;
  2. var
  3. gdiplusToken: DWORD;
  4. GdiPlusStartupInput: array[0..2] of int64;
  5. GBitmap: THANDLE;
  6.  
  7. begin
  8. Result:= 0;
  9. // Initialize GDI+.
  10. GdiPlusStartupInput[0]:= 1; GdiPlusStartupInput[1]:= 0;
  11. if GdiplusStartup(gdiplusToken, @GdiPlusStartupInput, nil) = 0 then
  12. begin
  13. GdipCreateBitmapFromFile(FileName, GBitmap);
  14. GdipCreateHBITMAPFromBitmap(GBitmap, Result, 0);
  15.  
  16. //shutdown GDI+
  17. GdiplusShutdown(gdiplusToken);
  18. end;
  19. end;

Subo el proyecto completo.

 

 

Saludos.

Archivos adjuntos


  • 2

#17 egostar

egostar

    missing my father, I love my mother.

  • Administrador
  • 14.019 mensajes
  • LocationMéxico

Escrito 23 noviembre 2018 - 06:21

Se ve genial, gracias por compartir amigo.

 

Saludos


  • 0