I need native image drawn on a ButtonGadget

[OgreVorbis]

Hi,
Can someone please help me or provide a code sample for how to draw an image on a native ButtonGadget (with text) or how to draw text on a ButtonImageGadget? I'd much rather try drawing the image on the normal ButtonGadget though. The reason is because I want the button to retain the native theme of the OS. It's okay if it's not cross platform (just windows). See, I found examples of how to draw text on a ButtonImageGadget, but it is junky and not using the native GUI. I will send paypal to someone that provides a true solution.
I believe what I need to do is subclass or override the drawing method of the button so that I can draw an image onto it. I know it's possible and not too hard because C# WinForms supports this and so does Borland C++. As a matter of fact, if you just google Borland C++, you will see that it defaults to drawing the OK and cancel buttons with a green check mark and red X. It's very common to see images/icons on buttons in C++.

[Axolotl]

Try this as a start
https://www.purebasic.fr/english/viewtopic.php?p=539749

[BarryG]

It's as simple as this -> https://www.purebasic.fr/english/viewto ... 02#p542202

[RASHAD]

https://www.purebasic.fr/english/viewtopic.php?t=83837

[OgreVorbis]

It's as simple as this -> https://www.purebasic.fr/english/viewto ... 02#p542202

Thank you. This was super simple and clean.
I altered it to better fit my needs however. I wanted the images stored in the data section and in PNG format, not ICO. Turns out it didn't require too much effort to convert and load the ico into memory to put on the button gadget.

In case someone else needs to do this, here it is (the is Windows only platform)

Code: Select all

UsePNGImageDecoder()

Procedure PngToIco(Image) ; Convert an image to an ico. Returns the icon handle. To free it use : DestroyIcon_(icoHnd)
  
  If Not IsImage(Image) : ProcedureReturn #False : EndIf
  
  Protected iinf.ICONINFO
  Protected icoHnd
  
  ; Fill the ICONINFO structure
  iinf\fIcon = 1
  iinf\hbmMask = ImageID(Image)
  iinf\hbmColor = ImageID(Image)
  
  ; Create the icon in memory
  icoHnd = CreateIconIndirect_(iinf)
  
  ProcedureReturn icoHnd
  
EndProcedure


OpenWindow(0, 100, 100, 320, 200, "Testing button icons")

ButtonGadget(0, 32, 96, 96, 32, "  Play...")
ButtonGadget(1, 192, 96, 96, 32, "  Cancel")

;hIcon2 = ExtractIcon_(#Null, "shell32.dll", 137)
hIcon1 = CatchImage(#PB_Any, ?ChkImage)
hIcon2 = CatchImage(#PB_Any, ?XImage)

icoHnd1 = PngToIco(hIcon1)
icoHnd2 = PngToIco(hIcon2)
FreeImage(hIcon1) : FreeImage(hIcon2)

SendMessage_(GadgetID(0),#BM_SETIMAGE,#IMAGE_ICON,icoHnd1)
SendMessage_(GadgetID(1),#BM_SETIMAGE,#IMAGE_ICON,icoHnd2)

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

DestroyIcon_(icoHnd1) : DestroyIcon_(icoHnd2)

DataSection
ChkImage:
Data.b $89,$50,$4E,$47,$0D,$0A,$1A,$0A,$00,$00,$00,$0D,$49,$48,$44,$52
Data.b $00,$00,$00,$20,$00,$00,$00,$20,$08,$06,$00,$00,$00,$73,$7A,$7A
Data.b $F4,$00,$00,$00,$01,$73,$52,$47,$42,$00,$AE,$CE,$1C,$E9,$00,$00
Data.b $00,$04,$67,$41,$4D,$41,$00,$00,$B1,$8F,$0B,$FC,$61,$05,$00,$00
Data.b $00,$09,$70,$48,$59,$73,$00,$00,$0E,$C3,$00,$00,$0E,$C3,$01,$C7
Data.b $6F,$A8,$64,$00,$00,$01,$0B,$49,$44,$41,$54,$58,$47,$E5,$96,$D1
Data.b $0E,$83,$20,$0C,$45,$61,$3F,$8E,$7C,$79,$C7,$65,$E8,$10,$2B,$50
Data.b $6D,$63,$B2,$9D,$8C,$E8,$1E,$D6,$73,$AD,$95,$E9,$89,$C8,$3D,$C9
Data.b $AB,$1C,$1F,$E3,$F7,$03,$78,$E7,$29,$AF,$E8,$D9,$7B,$6D,$3A,$03
Data.b $10,$E7,$93,$98,$D6,$B2,$E0,$93,$09,$21,$F8,$CF,$99,$61,$07,$76
Data.b $F2,$0E,$26,$01,$66,$E5,$40,$3D,$00,$2B,$5F,$7B,$CF,$A0,$1A,$A0
Data.b $27,$3F,$CB,$A0,$16,$E0,$8A,$1C,$A8,$04,$90,$C8,$EB,$27,$00,$B0
Data.b $01,$50,$70,$B7,$4E,$9E,$61,$70,$47,$0E,$D8,$7D,$20,$17,$6D,$0A
Data.b $12,$31,$3F,$BE,$29,$07,$87,$0E,$6C,$45,$1B,$62,$8C,$84,$55,$BE
Data.b $F2,$F2,$C2,$AC,$1C,$F0,$33,$C0,$14,$AD,$39,$95,$B7,$E6,$44,$4F
Data.b $0E,$C4,$43,$38,$92,$D7,$19,$46,$72,$20,$0A,$B0,$84,$52,$7D,$42
Data.b $3E,$CB,$61,$08,$F3,$15,$72,$B7,$20,$94,$E3,$A4,$7C,$E6,$EA,$C1
Data.b $7C,$00,$8E,$9B,$72,$20,$9E,$81,$0D,$05,$39,$B8,$16,$40,$49,$0E
Data.b $E4,$01,$14,$E5,$40,$16,$40,$59,$0E,$0E,$01,$C8,$A5,$ED,$7F,$9D
Data.b $F8,$1A,$03,$39,$60,$3B,$90,$43,$D4,$26,$23,$39,$E8,$BE,$94,$7A
Data.b $FF,$DD,$FB,$2D,$E4,$60,$F8,$56,$5C,$FF,$01,$AD,$68,$C9,$C1,$70
Data.b $08,$5B,$99,$A6,$1C,$0C,$3B,$60,$8D,$7C,$1F,$50,$E6,$DF,$03,$38
Data.b $F7,$06,$2E,$CD,$8E,$A8,$CB,$01,$14,$B6,$00,$00,$00,$00,$49,$45
Data.b $4E,$44,$AE,$42,$60,$82

XImage:
Data.b $89,$50,$4E,$47,$0D,$0A,$1A,$0A,$00,$00,$00,$0D,$49,$48,$44,$52
Data.b $00,$00,$00,$20,$00,$00,$00,$20,$08,$06,$00,$00,$00,$73,$7A,$7A
Data.b $F4,$00,$00,$00,$01,$73,$52,$47,$42,$00,$AE,$CE,$1C,$E9,$00,$00
Data.b $00,$04,$67,$41,$4D,$41,$00,$00,$B1,$8F,$0B,$FC,$61,$05,$00,$00
Data.b $00,$09,$70,$48,$59,$73,$00,$00,$0E,$C3,$00,$00,$0E,$C3,$01,$C7
Data.b $6F,$A8,$64,$00,$00,$01,$4D,$49,$44,$41,$54,$58,$47,$ED,$96,$E1
Data.b $8E,$84,$20,$0C,$84,$E1,$5E,$1C,$79,$72,$96,$D9,$85,$4B,$ED,$52
Data.b $3A,$DD,$3D,$E3,$9F,$FB,$12,$A3,$26,$38,$33,$54,$8A,$E6,$D6,$5A
Data.b $BA,$93,$9F,$71,$BE,$8D,$FF,$00,$D7,$04,$C8,$B9,$3D,$0F,$02,$7F
Data.b $11,$4A,$A1,$D6,$F2,$B8,$B2,$19,$E3,$EB,$F3,$26,$A5,$E2,$3C,$63
Data.b $57,$40,$CC,$02,$62,$38,$B2,$37,$2B,$65,$0E,$BC,$67,$EC,$00,$23
Data.b $B9,$14,$03,$B5,$D6,$B5,$E0,$C2,$FC,$18,$67,$F3,$99,$4E,$68,$0D
Data.b $40,$F0,$38,$8E,$77,$C1,$8D,$39,$C6,$03,$2B,$C4,$3E,$40,$AF,$42
Data.b $19,$97,$26,$84,$F9,$8E,$70,$17,$9C,$AA,$10,$30,$2F,$A5,$2C,$17
Data.b $23,$B7,$15,$77,$23,$BD,$16,$66,$65,$BE,$31,$07,$E1,$0A,$4C,$60
Data.b $AC,$43,$81,$88,$39,$E0,$02,$10,$6B,$E1,$6C,$FB,$C2,$33,$07,$1F
Data.b $57,$40,$B2,$2A,$3D,$63,$0E,$FE,$24,$00,$D0,$A5,$67,$E1,$02,$8C
Data.b $D5,$CE,$C2,$CE,$1E,$F8,$01,$16,$AD,$A6,$C1,$DC,$67,$05,$22,$E6
Data.b $60,$DF,$86,$84,$B9,$04,$11,$BA,$5E,$28,$80,$5D,$81,$A0,$39,$40
Data.b $00,$F7,$83,$A5,$D8,$BE,$82,$65,$9F,$8F,$C3,$22,$1A,$62,$1D,$C0
Data.b $10,$98,$C6,$78,$DF,$DE,$BE,$C0,$86,$30,$2B,$A0,$67,$2F,$CD,$41
Data.b $35,$42,$C8,$71,$BB,$CF,$F0,$C4,$EF,$82,$8E,$36,$FF,$45,$ED,$90
Data.b $AB,$71,$5E,$08,$2A,$00,$D0,$E6,$BA,$DD,$AC,$90,$5E,$5B,$BA,$01
Data.b $CE,$72,$2F,$4E,$A2,$A2,$0A,$51,$73,$B0,$DD,$07,$E6,$42,$92,$C2
Data.b $96,$A8,$2E,$35,$63,$0E,$B6,$01,$56,$EF,$6F,$27,$3C,$C7,$B3,$E6
Data.b $80,$FA,$21,$F9,$44,$98,$85,$FB,$23,$BA,$10,$BA,$0B,$AE,$E2,$E6
Data.b $00,$29,$3D,$00,$51,$D5,$A9,$B6,$7A,$BC,$6F,$57,$00,$00,$00,$00
Data.b $49,$45,$4E,$44,$AE,$42,$60,$82

EndPtr:
EndDataSection

[OgreVorbis]

Oh, also I should keep to my word about the paypal. I ended up using BarryG's post. If you want, you can PM me.

[BarryG]

That was just a link to someone else's code. No PayPal needed.

[ebs]

I wanted the images stored in the data section and in PNG format, not ICO.

You don't have to convert the images to icons, you can do this instead:

Code: Select all

hIcon1 = CatchImage(#PB_Any, ?ChkImage)
hIcon2 = CatchImage(#PB_Any, ?XImage)

SendMessage_(GadgetID(0),#BM_SETIMAGE,#IMAGE_BITMAP,ImageID(hIcon1))
SendMessage_(GadgetID(1),#BM_SETIMAGE,#IMAGE_BITMAP,ImageID(hIcon2))

[OgreVorbis]

You don't have to convert the images to icons, you can do this instead:

Code: Select all

hIcon1 = CatchImage(#PB_Any, ?ChkImage)
hIcon2 = CatchImage(#PB_Any, ?XImage)

SendMessage_(GadgetID(0),#BM_SETIMAGE,#IMAGE_BITMAP,ImageID(hIcon1))
SendMessage_(GadgetID(1),#BM_SETIMAGE,#IMAGE_BITMAP,ImageID(hIcon2))

Thanks! That makes it so much simpler. I overlooked that because my brain thought it's a PNG, not a bitmap, but I wasn't thinking correctly.

For anyone else that finds this post in the future and is trying to do the same thing, I think you will need this code to convert your images to data statements (there are already posts for things like this, but I like mine the most

Code: Select all

theFile.s = ""
theName.s = ""
theOutput.s = ""

theFile = OpenFileRequester("Select file to create DATA statements", "", "All files (*.*)|*.*", 0)
theName = InputRequester("Image2DATA", "Type a name for your DATA segment", "")
isFirst = MessageRequester("Image2DATA", "Is this your first data segment chunk? (Do you want 'DataSection' header?)", #PB_MessageRequester_YesNo)

If theFile <> "" And theName <> ""
	If ReadFile(0, theFile)
		Lines.l = (Lof(0)-1)/16
		If isFirst = #PB_MessageRequester_Yes
			theOutput = "DataSection" + #CRLF$ + theName + ":" + #CRLF$
		Else
			theOutput = theName + ":" + #CRLF$
		EndIf
		For i.l = 0 To Lines
			theOutput + "Data.b "
			If i = Lines
				Bytes.l = (Lof(0)-Lines*16)-1
			Else
				Bytes = 15
			EndIf
			For j.l = 1 To Bytes
				theOutput + "$" + RSet(Hex(ReadByte(0)&$FF),2,"0") + ","
			Next
			theOutput + "$" + RSet(Hex(ReadByte(0)&$FF),2,"0")
			theOutput + #CRLF$
		Next
		If isFirst = #PB_MessageRequester_Yes
			theOutput + "EndDataSection"
		EndIf
		CloseFile(0)
	EndIf
EndIf

SetClipboardText(theOutput)

MessageRequester("Image2DATA", "The data was copied to the clipboard. Please paste into your program.", #PB_MessageRequester_Info)

[netmaestro]

See here: https://www.purebasic.fr/english/viewtopic.php?t=83837

[boddhi]

For anyone else that finds this post in the future and is trying to do the same thing, I think you will need this code to convert your images to data statements (there are already posts for things like this, but I like mine the most

Hello,

For fewer data lines in DataSection, You can use quads too:

Number of quads = Length of file/8
Number of bytes = Mod(Length of file,8)

and (if we store 8 quads per line)

Number of quad lines (Data.q) = Number of quads/8 quads per data line [+ 1 if Mod(Number of quads,8 quads per data line) <> 0]
Number of byte lines (Data.b) = 1 if Mod(Length of file,8) <> 0 else 0

[mk-soft]

Code: Select all

DataSection
  ImageIcon1:
  IncludeBinary "path and file name"
EndDataSection