Dialog Color / Gradient

[cdmmaui]

Hello Everyone,

Can someone provide an example on how to add color or color gradient to dialog boxes via DEFINE DIALOG boxes so application looks more professional?

Thank you,

[nageswaragunupudi]

Please try this sample. This sample demonstrates two alternative methods of painting Gradients on dialogs or windows.

Code: Select all  Expand view

#include "fivewin.ch"

function Main()

   local oDlg, aGrad, oBrush

   aGrad := { { 0.4, CLR_GREEN, CLR_HGREEN }, ;
              { 0.6, CLR_HGREEN, CLR_GREEN } }

   // Method-1
   DEFINE BRUSH oBrush GRADIENT aGrad HORIZONTAL // or VERTICAL
   DEFINE DIALOG oDlg BRUSH oBrush
   ACTIVATE DIALOG oDlg CENTERED
   RELEASE BRUSH oBrush

   // Method-2
   DEFINE DIALOG oDlg GRADIENT aGrad
   ACTIVATE DIALOG oDlg CENTERED

return nil
 

You can display different gradients by changing the values in the array aGrad. Please experiment with changing values in the array. The array can contain any number of rows. The numbers in the first element of each row should add up to 1.0.

Showing background of a dialog in single color:

Code: Select all  Expand view

DEFINE DIALOG oDlg COLOR CLR_BLACK,CLR_HGREEN
 

[cdmmaui]

Thank you so much. I will try this and get back with any issues.

[cdmmaui]

Dear Rao,

Can I apply same logic to REDEFINE FOLDER to get gradient color in folders?

[Rick Lipkin]

Darrell

I have created some wrappers that use SetDlgGradient() function .. Some ideas here for your consideration ..

Rick Lipkin

Code: Select all  Expand view

//---------------------------
Func BlueGreenGrad()

Local xGrad4 :=  {{ 1.00,14671839,   7419904 }, { 1.00,7419904,  14671839 }}   // med blue
SetDlgGradient( xGrad4 )

Return(nil)

//---------------------
Func SolidGreenBlue()

SetDlgGradient({ { 0.01,9994298,9994298 },{ 0.01,9994298,9994298 } })

Return(nil)


//-------------
Func SolidDarkBlue()

SetDlgGradient( { { 0.50,4720905,4720905 },{ 0.50,4720905,4720905 } })
Return(nil)

//-------------------
Func SolidBlue()

SetDlgGradient( { { 0.01,16711680,16711680 },{ 0.01,16711680,16711680 } })
Return(nil)

//------------------
Func DarkBlueGrad()

SetDlgGradient({ { 0.0,8388608,13619151 },{ 0.0,13619151,8388608 } })
Return(nil)


//--------------
Func LightGreenGrad()

SetDlgGradient( { { .50, nRGB(210,235,216), nRGB( 255, 255, 255 ) } } )

Return(nil)

//------------------
Func LightBlueGrad()

SetDlgGradient( { { .50, nRGB( 201, 217, 237 ), nRGB( 231, 242, 255 ) } } )

Return(nil)

//------------------
Func LightGreyGrad()

SetDlgGradient( { { .50, nRGB( 216, 216, 216 ), nRGB( 255, 255, 255 ) } } )

Return(nil)

//-----------------
Func StandardGrad()

SetDlgGradient( { { .50, nRGB( 236, 233, 216 ), nRGB( 255, 255, 255 ) } } )

Return(nil)

//--------------------
Func DarkGreyGrad()

SetDlgGradient( { { 0.87, 16777215, 11513775 },{ 0.87,11513775, 16777215 }})
Return(nil)

//--------------------
Func SolidGrey()

SetDlgGradient( { { .50, nRGB( 233, 233, 233 ), nRGB( 233, 233, 233 ) } } )

Return(nil)

//--------------------
Func SolidChoral()

*SetDlgGradient( { { .50, nRGB( 171, 129, 151 ), nRGB( 171, 129, 151 ) } } )  // choral
SetDlgGradient(aGrad := { { 0.01,8388736,8388736 },{ 0.01,8388736,8388736 } })

Return(nil)

//-----------------
Func LightYellow()

SetDlgGradient( { { 0.01,8440801,16777215 },{ 0.75,16777215,8440801 } })

Return(nil)

//-------------------
Func GreenBlueGrad()

SetDlgGradient( { { .50, nRGB( 192, 192, 192 ), nRGB( 45, 121, 147 ) } } )

Return(nil)
 

[nageswaragunupudi]

Dear Rao,

Can I apply same logic to REDEFINE FOLDER to get gradient color in folders?

Yes, you can.

[cdmmaui]

Dear Rick and Rao,

Thank you!

Happy New Year!

[cdmmaui]

Dear Rick,

Thank you again for your functions. I have some positive feedback from end users! I truly appreciate your help!

[Rick Lipkin]

Darrell

You are VERY welcome .. another side-effect of using SetDlgGradient() is that it globally sets the Transparent attribute of your Dialogs to .T. which allows your text to blend in nicely with the gradient.

Rick Lipkin

[cdmmaui]

Dear Rick,

By any chance, do you have a sample function that will set the text color in the similar way the dialog gradient is set?

The software is sooooooooooooooo much better looking with color!!!

Thanks again!

[ukoenig]

Darrell ,

You can define the font and color of all SAYS of a dialog like :

Code: Select all  Expand view

AEVAL( oDlg:aControls, ;
         { | oCtl | IIF( oCtl:ClassName() == "TSAY", ; // only SAY is used
          ( oCtl:SetFont( oFont  ), ; // SAY - Font
            oCtl:Setcolor( 255,  ), ;  // SAY - color ( red )
            oCtl:Refresh() ), NIL ) } )
 

regards
Uwe

[cdmmaui]

Dear Uwe,

Thank you! Can you provide a small example with a dialog?

[Rick Lipkin]

Darrell

You can work with the text by creating a Text field with your resource .. not the standard -1 static field ..here is a .rc file and some code to demonstrate on how to use fonts and color for your text ..

Trecon.Rc

Code: Select all  Expand view

// Generated by ResEdit 1.6.6
// Copyright (C) 2006-2015
// http://www.resedit.net

#include <windows.h>
#include <commctrl.h>
#include <richedit.h>
#include "resource.h"




//
// Dialog resources
//
LANGUAGE LANG_NEUTRAL, SUBLANG_NEUTRAL
TRECON DIALOG 200, 35, 232, 237
STYLE DS_MODALFRAME | DS_SETFONT | WS_CAPTION | WS_POPUP
FONT 8, "Microsoft Sans Serif"
{
    EDITTEXT        122, 132, 49, 63, 13, 0, WS_EX_LEFT
    EDITTEXT        119, 132, 65, 63, 13, 0, WS_EX_LEFT
    COMBOBOX        113, 132, 81, 63, 55, WS_TABSTOP | CBS_DROPDOWNLIST, WS_EX_LEFT
    EDITTEXT        116, 131, 112, 22, 13, 0, WS_EX_LEFT
    EDITTEXT        109, 131, 130, 22, 13, 0, WS_EX_LEFT
    EDITTEXT        117, 131, 147, 22, 13, 0, WS_EX_LEFT
    CONTROL         "Cancel", 112, "TBtnBmp", 0x50010020, 173, 201, 42, 24, 0x00000000
    CONTROL         "Ok", 111, "TBtnBmp", 0x50010020, 124, 201, 42, 24, 0x00000000
    LTEXT           "Vehicles that have not had trips past this number of days", 108, 13, 127, 106, 20, SS_LEFT | SS_NOPREFIX, WS_EX_LEFT
    LTEXT           "This report looks forTrip Logs where the End of one trip is not equal to the Start of the next .. as well as showing Vehicles that have had no Trips in the past <value below> days from the Low Date entered", 110, 9, 6, 215, 31, SS_LEFT | SS_NOPREFIX, WS_EX_LEFT
    LTEXT           "Enter a LOW Date", 131, 13, 53, 106, 9, SS_LEFT | SS_NOPREFIX, WS_EX_LEFT
    LTEXT           "ACTIVE Vehicles Only   (Y/N)", 137, 13, 113, 106, 9, SS_LEFT | SS_NOPREFIX, WS_EX_LEFT
    LTEXT           "Print, View, File (P/V/F)", 138, 13, 148, 106, 9, SS_LEFT | SS_NOPREFIX, WS_EX_LEFT
    LTEXT           "Sort By", 133, 13, 85, 106, 9, SS_LEFT | SS_NOPREFIX, WS_EX_LEFT
    LTEXT           "Enter a HIGH Date", 132, 13, 68, 106, 9, SS_LEFT | SS_NOPREFIX, WS_EX_LEFT
    EDITTEXT        120, 12, 177, 211, 12, WS_DISABLED | NOT WS_TABSTOP | ES_READONLY, WS_EX_LEFT
}
 

Code: Select all  Expand view

LightGreyGrad()
oFontB := TFont():New("Ms Sans Serif",, -6,.F.,.T. ,,,,.F. )

DEFINE DIALOG oDlg RESOURCE "TRECON"     ;
       TITLE cTITLE                      ;

       REDEFINE SAY oSay6  ID 110 of oDlg UPDATE      // what report does
       oSay6:SetFont( oFontB )
       oSay6:SetColor( nRgb(7,7,224))  //blue

       REDEFINE SAY oSay1  ID 131 of oDlg UPDATE      // low
       oSay1:SetFont( oFontB )
       REDEFINE SAY oSay2  ID 132 of oDlg UPDATE      // high
       oSay2:SetFont( oFontB )
       REDEFINE SAY oSay3  ID 133 of oDlg UPDATE      // sort
       oSay3:SetFont( oFontB )
       REDEFINE SAY oSay4  ID 137 of oDlg UPDATE      // active
       oSay4:SetFont( oFontB )
       REDEFINE SAY oSay5  ID 138 of oDlg UPDATE      // vpf
       oSay5:SetFont( oFontB )
       REDEFINE SAY oSay7  ID 108 of oDlg UPDATE      // days
       oSay7:SetFont( oFontB )


   REDEFINE GET oLDATE var LDATE ID 122 of oDLG ;
              valid _DateCHk(LDATE)

   REDEFINE GET oHDATE var HDATE ID 119 of oDLG ;
              valid _DateChk(HDATE)

   REDEFINE COMBOBOX oCBX1 var cITEM1 ID 113 of oDLG   ;
          ITEMS { "Vnumber    ", "Licence    " }

   REDEFINE GET oACTIVE var cACTIVE ID 116 of oDlg PICTURE "@!";
          valid cACTIVE $ 'YN' UPDATE

   REDEFINE GET oDays   var nDays   ID 109 of oDlg PICTURE "99" UPDATE

   REDEFINE GET oMVIEW var mVIEW ID 117 of oDlg PICTURE "@!" ;
          valid mVIEW $ 'PVF' UPDATE

   REDEFINE SAY oLINE var cLINE ID 120 of oDLG
 

Notice the use of oSay6:SetFont( oFontB ), oSay6:SetColor( nRgb(7,7,224)) //blue

Rick Lipkin

[cnavarro]

Rick, many thanks for your code

I used you code for this function

Code: Select all  Expand view

// Using:

// GradDlgs( "BlueGreen" )

//----------------------------------------------------------------------------//
// Gradient for Dialogs: Thanks to Rick Lipkin
//----------------------------------------------------------------------------//

Function GradDlgs( cTheme )

   local aGrad    := {}
   DEFAULT cTheme := ""

   if Valtype( cTheme ) == "C"
      cTheme  := Upper( cTheme )
      Do Case
         Case cTheme = Upper( "SolidWhite" )
            aGrad := { { 0.50, nRGB( 255, 255, 255 ), nRGB( 255, 255, 255 ) } }
         Case cTheme = Upper( "BlueGreen" )
            aGrad := { { 1.00, 14671839, 7419904 }, { 1.00, 7419904, 14671839 } }
         Case cTheme = Upper( "SolidGreenBlue" )
            aGrad := { { 0.01, 9994298, 9994298 },{ 0.01, 9994298, 9994298 } }
         Case cTheme = Upper( "SolidDarkBlue" )
            aGrad := { { 0.50,4720905,4720905 },{ 0.50,4720905,4720905 } }
         Case cTheme = Upper( "SolidBlue" )
            aGrad := { { 0.01, 16711680, 16711680 },{ 0.01, 16711680, 16711680 } }
         Case cTheme = Upper( "DarkBlue" )
            aGrad := { { 0.0, 8388608, 13619151 },{ 0.0, 13619151, 8388608 } }
         Case cTheme = Upper( "LightGreen" )
            aGrad := { { .50, nRGB(210,235,216), nRGB( 255, 255, 255 ) } }
         Case cTheme = Upper( "LightBlue" )
            aGrad := { { .50, nRGB( 201, 217, 237 ), nRGB( 231, 242, 255 ) } }
         Case cTheme = Upper( "LightGrey" )
            aGrad := { { .50, nRGB( 216, 216, 216 ), nRGB( 255, 255, 255 ) } }
         Case cTheme = Upper( "Standard" )
            aGrad := { { .50, nRGB( 236, 233, 216 ), nRGB( 255, 255, 255 ) } }
         Case cTheme = Upper( "DarkGrey" )
            aGrad := { { 0.87, 16777215, 11513775 },{ 0.87,11513775, 16777215 } }
         Case cTheme = Upper( "SolidGrey" )
            aGrad := { { .50, nRGB( 233, 233, 233 ), nRGB( 233, 233, 233 ) } }
         Case cTheme = Upper( "SolidChoral" )
            aGrad := { { 0.01,8388736,8388736 },{ 0.01,8388736,8388736 } }
         Case cTheme = Upper( "LightYellow" )
            aGrad := { { 0.01,8440801,16777215 },{ 0.75,16777215,8440801 } }
         Case cTheme = Upper( "GreenBlue" )
            aGrad := { { .50, nRGB( 192, 192, 192 ), nRGB( 45, 121, 147 ) } }
         //Case cTheme = ""
      EndCase
   else
      if Valtype( cTheme ) == "A"
         aGrad   := cTheme
      endif
   endif
   if !Empty( aGrad )
      SetDlgGradient( aGrad )
   endif
Return nil

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

 

Others users can add other themes

[Rick Lipkin]

Cristobal

Nicely Done !! .. Happy Birthday!

Rick Lipkin