ImageGadget on top of ImageGadget

[Columbo]

I have placed an ImageGadget on my screen and have disabled it. I am now trying to place another smaller ImageGadget on top of the first one but it is always hidden behind the larger ImageGadget, no matter which ImageGadget I place first. How do you bring the hidden ImageGadget forward so that it is on top of the larger one?

Thanks

[Marc56us]

Do not confuse a disabled gadget with a hidden gadget.

HideGadget()
https://www.purebasic.com/documentation ... adget.html

DisableGadget()
https://www.purebasic.com/documentation ... adget.html

A disabled gadget only means that it no longer receives user events, but it always remains present.
PB has no function to manage the z-order (overlapping) so every refresh redraw original order.

To really manage a gadget above another, you can create a small window for it (without borders)

The other solution is to switch displays with Containers

ContainerGadget()
https://www.purebasic.com/documentation ... adget.html

[RASHAD]

I have placed an ImageGadget on my screen and have disabled it

Are you using screen or window ?
With window it works as expected
Without workable snippet it is hard to get an answer

# 1:

Code: Select all

UseJPEG2000ImageDecoder()
UseJPEG2000ImageEncoder()
UseJPEGImageDecoder()
UseJPEGImageEncoder()
UsePNGImageDecoder()
UsePNGImageEncoder()
UseTGAImageDecoder()
UseTIFFImageDecoder()

LoadImage(0,GetHomeDirectory()+"513pxwheel.png")
LoadImage(1,GetHomeDirectory()+"bananas.png")

flags = #PB_Window_SystemMenu| #PB_Window_MaximizeGadget| #PB_Window_MinimizeGadget| #PB_Window_ScreenCentered | #PB_Window_SizeGadget
OpenWindow(0,0,0,ImageWidth(0)+20,ImageHeight(0)+20,"Test",Flags)
ImageGadget(0,10,10,40,40,ImageID(0))
DisableGadget(0,1)
ImageGadget(1,10,10,40,40,ImageID(1)) 
Repeat
           
  Select WaitWindowEvent()      
    Case #PB_Event_CloseWindow
    Quit = 1
    
  EndSelect 
Until Quit = 1
End

# 2:

Code: Select all

UseJPEG2000ImageDecoder()
UseJPEG2000ImageEncoder()
UseJPEGImageDecoder()
UseJPEGImageEncoder()
UsePNGImageDecoder()
UsePNGImageEncoder()
UseTGAImageDecoder()
UseTIFFImageDecoder()

LoadImage(0,GetHomeDirectory()+"513pxwheel.png")
LoadImage(1,GetHomeDirectory()+"bananas.png")

flags = #PB_Window_SystemMenu| #PB_Window_MaximizeGadget| #PB_Window_MinimizeGadget| #PB_Window_ScreenCentered | #PB_Window_SizeGadget
OpenWindow(0,0,0,ImageWidth(0)+20,ImageHeight(0)+20,"Test",Flags)
StartDrawing(ImageOutput(0))
  DrawImage(ImageID(1),10,10)
StopDrawing()

ImageGadget(0,10,10,40,40,ImageID(0))
Repeat
           
  Select WaitWindowEvent()      
    Case #PB_Event_CloseWindow
    Quit = 1
    
  EndSelect 
Until Quit = 1
End

[TI-994A]

I have placed an ImageGadget on my screen and have disabled it. I am now trying to place another smaller ImageGadget on top of the first one...

Here's an example:

Code: Select all

CreateImage(0, 500, 300, 32, #Red)
CreateImage(1, 300, 200, 32, #Yellow)

OpenWindow(0, #PB_Ignore, #PB_Ignore, 580, 400, "Image on Image", 
           #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

ImageGadget(0, 40, 30, 500, 300, ImageID(0))
ImageGadget(1, 145, 80, 300, 200, ImageID(1))
ButtonGadget(2, 10, 350, 180, 40, "SHOW FRONT IMAGE")
ButtonGadget(3, 200, 350, 180, 40, "SHOW BACK IMAGE")
ButtonGadget(4, 390, 350, 180, 40, "SHOW BOTH IMAGES")
HideGadget(0, 1)
HideGadget(1, 1)
DisableGadget(0, 1)

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      appQuit = 1      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case 2
          HideGadget(0, 1)
          HideGadget(1, 0)
        Case 3
          HideGadget(0, 0)
          HideGadget(1, 1)
        Case 4
          HideGadget(0, 0)
          HideGadget(1, 0)          
      EndSelect
  EndSelect
Until appQuit = 1

[Columbo]

Yes, the gadget is placed in a window, which I inaccurately called a screen, and I am not trying to Hide the gadget. I want the first ImageGadget to be visible but I want the second ImageGadget to also be visible on top of the first ImageGadget.

The first ImageGadget is a header, an image using the full width of the window, (1280 x 700), and I want to place the second ImageGadget in the top right corner over the header image. The header image does not need to receive user events so I have disabled it.

Here is the code for the window.

Code: Select all

 wFlags = #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget 
If OpenWindow(#MainWindow, 0, 0, 1280, 700, "", wFlags)     ;Open Main Window
  SetWindowColor(#MainWindow, RGB(255,255,255))
Endif

Here is the code for the window setup

Code: Select all

Procedure setupscreenMain()
  ImageGadget(#header,0,0,1206,180,ImageID(#img1))     ;This is the first ImageGadget()
  DisableGadget(#header,1)
  ImageGadget(#searchBox,1100, 50, 1206, 180,ImageID(#searchBox))    ;This is the second ImageGadget()
  ImageGadget(#footer,0,667,1206,30,ImageID(#img2))
  ButtonImageGadget(#homeBtn, 250, 161, 99,30, ImageID(#img3))
  ButtonImageGadget(#categoriesBtn, 350, 161, 99,30, ImageID(#img5))
  ButtonImageGadget(#favouritesBtn, 450, 161, 99,30, ImageID(#img7))   
  ButtonImageGadget(#addBtn, 550, 161, 99,30, ImageID(#img9))
  ButtonImageGadget(#addCatBtn, 650, 161, 99,30, ImageID(#img30))
  ButtonImageGadget(#exitBtn, 750, 161, 99,30, ImageID(#img13))    
EndProcedure

As you can see the header ImageGadget is placed first, disabled, and then the second ImageGadget is placed. If I do a result = IsGadget(#searchBox) it indicates that the ImageGadget is there but it is not visible. It is hidden behind the header ImageGadget. If I hide the header ImageGadget then the second ImageGadget is visible where it has been placed.

I hope I am explaining this properly.

[the.weavster]

Why not draw both images in a CanvasGadget and use X,Y to determine if you need to respond to events?

[RASHAD]

Next is as much as I can guess from your unfinished code
It is a matter of Z-Order

Code: Select all

Procedure setupscreenMain()
  ImageGadget(1,1100, 0, 180, 180,ImageID(1))    ;This is the second ImageGadget() 
  ImageGadget(0,0,0,1280,180,ImageID(0))     ;This is the first ImageGadget()
  DisableGadget(0,1)
  ImageGadget(2,0,667,1280,30,0,#PB_Image_Border)
  ButtonImageGadget(3, 250, 161, 99,30, 0)
  ButtonImageGadget(4, 350, 161, 99,30, 0)
  ButtonImageGadget(5, 450, 161, 99,30, 0)   
  ButtonImageGadget(6, 550, 161, 99,30, 0)
  ButtonImageGadget(7, 650, 161, 99,30, 0)
  ButtonImageGadget(8, 750, 161, 99,30, 0)   
EndProcedure


LoadImage(0, #PB_Compiler_Home + "examples/Sources/Data/PureBasicLogo.bmp")
ResizeImage(0,1280,180)

LoadImage(1, #PB_Compiler_Home + "examples/Sources/Data/Geebee2.bmp")
ResizeImage(1,180,180)

wFlags = #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_ScreenCentered
OpenWindow(0, 0, 0, 1280, 700, "", wFlags)     ;Open Main Window
SetWindowColor(0, RGB(255,255,255))
setupscreenMain()
Repeat
           
  Select WaitWindowEvent()     
    Case #PB_Event_CloseWindow
    Quit = 1
   
  EndSelect
Until Quit = 1
End

[Marc56us]

The first ImageGadget is a header, an image using the full width of the window, (1280 x 700), and I want to place the second ImageGadget in the top right corner over the header image. The header image does not need to receive user events so I have disabled it.

Create an image dynamically containing both images.

Code: Select all

StartDrawing(ImageOutput(0))
        DrawImage(ImageID(0), 0, 0)                       ; Header
        DrawImage(ImageID(1), 1280 - imageWidth(0), 0)    ; Image
StopDrawing()    

Or Canvas if you want edit one of them.

The first ImageGadget is a header, an image using the full width of the window

or

Code: Select all

StartDrawing(WindowOutput(0))

[Columbo]

I tried a few of the above suggestions but second ImageGadget() continues to be hidden behind the first ImageGadget(). Strangely enough, if I place a StringGadget there instead of the ImageGadet, it is visible on top of the first ImageGadget(). A button placed there is also visible so it seems like only an ImageGadget() gets hidden behind the first ImageGadget(). So, since I couldn't get the second ImageGadget() to be on top, I have decided to just use the StringGadget() for the search box instead of using a background image.

Thanks to all for the suggestions.

Cheers!

[Andre]

PB doesn't officially support any Z-order of gadgets.

Beside of the valuable tips already given in this thread, there were already several discussions in this forum.
See for example here, with probably some further input: viewtopic.php?f=13&t=40783

[TI-994A]

...I want the first ImageGadget to be visible but I want the second ImageGadget to also be visible on top of the first ImageGadget...

...Here is the code for the window.

Hi John. I've replicated your code exactly, and it appears to display as expected (attached screenshot). Please give it a run and let us know if you're getting a different output.

Code: Select all

Enumeration gadgets
  #MainWindow
  #header
  #searchBox
  #footer
  #homeBtn
  #categoriesBtn
  #favouritesBtn
  #addBtn
  #addCatBtn
  #exitBtn
EndEnumeration

Enumeration images
  #img1
  #img2
  #img3
  #img5
  #img7
  #img9
  #img30
  #img13  
  #searchBoxImg
EndEnumeration

CreateImage(#img1, 1206, 180, 32, #Yellow)
CreateImage(#img2, 1206, 30, 32, #Blue)
CreateImage(#img3, 99, 30, 32, #Green)
CreateImage(#img5, 99, 30, 32, #Magenta)
CreateImage(#img7, 99, 30, 32, #Cyan)
CreateImage(#img9, 99, 30, 32, #Black)
CreateImage(#img30, 99, 30, 32, #White)
CreateImage(#img13 , 99, 30, 32, #Blue)
CreateImage(#searchBoxImg, 1206, 180, 32, #Red)

Declare setupscreenMain()
wFlags = #PB_Window_SystemMenu | 
         #PB_Window_ScreenCentered | 
         #PB_Window_MinimizeGadget | 
         #PB_Window_MaximizeGadget 
If OpenWindow(#MainWindow, 0, 0, 1280, 700, "", wFlags)
  SetWindowColor(#MainWindow, RGB(255, 255, 255))
  setupscreenMain()
  While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend 
EndIf

Procedure setupscreenMain()
  ImageGadget(#header, 0, 0, 1206, 180, ImageID(#img1))
  DisableGadget(#header, 1)
  ImageGadget(#searchBox, 1100, 50, 1206, 180, ImageID(#searchBoxImg))
  ImageGadget(#footer, 0, 667, 1206, 30, ImageID(#img2))
  ButtonImageGadget(#homeBtn, 250, 161, 99, 30, ImageID(#img3))
  ButtonImageGadget(#categoriesBtn, 350, 161, 99, 30, ImageID(#img5))
  ButtonImageGadget(#favouritesBtn, 450, 161, 99, 30, ImageID(#img7))   
  ButtonImageGadget(#addBtn, 550, 161, 99, 30, ImageID(#img9))
  ButtonImageGadget(#addCatBtn, 650, 161, 99, 30, ImageID(#img30))
  ButtonImageGadget(#exitBtn, 750, 161, 99, 30, ImageID(#img13))    
EndProcedure

PureBasic v5.70 LTS (x64) on Windows 8.1 Professional

It could be possible that the search box image is not actually hidden or blocked, but in fact overwritten, as the #searchBox identifier, meant for the search box image gadget, is being reused as an identifier for the search box image as well. One of the other images might have the same constant value, therefore overwriting it.

Just another stab in the dark.

[Blue]

[...]Just another stab in the dark.

Too bad the original poster hasn't replied to your question, TI-994A.
I would have liked to know the outcome.
But i'm pretty sure that your shot in the dark was right on.

That's darn good marksmanship, TI-994A.