PalBmpDraw transparent on main window with gradient

[reinaldocrespo]

Hi everyone;

I'd like to draw a transparent bmp from resource on one of my dialogs. The dialog is already being painted with a gradient. This is my code:

Code: Select all  Expand view  RUN

...
   ADD GROUP oG1 RIBBON oApp():oRibbon TO OPTION 1 PROMPT "Information" width 105

   @ 08, 05  ADD BUTTON b1 GROUP oG1 BITMAP "Chart32" SIZE 40, 40 MOSTLEFT ROUND
   b1:cToolTip := "Status Charts"

   @ 08, 55  ADD BUTTON b1 GROUP oG1 BITMAP "News32" SIZE 40, 40 MOSTLEFT ROUND
   b1:cToolTip := "News"

   DEFINE DIALOG ::oDlg RESOURCE "presentation" TRANSPARENT

   REDEFINE BITMAP oBmp RESOURCE "MAIN_LOGO" ID 1 OF ::oDlg TRANSPARENT

   ACTIVATE DIALOG ::oDlg NOWAIT VALID ( oSelf:hide(), .F. ) ;
     ON INIT ( oSelf:hide(), oBmp:hide() );
     ON PAINT DlgPaint( hDC, oSelf:oDlg, oBmp )


...
*------------------------------------------------------------------------------
FUNCTION DlgPaint( hDC, oDlg, oBmp, aGrad )

   LOCAL hBrush, aRect := GetClientRect( oDlg:hWnd )
   DEFAULT aGrad := { { 1.0, nRGB( 75, 144, 223 ), nRGB( 41, 85, 145 ) } }

   hBrush := GradientBrush( hDC, 0, 0, aRect[ 4 ] - aRect[ 2 ] + 1,;
                           aRect[ 3 ] - aRect[ 1 ] + 1,;
                           aGrad, .t. )

   FillRect( hDC, aRect, hBrush )
   DeleteObject( hBrush )

   IF oBmp != NIL
      PalBmpDraw( hDc, ( oDlg:nHeight() / 2 ) - ( oBmp:nHeight() / 2 ),;
                     ( oDlg:nWidth() / 2 )  - ( oBmp:nWidth() / 2 ),;
                     oBmp:hBitmap, oBmp:hPalette,,,,.T.,oDlg:nClrPane)
     
      oBmp:End()

   ENDIF

RETURN NIL
 

This is the dlg on the resource:

Code: Select all  Expand view  RUN

PRESENTATION DIALOG 0, 0, 105, 0
STYLE DS_3DLOOK |DS_SETFONT |WS_CHILD
FONT 8, "MS Sans Serif"
LANGUAGE LANG_NEUTRAL, 0
BEGIN
  CONTROL "TBitMap",1,"TBitMap",WS_CHILD |WS_VISIBLE ,1,8,347,94
END
 

The bmp is drawn allright, but not transparent. I don't know how to make it transparent. Here is how it looks:


Can someone help?


Reinaldo.

[Rick Lipkin]

Reinaldo

I have tried what you are attempting to do .. I do not think ( unless something has changed ) you can draw a bitmap over just a gradient .. I think you have to use a brush as your background then paint your bitmap transparent over that ??

I am not near my computer at the moment .. there is a sample that uses alpha bitmaps

ON PAINT (ABPaint( hDC,700,400, oBmpAlpha:hBitmap, 255 );

I do not think you can get transparent from a single layer bitmap .. perhaps some of the new .png stuff ?? ( haven't had a chance to look at that yet)

I will be watching this thread with interest.

Rick Lipkin

[ukoenig]

Rick,

ABPaint works fine.
Be sure, You are using a Alphablended BMP.
Using Resource-Workshop, You cannot save this Format inside a Resource.
The BMP must be loaded from Disk.



Best Regards
Uwe

[reinaldocrespo]

Uwe;

Hi.

Perhaps you can give me an idea how to show an alpha blended png from disk on a gradient dialog?

Here is my code (not showing anything when using an alpha blended png):

Code: Select all  Expand view  RUN

   DEFINE DIALOG ::oDlg RESOURCE "presentacion" TRANSPARENT

   REDEFINE BITMAP oBmp FILE "PathLabs_Logo.png" ID 1 OF ::oDlg TRANSPARENT

   ACTIVATE DIALOG ::oDlg NOWAIT ;
     ON PAINT DlgPaint( hDC, oSelf:oDlg, oBmp )

*------------------------------------------------------------------------------
FUNCTION DlgPaint( hDC, oDlg, oBmp, aGrad )
   LOCAL hBrush, aRect := GetClientRect( oDlg:hWnd )
   DEFAULT aGrad := { { 1.0, nRGB( 75, 144, 223 ), nRGB( 41, 85, 145 ) } }

   hBrush := GradientBrush( hDC, 0, 0, aRect[ 4 ] - aRect[ 2 ] + 1,;
                           aRect[ 3 ] - aRect[ 1 ] + 1,;
                           aGrad, .t. )

   FillRect( hDC, aRect, hBrush )
   DeleteObject( hBrush )

   IF oBmp != NIL

      PalBmpDraw( hDc, ( oDlg:nHeight() / 2 ) - ( oBmp:nHeight() / 2 ),;
                     ( oDlg:nWidth() / 2 )  - ( oBmp:nWidth() / 2 ),;
                     oBmp:hBitmap, oBmp:hPalette,,,,.T.,oDlg:nClrPane)
     
      oBmp:End()

   ENDIF

RETURN NIL

 

Thank you,


Reinaldo.

[ukoenig]

Reinaldo,

I added some more Tests to Rick*s Sample
A Logo defined inside a Resource and the PNG-file loaded from Disk
is included now ( Dialog with Gradient-bruch ) :

Download ( everything included ) 1.9 MB :
http://www.pflegeplus.com/fw_downloads/rick2.zip

The Logo :
REDEFINE IMAGE oImg1 ID 300 OF oCust FILENAME c_path + "\Images\Logo1.png"
// Perform a Action or Info :
oImg1:bLDblClick := {|| Msgalert( "Logo-Info","Information" ) }

Resource :
CONTROL "", 300, "TImage", 0 | WS_CHILD | WS_VISIBLE, 148, 169, 75, 43



The Resource :



// get Image-size to adjust resource
// --------------------------------------------
DEFINE IMAGE oImage FILE c_path + "\Images\Logo1.png"
nImgHeight := oImage:nHeight
nImgWidth := oImage:nWidth
oImage:End()

REDEFINE IMAGE oImg1 ID 300 OF oCust FILENAME c_path + "\Images\Logo1.png"
...
...
// Keep Image Top / Left-position and Resize Resource

ACTIVATE DIALOG oCust NOWAIT ;
ON INIT ( oImg1:Move( oImage:nTop, oImage:nLeft,nImgWidth, nImgHeight ), ;
oCust:Move( 0, 0 ) ) ;
VALID(!GETKEYSTATE( 27 ))

Best Regards
Uwe

[reinaldocrespo]

Uwe;

Thank your for helping. The problem is that I want to place a bmp or png or jpg (transparently) on a gradient dialog, but the dialog is re-sizeable as the main window is resized. As the dialog is resized, I try to center the image on the dialog and redraw the gradient as the window is resized. Thus, the dialog's gradient (as well as the TImage) is dynamically redrawn. Here's some what of what I'm doing:

Code: Select all  Expand view  RUN

  DEFINE DIALOG ::oDlg RESOURCE "presentacion" TRANSPARENT

   REDEFINE IMAGE oImg ID 1 OF ::oDlg FILENAME "PathLabs_Logo.png" TRANSPARENT

   ACTIVATE DIALOG ::oDlg NOWAIT VALID ( oSelf:hide(), .F. ) ;
     ON INIT ( oSelf:oDlg:hide() );
     ON PAINT ( DlgPaint( hDC, oSelf:oDlg ), ;
                oSelf:PresentationImg( oImg ) )
     
   ::oDlg:hide()

RETURN SELF

//------------------------------------------------------------------------------

METHOD PresentationImg( oImg ) CLASS presentation
   
   oImg:Move( ( ::oDlg:nHeight() / 2 ) - ( oImg:nHeight() / 2 ),;
                     ( ::oDlg:nWidth() / 2 )  - ( oImg:nWidth() / 2 ) )
   
RETURN NIL

*------------------------------------------------------------------------------
FUNCTION DlgPaint( hDC, oDlg, oBmp, aGrad )
   LOCAL hBrush, aRect := GetClientRect( oDlg:hWnd )
   DEFAULT aGrad := { { 1.0, nRGB( 75, 144, 223 ), nRGB( 41, 85, 145 ) } }

   hBrush := GradientBrush( hDC, 0, 0, aRect[ 4 ] - aRect[ 2 ] + 1,;
                           aRect[ 3 ] - aRect[ 1 ] + 1,;
                           aGrad, .t. )

   FillRect( hDC, aRect, hBrush )
   DeleteObject( hBrush )
   
   IF oBmp != NIL

      PalBmpDraw( hDc, ( oDlg:nHeight() / 2 ) - ( oBmp:nHeight() / 2 ),;
                     ( oDlg:nWidth() / 2 )  - ( oBmp:nWidth() / 2 ),;
                     oBmp:hBitmap, oBmp:hPalette,,,,.T.,oDlg:nClrPane)
     
      oBmp:End()

   ENDIF

RETURN NIL

 

And here is how the Image looks on the gradient -resizeable- dialog:


I would really love to paint this img transparently. Maybe it is not possible to draw a transparent alpha blended png (or bmp) on a gradient dialog that redraws dynamically as it is resized?


Reinaldo.

[ukoenig]

Reinaldo,
can You change the Gradient Painting-part for transparent painting like ?

hDC = CreateCompatibleDC( oDlg:GetDC() )
hBmp = CreateCompatibleBitMap( oDlg:hDC, 378, 506 ) // Width, Height
hBmpOld = SelectObject( hDC, hBmp )
GradientFill( hDC, 0, 0, 506, 378, aGrad, .T. ) // Height, Width
DeleteObject( oDlg:oBrush:hBrush )
oBrush := TBrush():New( ,,,, hBmp )
oBrush:Cargo := aGrad
SelectObject( hDC, hBmpOld )
ReleaseDC(hDC)

oDlg:SetBrush( oBrush )
oBrush:End()

Best Regards
Uwe

[reinaldocrespo]

Owe;

Sure I can try it. With this code, the system becomes unstable. But that might be due to other things I have to find out. I created a self contained sample using your code. The image is not painting. Here is that code:

Code: Select all  Expand view  RUN

#include "fivewin.ch"

STATIC oWnd, oDlg, oImg

FUNCTION MAIN()
   LOCAL x :=  GetSysMetrics( 0 ), y := GetSysMetrics( 1 ), xi, yi
   
   IF x > 1024

      x := 1024
      y := 780

      xi := INT( x * 0.10 / 2 )
      yi := INT( y * 0.10 / 2 )
      x  := INT( x * 0.90 ) + xi
      y  := INT( y * 0.90 ) + yi

   ELSE

      xi := INT( x * 0.0 / 2 )
      yi := INT( y * 0.0 / 2 )
      x  := INT( x * 1.00 ) + xi
      y  := INT( y * 1.00 ) + yi

   ENDIF

   DEFINE WINDOW oWnd  FROM yi, xi TO y, x PIXEL
   oWnd:bResized := {|| Resize() }

   ACTIVATE WINDOW oWnd ON INIT DefDlg()
   oDlg:Show()

RETURN NIL

//------------------------------------------------------------------------------
STATIC FUNCTION DefDlg()

   DEFINE DIALOG oDlg RESOURCE "presentacion" TRANSPARENT OF oWnd
   REDEFINE IMAGE oImg ID 1 OF oDlg FILENAME "PathLabs_Logo.png" TRANSPARENT
   ACTIVATE DIALOG oDlg NOWAIT ON INIT ( oDlg:hide() ) ON PAINT dlgPaint_test()

RETURN NIL

//------------------------------------------------------------------------------
STATIC FUNCTION Resize()
LOCAL aClient := GetClientRect ( oWnd:hWnd ), i
LOCAL nWidth  := aClient[4]
LOCAL nHeight := aClient[3]

   IF oDlg != NIL
   
      oDlg:SetSize( nWidth, nHeight, .T. )
      oDlg:Move( aClient[ 1 ], 0 )

      PresentationImg()

   ENDIF
   
RETURN NIL

//------------------------------------------------------------------------------

STATIC FUNCTION PresentationImg()
   
   oImg:Move( ( oDlg:nHeight() / 2 ) - ( oImg:nHeight() / 2 ),;
                     ( oDlg:nWidth() / 2 )  - ( oImg:nWidth() / 2 ) )
     
RETURN NIL


//------------------------------------------------------------------------------
STATIC FUNCTION DlgPaint_test()
   LOCAL nColor1 := nRGB( 75, 144, 223 )
   LOCAL nColor2 := nRGB( 41, 85, 145 )
   LOCAL hDC, hBmp, hBmpOld, oBrush
   LOCAL aGrad := { { 1.0, nColor1, nColor2 } }

    hDC = CreateCompatibleDC( oDlg:GetDC() )
    hBmp = CreateCompatibleBitMap( oDlg:hDC, oDlg:nWidth, oDlg:nHeight )
    hBmpOld = SelectObject( hDC, hBmp )
    GradientFill( hDC, 0, 0, oDlg:nHeight, oDlg:nWidth, aGrad, .T. )
    DeleteObject( oDlg:oBrush:hBrush )
    oBrush := TBrush():New( ,,,, hBmp )
    oBrush:Cargo  := aGrad
    SelectObject( hDC, hBmpOld )
    ReleaseDC(hDC)

   oDlg:SetBrush( oBrush )

   oBrush:End()

RETURN( NIL )

The .rc

Code: Select all  Expand view  RUN

PRESENTACION DIALOG 0, 0, 105, 0
STYLE DS_3DLOOK |DS_SETFONT |WS_CHILD
FONT 8, "MS Sans Serif"
LANGUAGE LANG_NEUTRAL, 0
BEGIN
  CONTROL "",1,"TImage",WS_CHILD |WS_VISIBLE ,3,3,323,100
END
 

I'm not sure why the .Png is not painting. You can see it flash when you resize the window, but it disappears. Perhaps you can figure that out?


Thank you,


Reinaldo.

[ukoenig]

Reinaldo,

I got it working using any brush like Color, Gradient, Bmp-brush and Image.
The Logo is shown transparent and centered.
Resizing and the Logo will reach the Dialog-control-erea, will cover Controls ( Logo on Top )
It doesn't matter, or Controls needed on Top ( Logo covered ) ?
I still have to include a Ribbonbar to test.





Best Regards
Uwe

[reinaldocrespo]

Uwe;

Can you try to do so using the sample self-contained code I posted?


Reinaldo.

[ukoenig]

Reinaldo,

added Ribbonbar. Window resized with centered Logo :



Check Your Image-path and Resource ID !!!

Code: Select all  Expand view  RUN

#INCLUDE "FIVEWIN.CH"
#INCLUDE "IMAGE.CH"
#INCLUDE "RIBBON.CH"

STATIC oWnd,oDlg, oImg, oRBar, oBrush
STATIC nDStyle, nDColorF, nDColorB, nDGradPos, lDDirect, cDBrush, cDImage, nDTcolor

FUNCTION MAIN()
LOCAL x :=  GetSysMetrics( 0 ), y := GetSysMetrics( 1 ), xi, yi

c_path := GETCURDIR() // only in new FWH !!!

// change Path-define in older FWH-versions to :
// c_path := CURDRIVE() + ":\" + GETCURDIR()


// these lines defines the global Gradient ( < SetDlgGradient > not in older FWH-versions )
// and disables the defined Brushes !!!
// -----------------------------------------------------
//SetDlgGradient( { { .50, nRGB( 201, 217, 237 ), nRGB( 231, 242, 255 ) } } )
//SysReFresh()

nDColorF := 16772313
nDColorB := 16760962
nDGradPos := 0.1
lDDirect := .T.
cDBrush := "BluStone.Bmp"
cDImage := "Beach.Jpg"
nDTColor := 0

cTITLE := "Customer Maintenance"

IF x > 1024

      x := 1024
      y := 780

      xi := INT( x * 0.10 / 2 )
      yi := INT( y * 0.10 / 2 )
      x  := INT( x * 0.90 ) + xi
      y  := INT( y * 0.90 ) + yi

ELSE

      xi := INT( x * 0.0 / 2 )
      yi := INT( y * 0.0 / 2 )
      x  := INT( x * 1.00 ) + xi
      y  := INT( y * 1.00 ) + yi

ENDIF

DEFINE WINDOW oWnd  FROM yi, xi TO y, x PIXEL TITLE cTITLE BRUSH oBrush
oWnd:bResized := {|| Resize() }

DEFINE RIBBONBAR oRBar PROMPT "Tab 01", "Tab 02", "Tab 03" OF oWnd;
HEIGHT 100 TOPMARGIN 25

ACTIVATE WINDOW oWnd ON INIT Def_Dlg()
oDlg:Show()

RETURN( NIL )

// ------------------

FUNCTION DEF_DLG()

// 1 = Color
// 2 = Gradient
// 3 = BMP-brush
// 4 = Image

nDStyle := 2

DEFINE DIALOG oDlg RESOURCE "PRESENTACION" OF oWnd TRANSPARENT

D_BACKGRD( oDlg, nDStyle, lDDirect, nDColorF, nDColorB, nDGradPos, cDBrush, cDImage )

REDEFINE IMAGE oImg ID 300 OF oDlg FILENAME c_path + "\Images\Logo5.png"
oImg:bLDblClick := {|| Msgalert( "Logo-Info","Information" ) }

ACTIVATE DIALOG oDlg  NOWAIT ;
ON INIT oDlg:hide()

RETURN ( NIL )

//------------------------------------------------------------------------------

STATIC FUNCTION Resize()
LOCAL aClient := GetClientRect ( oWnd:hWnd ), i
LOCAL nWidth  := aClient[4]
LOCAL nHeight := aClient[3]

IF oDlg != NIL
      oDlg:SetSize( nWidth, nHeight, .T. )
      oDlg:Move( aClient[ 1 ], 0 )
      PresentationImg()
ENDIF
   
RETURN NIL

//------------------------------------------------------------------------------

STATIC FUNCTION PresentationImg()

// adjusted to Ribbonbar ( 50 )
// ---------------------------------   
oImg:Move( 50 + ( oDlg:nHeight() / 2 ) - ( oImg:nHeight() / 2 ) ,;
                    ( oDlg:nWidth() / 2 )  - ( oImg:nWidth() / 2 ) )
     
RETURN NIL

// --------  DIALOG - Background ---------------

FUNCTION D_BACKGRD( oDlg, nStyle, lDirect, nColor1, nColor2, nMove, cBrush, cImage )
local oBrush

IF nStyle = 1 // COLOR
    DEFINE BRUSH oBrush COLOR nColor1
ENDIF
IF nStyle = 2 // GRADIENT
    aGrad := { { nMove, nColor1, nColor2 }, { nMove, nColor2, nColor1 } }
    hDC = CreateCompatibleDC( oDlg:GetDC() )
    hBmp = CreateCompatibleBitMap( oDlg:hDC, oWnd:nWidth, oWnd:nHeight )
    hBmpOld = SelectObject( hDC, hBmp )
    GradientFill( hDC, 0, 0, oWnd:nHeight, oWnd:nWidth, aGrad, lDirect )
    DeleteObject( oDlg:oBrush:hBrush )
    oBrush := TBrush():New( ,,,, hBmp )
    oBrush:Cargo  := aGrad
    SelectObject( hDC, hBmpOld )
    ReleaseDC(hDC)
ENDIF
IF nStyle = 3 // BMP-BRUSH
    DEFINE BRUSH oBrush FILE c_path + "\Images\" + cBrush
ENDIF
IF nStyle = 4 // Image ADJUSTED
    DEFINE IMAGE oImage FILE c_path + "\Images\" + cImage
    oBrush := TBrush():new( ,,,, ResizeBmp( oImage:hBitmap, oWnd:nWidth, oWnd:nHeight, .T. ) )
    oImage:End()
ENDIF

oDlg:SetBrush ( oBrush )
oBrush:End()

RETURN( NIL )

Best Regards
Uwe

[nageswaragunupudi]

All that is required is to add WS_EX_TRANSPARENT style to the bitmap in the rc file.

[reinaldocrespo]

Uwe;

Hi.

On your sample you are not redrawing the dialog gradient. Instead you have a fixed gradient that does not change as the window is resized. Instead I would like to have dynamic gradient that adjusts as the window is resized. Otherwise the effect may be lost as you can never predict know how small or large the window will be resized to at runtime.

Mr. Rao; I'm afraid that won't help either. Look at my original sample code above to reproduce the problem. You may change the sample code. The objective is to have a gradient that is the same no matter the window size or -resized-. I figure that we should be able to re-draw the gradient as the window is resized, and after that display the transparent image. But that won't work as it seems that you must have the gradient drawn and fixed before redefining the image.

However, thank you both for trying.


Reinaldo.

[Enrico Maria Giordano]

I didn't understand what do you want to achieve. Can you prepare a minimal sample showing the problem? Your previous sample is not clear.

EMG

[reinaldocrespo]

EMG;

Fair enough. You are right. Let's simplify things. Here is a new self contained sample.

Code: Select all  Expand view  RUN

#include "fivewin.ch"

STATIC oWnd, oDlg, oBmp

FUNCTION MAIN()

   DEFINE WINDOW oWnd  FROM 0, 0 TO 480,640 PIXEL
   oWnd:bResized := {|| Resize() }

   ACTIVATE WINDOW oWnd ON INIT DefDlg()
   oDlg:Show()

RETURN NIL

//------------------------------------------------------------------------------
//define a new dialog from resources.  The dialog is child to main window.
//It is drawn with a gradient and an image shown on the center.
//
STATIC FUNCTION DefDlg()

   DEFINE DIALOG oDlg RESOURCE "Dialog" TRANSPARENT OF oWnd
   
   REDEFINE BITMAP oBmp FILENAME "logo.bmp" ID 1 OF oDlg TRANSPARENT

   ACTIVATE DIALOG oDlg NOWAIT ;
      ON INIT ( oDlg:hide(), oBmp:hide() ) ;
      ON PAINT DlgPaint( hDC, oDlg )

RETURN NIL

//------------------------------------------------------------------------------
//draws gradient on dialog and centers the image on the dialog
FUNCTION DlgPaint( hDC, oDlg, aGrad )
   LOCAL hBrush, aRect := GetClientRect( oDlg:hWnd )
   DEFAULT aGrad := { { 1.0, nRGB( 75, 144, 223 ), nRGB( 41, 85, 145 ) } }

   hBrush := GradientBrush( hDC, 0, 0, aRect[ 4 ] - aRect[ 2 ] + 1,;
                           aRect[ 3 ] - aRect[ 1 ] + 1,;
                           aGrad, .t. )

   FillRect( hDC, aRect, hBrush )
   DeleteObject( hBrush )

   IF oBmp != NIL

      PalBmpDraw( hDc, ( oDlg:nHeight() / 2 ) - ( oBmp:nHeight() / 2 ),;
                     ( oDlg:nWidth() / 2 )  - ( oBmp:nWidth() / 2 ),;
                     oBmp:hBitmap, oBmp:hPalette,,,,.T.,oDlg:nClrPane)
     
   ENDIF

RETURN NIL

//------------------------------------------------------------------------------
//When the main window is resized, this func resizes the dialog
//-repainting the gradient and then re-displays
//the bitmap on the center of the dialog.
STATIC FUNCTION Resize()
LOCAL aClient := GetClientRect ( oWnd:hWnd ), i
LOCAL nWidth  := aClient[4]
LOCAL nHeight := aClient[3]

   IF oDlg != NIL
   
      oDlg:SetSize( nWidth, nHeight, .T. )
      oDlg:Move( aClient[ 1 ], 0 )
 
   ENDIF
   
RETURN NIL
 

The .rc

Code: Select all  Expand view  RUN

DIALOG DIALOG 0, 0, 105, 0
STYLE DS_3DLOOK |DS_SETFONT |WS_CHILD
FONT 8, "MS Sans Serif"
LANGUAGE LANG_NEUTRAL, 0
BEGIN
  CONTROL "",1,"TBitMap",WS_CHILD |WS_VISIBLE |0x20,3,3,323,100
END
 

Reinaldo.