Image button without outline

[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


Also if posible I want the image to be changed onclick and onmove inside the area. thanks

[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

[jacdelad]

On Windows:

Code: Select all

SetWindowLongPtr_(GadgetID(#MyButtonImage), #GWL_STYLE, #BS_FLAT | #BS_OWNERDRAW | GetWindowLongPtr_(GadgetID(#MyButtonImage), #GWL_STYLE))

[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.

[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

[firace]

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:

[Caronte3D]

It's the same history of ever, the DPI think
To solve it you must scale the image and use: DesktopScaledX(), DesktopScaledY()...

[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

[mag]

Nice. perfect

[mk-soft]

@Chris,
Nice Vector Drawing.

ExtractIcon provides a larger image.
I have also tried to customise it a little. See above v1.03

[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.

[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

[RASHAD]

OK we have right now a very good collection
One more for fun
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

[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

[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