Page 1 of 2

[Solved] Transparent CanvasGadget

Posted: Wed Apr 20, 2022 3:29 pm
by ZX80
Hello, all.

I'm looking for a way to add a CanvasGadget with a transparent background to a transparent window. I want to make something like a ruler. I am using the code from this page. Is it possible? Maybe someone has a better idea? It's not important for me to use CanvasGadget. I chose it because it supports transparency. I could use an ImageGadget, but the window size can change. And I need to adjust to the new window size. It should just be a stripe, let's say a greenish color, through which the contents of other windows that are currently under my window will shine through. The StatusBar looks perfect, but it's hard to adapt it to my conditions. I think so.
Okay. How to do it with this code?

Code: Select all

OpenWindow(0, 0, 0, 400, 200, "Select your area", #PB_Window_SystemMenu|#PB_Window_SizeGadget|#PB_Window_ScreenCentered|#PB_Window_Tool)
SetWindowColor(0, #Blue)
SetWindowLong_(WindowID(0), #GWL_EXSTYLE, #WS_EX_LAYERED|#WS_EX_TOPMOST)
SetLayeredWindowAttributes_(WindowID(0), #Blue, 0, #LWA_COLORKEY)

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
Thus, I want to visually mark an area or region of overlap. And here 100 percent opacity of the strip does not fit.
Thanks in advance for your advice and replies.

Re: Transparent CanvasGadget

Posted: Wed Apr 20, 2022 8:13 pm
by netmaestro
Canvas gadget doc wrote: This gadget provides a drawing surface without alpha channel
Image Gadget seems appropriate. You can resize it the same as any other gadget, just resize the image first. But canvas is not an option.

Re: Transparent CanvasGadget

Posted: Wed Apr 20, 2022 8:38 pm
by ZX80
Good time, netmaestro.

Thanks for your reply. I will try this tomorrow. If I understand correctly, then when resizing the window, I need to re-create a new image for the resized window. I think to immediately create a strip the length of the screen width and open it when necessary. Thanks again.

Re: Transparent CanvasGadget

Posted: Wed Apr 20, 2022 8:50 pm
by netmaestro
You can resize the image you have, should be no need to make a new one. If you use the Vector Drawing library and size everything as a proportion of the dimensions of the image, you can resize from very small to very large with no loss in quality whatsoever.

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 7:48 am
by ZX80
Good morning!

So far have not been able to get this to work.

Code: Select all

Structure img
  y.i
  w.i
EndStructure

Define StripHeight = 20
Define img.img


If OpenWindow(0, 0, 0, 400, 200, "Select your area", #PB_Window_SystemMenu|#PB_Window_SizeGadget|#PB_Window_ScreenCentered|#PB_Window_Tool)
  SetWindowColor(0, #Blue)
  SetWindowLong_(WindowID(0), #GWL_EXSTYLE, #WS_EX_LAYERED|#WS_EX_TOPMOST)
  SetLayeredWindowAttributes_(WindowID(0), #Blue, 0, #LWA_COLORKEY)
  
  With img
    \y = WindowHeight(0)-StripHeight
    \w = WindowWidth(0)
    ImageGadget(1, 0, \y, \w, StripHeight, 0)
    
    If CreateImage(0, \w, StripHeight, 32, #PB_Image_Transparent) And StartDrawing(ImageOutput(0))
      DrawingMode(#PB_2DDrawing_AlphaBlend)
      Box(0, \y, \w, StripHeight, RGBA(0, 255, 0, 128))
      ;DrawAlphaImage(ImageID(0), 0, \y, 128)
      StopDrawing()
      SetGadgetState(1, ImageID(0))
    EndIf
  EndWith
  
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:02 am
by Bisonte
Your Imagegadget is at the bottom of the window, and you draw your box at the bottom of the image.... so your drawings are not in the visible area .....

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:21 am
by ZX80
Good time, Bisonte.

Thanks for participating.
Let's say you're right, but then... why when I resize the window, I still can't see it? That is, the image is drawn only once and stay in its place. You can try changing line number 20 to this:

Code: Select all

If CreateImage(0, \w, StripHeight) And StartDrawing(ImageOutput(0))
Then you will see that everything is in place.

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:23 am
by Bisonte
If you resize the imagegadget, then you have to draw again....

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:29 am
by ZX80
Pardon, sar. I'm not sure I understand what you mean. Can you say a bit more details?

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:32 am
by Bisonte

Code: Select all

Structure img
  y.i
  w.i
EndStructure

Define StripHeight = 20
Define img.img


If OpenWindow(0, 0, 0, 400, 200, "Select your area", #PB_Window_SystemMenu|#PB_Window_SizeGadget|#PB_Window_ScreenCentered|#PB_Window_Tool)
  SetWindowColor(0, #Blue)
  SetWindowLong_(WindowID(0), #GWL_EXSTYLE, #WS_EX_LAYERED|#WS_EX_TOPMOST)
  SetLayeredWindowAttributes_(WindowID(0), #Blue, 0, #LWA_COLORKEY)
  
  With img
    \y = WindowHeight(0)-StripHeight
    \w = WindowWidth(0)
    ImageGadget(1, 0, \y, \w, StripHeight, 0)
    
    If CreateImage(0, \w, StripHeight, 32, #PB_Image_Transparent) And StartDrawing(ImageOutput(0))
      DrawingMode(#PB_2DDrawing_AlphaBlend)
      Box(0, 0, \w, StripHeight, RGBA(0, 255, 0, 128))
      ;DrawAlphaImage(ImageID(0), 0, \y, 128)
      StopDrawing()
      SetGadgetState(1, ImageID(0))
    EndIf
  EndWith
  
  Repeat
    Event = WaitWindowEvent()
    Select Event
      Case #PB_Event_CloseWindow
        End
      Case #PB_Event_SizeWindow
        With img
          \y = WindowHeight(0)-StripHeight
          \w = WindowWidth(0)
          
          ResizeGadget(1, 0, \y, \w, StripHeight)
          ResizeImage(0, \w, StripHeight)
          
          If StartDrawing(ImageOutput(0))
            DrawingMode(#PB_2DDrawing_AlphaBlend)
            Box(0, 0, \w, StripHeight, RGBA(0, 255, 0, 128))
            StopDrawing()
          EndIf
          SetGadgetState(1, ImageID(0))
        EndWith
        
    EndSelect
    
    
  ForEver
EndIf
If you do this with BindEvent, you can Resize all in Realtime....

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:37 am
by ZX80
Yes, I already understood. While writing and translating the answer, but you have already answered faster.
However, this does not answer the original question. The strip still does not let sunlight through. :(

I know that I have to bind the window resize event. But this is all after I manage to display the strip normally.

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:41 am
by Bisonte
Your API commands let only only color be transparent....
maybe you should not draw a block.... more a a block with wholes ;)
I mean sometimes a pixel with the transparent color in the block....

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 8:59 am
by ZX80
I thought yesterday... what if we use a second child window? How do you like this option? Maybe it will be easier?

I already agreed to just the crossbar (without coloring the area). After all, we have a SplitterGadget in our arsenal. But then it requires two additional gadgets (to separate two areas between themselves). This is also a problem, since I do not need extra gadgets.

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 9:57 am
by infratec
The box is transparent, but then you see the color of the window which is blue. :cry:

Re: Transparent CanvasGadget

Posted: Thu Apr 21, 2022 10:30 am
by infratec
My version:

Code: Select all

If OpenWindow(0, 0, 0, 400, 200, "Select your area", #PB_Window_SystemMenu|#PB_Window_SizeGadget|#PB_Window_ScreenCentered|#PB_Window_Tool)
  SetWindowColor(0, #Blue)
  SetWindowLong_(WindowID(0), #GWL_EXSTYLE, #WS_EX_LAYERED|#WS_EX_TOPMOST)
  SetLayeredWindowAttributes_(WindowID(0), #Blue, 0, #LWA_COLORKEY)
  
  Repeat
    Event = WaitWindowEvent()
    Select Event
      Case #PB_Event_CloseWindow
        End
      Case #PB_Event_Repaint
        If StartDrawing(WindowOutput(0))
          Box(0, 0, WindowWidth(0), WindowHeight(0) / 2 - 30, $F0F0F0)
          Box(0, WindowHeight(0) / 2 - 30, WindowWidth(0), 20, #Red)
          Box(0, WindowHeight(0) / 2 - 10, WindowWidth(0), 20, #Blue)
          Box(0, WindowHeight(0) / 2 + 10, WindowWidth(0), 20, #Red)
          Box(0, WindowHeight(0) / 2 + 30, WindowWidth(0), WindowHeight(0) / 2 - 30, $F0F0F0)
          StopDrawing()
        EndIf
        
    EndSelect
    
  ForEver
EndIf