Page 1 of 3

Folder on gradient filled dialog

PostPosted: Fri Jul 03, 2009 9:50 am
by PeterHarmes
Hi,

I've created a dialog from resource that i've filled with a gradient color and inserted a folder in the dialog. The trouble I have is that there is a grey box around the folder tabs - i would like the area to the right of the tabs to be the same colour as the background of the dialog. Is there a way of making it transparent for the grey area?

Regards,

Pete

Re: Folder on gradient filled dialog

PostPosted: Fri Jul 03, 2009 3:14 pm
by ukoenig
My same Question in another post :

viewtopic.php?f=3&t=14029&p=72118&hilit=folder+transparent#p72118

Best Regards
Uwe :lol:

Re: Folder on gradient filled dialog

PostPosted: Fri Jul 03, 2009 3:36 pm
by PeterHarmes
Uwe,

Did you manage to get this to work as I tried the suggested fix but didnt notice any difference

Regards,

Pete

Re: Folder on gradient filled dialog

PostPosted: Fri Jul 03, 2009 3:58 pm
by ukoenig
Peter,

no Solution for the moment.

To give it a better look, I added spaces to the Tab-titles until I reached Dialog-Width.
( only possible, if You define many Tabs or long Titles )

Image

There was another question in the Forum, for better looking Tabs.
I have shown a Solution to use Tabs instead of Folder.

viewtopic.php?f=3&t=14029&p=79861&hilit=tabs#p79861

Best Regards
Uwe :lol:

Re: Folder on gradient filled dialog

PostPosted: Mon Jul 06, 2009 9:00 am
by PeterHarmes
Thanks Uwe,

I've padded out the titles and it looks better than the grey box now - it would look a lot better if it was transparent though. I suppose we need to ask Antonio?

Best Regards,

Pete

Re: Folder on gradient filled dialog

PostPosted: Mon Jul 06, 2009 12:24 pm
by ukoenig
Peter,

working on a Update for the Bartools ( added Folder )
I found a working solution in a different Tool.
Because of all the tools, I lost a bit the overview, what I have done allready.
I will put the solution inside this post.
It is easy for me now, to create any new Tool, because each Tool includes
some special solutions for a problem. I just need to select, what I need.

Image

Code: Select all  Expand view


DEFINE DIALOG oDlg10 RESOURCE "SETUP0" FONT oDlgFont;
TITLE "Button-Setup" TRANSPARENT


REDEFINE FOLDER oFld ID 100 OF oDlg10 UPDATE ;
PROMPTS "  &Windows  and  Dialog   ", "   &Buttonbar  " ;
DIALOGS "Page1", "Page2"  FONT oFoldFont

FOLDER_1()  // Window / Dialog
FOLDER_2()  // Buttonbar

// Any existing small BMP
// -----------------------------
REDEFINE  BITMAP oBmp ID 500 RESOURCE "WHITE" OF oDlg10 ;
PIXEL   ADJUST   NOBORDER
oBMP:cTooltip := "Please select a Button"

// Windows- Dialog-Title Height = 30
// ------- CREATE A DIALOG-TITLE ----------------

oBMP:bPainted := { |hDC| ;
DRAW_TITLE( oDlg10, ;
  oBMP, ;       // BMP
  hDC, ;            // hDC
 .T., ;         // Horiz. or Vert.
 14853684, ;        // 1. Grad-Color
 16314573, ;        // 2. Grad-Color
 0.50, ;            // Color-Pos.
 30, ;          // Text-Pos from left ( 0 = centered )
 oTitleFont, ;      // Font
 128, ;         // Font-Color
 "Change all Values for Button-Display and Window-Background", ;    // Text, ;
 1, ;               // Box-Pen
 128 ) }                // Line-Color Blue = 8388608

 
// Click on Title
// -----------------
oBMP:bLDblClick := { | nRow, nCol, nFlags | ;
                                    MsgInfo( "DblClick on the Title" ) }

ACTIVATE DIALOG oDlg10 CENTERED NOWAIT ;
ON INIT ( oDlg10:Move( 100, 20, oDlg10:nWidth, oDlg10:nHeight, .f. ), ;
   SetImages() ) ;
ON PAINT( SETUP_GRAD( hDC, oDlg10 ), ;
   GradBrush( oDlg10, { { 0.5, 16445897, 15650662 },;
   { 0.5, 15650662, 16445897 } }, 1 ), ;
   SetFoldGrad( oFld ) )

RETURN( NIL )

// -------------- SETUP - GRADIENT --------------------

STATIC FUNCTION SETUP_GRAD( hDC, oDlg )
local aGrad := { { 0.5, 16445897, 15650662 }, ;  
                          { 0.5, 15650662, 16445897 } }    

GradientFill( hDC,  0, 0, oDlg:nHeight, oDlg:nWidth, aGrad, .T. )

RELEASEDC( hDC )

RETURN NIL

// ---------- FOLDER GRADIENT different to DIALOG ----------------------

STATIC FUNCTION SetFoldGrad( oFld )

local n, oDlg
   
for n = 1 to Len( oFld:aDialogs )
      oDlg = oFld:aDialogs[ n ]    
      oDlg:bPainted = { | hDC | GradientFill( hDC, 0, 0, oDlg:nHeight, oDlg:nWidth, { { 0.50, 12609872, 16045947 } }, .T. ) }
next    

RETURN NIL    

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

function SetImages()
local oImageList
   
DEFINE IMAGELIST oImageList SIZE 16, 16
   
oImageList:AddMasked( TBitmap():Define( "image1",,   oDlg1 ), nRGB( 192, 192, 192 ) )    
oImageList:AddMasked( TBitmap():Define( "open1",,     oDlg1 ), nRGB( 192, 192, 192 ) )    

oFld:SetImageList( oImageList )
   
return nil  

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

FUNCTION GradBrush( oDlg, aColors , nDir)
local hDC, hBmp, hBmpOld , nWidth , nHeight, lDir

DEFAULT lDir := .T.
IF nDir = 1
   lDir := .T.
ELSE
   lDir := .F.
ENDIF

if Empty( oDlg:oBrush:hBitmap )
      nHeight := if(lDir,oDlg:nHeight,1)
      nWidth  := if(lDir,1,oDlg:nWidth)
      hDC = CreateCompatibleDC( oDlg:GetDC() )
      hBmp = CreateCompatibleBitMap( oDlg:hDC, nWidth, nHeight )
      hBmpOld = SelectObject( hDC, hBmp )
      GradientFill( hDC, 0, 0, nHeight, nWidth, aColors,lDir )
      DeleteObject( oDlg:oBrush:hBrush )
      oDlg:oBrush:hBitmap = hBmp
      oDlg:oBrush:hBrush = CreatePatternBrush( hBmp )
      SelectObject( hDC, hBmpOld )
      oDlg:ReleaseDC()
endif

RETURN NIL

//------------- DIALOG - Title -----------

FUNCTION DRAW_TITLE( oDlg, oBitmap, hDC, lDirect,nVColor, ;
   nBColor, nMove, nLeft, oFont, nTColor, cTitle, nPen, nPColor )
LOCAL aGrad := { { nMove, nVColor, nBColor }, { nMove, nBColor, nVColor } }
LOCAL aRect := GETCLIENTRECT( oBitmap:hWnd )
LOCAL oNewBrush, oBtn1

DEFINE BRUSH oNewBrush ;
COLOR GradientFill( hDC,  0, 0, aRect[3], aRect[4], aGrad, lDirect )
hOldFont := SelectObject( hDC, oFont:hFont )
nTXTLG :=  GettextWidth( hDC, cTitle )
nBMPLONG  := oDlg:nWidth()
nBMPHIGHT := oBitmap:Super:nHeight()
nFONTHIGHT := oFont:nInpHeight * -1
IF nLEFT = 0
   nLEFT := (nBMPLONG - nTXTLG) / 2  
ENDIF
nNEWHIGHT := nFONTHIGHT
nTOP := (nBMPHIGHT - nNEWHIGHT) / 2
SetTextColor( hDC,nTColor)
SetBkMode( oBitmap:hDC, 0 )
TextOut( hDC, nTOP, nLEFT, cTitle )
*oBitmap:ReleaseDC()
RELEASE BRUSH oNewbrush

RETURN NIL
 


Best Regards
Uwe :lol:

Re: Folder on gradient filled dialog

PostPosted: Mon Jul 06, 2009 5:20 pm
by ukoenig
Please have a look at the example once again.

Function :

SetFoldGrad( oFld )

is added to have different Gradients in Dialog and Folder.

Image

Best Regards
Uwe :lol:

Re: Folder on gradient filled dialog

PostPosted: Tue Jul 07, 2009 1:55 pm
by ukoenig
Peter,

the solution ( transparent Tab-area ) works, as long the Folder is placed on top of the Dialog.
The problem starts, to place a folder in the middle of the Dialog.
The Folder-Tab-Replacement with the function uses allways the Start-Gradient-Color from Dialog Top.
I used Colorpicker to get the Dialog-Gradient-Color from Folder-Top and replaced the Value.

ACTIVATE DIALOG oDlg Nowait ;
ON PAINT( GradientFill( hDC, 0, 0, oDlg:nHeight, oDlg:nWidth, ;
{ { 0.5, 8388608, 16777215 },;
{ 0.5, 16777215, 8388608 } }, .T. ), ;
GradBrush( oDlg, { { 0.5, RGB( 66, 66, 161 ), 16777215 }, ;
{ 0.5, 16777215, RGB( 66, 66, 161 ) } }, .T. ), ;
SetFoldGrad( oFolder ) )

Image

Using Colorpicker, to get the Gradient-RGB-Value from Dialog Folder-Top.
Image

With the adjusted Color-Value, it looks much better :
Image

Best Regards
Uwe :lol:

Re: Folder on gradient filled dialog

PostPosted: Tue Jul 07, 2009 2:23 pm
by PeterHarmes
That looks really good, the trouble is that i intend to give my customers the ability to change the colours (they will only moan if they can't change them :lol: ), so the padding out of the tab will do until Antonio makes the change (hint hint :wink: )

Thanks for your help Uwe

Best regards,

Pete

Re: Folder on gradient filled dialog

PostPosted: Wed Jul 08, 2009 5:30 am
by RAMESHBABU
Hello Mr.Pete/Uwe

The following pictures are generated using the following code with out BRUSH oBrush clause and with BRUSH oBrush Clauses.

Image

The following code is working fine for me.

Code: Select all  Expand view


DEFINE BRUSH oBrush
DEFINE ICON  oIcon RESOURCE "YourIcon"

DEFINE DIALOG oDlg NAME "MANUFACTURE" TRANSPARENT               ;
       ICON oIcon BRUSH oBrush

REDEFINE FOLDER oFolder ID 102 OF oDlg                                         ;
       PROMPTS "&Client","&Product", "&Settings"                              ;
       DIALOGS "Client", "Product", "Settings"                                  

...
...
...

ACTIVATE DIALOG oDlg CENTER                                                       ;
                     ON PAINT gradient(oDlg:hDc,{0,0,oDlg:nHeight,          ;
                                    oDlg:nWidth},                                             ;
                                    nRgb(253,242,217),                                    ;
                                    nRgb(245,204,107),.T.)
RETURN nil

 


The trick is that, you have to define a Empty Brush and don't use it anywhere in the dialog.

I hope this will serve your purpose.

- Ramesh Babu P
FWH 8.09, xHarbour 1.1.0 (Simplex), BCC 5.5, BRW

Re: Folder on gradient filled dialog

PostPosted: Wed Jul 08, 2009 8:33 am
by PeterHarmes
Hi Ramesh,

It didn't work for me i'm afraid, could you send me the control from your rc for the folder so i can compare it to mine?

Regards,

Pete

p.s. Nice colours, i've copied the settings to be included in one of my default values for my app :lol:

Re: Folder on gradient filled dialog

PostPosted: Wed Jul 08, 2009 9:19 am
by ukoenig
Hello Ramesh, Peter

The solution is tested and works fine

Image

Tested with some changes in sample : testfld6.prg
Code: Select all  Expand view

Function main1()
LOCAL omdi1,oDlg, oFolder, oBrush

DEFINE WINDOW omdi1 MDICHILD OF oMainWnd ;
COLOR "N/W"

DEFINE BRUSH oBrush

//Define dialogo
DEFINE DIALOG oDlg NAME "DLGTEST" TRANSPARENT BRUSH oBrush ;
        TITLE "Another folder test" of omdi1

//Redefine controles del dialogo
REDEFINE FOLDER oFolder              ;
        ID 102                           ;
        OF oDlg                          ;
        PROMPTS "Page &1","Page &2","Page &3","Page &4" ,"Page &5" ;
        DIALOGS "DlgPage1", "DlgPage2","DlgPage3", "DlgPage4","DlgPage5"
..
..
//Activar dialogo
ACTIVATE DIALOG oDlg Nowait ;
ON PAINT( GradientFill( hDC,  0, 0, oDlg:nHeight, oDlg:nWidth, ;
                                        { { 0.2, 8388608, 16777215  },;
                                          { 0.2, 16777215, 8388608 } }, .T. ), ;
           SetFoldGrad( oFolder ) )

ACTIVATE Window omdi1;
     valid (odlg:end())

RETURN nil

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

STATIC FUNCTION SetFoldGrad( oFolder )

local n, oDlg
   
for n = 1 to Len( oFolder:aDialogs )
      oDlg = oFolder:aDialogs[ n ]    
      oDlg:bPainted = { | hDC | GradientFill( hDC, 0, 0, oDlg:nHeight, oDlg:nWidth, { { 0.2, 128, 16777215 } }, .T. ) }
next    

RETURN NIL    
 


Thank You

Best Regards
Uwe :lol:

Re: Folder on gradient filled dialog

PostPosted: Wed Jul 08, 2009 9:23 am
by PeterHarmes
Uwe,

Can you send me you control for the folder from your rc?

Regards,

Pete

Re: Folder on gradient filled dialog

PostPosted: Wed Jul 08, 2009 9:37 am
by ukoenig
Peter,

the original testfld6.rc is used, only in page 1, I addes radios and checkboxes.

Code: Select all  Expand view

DLGPAGE1 DIALOG 6, 15, 304, 192
STYLE 0x4L | WS_CHILD | WS_VISIBLE
FONT 8, "MS Sans Serif"
{
 LTEXT "Nombre de cliente:", -1, 5, 7, 65, 8
 EDITTEXT 101, 72, 4, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 LTEXT "Direccion actual:", -1, 10, 25, 56, 8
 EDITTEXT 102, 72, 25, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 LTEXT "Teléfono:", -1, 34, 46, 35, 8
 EDITTEXT 103, 72, 46, 52, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 EDITTEXT 105, 72, 63, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 EDITTEXT 106, 72, 84, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 EDITTEXT 107, 72, 105, 52, 13, ES_AUTOHSCROLL | WS_BORDER | WS_TABSTOP
 LTEXT "Dummy1", -1, 32, 66, 35, 8
 LTEXT "Dummy2", -1, 31, 87, 35, 8
 LTEXT "Dummy3", -1, 31, 107, 35, 8
 CONTROL " Radio 1", 201, "BUTTON", BS_AUTORADIOBUTTON, 73, 134, 60, 12
 CONTROL " Radio 2", 202, "BUTTON", BS_AUTORADIOBUTTON, 73, 150, 60, 12
 CHECKBOX " Checkbox 1", 301, 136, 134, 60, 12, BS_AUTOCHECKBOX | WS_TABSTOP
 CHECKBOX " Checkbox 2", 302, 136, 150, 60, 12, BS_AUTOCHECKBOX | WS_TABSTOP
}
 


Best Regards
Uwe :lol:

Re: Folder on gradient filled dialog

PostPosted: Wed Jul 08, 2009 10:30 am
by PeterHarmes
Still can't get it to work :(

My control is using:

CONTROL "SysTabControl32", 6100, "SysTabControl32", 0 | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 6, 6, 423, 299

I was told ages ago to change to SysTabControl32

I notice that testfld6.rc uses

CONTROL FOLDER32, 6100, FOLDER32, 0 | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 6, 6, 423, 299

if i use the above my app doesn't compile, due to me not including winapi.ch in the .rc - if i add it, i get errors, if i add just the FOLDER32 section from winapi, it compiles but no tabs are being displayed.

Any help would be appreciated (just don't say "give up" :lol: )

Regards,

Pete