ButtonImageGadget - Get grayed Image

[Josh]

I create a 'screen-shot' image with #WM_PRINT. Some PB gadgets doesn't produce a correct copy from itself. So I make the corrections by 'hand'.

I have a problem with the deactivated ButtonImageGadget. How can I make a grayed image from a colored image at runtime, that is exactly the same like on the PB button. I'm speaking not from the button itself, I need only the image on the button, like the undo arrow in the following example:

[RASHAD]

Hi Josh
I am confused a little bit

Code: Select all

CreateImage(0,50,50)
StartDrawing(ImageOutput(0))
Box(0,0,50,50,#yellow)
Circle(25,25,15,#Red)
StopDrawing()

OpenWindow(0,0,0,400,200,"",#PB_Window_SystemMenu |#PB_Window_ScreenCentered)
ButtonImageGadget(1,10,10,50,50,ImageID(0))
ButtonImageGadget(2,80,10,50,50,0)

Repeat
  Select WaitWindowEvent()
      
      Case #PB_Event_CloseWindow
            Quit = 1
      
      Case #PB_Event_Menu
          Select EventMenu()
           Case 1            
          EndSelect
      
      Case #PB_Event_Gadget
          Select EventGadget()
           Case 1
                  CreateImage(1, 50,50 ,24 )
                  hdc = StartDrawing(ImageOutput(1))
                    SendMessage_(GadgetID(1),#WM_PRINT,hdc, #PRF_CHILDREN| #PRF_CLIENT|#PRF_ERASEBKGND)
                       For y = 0 To 49
                        For x = 0 To 49
                          Color = Point(x, y)
                          NChrome = Round(Red(Color) * 0.33 + Green(Color) * 0.56 + Blue(Color) * 0.11, 0)
                          Plot(x, y, RGB(NChrome,NChrome,NChrome))
                        Next
                      Next
                  StopDrawing()
                  SetGadgetAttribute(2,#PB_Button_Image,ImageID(1))            
          EndSelect      
            
  EndSelect 

Until Quit = 1
End

[RASHAD]

# 2

Code: Select all

CreateImage(0,50,50,32)
StartDrawing(ImageOutput(0))
Box(0,0,50,50,#Yellow)
Circle(25,25,15,$FF0000)
Circle(25,25,10,$FF6767)
Circle(25,25,6,$FFB6B6)
StopDrawing()

OpenWindow(0,0,0,400,200,"",#PB_Window_SystemMenu |#PB_Window_ScreenCentered)
ButtonImageGadget(1,10,10,50,50,ImageID(0))
ButtonImageGadget(2,80,10,50,50,0)
DisableGadget(1,1)
Repeat
  Select WaitWindowEvent()
     
      Case #PB_Event_CloseWindow
            Quit = 1
     
      Case #PB_Event_Menu
          Select EventMenu()
           Case 1           
          EndSelect
     
      Case #PB_Event_Gadget
          Select EventGadget()
           Case 2
                  CreateImage(1, 50,50 )
                  hdc = StartDrawing(ImageOutput(1))
                    SendMessage_(GadgetID(1),#WM_PRINT,hdc, #PRF_CHILDREN| #PRF_CLIENT|#PRF_ERASEBKGND)
                  StopDrawing()
                  SetGadgetAttribute(2,#PB_Button_Image,ImageID(1))           
          EndSelect     
           
  EndSelect

Until Quit = 1
End

[TI-994A]

How can I make a grayed image from a colored image at runtime, that is exactly the same like on the PB button. I'm speaking not from the button itself, I need only the image on the button...

Hello Josh. Here's a little routine that converts a colour image to monochrome, which might come in handy for your manual touch-ups. However, the results are not the same as the disabled images of the ButtonImageGadget():

Code: Select all

EnableExplicit
InitNetwork()

Enumeration
  #MainWindow
  #Button
  #Label
  #Image1
  #Image2
EndEnumeration

Procedure makeMono(imageNo)
  Define x, y, iWidth, iHeight, colorPoint, monoColor
  iWidth = ImageWidth(imageNo)
  iHeight = ImageHeight(imageNo)
  StartDrawing(ImageOutput(imageNo))
    For x = 0 To iWidth - 1
      For y = 0 To iHeight - 1
        colorPoint = Point(x, y)
        monoColor = (Red(colorPoint) + 
                     Green(colorPoint) + 
                     Blue(colorPoint)) / 3
        monoColor = RGB(monoColor, monoColor, monoColor)
        Plot(x, y, monoColor)
      Next y
    Next x
  StopDrawing()
EndProcedure

If ReceiveHTTPFile("https://www.dropbox.com/s/9is77u0d7xzhvjy/rainbow.bmp?dl=1",
                    GetTemporaryDirectory() + "rainbow.bmp")
  LoadImage(#Image1, GetTemporaryDirectory() + "rainbow.bmp")
  CopyImage(#Image1, #Image2)
  makeMono(#Image2)
  Define wFlags, appQuit
  wFlags = #PB_Window_SystemMenu | #PB_Window_ScreenCentered
  OpenWindow(#MainWindow, #PB_Any, #PB_Any, 260, 260, "Colour to Monochrome", wFlags)
  TextGadget(#Label, 30, 10, 200, 20, "Click to see monochrome image...")
  ButtonImageGadget(#Button, 30, 30, 198, 198, ImageID(#Image1))
  SetGadgetAttribute(#Button, #PB_Button_PressedImage, ImageID(#Image2))
  While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend 
EndIf

Just an option, which I believe should be cross-platform too.

18th February 2019: updated download links

[TI-994A]

By the way, could anyone be kind enough to confirm that the disabled images of the ButtonImageGadget() are simply greyed-out masks of the original image? It's the first time that I've experimented with disabling this gadget, and the results seem quite bad.

Thank you.

[ebs]

TI-994A,

... and the results seem quite bad

I struggled with that too, until I discovered that you should create the button image with
32-bit depth, not the default 24-bit (maybe to account for the alpha channel?).
When I did that, the disabled gray images looked as I expected.

Regards,
Eric

[Josh]

Thanks @ all for your helpful tips. In the meantime, I found out, that the ButtonImageGadget sets the Clipregion on the position of the parentwindow instead on the position of the Buttonwindow, when it has to paint itself by #WM_PRINT. So the Image on the Button isn't shown. Don't know, whether this is a PB bug or a Windows bug.

When I make a additional 'screenshot' with #WM_PRINT only from the button, I can correct this bug easily and don't need to paint my own image.

Thxs
Josh

[TI-994A]

...you should create the button image with 32-bit depth, not the default 24-bit (maybe to account for the alpha channel?).

Hi Eric, and thank you very much. I probably wouldn't have figured it out, and searching the forum did not turn up the answer either.

Perhaps it would be a good idea to include this bit of information in the manual.

[Josh]

@rbs
Which format of images are you using? With png-files it works well, with ico-files 32 bit I get the result like shown in my first posting.

[TI-994A]

With png-files it works well, with ico-files 32 bit I get the result like shown in my first posting.

Hi Josh. I've not tested with ICO files, but Eric's right; even with PNG images, only the 32-bit formats display properly when the ButtonImageGadget() is disabled.

And, by the way, the image link from your first post seems to be broken.

[BarryG]

Hello Rashad, I'm using your code example #1 to gray an image and it works great, but my button is still clickable. So even though it looks disabled, it's not. If I use DisableGadget() after graying it with your code, the entire button goes gray. How can I disable any clicks to it, so that the button doesn't look "pushed" down? I was thinking maybe overlaying a ContainerGadget() on top of the button to bypass the clicks when it's "disabled"? Would there be any problem with that approach? Like this:

Code: Select all

CreateImage(0,50,50)
StartDrawing(ImageOutput(0))
Box(0,0,50,50,#yellow)
Circle(25,25,15,#Red)
StopDrawing()

OpenWindow(0,0,0,400,200,"",#PB_Window_SystemMenu |#PB_Window_ScreenCentered)
ButtonImageGadget(1,10,10,50,50,ImageID(0))
ButtonImageGadget(2,80,10,50,50,0)

Repeat
  Select WaitWindowEvent()
     
      Case #PB_Event_CloseWindow
            Quit = 1
     
      Case #PB_Event_Menu
          Select EventMenu()
           Case 1           
          EndSelect
     
      Case #PB_Event_Gadget
          Select EventGadget()
           Case 1
                  CreateImage(1, 50,50 ,24 )
                  hdc = StartDrawing(ImageOutput(1))
                    SendMessage_(GadgetID(1),#WM_PRINT,hdc, #PRF_CHILDREN| #PRF_CLIENT|#PRF_ERASEBKGND)
                       For y = 0 To 49
                        For x = 0 To 49
                          Color = Point(x, y)
                          NChrome = Round(Red(Color) * 0.33 + Green(Color) * 0.46 + Blue(Color) * 0.11, 0)
                          Plot(x, y, RGB(NChrome,NChrome,NChrome))
                        Next
                      Next
                  StopDrawing()
                  SetGadgetAttribute(2,#PB_Button_Image,ImageID(1))
                  
                  ; These two lines stop the "disabled" gadget being clicked.
                  ContainerGadget(3, 80, 10, 50, 50)
                  BringWindowToTop_(GadgetID(3))
                  
          EndSelect     
           
  EndSelect

Until Quit = 1
End

[RASHAD]

Hi BarryG
You was close enough
But clicking button 1 will enable 2 again

Code: Select all

CreateImage(0,50,50)
StartDrawing(ImageOutput(0))
Box(0,0,50,50,#Yellow)
Circle(25,25,15,#Red)
StopDrawing()

OpenWindow(0,0,0,400,200,"",#PB_Window_SystemMenu |#PB_Window_ScreenCentered)
ButtonImageGadget(1,10,10,50,50,ImageID(0))
ContainerGadget(3,80,10,50,50)
  ButtonImageGadget(2,0,0,50,50,0)
CloseGadgetList()
DisableGadget(3,1)
Repeat
  Select WaitWindowEvent()
     
      Case #PB_Event_CloseWindow
            Quit = 1
     
      Case #PB_Event_Menu
          Select EventMenu()
           Case 1           
          EndSelect
     
      Case #PB_Event_Gadget
          Select EventGadget()
           Case 1
                  CreateImage(1, 50,50 ,24 )
                  hdc = StartDrawing(ImageOutput(1))
                    SendMessage_(GadgetID(1),#WM_PRINT,hdc, #PRF_CHILDREN| #PRF_CLIENT|#PRF_ERASEBKGND)
                       For y = 0 To 49
                        For x = 0 To 49
                          Color = Point(x, y)
                          NChrome = Round(Red(Color) * 0.33 + Green(Color) * 0.46 + Blue(Color) * 0.11, 0)
                          Plot(x, y, RGB(NChrome,NChrome,NChrome))
                        Next
                      Next
                  StopDrawing()
                  SetGadgetAttribute(2,#PB_Button_Image,ImageID(1))
                 
          EndSelect     
           
  EndSelect

Until Quit = 1
End

Button 1 is toggle to enable \ disable button 2

Code: Select all

CreateImage(0,50,50)
StartDrawing(ImageOutput(0))
Box(0,0,50,50,#Yellow)
Circle(25,25,15,#Red)
StopDrawing()

OpenWindow(0,0,0,400,200,"",#PB_Window_SystemMenu |#PB_Window_ScreenCentered)
ButtonImageGadget(1,10,10,50,50,ImageID(0))
ContainerGadget(3,80,10,50,50)
  ButtonImageGadget(2,0,0,50,50,0)
CloseGadgetList()
;DisableGadget(3,1)
CreateImage(1, 50,50 ,24 )
Repeat
  Select WaitWindowEvent()
     
      Case #PB_Event_CloseWindow
            Quit = 1
     
      Case #PB_Event_Menu
          Select EventMenu()
           Case 1           
          EndSelect
     
      Case #PB_Event_Gadget
          Select EventGadget()
           Case 1
              Run ! 1
                If Run = 1                  
                  hdc = StartDrawing(ImageOutput(1))
                    SendMessage_(GadgetID(1),#WM_PRINT,hdc, #PRF_CHILDREN| #PRF_CLIENT|#PRF_ERASEBKGND)
                       For y = 0 To 49
                        For x = 0 To 49
                          Color = Point(x, y)
                          NChrome = Round(Red(Color) * 0.33 + Green(Color) * 0.46 + Blue(Color) * 0.11, 0)
                          Plot(x, y, RGB(NChrome,NChrome,NChrome))
                        Next
                      Next
                  StopDrawing()
                  SetGadgetAttribute(2,#PB_Button_Image,ImageID(1))
                  DisableGadget(3,1)
                Else
                  hdc = StartDrawing(ImageOutput(1))
                    SendMessage_(GadgetID(1),#WM_PRINT,hdc, #PRF_CHILDREN| #PRF_CLIENT|#PRF_ERASEBKGND)
                  StopDrawing()
                  SetGadgetAttribute(2,#PB_Button_Image,ImageID(1))
                  DisableGadget(3,0)
                EndIf
          EndSelect     
           
  EndSelect

Until Quit = 1
End

[BarryG]

Thank you. And I even forgot about CloseGadgetList() for ContainerGadget().