Round Buttons

Round buttons Download sample project and source files

Yes - I know there is already a topic on circular push buttons but they weren't quite what I wanted, so I wrote my own. What I wanted was a button that looked exactly like the normal buttons, but instead I wanted them circular.

First of all I make sure the buttons are circles (and not ellipses) and store the centre and radius of the button. Next I simply make the button owner drawn and draw it like every other owner drwn button, but instead of being able to use nice routines like Draw3dRect, I had to roll my own circle drawing routine which would draw each pixel with the correct colour dependant on the point on the circle I was drawing.

I will not include the full source in this page - it is available for download here. The owner draw part is simple and follows along the lines of any other owner drawn button. The circle drawing routine is a standard algorithm, with the only modification in calculating the pixel colour. Given two colours crBright and crDark, and an angle relative to the x-axis, the colour for a pixel can be calculated using the following.
COLORREF GetColour(double dAngle, COLORREF crBright, COLORREF crDark)
{
#define Rad2Deg	180.0/3.1415 
#define LIGHT_SOURCE_ANGLE -2.356    // -2.356 radians = -135 degrees, 
                                     // i.e. From the top left of the screen

	ASSERT(dAngle > -3.1416 && dAngle < 3.1416);
	double dAngleDifference = LIGHT_SOURCE_ANGLE - dAngle;

	if (dAngleDifference < -3.1415) dAngleDifference = 6.293 + dAngleDifference;
	else if (dAngleDifference > 3.1415) dAngleDifference = 6.293 - dAngleDifference;

	double Weight = 0.5*(cos(dAngleDifference)+1.0);

	BYTE Red   = (BYTE) (Weight*GetRValue(crBright) + (1.0-Weight)*GetRValue(crDark));
	BYTE Green = (BYTE) (Weight*GetGValue(crBright) + (1.0-Weight)*GetGValue(crDark));
	BYTE Blue  = (BYTE) (Weight*GetBValue(crBright) + (1.0-Weight)*GetBValue(crDark));

	return RGB(Red, Green, Blue);
}

This is a simple linear interpolation between the two colours based on the cosine of the angle between the light source and the point. Angles are measured from the +ve x-axis (i.e. (1,0) = 0 degrees, (0,1) = 90 degrees ), but remember: positive y points down!



Comments

  • Can't use these round button under Win CE 3.0

    Posted by Legacy on 09/23/2002 12:00am

    Originally posted by: choy kam heng

    Does anyone know how to create round button under Win CE 3.0 because some of the CDC function such as SetPixelV()doesn't supported under CE 3.0

    Thanks

    Reply
  • CRoundButton

    Posted by Legacy on 02/12/2002 12:00am

    Originally posted by: Tomaszek

    After MoveWindow CRoundButton are corupt.

    Reply
  • Exterminate an aliasing effect in cuircular buttons.

    Posted by Legacy on 12/05/1999 12:00am

    Originally posted by: Sergey Chirikov

    Your round buttons have an evident defect. This is aliasing of circles. It is exist an algorithm of circles drawing that enfeeble this artifact. Use it and your buttons will look more nice.

    Reply
  • The CRoundButton Class can not repaint itself!

    Posted by Legacy on 10/27/1999 12:00am

    Originally posted by: Juekun.Huang

    When i use the CRoundButton with tips,i find that the CRoundButton can't repaint itself!So once there is tip on the CRoundButton ,the button's face is corrupted!
    How can i solute the problem!

    Reply
  • Round Buttons

    Posted by Legacy on 06/12/1999 12:00am

    Originally posted by: B

    The "here" link in the above paragraph that points to

    /buttonctrl/RoundButtons.zip

    returns a file not found message.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Savvy enterprises are discovering that the cloud holds the power to transform IT processes and support business objectives. IT departments can use the cloud to redefine the continuum of development and operations—a process that is becoming known as DevOps. Download the Executive Brief DevOps: Why IT Operations Managers Should Care About the Cloud—prepared by Frost & Sullivan and sponsored by IBM—to learn how IBM SmartCloud Application services provide a robust platform that streamlines …

  • Live Event Date: August 13, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT If you are developing applications, you'll want to join us to learn how applications are changing as a result of gesture recognition. This technology will change how you and your users interact - not simply with your devices, but with the world around you. Your devices will be able to see and hear what your users are doing. Are your applications ready for this? Join us to learn about Intel® RealSense™ Technology, including never been …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds