Author Topic: 19a. Drawing the Background  (Read 1047 times)

0 Members and 1 Guest are viewing this topic.

Offline LarryMc

  • Administrator
  • Hero Member
  • *****
  • Posts: 5965
  • 'All I like is finishing'
19a. Drawing the Background
« on: September 10, 2011, 09:39:31 PM »
Part A

We're going to start by creating ten instances of our control right off the bat.  Ten because that's how many different styles of gages we have.  We're not going to configure them yet either.

So let's add the following code to Section 4 of CCT_test.iwb.

Code: [Select]
CreateGageRLM(main,10,30,200,1 )
CreateGageRLM(main,220,30,200,2 )
CreateGageRLM(main,430,30,200,3 )
CreateGageRLM(main,640,30,200,4 )
CreateGageRLM(main,10,270,200,5 )
CreateGageRLM(main,220,270,200,6 )
CreateGageRLM(main,430,270,200,7 )
CreateGageRLM(main,640,270,200,8 )
CreateGageRLM(main,10,510,200,9 )
CreateGageRLM(main,220,510,200,10 )

They will all have a radius of 200 pixels.

If we compile our project at this time the reader will see ten, 200 x 200 pixel, black rectangles.  And that is with no actual drawing commands in our program.  That is what the OS has done for us.  This is showing us that at least each instance of the control is being created.

We'll now move our focus to the GageDrawbackground subroutine in Section 8 of CCT_lib.iwb.

The first command we're going to use is:

Code: [Select]
GdipSetSmoothingMode(pGraphics, SmoothingModeAntiAlias)
This will implement the antialias drawing mode for the pGraphics object.

We'll now clear the control's rectangle and fill it with the color stored in #g_dat.nPanelColor. Right now it is the default; a light grey.  This is the code we'll add for that:

Code: [Select]
GdipGraphicsClear(pGraphics, #g_dat.nPanelColor)
Our GageDrawbackground subroutine now looks like this:

Code: [Select]
SUB GageDrawbackground(pointer g_dat)
settype g_dat,GAGEPARAMS
pointer pGraphics
if (!GdipCreateFromHDC(#g_dat.dcBack, &pGraphics))
uint hdc2 = #g_dat.dcBack
'set the pGraphic object's drawing mode to antialiasing
GdipSetSmoothingMode(pGraphics, SmoothingModeAntiAlias)
'clear our contol's rectangle and fill it with the color stored in #g_dat.nPanelColor
GdipGraphicsClear(pGraphics, #g_dat.nPanelColor)



GdipDeleteGraphics(pGraphics)
endif

ENDSUB

If the project is recompiled at this time the reader will see that all the rectangles have changed color.  The reader can experiment with the color by going to the message handler WM_CREATE section and changing the number in parentheses for this line:

Code: [Select]
GageunRGBLM(GetSysColor(0), r1, g1, b1)
or entering reb,green,blue values directly in this line:

Code: [Select]
#g_dat.nPanelColor = RGBA(r1,g1,b1,255)
Next we're going to draw the outer ring or frame of our gage.  The color is a fixed, near black color. This is the code we will use:

Code: [Select]
'draw outer gage ring
FLOAT penwidth=8
if (!GdipCreatePen1(RGBA(10,10,10,255),penwidth,UnitPixel,&pPen))
GdipDrawArc(pGraphics,pPen,5, 5, 190, 190,0,360)
GdipDeletePen(pPen)
endif

First we define a variable to hold the width of the line we want to draw.  We define it as a FLOAT because that is what the GDI+ function GdipCreatePen1 requires.  The function also requires a RGBA color value, an OS constant that defines what units of measure the pen width is in, and a pointer variable that the function can store its pen information handle in. ( That means we need to go up to the start of this routine and define the pPen pointer). 

If the function is successful it will return 0 which makes the IF statement TRUE. In that case we will use the GdipDrawArc function to draw the circle.  The parameters that are passed are the handle to the pGraphics object we are drawing to, the handle to the pPen we are going to draw with, the upper left corner coordinates of the rectangle that will contain our arc, the height and width of the rectangle that will contain the arc, the starting point of the arc in degrees and the ending point of the arc in degrees.

Following that function is our cleanup; we delete the pPen and return its memory to the system.

Next we're going to draw the center of our gage with the following code:

Code: [Select]
'fill center of gage
if (!GdipCreateSolidFill(#g_dat.nGageColor,&pBrush))
GdipFillEllipse(pGraphics,pBrush, 9, 9, 182, 182)
GdipDeleteBrush(pBrush)
endif

With this code we're going to create a solid fill brush the same way we created the pen above.  The color of the brush will be the value contained in #g_dat.nGageColor.  The GdipFillEllipse function parameters are the handle to the pGraphics object we are drawing to, the handle to the pBrush we are going to paint with, the upper left corner coordinates of the rectangle that will contain our ellipse, and the height and width of the rectangle that will contain the ellipse.  (And, as before, we'll have to go to the top of the of the subroutine and declare pBrush as a POINTER.)  And finally, when we're through with the brush we have to do our cleanup and delete it.

The following is how the GageDrawbackground subroutine now appears:
 
Code: [Select]
SUB GageDrawbackground(pointer g_dat)
settype g_dat,GAGEPARAMS
pointer pGraphics, pPen, pBrush
if (!GdipCreateFromHDC(#g_dat.dcBack, &pGraphics))
uint hdc2 = #g_dat.dcBack
'set the pGraphic object's drawing mode to antialiasing
GdipSetSmoothingMode(pGraphics, SmoothingModeAntiAlias)
'clear our contol's rectangle and fill it with the color stored in #g_dat.nPanelColor
GdipGraphicsClear(pGraphics, #g_dat.nPanelColor)

'draw outer gage ring
int penwidth=8
if (!GdipCreatePen1(RGBA(10,10,10,255),penwidth,UnitPixel,&pPen))
GdipDrawArc(pGraphics,pPen,5, 5, 190, 190,0,360)
GdipDeletePen(pPen)
endif

'fill center of gage
if (!GdipCreateSolidFill(#g_dat.nGageColor,&pBrush))
GdipFillEllipse(pGraphics,pBrush, 9, 9, 182, 182)
GdipDeleteBrush(pBrush)
endif


GdipDeleteGraphics(pGraphics)
endif

ENDSUB

___________________

Coming Next - Drawing the Background - Part B
LarryMc
Larry McCaughn :)
Author of IWB+, Custom Button Designer library, Custom Chart Designer library, Snippet Manager, IWGrid control library, LM_Image control library