Image button without outline

Just starting out? Need help? Post your questions and find answers here.
mag
Enthusiast
Enthusiast
Posts: 104
Joined: Mon Mar 29, 2004 1:46 pm

Image button without outline

Post by mag »

I'm on window. Can we have an image button but without the button outline

What I can do now have outline. see this image
Image

Also if posible I want the image to be changed onclick and onmove inside the area. thanks
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4613
Joined: Sun Apr 12, 2009 6:27 am

Re: Image button without outline

Post by RASHAD »

Hi

Code: Select all

UsePNGImageDecoder()

CreateImage(10,120,40,32 , #PB_Image_Transparent)
hIcon = ExtractIcon_(0,"imageres.dll",100)
StartDrawing(ImageOutput(10))
  DrawImage(hIcon,4,4)
  DrawingMode( #PB_2DDrawing_AlphaChannel | #PB_2DDrawing_Transparent ) 
  DrawText(40,12,"Hi there")
StopDrawing()

OpenWindow(0,0,0,640,480,"Buttonimage test",#PB_Window_SystemMenu| #PB_Window_ScreenCentered)
ContainerGadget(0,10,10,120,40)
  ButtonImageGadget(1,-3,-3,126,46,ImageID(10))
CloseGadgetList()
Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      Quit = 1
      
  EndSelect
Until Quit = 1
Egypt my love
User avatar
jacdelad
Addict
Addict
Posts: 1402
Joined: Wed Feb 03, 2021 12:46 pm
Location: Planet Riesa
Contact:

Re: Image button without outline

Post by jacdelad »

On Windows:

Code: Select all

SetWindowLongPtr_(GadgetID(#MyButtonImage), #GWL_STYLE, #BS_FLAT | #BS_OWNERDRAW | GetWindowLongPtr_(GadgetID(#MyButtonImage), #GWL_STYLE))
PureBasic 6.04/XProfan X4a/Embarcadero RAD Studio 11/Perl 5.2/Python 3.10
Windows 11/Ryzen 5800X/32GB RAM/Radeon 7770 OC/3TB SSD/11TB HDD
Synology DS1821+/36GB RAM/130TB
Synology DS920+/20GB RAM/54TB
Synology DS916+ii/8GB RAM/12TB
mag
Enthusiast
Enthusiast
Posts: 104
Joined: Mon Mar 29, 2004 1:46 pm

Re: Image button without outline

Post by mag »

@RASHAD
Thank you. Your code work fine to make icon button with no borderline.
In my case I want to make the whole button flat in certain color like the image.
But I can use you solution also. tnks

@ jacdelad
This working great to elimenate the border or 3d of a button.
But for some reason in my computer the button become less responsive when I repeat click.
I think may be this the problem:
BS_OWNERDRAW
Creates an owner-drawn button. The owner window receives a WM_DRAWITEM message when a visual aspect of the button has changed. Do not combine the BS_OWNERDRAW style with any other button styles.
User avatar
mk-soft
Always Here
Always Here
Posts: 5249
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Image button without outline

Post by mk-soft »

With CanvasGadget ... ;)

Update v1.05 ;)
- All OS

Code: Select all

;- CanvasButtonGadget by mk-soft, v1.05, 08.12.2023

Procedure DrawCanvasButton(Gadget, Image, BackColor, Offset = 0)
  Protected dx, dy, Image2
  
  dx = DesktopScaledX(GadgetWidth(Gadget))
  dy = DesktopScaledY(GadgetHeight(Gadget))
  
  If StartDrawing(CanvasOutput(Gadget))
    If Offset
      Box(0, 0, dx, dy, $DCDCDC)
      Box(Offset, Offset, dx, dy, BackColor)
    Else
      Box(0, 0, dx, dy, BackColor)
    EndIf
    If IsImage(Image)
      If ImageWidth(image) = dx
        DrawAlphaImage(ImageID(Image), Offset, Offset)
      Else
        Image2 = CopyImage(Image, #PB_Any)
        ResizeImage(Image2, dx, dy)
        DrawAlphaImage(ImageID(Image2), Offset, Offset)
        FreeImage(Image2)
      EndIf
    EndIf
    StopDrawing()
  EndIf
EndProcedure

Procedure DoCanvasButtonEvent()
  Protected Gadget = EventGadget()
  Protected Image = GetGadgetData(Gadget)
  
  Select EventType()
    Case #PB_EventType_MouseEnter
      DrawCanvasButton(Gadget, Image, $FFFFE0)
    Case #PB_EventType_MouseLeave
      DrawCanvasButton(Gadget, Image, $DCDCDC)
    Case #PB_EventType_LeftButtonDown
      DrawCanvasButton(Gadget, Image, $EEEEAF, 1)
    Case #PB_EventType_LeftButtonUp
      DrawCanvasButton(Gadget, Image, $FFFFE0)
    
  EndSelect
EndProcedure

Procedure CanvasButtonGadget(Gadget, x, y, Width, Height, Image)
  Protected r1
  r1 = CanvasGadget(Gadget, x, y, Width, Height)
  If Gadget = #PB_Any
    Gadget = r1
  EndIf
  If r1
    SetGadgetData(Gadget, Image)
    DrawCanvasButton(Gadget, Image, $DCDCDC)
    BindGadgetEvent(Gadget, @DoCanvasButtonEvent())
  EndIf
  ProcedureReturn r1
EndProcedure

; ****

Procedure CreateButtonImage(Image, Width, Height, Text.s, IconID)
  Static Font
  Protected r1, dx, dy
  
  If Not Font
    Font = LoadFont(#PB_Any, "Segoe UI", 11, #PB_Font_HighQuality)
  EndIf
  
  dx = DesktopScaledX(Width)
  dy = DesktopScaledY(Height)
  
  r1 = CreateImage(Image, dx, dy, 32, #PB_Image_Transparent)
  If Image = #PB_Any
    Image = r1
  EndIf
  If r1
    If StartDrawing(ImageOutput(Image))
      DrawImage(IconID, DesktopScaledX(4), DesktopScaledY(4))
      DrawingFont(FontID(Font))
      DrawingMode( #PB_2DDrawing_AlphaChannel | #PB_2DDrawing_Transparent ) 
      DrawText(DesktopScaledX(40), DesktopScaledY(10), Text.s)
      StopDrawing()
    EndIf
  EndIf
  ProcedureReturn r1
EndProcedure

Procedure CreateButtonVectorImage(Image, Width, Height, Text.s, IconID)
  Static Font
  Protected r1, dx, dy
  
  If Not Font
    Font = LoadFont(#PB_Any, "Segoe UI", 11, #PB_Font_HighQuality)
  EndIf
  
  dx = DesktopScaledX(Width)
  dy = DesktopScaledY(Height)
  
  r1 = CreateImage(Image, dx, dy, 32, #PB_Image_Transparent)
  If Image = #PB_Any
    Image = r1
  EndIf
  If r1
    If StartVectorDrawing(ImageVectorOutput(Image))
      MovePathCursor(DesktopScaledX(4), DesktopScaledY(4))
      DrawVectorImage(IconID, 255, DesktopScaledX(32), DesktopScaledY(32))
      VectorFont(FontID(Font), DesktopScaledX(12 * 96 / 72))
      MovePathCursor(DesktopScaledX(8+32+4), (VectorOutputHeight() - DesktopScaledY(2*4) - VectorTextHeight(Text, #PB_VectorText_Visible))/2)
      DrawVectorText(Text)    
      StopVectorDrawing()
    EndIf
  EndIf
  ProcedureReturn r1
EndProcedure

UsePNGImageDecoder()

CompilerIf #PB_Compiler_OS = #PB_OS_Windows
  
  hIcon = ExtractIcon_(0,"imageres.dll", 100)
  CreateButtonImage(10, 120, 40, "Hi there", hIcon)
  DestroyIcon_(hIcon)
  
  hIcon = ExtractIcon_(0,"imageres.dll", 101)
  CreateButtonVectorImage(11, 120, 40, "Its Nice", hIcon)
  DestroyIcon_(hIcon)
 
CompilerElse
  
  hIcon = LoadImage(0, #PB_Compiler_Home + "examples/3d/Data/Textures/GLX_icon.png")
  CreateButtonVectorImage(10, 120, 40, "Hi there", hIcon)
  
  hIcon = LoadImage(0, #PB_Compiler_Home + "examples/3d/Data/Textures/grass1.png")
  CreateButtonVectorImage(11, 120, 40, "Its Nice", hIcon)
  
CompilerEndIf

OpenWindow(0,0,0,640,480,"Canvas Button Test",#PB_Window_SystemMenu| #PB_Window_ScreenCentered)

CanvasButtonGadget(1, 10, 10, 120, 40, 10)
CanvasButtonGadget(2, 140, 10, 120, 40, 11)
CanvasButtonGadget(3, 10, 60, 360, 120, 11)

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      Quit = 1
      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case 1
          Select EventType()
            Case #PB_EventType_LeftClick
              Debug "Button 1"
              
          EndSelect
        Case 2
          Select EventType()
            Case #PB_EventType_LeftClick
              Debug "Button 2"
              
          EndSelect
          
      EndSelect
      
  EndSelect
Until Quit = 1
Last edited by mk-soft on Fri Dec 08, 2023 10:04 pm, edited 5 times in total.
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Image button without outline

Post by firace »

mk-soft wrote: Fri Dec 08, 2023 12:49 pm With CanvasGadget ... ;)

Update v1.02 ;)
Hey, that's a nice implementation!
But unfortunately on my main ASUS laptop (where DPI is 150%), there's an issue:

Image
User avatar
Caronte3D
Addict
Addict
Posts: 1000
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: Image button without outline

Post by Caronte3D »

It's the same history of ever, the DPI think :?
To solve it you must scale the image and use: DesktopScaledX(), DesktopScaledY()...
User avatar
ChrisR
Addict
Addict
Posts: 1098
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: Image button without outline

Post by ChrisR »

Yes, nice implementation :)
With DesktopScaledX,Y and VectorDrawing for the Font size

Code: Select all

;- CanvasButtonGadget by mk-soft, v1.02, 08.12.2023

; Draw only pixel with alpha cancel
Procedure CanvasFilterCallback(x, y, SourceColor, TargetColor)
  If SourceColor & $FF000000
    ProcedureReturn SourceColor
  Else
    ProcedureReturn TargetColor
  EndIf
EndProcedure

Procedure DrawCanvasButton(Gadget, Image, BackColor, Offset = 0)
  If StartDrawing(CanvasOutput(Gadget))
    If Offset
      Box(0, 0, OutputWidth(), OutputHeight(), $DCDCDC)
      Box(DesktopScaledX(Offset), DesktopScaledY(Offset), OutputWidth() - DesktopScaledX(2*Offset), OutputHeight() - DesktopScaledY(2*Offset), BackColor)
    Else
      Box(0, 0, OutputWidth(), OutputHeight(), BackColor)
    EndIf
      DrawingMode(#PB_2DDrawing_CustomFilter)
      CustomFilterCallback(@CanvasFilterCallback())
      DrawImage(ImageID(Image), DesktopScaledX(Offset), (OutputHeight() - DesktopScaledY(2*Offset) - ImageHeight(Image))/2)
    StopDrawing()
  EndIf
EndProcedure

Procedure DoCanvasButtonEvent()
  Protected Gadget = EventGadget()
  Protected Image = GetGadgetData(Gadget)
  
  Select EventType()
    Case #PB_EventType_MouseEnter
      DrawCanvasButton(Gadget, Image, $FFFFE0)
    Case #PB_EventType_MouseLeave
      DrawCanvasButton(Gadget, Image, $DCDCDC)
    Case #PB_EventType_LeftButtonDown
      DrawCanvasButton(Gadget, Image, $EEEEAF, 1)
    Case #PB_EventType_LeftButtonUp
      DrawCanvasButton(Gadget, Image, $FFFFE0)
    
  EndSelect
EndProcedure

Procedure CanvasButtonGadget(Gadget, x, y, Width, Height, Image)
  Protected r1
  r1 = CanvasGadget(Gadget, x, y, Width, Height)
  If Gadget = #PB_Any
    Gadget = r1
  EndIf
  If r1
    SetGadgetData(Gadget, Image)
    DrawCanvasButton(Gadget, Image, $DCDCDC)
    BindGadgetEvent(Gadget, @DoCanvasButtonEvent())
  EndIf
  ProcedureReturn r1
EndProcedure

; ****

UsePNGImageDecoder()

LoadFont(0, "Segoe UI", 12)

CreateImage(10, DesktopScaledX(120), DesktopScaledY(40), 32, #PB_Image_Transparent)
hIcon = ExtractIcon_(0, "imageres.dll", 100)
If StartVectorDrawing(ImageVectorOutput(10))
  MovePathCursor(DesktopScaledX(8), DesktopScaledY(4))
  DrawVectorImage(hIcon, 255, DesktopScaledX(32), DesktopScaledY(32))
  VectorFont(FontID(0), DesktopScaledX(12 * 96 / 72))
  MovePathCursor(DesktopScaledX(8+32+4), (VectorOutputHeight() - DesktopScaledY(2*4) - VectorTextHeight("Hi there", #PB_VectorText_Visible))/2)
  DrawVectorText("Hi there")    
  StopVectorDrawing()
EndIf
DestroyIcon_(hIcon)

CreateImage(11, DesktopScaledX(120), DesktopScaledY(40), 32, #PB_Image_Transparent)
hIcon = ExtractIcon_(0, "imageres.dll", 101)
If StartVectorDrawing(ImageVectorOutput(11))
  MovePathCursor(DesktopScaledX(8), DesktopScaledY(4))
  DrawVectorImage(hIcon, 255, DesktopScaledX(32), DesktopScaledY(32))
  VectorFont(FontID(0), DesktopScaledX(12 * 96 / 72))
  MovePathCursor(DesktopScaledX(8+32+4), (VectorOutputHeight() - DesktopScaledY(2*4) - VectorTextHeight("Its Nice", #PB_VectorText_Visible))/2)
  DrawVectorText("Its Nice")    
  StopVectorDrawing()
EndIf
DestroyIcon_(hIcon)
      
OpenWindow(0, 0, 0, DesktopScaledX(270), DesktopScaledY(60), "Canvas Button Test", #PB_Window_SystemMenu| #PB_Window_ScreenCentered)

CanvasButtonGadget(1, DesktopScaledX(10), DesktopScaledY(10), DesktopScaledX(120), DesktopScaledY(40), 10)
CanvasButtonGadget(2, DesktopScaledX(140), DesktopScaledY(10), DesktopScaledX(120), DesktopScaledY(40), 11)

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      Quit = 1
      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case 1
          Select EventType()
            Case #PB_EventType_LeftClick
              Debug "Button 1"
              
          EndSelect
        Case 2
          Select EventType()
            Case #PB_EventType_LeftClick
              Debug "Button 2"
              
          EndSelect
          
      EndSelect
      
  EndSelect
Until Quit = 1
Last edited by ChrisR on Fri Dec 08, 2023 6:51 pm, edited 1 time in total.
mag
Enthusiast
Enthusiast
Posts: 104
Joined: Mon Mar 29, 2004 1:46 pm

Re: Image button without outline

Post by mag »

Nice. perfect
User avatar
mk-soft
Always Here
Always Here
Posts: 5249
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Image button without outline

Post by mk-soft »

@Chris,
Nice Vector Drawing.

ExtractIcon provides a larger image.
I have also tried to customise it a little. See above v1.03
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
User avatar
ChrisR
Addict
Addict
Posts: 1098
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: Image button without outline

Post by ChrisR »

It was just my 2 cts.
Your CreateButtonImage does it.
CompilerIf #PB_Compiler_DPIAware is not necessarily required, DesktopScaledX,Y multiplies by 1 without the DPIaware option.
An additional function yes, but personally I don't bother testing DPIAware flag, it's easier.
User avatar
ChrisR
Addict
Addict
Posts: 1098
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: Image button without outline

Post by ChrisR »

I also like Rashad's example, so easy to hide borders.
Always thinking about containers first and if that doesn't do it, he will probably surprise us by finding an API that will do it :wink:
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4613
Joined: Sun Apr 12, 2009 6:27 am

Re: Image button without outline

Post by RASHAD »

OK we have right now a very good collection
One more for fun :D
Pick your favored style

Code: Select all

Import "Uxtheme.lib"
  SetWindowTheme(Window.l, Body.p-unicode, Title.p-unicode)                                                  
EndImport

UsePNGImageDecoder()

CreateImage(10,120,40,32 , #PB_Image_Transparent)
hIcon = ExtractIcon_(0,"imageres.dll",100)
StartDrawing(ImageOutput(10))
  DrawImage(hIcon,4,4)
  DrawingMode( #PB_2DDrawing_AlphaChannel | #PB_2DDrawing_Transparent ) 
  DrawText(40,12,"Hi there")
StopDrawing()

OpenWindow(0,0,0,400,300,"ListIcon Example",#PB_Window_SystemMenu | 1)

ButtonImageGadget(1, 10, 10, 120, 40, ImageID(10))
;SetWindowTheme(GadgetID(1),"", "TASKBAND")
;SetWindowTheme(GadgetID(1),"", "BUTTON")
;SetWindowTheme(GadgetID(1),"", "STATUS")
;SetWindowTheme(GadgetID(1),"", "EXPLORERBAR")
SetWindowTheme(GadgetID(1),"", "REBAR")

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      Quit = 1     

  EndSelect
Until Quit = 1
Egypt my love
dige
Addict
Addict
Posts: 1238
Joined: Wed Apr 30, 2003 8:15 am
Location: Germany
Contact:

Re: Image button without outline

Post by dige »

Hi RASHAD,

nice demo of SetWindowTheme() usage. What other styles (pszSubAppName) are possible? Is it also possible to modernise the look of the gadgets?

Kind regards

dige
"Daddy, I'll run faster, then it is not so far..."
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4613
Joined: Sun Apr 12, 2009 6:27 am

Re: Image button without outline

Post by RASHAD »

Hi dige
Theme Styles

"BUTTON" , "REBAR" , "TOOLBAR" , "STATUS" , "LISTVIEW" , "HEADER" , "PROGRESSBAR" , "TOOLTIP" , "TREEVIEW"
"SPIN" , "SCROLLBAR" , "EDIT" , "COMBOBOX" , "TASKBAR" , "STARTPANEL" , "EXPLORERBAR" , "HEADERPIN"
"IEBARMENU" , "PROGRESSBARVERT" , "PROGREECHUNKVERT" , "TAB" , "TASKBAND" , "WINDOW"

Using ButtonGadget()

Code: Select all

hIcon = ExtractIcon_(0,"imageres.dll",100)
padding$ = Space(1)

If OpenWindow(0, 0, 0, 222, 200, "ButtonGadget with icon", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ButtonGadget(0, 10, 10, 170, 40, padding$+"Standard Button")
  SendMessage_(GadgetID(0), #BM_SETIMAGE, #IMAGE_ICON, hIcon)
Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
End
Egypt my love
Post Reply