GIF buttons

[Brian]

Hi,

I have been experimenting with using GIF buttons, as GIF and PNG graphics can be transparent. IWB doesn't load PNGs, so I started with GIFs. I quickly realised you couldn't make a bitmap button out of a GIF, so I turned to Andy's excellent, much-underrated MouseOver Control, and here we are

I have to say I haven't used the control much myself, but now I can see the advantages, apart from the nice, clean lines you get with a GIF, instead of using a bitmap button

Brian

[jalih]

I have been experimenting with using GIF buttons, as GIF and PNG graphics can be transparent. IWB doesn't load PNGs, so I started with GIFs.

IWB can easily load PNG's with just few lines of code using GDI+. I can post code example if needed.

[Brian]

Jalih,

That would be good - always ready to learn something different. It was just that I couldn't make a button using IWB's built-in commands, and I needed a shaped button

Brian

[jalih]

That would be good - always ready to learn something different.

Here is a small sample. You should add error handling and check if return values are success or failure. Replace PNG filename with your own PNG file and it should work fine.

Code Select Expand



$USE "gdiplus.lib"
DECLARE IMPORT, GdiplusStartup(pointer pToken byref, pointer GdiplusStartupInput, int GdiplusStartupOutput),int
DECLARE IMPORT, GdiplusShutdown(Uint token)
DECLARE IMPORT, GdipCreateFromHDC(uint hDC, pointer pGraphics byref),int
DECLARE IMPORT, GdipDeleteGraphics(int Graphics),int
DECLARE IMPORT, GdipCreateBitmapFromGdiDib(pointer GdiBitmapInfo, pointer gdiBitmapData, pointer pBitmap),int
DECLARE IMPORT, GdipLoadImageFromFile(wstring filename, pointer pImage byref),int
DECLARE IMPORT, GdipSaveImageToFile(pointer GpImage, wstring filename, pointer clsidEncoder, pointer encoderParams),int
DECLARE IMPORT, GdipDrawImageI(pointer pGraphics, pointer pImage, int x, int y),int
DECLARE IMPORT, GdipDrawImageRectI(pointer pGraphics, pointer pImage, int x, int y, int w, int h),int
DECLARE IMPORT, GdipDisposeImage(int image)
DECLARE IMPORT, GdipGetImageWidth(pointer pImage,uint width byref),int
DECLARE IMPORT, GdipGetImageHeight(pointer pImage,uint height byref),int


type GdiplusStartupInput
int GdiplusVersion
int DebugEventCallback
int SuppressBackgroundThread
int SuppressExternalCodecs
endtype


DEF w as WINDOW

OPENWINDOW w,0,0,360,480,@SIZE|@MINBOX|@MAXBOX|@NOAUTODRAW,0,"IWB can display PNG's",&main
CENTERWINDOW w

int result
uint iw, ih
pointer pImage
pointer pToken
pointer pGraphics
GdiplusStartupInput gsi

gsi.GdiplusVersion = 1
gsi.DebugEventCallback = NULL
gsi.SuppressBackgroundThread = FALSE
gsi.SuppressExternalCodecs = FALSE

GdiplusStartup(pToken,gsi,NULL)
result=GdipLoadImageFromFile(L"testi.png",pImage)
GdipGetImageWidth(pImage,iw)
GdipGetImageHeight(pImage,ih)
int hDC = GetHDC(w)
result=GdipCreateFromHDC(hDC,pGraphics)
run = 1
WAITUNTIL run = 0

ReleaseHDC(w, hDC)
CLOSEWINDOW w

GdipDisposeImage(pImage)
GdipDeleteGraphics(pGraphics)
GdiplusShutdown(pToken)
END


SUB main( ),INT
SELECT @MESSAGE
CASE @IDCLOSEWINDOW
run = 0
CASE @IDPAINT
GdipDrawImageRectI(pGraphics,pImage,0,0,iw,ih)
ENDSELECT

RETURN 0
ENDSUB


[Andy]

Brian,

Thanks for the support! it's a great simple example of how the MouseOverControl code can really make things easy.

Let's look at it a little more.

Firstly, we don't actually need to load any image on a control (in this case a button) at all, we just overlay it in the same position as the button.

Next, if we simply disable the button it will still be displayed over the top of the image - so we have to hide it.

Now the problem with the button hidden is that we can't click it, so this is where the include file commands do the work.

MouseOverControl(w1,1)   

This command stores the coordinates of the hidden button.

STARTTIMER w1,50

Start a fast timer - straight forward IWB command.

In the timer section:

TrackWindow(w1)

This command should always be used - it checks and updates both the window and all the control locations. That is every control which you have said you want to be tracked (the MouseOverControl(w1,1) command used earlier).

Finally, ControlClickUp(w1,1)

This command will return 1 when the mouse is over the hidden button and the left mouse button has been released. In other words you have left clicked on the button and let go.

Please note in this example w1 is our window, and 1 is the control id.

So with just three commands and a timer we can make a difficult problem very simple.

Indeed, if you take it a little further you can completely bypass the traditional method of detecting a button click.

Normally in the handler we would have:

CASE @IDCONTROL
         SELECT @CONTROLID

                      CASE 1
                          'Do something.........

You can remove the above and just use ControlClickUp(MyWindow,MyControl) in the timer section.

It just takes a little imagination in spotting where and when the MouseOverControls commands can really come into their own.

Nice one Brian!!


BTW: The un-referenced sub warnings you get when compiling are because in this example we are only using a few of the include file routines (just ignore them) - I could make this a lib file but it's still a work in progress.

You can get the latest MouseOverControls include file here (at the end of the post).
http://www.ionicwind.com/forums/index.php?topic=6045.0

[LarryMc]

and I needed a shaped button

I was looking for all those shaped button examples I made (even the profile of a sketched face) but couldn't find them

couldn't remember if they were all gifs

[Brian]

Jalih,

Thanks for the GDI code - I don't think I've ever seen that stuff before (or, more likely, not taken any notice!)

Loads a PNG no problem, although I think it would take a lot of jumping through hoops to code clickable buttons, especially with more than one button present. Andy's MouseOver stuff makes it a lot easier

Thanks again,

Brian