[Solved] Transparent CanvasGadget

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

[netmaestro]

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.

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

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

[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

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

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

[Bisonte]

If you resize the imagegadget, then you have to draw again....

[ZX80]

Pardon, sar. I'm not sure I understand what you mean. Can you say a bit more details?

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

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

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

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

[infratec]

The box is transparent, but then you see the color of the window which is blue.

[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