Background of text and image gadgets not transparent

[marcoagpinto]

Heya,

I open a window and then place a full window size canvas gadget in it with a stone image to be used as the background of the about window.

But I noticed that, at least on Windows 11, every text gadget and image gadget I place in the about window are drawn as opaque (with the grey Windows 11 has for windows).

What I mean is that I see the grey of the gadgets over the stone background.

Is there a way to fix it?

Thanks!

[jacdelad]

Code? Maybe a screenshot?

[Olli]

Yes, a small code would be better, even if it does not seem significant.
This will allow us to share and compare our snapshoots, in ex.

[marcoagpinto]

Here is a screenshot.

Notice that I can't share the full image since it is a very sensitive project.



Here is the background:
https://proofingtoolgui.org/_other/about_background.png

And some code:

Code: Select all

  extra_height_for_48x48_photos=40+48+30+30+40

  w=927+500+150+(ImageWidth(#GLOBAL_IMAGE_ABOUT_V6_LOGO)-439)
  h=528+extra_height_for_48x48_photos+(ImageHeight(#GLOBAL_IMAGE_ABOUT_V6_LOGO)-300)

  If OpenWindow(#WINDOW_ABOUT_V6,0,0,w,h,"About",#PB_Window_WindowCentered|#PB_Window_BorderLess,WindowID(#WINDOW_MAIN))=#False : MessageRequesterError("Can't open a window.") : EndIf
  DisableWindowMain(#True)


  ; Disable images only on Windows OS
  disable_image=#False
  If #PB_Compiler_OS=#PB_OS_Windows : disable_image=#True : EndIf
  x=28
  y=29
  
  
  ; Draw background
  CanvasGadget(#WINDOW_ABOUT_V6_BACKGROUND,0,0,w,h,#PB_Canvas_Container)
  SetGadgetAttribute(#WINDOW_ABOUT_V6_BACKGROUND,#PB_Canvas_Image,ImageID(#GLOBAL_IMAGE_ABOUT_V6_BACKGROUND))
  If ImageWidth(#GLOBAL_IMAGE_ABOUT_V6_BACKGROUND)<w Or ImageHeight(#GLOBAL_IMAGE_ABOUT_V6_BACKGROUND)<h : MessageRequesterError("Background image doesn't fit window.") : EndIf


  ; Big logo image
  PlaceImagetAtXY(#GLOBAL_IMAGE_ABOUT_V6_LOGO_GADGET,x,y,#GLOBAL_IMAGE_ABOUT_V6_LOGO,0,0,"",#True)

Notice that I am using a container gadget for the middle area with static fields, so all content got grey background.

But on the left, the information about the app, if I place static width in the lines of the text gadgets you would see it all grey background.

[Olli]

No transparency support of Windows (source = doc).
Just for the design :

Code: Select all

Procedure text(x, y, text.s, c)
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(x - 1, y - 1, text, RGB(0, 0, 0) )
  DrawText(x + 1, y + 1, text, RGB(0, 0, 0) )
  DrawText(x, y, text, c)
EndProcedure

Procedure centertext(x, y, w, h, text.s, c)
  text(x + (w - TextWidth(text) ) / 2, y + (h - TextHeight(text) ) / 2, text, c)
EndProcedure

Procedure rect(x, y, w, h, c)
  Line(x, y, w, 1, c)
  Line(x, y, 1, h, c)
  Line(x, y + h - 1, w, 1, c)
  Line(x + w - 1, y, 1, h, c)
EndProcedure

Procedure button(gg, x, y, w, h, text.s)
  StartDrawing(CanvasOutput(gg) )
  rect(x+1, y+1, w-1, h-1, RGB(255, 255, 255) )
  rect(x, y, w, h, RGB(0, 0, 0) )
  centerText(x, y, w, h, text, RGB(255, 255, 255) )
  StopDrawing()
EndProcedure

OpenWindow(11, 0, 0, 400, 300, "", #PB_Window_ScreenCentered | #PB_Window_SystemMenu)
CanvasGadget(13, 0, 0, 400, 300)
StartDrawing(CanvasOutput(13) )
For y = 0 To OutputHeight() - 1
  For x = 0 To OutputWidth() - 1
    r = Sin(x / (4 + y) ) * Cos(100 / Pow(y + 1, 1.01) ) * 127 + 128
    b = Sqr((x * x) + (y * y) ) / 2
    Box(x, y, 1, 1, RGB(r, g, b) )
  Next
Next
StopDrawing()
Button(13, 50, 50, 200, 24, "Ok")
button(13, 50, 100, 200, 24, "Cancel")
button(13, 50, 150, 200, 24, "Help")
Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow
CloseWindow(11)

But you can grow the function to return true or not, if the mouse is over those buttons and click...

[marcoagpinto]

No transparency support of Windows (source = doc).
Just for the design :

Code: Select all

Procedure text(x, y, text.s, c)
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(x - 1, y - 1, text, RGB(0, 0, 0) )
  DrawText(x + 1, y + 1, text, RGB(0, 0, 0) )
  DrawText(x, y, text, c)
EndProcedure

Procedure centertext(x, y, w, h, text.s, c)
  text(x + (w - TextWidth(text) ) / 2, y + (h - TextHeight(text) ) / 2, text, c)
EndProcedure

Procedure rect(x, y, w, h, c)
  Line(x, y, w, 1, c)
  Line(x, y, 1, h, c)
  Line(x, y + h - 1, w, 1, c)
  Line(x + w - 1, y, 1, h, c)
EndProcedure

Procedure button(gg, x, y, w, h, text.s)
  StartDrawing(CanvasOutput(gg) )
  rect(x+1, y+1, w-1, h-1, RGB(255, 255, 255) )
  rect(x, y, w, h, RGB(0, 0, 0) )
  centerText(x, y, w, h, text, RGB(255, 255, 255) )
  StopDrawing()
EndProcedure

OpenWindow(11, 0, 0, 400, 300, "", #PB_Window_ScreenCentered | #PB_Window_SystemMenu)
CanvasGadget(13, 0, 0, 400, 300)
StartDrawing(CanvasOutput(13) )
For y = 0 To OutputHeight() - 1
  For x = 0 To OutputWidth() - 1
    r = Sin(x / (4 + y) ) * Cos(100 / Pow(y + 1, 1.01) ) * 127 + 128
    b = Sqr((x * x) + (y * y) ) / 2
    Box(x, y, 1, 1, RGB(r, g, b) )
  Next
Next
StopDrawing()
Button(13, 50, 50, 200, 24, "Ok")
button(13, 50, 100, 200, 24, "Cancel")
button(13, 50, 150, 200, 24, "Help")
Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow
CloseWindow(11)

But you can grow the function to return true or not, if the mouse is over those buttons and click...

Ohhhhh... thank you, your code snippet made me rethink that part of the code.

I will draw the images directly on the canvas instead of using separate gadgets.

I am trying to keep a low-profile, not everything is as it seems.

That is why I can't place full screenshots for that specific project.

[Olli]

It is useless to say it to me. However, on your place, I would worry to use such an AI. Because this connected system, you could repeat one hundred times, you are working on a sensible project, it does not care about the secrets of the people. Its goal is mainly grow the bank balances of its creators.

[Olli]

Doc Gadgets - Page CanvasGadget()

<< On Windows, the transparency of the gadgets does not work so the text of the following gadgets will be
displayed on an opaque background: CheckBoxGadget, FrameGadget, HyperlinkGadget, OptionGadget, TextGadget and TrackBarGadget. >>

Note, that this page should be the longest page of the documentation. And I lost the info in the english version : I should reload the french documentation to retrieve this detail.

But, on the basis, a canvas has no alpha channel. If you know the transparency is available on Linux (it is not explicit in the doc), so it stays a function published and used, from a friend named netmaestro :

updateLayeredWindow_()

If it is too butcher (if all the window displaying is reset to make transparency), you have a function near "SetWindowAttribute_()" or anything like that.

Anyway, you should also have to get initially the handle of the button to modify.