Button with icons

[martmen]

Hello LitDev, 

is it possible with the LitDev extension to display buttons with icons instead of text? It would be great to be able to use both the standard Windows icons and custom icons.
I want to build my DRAWING program using icons.

Many thanks
martmen

[Scout]

Hi Martmen,

here's a fun example of how to add images to buttons.

ID: PPWP247.000
The images are located in the /img subdirectory:

   

  KaterHoop.png (Size: 5.72 KB / Downloads: 9)

---

  KaterMukke.png (Size: 2.43 KB / Downloads: 9)    

---

       

[AbsoluteBeginner]

Thanks, Scout.

That's a very interesting example. 

[litdev]

Nice example originally from Papa Lapub, who was a big contributor to the original SB MS forum.

For me I had to make a couple changes, see PPWP247.000-0.  First the crop size was too big for the W7Orb.png image (causing an error) as I downloaded them, and second the GW size (with resizing set off) was too small to show the buttons (I doubled it size).

The main parts are:

LDShapes.BrushImage - to make an image brush
LDControls.SetButtonStyle - to set different styles for mouseover, click etc - the styles are defined by brushes that can be of several different types, including image

Interestingly I also found this FDNW187.000, by you Martmen I think using SetButtonStyle, just with colours, not images

Finally, a super simple example to run:

Code:

GraphicsWindow.Show()
LDNetwork.SetSSL()
LDGraphicsWindow.PauseUpdates()
button = Controls.AddButton("Press Me",50,50)
brush1 = LDShapes.BrushGradient("1=Yellow;2=Red;3=Yellow;","H")
brush2 = LDShapes.BrushImage("https://litdev.uk/game_images/uploads/bee.png")
LDControls.SetButtonStyle(button,brush1,"Orange",brush2,"Black","Gray","Transparent",10,"True")
Controls.SetSize(button,80,80)
LDGraphicsWindow.ResumeUpdates()

[martmen]

Show SZPW847.000

I’d like to implement that as buttons.

[litdev]

Hi,

The best way is to create your button images and save or create in a png and load from a file.  You can save multiple images for a button or buttons and split the images as required using LDImage.SplitImage.

Another approach is to draw the images as you have done and check when a mouse is clicked if it is inside the button.  This is fairly simple to achieve, but won't easily give you the MouseOver effect that make a button clearer.

You can create an image in SB code directly, setting each pixel value, see LDImage.GetImagePixels for example.  This I would only consider in last resort for dynamic button design that isn't known at compile time - more complex and generally unnecessay.

As a slightly simpler approach you can create an image from a part of the screen, see LDImage.Capture rather than directly from a file (I still recommend using a file) - this requires the image to be visible on screen so may create some flicker as it creates the image.

See WSQS642.000-0 which uses the last method which is closest to what you want I think, but its a bit tricky, but fun as well.

[martmen]

show VFPF802.000

My Buttons without save it to a file.

LitDev you are the best. Thank You verry much.