Radial Gradient

[magneto.man]

Hi!

I'm new to symbian development and I'm trying to draw a pie via the DrawPie() method.
So far I managed to do it with success but only for solid colors. I need a "radial gradient" brush instead.
Does anyone knows a way to do this effect? What classes and/or resources should I look for?

Thanks,
- Magneto

[pandhari.gorde]

chk ColorUtils class in sdk help

[wizard_hu_]

Gradient brushes do not really exist as far as I know, however if you have a bitmap containing a suitable gradient pattern (or anything else), you can use it as brush pattern.
Actually there is an API for creating gradients: ColorUtils::CreateGradientBitmapL is able to do that. Unfortunately it is capable of creating horizontal and vertical gradients only, no radial stuff.
However a thing which supports radial gradient is .svg, so you could load a .svg/mif and use it for brush pattern.

[magneto.man]

Thank you guys for your help so far...

Can you please share with my a code snippet on how to use the mentioned class and an .svg file. Or the process to tryout something? I never used external images inside my application.
The only thing I remember seeing was a graphical effect using the brush pattern and the image was tiled all around the area plotted. This is not my desired effect at all. :(

[wizard_hu_]

Which SDK do you use?

[magneto.man]

3rd Edition with and without FP.

[wizard_hu_]

So, here is a rude, but working example:
Create a file, grad.svg

<svg width="100" height="100" viewBox="0 0 100 100">
  <radialGradient id="PieGrad" gradientUnits="userSpaceOnUse" cx="50" cy="50" r="50" fx="50" fy="50">
    <stop offset="0%" stop-color="black" />
    <stop offset="30%" stop-color="yellow" />
    <stop offset="60%" stop-color="red" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <rect fill="url(#PieGrad)" width="100" height="100" />
</svg>

this will be used as the fill pattern (you can check it in an SVG viewer) - you are right about repetition of tiles, but since SVG is Scalable Vector Graphics, we will simply rescale the pattern prior to filling, so the tile will be properly sized for the give pie-slice.

Then convert it to .mif - this example is for S60 3rd MR:

\Symbian\9.1\S60_3rd_MR\Epoc32\tools\mifconv.exe \Symbian\9.1\S60_3rd_MR\Epoc32\winscw\c\grad.mif /c24,1 grad.svg

the proper way would be creating a long makefile - you can check that in the SDK examples. But a single line is more efficient to post.

Then we are ready. Load the .mif file in the ConstructL of the control:

#include <akniconutils.h>

void CGradTestView::ConstructL(const TRect& aRect)
{
    CreateWindowL();
    SetRect(aRect);
    iGrad=AknIconUtils::CreateIconL(_L("c:\\grad.mif"),16384);
    AknIconUtils::PreserveIconData(iGrad);
    ActivateL();
}

and resize+use it as fill pattern in Draw:

void CGradTestView::Draw(const TRect& /*aRect*/) const
{
    CWindowGc& gc = SystemGc();
    gc.Clear();

    AknIconUtils::SetSize(iGrad,TSize(30,30),EAspectRatioNotPreserved);
    gc.BitBlt(TPoint(0,0),iGrad);
    gc.UseBrushPattern(iGrad);
    gc.SetBrushStyle(CGraphicsContext::EPatternedBrush);
    gc.SetBrushOrigin(TPoint(0,50));
    gc.DrawPie(TRect(0,50,30,80),TPoint(0,0),TPoint(0,80));
    
    AknIconUtils::SetSize(iGrad,TSize(200,150),EAspectRatioNotPreserved);
    gc.BitBlt(TPoint(40,0),iGrad);
    gc.UseBrushPattern(iGrad);
    gc.SetBrushOrigin(TPoint(40,100));
    gc.DrawPie(TRect(40,100,240,250),TPoint(0,250),TPoint(320,250));
}

where iGrad is "CFbsBitmap *iGrad;" in the .h file (do not forget deleting it in the destructor), and you will need aknicon.lib in the .mmp

[magneto.man]

Thank so much for your help!
I will try it out...

- Magneto

[wizard_hu_]

Recently I have a bad feeling about the interpretation of "radial". So "radialgradient" of SVG is about "filling with concentric ellipses" (roughly said). If you meant a "color picker"-like gradient, where color changes with the angle, that would be an other story, with trigonometric magic.