How to gray out a button image?

We need to gray out[1] buttons with images on in our toolkit. I just
wonder what is the best way to gray out the image. Has anyone done that
before? Does it need SDL_gfx or just SDL?

[1] [http://en.wikipedia.org/wiki/Grayed_out]

The easiest way is to keep track of the button state and if it is disabled,
you draw a grayed out version of the button. If you are using C++ you can
write a simple button class to handle tracking the state info, but if you
are using C you can still do the same thing but the data will need to be
stored someplace else.

Below is an example. This is not meant to be a complete solution, but
rather enough for you to understand the approach I am suggesting:

// Simple C++ button draw. All vars used are class members. You can also
// get the values to use in the dstRect directly from the SDL_Surface, but
// that is beyond the scope of this example.
void Button::Draw()
{
SDL_Rect dstRect;

dstRect.x = btnX;    // Class member for button X
dstRect.y = btnY;    // Class member for button Y
dstRect.w = btnW;    // Class member for button Width
dstRect.h = btnH;    // Class member for button Height

switch( btnState )
{
    case eButtonUp:
    case eButtonDown:
    case eButtonDisabled:
        SDL_BlitSurface( btnImages[btnState],NULL,screen,&dstRect );
        break;

    default:
        assert( false );
}

}
// Simple C version of button draw.
// Array of button images is passed in along with the state and X, Y
location
// You can also get the values to use in the dstRect directly from the
// SDL_Surface, but that is beyond the scope of this example.

void DrawButton( SDL_Surface *btnImages,int btnX,int btnY,int btnState )
{
SDL_Rect dstRect;

dstRect.x = btnX;
dstRect.y = btnY;
dstRect.w = 64;    // Hard coded, you would either pass this in or get

it from the image
dstRect.h = 32; // Hard coded, you would either pass this in or get
it from the image

switch( btnState )
{
    case eButtonUp:
    case eButtonDown:
    case eButtonDisabled:
        SDL_BlitSurface( btnImages[btnState],NULL,screen,&dstRect );
        break;

    default:
        assert( false );
}

}

I didn’t compile any of this so if there are typos I apologize. I hope this
helps you.

Ken Rogoway
Homebrew Software
HYPERLINK "http://www.homebrewsoftware.com/"http://www.homebrewsoftware.com/> ----- Original Message -----

From: sdl-bounces@lists.libsdl.org [HYPERLINK
"mailto:sdl-bounces at lists.libsdl.org"mailto:sdl-bounces at lists.libsdl.org] On
Behalf Of Erik
Sent: Tuesday, April 08, 2008 6:27 PM
To: A list for developers using the SDL library. (includes SDL-announce)
Subject: [SDL] How to gray out a button image?

We need to gray out[1] buttons with images on in our toolkit. I just wonder
what is the best way to gray out the image. Has anyone done that before?
Does it need SDL_gfx or just SDL?

[1] [HYPERLINK
"http://en.wikipedia.org/wiki/Grayed_out"http://en.wikipedia.org/wiki/Grayed
_out]


SDL mailing list
SDL at lists.libsdl.org
HYPERLINK
"http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org"http://lists.libsdl.org
/listinfo.cgi/sdl-libsdl.org

No virus found in this incoming message.
Checked by AVG.
Version: 7.5.519 / Virus Database: 269.22.9/1365 - Release Date: 4/8/2008
7:30 AM

No virus found in this outgoing message.
Checked by AVG.
Version: 7.5.519 / Virus Database: 269.22.9/1365 - Release Date: 4/8/2008
7:30 AM

If I haven’t misunderstood, you’re asking how to take an image and turn it
into just plain grayscale, to indicate a state of un-clickable. An easy way
to do this would be to scan the image with the Get_Pixel routine(loops in
the x and y directions) included in the documentation, and then average the
rgb values for each pixel into a new image. Viola, grayscale. (If that’s
what you are looking for, that is)
psuedocode:
SDL_Surface * button_regular = SDL_LoadBMP(“regular.bmp”);
SDL_Surface * button_gray = SDL_CreateRGBSurface(make image of appropriate
size);
for (int y=0; y<button_regular->h; y++)
for (int x=0; x<button_regular->w; x++)
{
Uint 8 r,g,b,a;
Uint32 pixel = Get_Pixel(button_regular,x,y);
SDL_GetRGB(pixel, button_regular->fmt, &r, &g, &b);
r = g = b = (r+g+b)/3;
pixel = SDL_MapRGB(button_gray->fmt, r, g, b);
Put_Pixel(button_gray,x,y,pixel);
}
//button_gray should now look just like button_regular, but in grayscale.

the get_pixel and put_pixel routines can be found in the SDL Documentation
under the examples 2-4 and 2-5.
Hope that helps,
-Dave Olsen> ----- Original Message -----

From: esigra@gmail.com (Erik)
To: "A list for developers using the SDL library. (includes SDL-announce)"

Sent: Tuesday, April 08, 2008 6:26 PM
Subject: [SDL] How to gray out a button image?

We need to gray out[1] buttons with images on in our toolkit. I just
wonder what is the best way to gray out the image. Has anyone done that
before? Does it need SDL_gfx or just SDL?

[1] [http://en.wikipedia.org/wiki/Grayed_out]


SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

The formula for converting something to grey scale is something similar to

G * 59%
B * 11 %
R * 30 %

Those are pulled off my head from a project about 7 years ago, so they
might be wrong… but they should get ya darn close :).

You’ll just have to optionally lock the surface, and alter the pixels.
I’d suggest copying the surface to a new surface and modifying the
secondary surface.

So, you’ll get something at the pixel level similar to:

grayed = (source_pixel_red * 0.10) + (source_pixel_green * 0.61) +
(source_pixel_blue * 0.19);

destination_pixel_red = grayed;
destination_pixel_green = grayed;
destination_pixel_blue = grayed;

Sorry for the lack of real code, but if you can do put/get pixel or
other pixel manipulation stuff, the psuedo code should give ya the
idea/concept.

Actually, a quick google gives some concept code in other languages,
and appears my numbers were correct, lucky memory guess heh:

http://www.bobpowell.net/grayscale.htm

-WillOn Tue, Apr 8, 2008 at 8:20 PM, David Olsen wrote:

If I haven’t misunderstood, you’re asking how to take an image and turn it
into just plain grayscale, to indicate a state of un-clickable. An easy way
to do this would be to scan the image with the Get_Pixel routine(loops in
the x and y directions) included in the documentation, and then average the
rgb values for each pixel into a new image. Viola, grayscale. (If that’s
what you are looking for, that is)
psuedocode:
SDL_Surface * button_regular = SDL_LoadBMP(“regular.bmp”);
SDL_Surface * button_gray = SDL_CreateRGBSurface(make image of appropriate
size);
for (int y=0; y<button_regular->h; y++)
for (int x=0; x<button_regular->w; x++)
{
Uint 8 r,g,b,a;
Uint32 pixel = Get_Pixel(button_regular,x,y);
SDL_GetRGB(pixel, button_regular->fmt, &r, &g, &b);
r = g = b = (r+g+b)/3;
pixel = SDL_MapRGB(button_gray->fmt, r, g, b);
Put_Pixel(button_gray,x,y,pixel);
}
//button_gray should now look just like button_regular, but in grayscale.

the get_pixel and put_pixel routines can be found in the SDL Documentation
under the examples 2-4 and 2-5.
Hope that helps,
-Dave Olsen

----- Original Message -----
From: “Erik”
To: “A list for developers using the SDL library. (includes SDL-announce)”

Sent: Tuesday, April 08, 2008 6:26 PM Subject: [SDL] How to gray out a button image?

We need to gray out[1] buttons with images on in our toolkit. I just
wonder what is the best way to gray out the image. Has anyone done that
before? Does it need SDL_gfx or just SDL?

[1] [http://en.wikipedia.org/wiki/Grayed_out]


SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org


SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

grayed = (source_pixel_red * 0.10) + (source_pixel_green * 0.61) +
(source_pixel_blue * 0.19);

Doh, mistyped math in the line,

grayed = (source_pixel_red * 0.30) + (source_pixel_green * 0.59) +
(source_pixel_blue * 0.11);

-Will

Doh! I over complicated the problem by not fully reading your original
post. The code posted by the other contributors will help you
programmatically generate a grayed out button. Caution, doing this realtime
(in your game loop) is slow, so you probably want to create these in your
startup code where you load your image.

Ken Rogoway
Homebrew Software
HYPERLINK "http://www.homebrewsoftware.com/"http://www.homebrewsoftware.com/_____

From: sdl-bounces@lists.libsdl.org [mailto:sdl-bounces at lists.libsdl.org] On
Behalf Of Ken Rogoway
Sent: Tuesday, April 08, 2008 7:42 PM
To: 'A list for developers using the SDL library. (includes SDL-announce)'
Subject: Re: [SDL] How to gray out a button image?

The easiest way is to keep track of the button state and if it is disabled,
you draw a grayed out version of the button. If you are using C++ you can
write a simple button class to handle tracking the state info, but if you
are using C you can still do the same thing but the data will need to be
stored someplace else.

Below is an example. This is not meant to be a complete solution, but
rather enough for you to understand the approach I am suggesting:

// Simple C++ button draw. All vars used are class members. You can also
// get the values to use in the dstRect directly from the SDL_Surface, but
// that is beyond the scope of this example.
void Button::Draw()
{
SDL_Rect dstRect;

dstRect.x = btnX;    // Class member for button X
dstRect.y = btnY;    // Class member for button Y
dstRect.w = btnW;    // Class member for button Width
dstRect.h = btnH;    // Class member for button Height

switch( btnState )
{
    case eButtonUp:
    case eButtonDown:
    case eButtonDisabled:
        SDL_BlitSurface( btnImages[btnState],NULL,screen,&dstRect );
        break;

    default:
        assert( false );
}

}
// Simple C version of button draw.
// Array of button images is passed in along with the state and X, Y
location
// You can also get the values to use in the dstRect directly from the
// SDL_Surface, but that is beyond the scope of this example.

void DrawButton( SDL_Surface *btnImages,int btnX,int btnY,int btnState )
{
SDL_Rect dstRect;

dstRect.x = btnX;
dstRect.y = btnY;
dstRect.w = 64;    // Hard coded, you would either pass this in or get

it from the image
dstRect.h = 32; // Hard coded, you would either pass this in or get
it from the image

switch( btnState )
{
    case eButtonUp:
    case eButtonDown:
    case eButtonDisabled:
        SDL_BlitSurface( btnImages[btnState],NULL,screen,&dstRect );
        break;

    default:
        assert( false );
}

}

I didn’t compile any of this so if there are typos I apologize. I hope this
helps you.

Ken Rogoway
Homebrew Software
HYPERLINK "http://www.homebrewsoftware.com/"http://www.homebrewsoftware.com/

----- Original Message -----
From: sdl-bounces@lists.libsdl.org [HYPERLINK
"mailto:sdl-bounces at lists.libsdl.org"mailto:sdl-bounces at lists.libsdl.org] On
Behalf Of Erik
Sent: Tuesday, April 08, 2008 6:27 PM
To: A list for developers using the SDL library. (includes SDL-announce)
Subject: [SDL] How to gray out a button image?

We need to gray out[1] buttons with images on in our toolkit. I just wonder
what is the best way to gray out the image. Has anyone done that before?
Does it need SDL_gfx or just SDL?

[1] [HYPERLINK
"http://en.wikipedia.org/wiki/Grayed_out"http://en.wikipedia.org/wiki/Grayed
_out]


SDL mailing list
SDL at lists.libsdl.org
HYPERLINK
"http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org"http://lists.libsdl.org
/listinfo.cgi/sdl-libsdl.org

No virus found in this incoming message.
Checked by AVG.
Version: 7.5.519 / Virus Database: 269.22.9/1365 - Release Date: 4/8/2008
7:30 AM

No virus found in this outgoing message.
Checked by AVG.
Version: 7.5.519 / Virus Database: 269.22.9/1365 - Release Date: 4/8/2008
7:30 AM

No virus found in this incoming message.
Checked by AVG.
Version: 7.5.519 / Virus Database: 269.22.9/1365 - Release Date: 4/8/2008
7:30 AM

No virus found in this outgoing message.
Checked by AVG.
Version: 7.5.519 / Virus Database: 269.22.9/1365 - Release Date: 4/8/2008
7:30 AM

Will Langford skrev:

The formula for converting something to grey scale is something similar to

G * 59%
B * 11 %
R * 30 %

Those are pulled off my head from a project about 7 years ago, so they
might be wrong… but they should get ya darn close :).

Thanks for the information. I had no idea that there should be such
magic numbers in the calculation. I would have just used the
(unweighted) average, like David Olsen wrote. Is there a link with the
rationale for those particular numbers?

I was actually expecting to not do the gray scale conversion myself. I
was thinking that we would not be the first SDL based project that uses
pictorial buttons that can be disabled. I was hoping that there was some
library function that could do it and take advantage of special hardware
features on different platforms (such as MMX).

Thanks for the information. I had no idea that there should be such
magic numbers in the calculation. I would have just used the
(unweighted) average, like David Olsen wrote. Is there a link with the
rationale for those particular numbers?

Actually it all has to do with color theory. If ya glanced at the
link included with examples from other languages/platforms, I believe
they called one of the ‘grayed’ component values ‘luminosity’ (or
similar). And, if you think about it in just plain old experience –
green is a much “brighter” color than red or blue, etc. A quick
example would be to draw three large max-intensity red, green, and
blue rectangles in your favorite graphics editor… and just note how
vibrant the green appears. Similarly, if your art program can do grey
scale, you can convert these three rectangles to gray and notice
brightness difference… and if it offers histogram stuffs or other
analytical tools, they might show you as well. Some more research
into the HSV color space might help explain things as well.

I was actually expecting to not do the gray scale conversion myself. I
was thinking that we would not be the first SDL based project that uses

I imagine there are some third party lib’s (similar to sdl_image,
sdl_mixer, sdl_net, sdl_gfx, sdl_font, etc) that might offer gray
scaling. Inclusion of a gray scale conversion function in SDL is
probably debatable as to the core / meaning of what SDL is. You can
convert an image from one surface format to another, but I’m unsure
how SDL would react if you tried to convert a color surface into an
8bit palletized surface consisting of 256 shades of gray… it’d be
kind of interesting to find out though :).

pictorial buttons that can be disabled. I was hoping that there was some
library function that could do it and take advantage of special hardware
features on different platforms (such as MMX).

The last time I did anything with MMX in assembly was with the
original MMX spec. I don’t believe it offered anything for color
conversion of this type. Adding without overflow and similar, sure…
but… not too sure about colorspace conversion. Newer MMX/SSE stuff
might be able to handle it, though. Some graphics cards might be able
to do the colorspace conversion into gray scale, but I doubt it…

As suggested by someone else, you can try creating your grayscale
surfaces before actively using them… this way it’s just a plane ole
regular blit. If you really want something real time, you might try
creating R G B lookup tables of each component so you don’t have to do
the math (and instead its just an array index lookup. have your code
generate the lookup on startup or something?). On a 233mhz system I
was able to get decent real time gray scale conversion on a non-SDL
project… so… ya might be in for a surprise.

-Will

You may want to use integer math …

The “brightness” value is the Y component. See also the blurb on MPEG
compatibility (re: range of Y) and note that the input RGB values need
to be uint32’s to avoid overflows.

Will Langford wrote:

grayed = (source_pixel_red * 0.10) + (source_pixel_green * 0.61) +
(source_pixel_blue * 0.19);

Doh, mistyped math in the line,

grayed = (source_pixel_red * 0.30) + (source_pixel_green * 0.59) +
(source_pixel_blue * 0.11);

-Will


SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

-------------- next part --------------
A non-text attachment was scrubbed…
Name: aschiffler.vcf
Type: text/x-vcard
Size: 135 bytes
Desc: not available
URL: http://lists.libsdl.org/pipermail/sdl-libsdl.org/attachments/20080415/849d7c9a/attachment.vcf

So you are saying that the digital output of this camera is cooked mpeg
video?

Ick!

That has nothing to do with good-old full-linear digital.

Are you sure?

If this is a gray scale camera, why would you care about RGB at all?

James. :o)> ----- Original Message -----

From: aschiffler@ferzkopp.net (Andreas Schiffler)
To: "A list for developers using the SDL library. (includes SDL-announce)"

Sent: Tuesday, April 15, 2008 11:27 PM
Subject: Re: [SDL] How to gray out a button image?

You may want to use integer math …
http://en.wikipedia.org/wiki/YUV#Numerical_approximations

The “brightness” value is the Y component. See also the blurb on MPEG
compatibility (re: range of Y) and note that the input RGB values need
to be uint32’s to avoid overflows.

Will Langford wrote:

grayed = (source_pixel_red * 0.10) + (source_pixel_green * 0.61) +
(source_pixel_blue * 0.19);

Doh, mistyped math in the line,

grayed = (source_pixel_red * 0.30) + (source_pixel_green * 0.59) +
(source_pixel_blue * 0.11);

-Will


SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org




SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

Andreas Schiffler skrev:

You may want to use integer math …
http://en.wikipedia.org/wiki/YUV#Numerical_approximations

Thanks for the link. It gives the floating point values with 3 digits (I
just got 2 before). I implemented a fixed point calculation. Then I
googled for the magic numbers that I used and found this program that
does exactly the calculation that I am doing (search for lumtbl):
http://fisheye1.cenqua.com/browse/~raw,r=11.44/brlcad/brlcad/libfb/if_X24.c