PushButton rounded with gradient color

[ForTest]

 

The custom routine that redraw a push button with rounded border is the following:

	void gwinButtonDraw_Rounded(GWidgetObject *gw, void *param) {
		const GColorSet *	pcol;

		(void)				param;

		if (gw->g.vmt != (gwinVMT *)&buttonVMT)	return;
		pcol = getButtonColors(gw);

		gdispGFillArea(gw->g.display, gw->g.x, gw->g.y, gw->g.width, gw->g.height, gw->pstyle->background);
		if (gw->g.width >= 2*BTN_CNR_SIZE+10) {
			gdispGFillRoundedBox(gw->g.display, gw->g.x+1, gw->g.y+1, gw->g.width-2, gw->g.height-2, BTN_CNR_SIZE-1, pcol->fill);
			gdispGDrawStringBox(gw->g.display, gw->g.x+1, gw->g.y+BTN_CNR_SIZE, gw->g.width-2, gw->g.height-(2*BTN_CNR_SIZE), gw->text, gw->g.font, pcol->text, justifyCenter);
			gdispGDrawRoundedBox(gw->g.display, gw->g.x, gw->g.y, gw->g.width, gw->g.height, BTN_CNR_SIZE, pcol->edge);
		} else {
			gdispGFillStringBox(gw->g.display, gw->g.x+1, gw->g.y+1, gw->g.width-2, gw->g.height-2, gw->text, gw->g.font, pcol->text, pcol->fill, justifyCenter);
			gdispGDrawBox(gw->g.display, gw->g.x, gw->g.y, gw->g.width, gw->g.height, pcol->edge);
		}
	}

This routine don't fill the box blended from variants of the fill color (differently from the normal routine)

Anyone know if there is already a running implementation of "custom routine rounded with gradient color" ?

 

Thanks

[Joel Bodenmann]

Hi,

There's currently no existing rendering function for that. Depending on your needs (and your platform / available resources) you might want to consider using images.

[inmarket]

The difficulty doing the routine as you describe (other than by images as suggested above by Joel) is the gradient filled arcs in the corners. Filled arcs are incredibly complex already.

[ForTest]

I wrote my custom but it's very very slow

void gwinButtonDraw_Rounded(GWidgetObject *gw, void *param)
{

    const GColorSet *    pcol;
            fixed                alpha;
                fixed                dalpha;
                coord_t                i;
                color_t                tcol, bcol;

                (void)                param;

                if (gw->g.vmt != (gwinVMT *)&buttonVMT)    return;
                pcol = getButtonColors(gw);

                /* Fill the box blended from variants of the fill color */
                tcol = gdispBlendColor(White, pcol->fill, BTN_TOP_FADE);
                bcol = gdispBlendColor(Black, pcol->fill, BTN_BOTTOM_FADE);
                dalpha = FIXED(255)/gw->g.height;
		
  		// Fade effect
        for(alpha = 0, i = 0; i < gw->g.height; i++, alpha += dalpha)
                    gdispGDrawLine(gw->g.display, gw->g.x, gw->g.y+i, gw->g.x+gw->g.width-2, gw->g.y+i, gdispBlendColor(bcol, tcol, NONFIXED(alpha)));

  		// Round right side
        for (int z=0,k=BTN_CNR_SIZE;k!=0;k--,z++)
       
            gdispGDrawRoundedBox(gw->g.display, gw->g.x, gw->g.y, gw->g.width+z, gw->g.height, BTN_CNR_SIZE, pcol->edge);
       
        // Round left side
        for (int z=0,k=BTN_CNR_SIZE;k!=0;k--,z++)
       
            gdispGDrawRoundedBox(gw->g.display, gw->g.x-z, gw->g.y, gw->g.width+z, gw->g.height, BTN_CNR_SIZE, pcol->edge);
      
        // Write text string in the center
        gdispGDrawStringBox(gw->g.display, gw->g.x+1, gw->g.y+BTN_CNR_SIZE, gw->g.width-2, gw->g.height-(2*BTN_CNR_SIZE), gw->text, gw->g.font, pcol->text, justifyCenter);


   
    }

 

I will try with images but i don't think that it can be much faster than this

 

Edited October 16, 2017 by ForTest

[Joel Bodenmann]

This must be incredibly slow! As @inmarket mentioned, filled arcs are extremely complex and slow. Wrapping it in for() loops is no good here  

Images will be vastly faster than this. It of course depends on your system and the available resource but it's pretty safe to say that almost any system will be vastly faster with images than this. Of course, you don't want to re-decode a PNG every time you have to render your button. So either cache the image or use an image format that is extremely fast to decode (such as BMP or even better: NATIVE).

[ForTest]

I'll give it a try

Thank for suggestions

[Joel Bodenmann]

You're welcome - happy to help!  

[inmarket]

You can always write your own filled arc routine that supports gradients. This however is very complex. The filled arc routine we currently have is the most complex routine in ugfx and was written from first principles when we couldn't find any other source anywhere to do the same thing.