ButtonImageGadget in front of image

Just starting out? Need help? Post your questions and find answers here.
User avatar
doctorized
Addict
Addict
Posts: 854
Joined: Fri Mar 27, 2009 9:41 am
Location: Athens, Greece

ButtonImageGadget in front of image

Post by doctorized »

I have a ButtonImageGadget in front of an ImageGadget.

Code: Select all

ContainerGadget(#Main_menu_cont,1,32,658,30)
		ImageGadget(#Main_menu_img,0,0,WndWidth,20,ImageID(BarIcon))
		ButtonImageGadget(#Main_menu_btn,5,1,120,26,ImageID(OptionsIcon))
	CloseGadgetList()
The button is frozen. If I comment the ImageGadget, then the button behaves fine. What is wrong?
User avatar
skinkairewalker
Enthusiast
Enthusiast
Posts: 627
Joined: Fri Dec 04, 2015 9:26 pm

Re: ButtonImageGadget in front of image

Post by skinkairewalker »

if you comment out the line that creates the imagegadget, you'll see that the button works again, this is because you can't put an image behind other gadgets that way
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4637
Joined: Sun Apr 12, 2009 6:27 am

Re: ButtonImageGadget in front of image

Post by RASHAD »

Try

Code: Select all

ContainerGadget(#Main_menu_cont,1,32,658,30)
	ImageGadget(#Main_menu_img,0,0,WndWidth,20,ImageID(BarIcon))
	ButtonImageGadget(#Main_menu_btn,5,1,120,26,ImageID(OptionsIcon))
CloseGadgetList()
DisableGadget(#Main_menu_img,1)
Egypt my love
User avatar
doctorized
Addict
Addict
Posts: 854
Joined: Fri Mar 27, 2009 9:41 am
Location: Athens, Greece

Re: ButtonImageGadget in front of image

Post by doctorized »

skinkairewalker wrote: Wed Sep 08, 2021 2:30 pm if you comment out the line that creates the imagegadget, you'll see that the button works again, this is because you can't put an image behind other gadgets that way
RASHAD solves the problem but, generaly, which way should I use to put Image behind gadgets?
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4637
Joined: Sun Apr 12, 2009 6:27 am

Re: ButtonImageGadget in front of image

Post by RASHAD »

Try
Let the ImageGadget the last one

Code: Select all

ContainerGadget(#Main_menu_cont,1,32,658,30)
	ButtonImageGadget(#Main_menu_btn,5,1,120,26,ImageID(OptionsIcon))	
	ImageGadget(#Main_menu_img,0,0,WndWidth,20,ImageID(BarIcon))
CloseGadgetList()
Egypt my love
User avatar
doctorized
Addict
Addict
Posts: 854
Joined: Fri Mar 27, 2009 9:41 am
Location: Athens, Greece

Re: ButtonImageGadget in front of image

Post by doctorized »

RASHAD wrote: Wed Sep 08, 2021 3:23 pm Try
Let the ImageGadget the last one

Code: Select all

ContainerGadget(#Main_menu_cont,1,32,658,30)
	ButtonImageGadget(#Main_menu_btn,5,1,120,26,ImageID(OptionsIcon))	
	ImageGadget(#Main_menu_img,0,0,WndWidth,20,ImageID(BarIcon))
CloseGadgetList()
I already tried it but the button is hidden behind the image. If mouse passes over the place where button hides, then button comes in front of the image. Your previous post with DisableGadget() solves the problem. I am just wandering why does this happen. To be honest, I face many strange things like that. An other one is the lines (LineXY()). If I minimize the Window and show it again, the lines are gone.
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4637
Joined: Sun Apr 12, 2009 6:27 am

Re: ButtonImageGadget in front of image

Post by RASHAD »

Use #WS_CLIPSIBLINGS to manage which is over which
If you can post some small workable snippet it will be very helpful

Code: Select all

OpenWindow(1,0,0,300,300,"Test",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
ButtonGadget(1, 50, 50,50,50, "TEST",#WS_CLIPSIBLINGS)
ButtonGadget(2, 30, 30,90,90, "",#WS_CLIPSIBLINGS)
ButtonGadget(3, 10, 10,130,130, "",#WS_CLIPSIBLINGS)

Repeat
  Select WaitWindowEvent()
     
       Case #PB_Event_CloseWindow
           Q = 1
     
      Case #PB_Event_Gadget
          Select EventGadget()
            Case 1           
              Debug "Gadget 1 pressed"
         
            Case 2
              Debug "gadget 2 pressed"
              
            Case 3
              Debug "gadget 3 pressed"
         
          EndSelect
             
  EndSelect
Until Q =1
End
Egypt my love
User avatar
netmaestro
PureBasic Bullfrog
PureBasic Bullfrog
Posts: 8425
Joined: Wed Jul 06, 2005 5:42 am
Location: Fort Nelson, BC, Canada

Re: ButtonImageGadget in front of image

Post by netmaestro »

Code: Select all

Declare ButtonProc()
Declare CreateBackground()

OpenWindow(0,0,0,320,240,"",#PB_Window_ScreenCentered|#PB_Window_SystemMenu)
ContainerGadget(0,32,50,256,128)
SetClassLongPtr_(GadgetID(0), #GCL_HBRBACKGROUND, CreateBackground())
CreateImage(1, 80, 20, 24, #Red)
ButtonImageGadget(1, 88, 54, 80, 20, ImageID(1))
CloseGadgetList()
BindGadgetEvent(1, @ButtonProc())

Repeat:Until WaitWindowEvent() = #PB_Event_CloseWindow

Procedure ButtonProc()
  Debug "Pushed!"
EndProcedure

Procedure CreateBackground()
  CreateImage(0, 256, 128, 24, #White)
  StartDrawing(ImageOutput(0))
  For i = 0 To 128 Step 20
    For j = 0 To 256 Step 20
      Box(j, i, 10, 10, RGB(225,225,225))
      Box(j+10, i+10, 10,10, RGB(225,225,225))
    Next
  Next
  StopDrawing()
  hBrush = CreatePatternBrush_(ImageID(0))
  ProcedureReturn hBrush
EndProcedure
Anyways, in Windows this is how I would do it. Clean, straightforward and it'll never act up.
BERESHEIT
User avatar
doctorized
Addict
Addict
Posts: 854
Joined: Fri Mar 27, 2009 9:41 am
Location: Athens, Greece

Re: ButtonImageGadget in front of image

Post by doctorized »

RASHAD wrote: Wed Sep 08, 2021 3:45 pm If you can post some small workable snippet it will be very helpful
Here is a small test code: https://users.sch.gr/arahiotis/test.rar
Do not forget to minimize and restore window to see the missing lines.
I have code to move the window but I didn't add it.
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4637
Joined: Sun Apr 12, 2009 6:27 am

Re: ButtonImageGadget in front of image

Post by RASHAD »

Hi doctorized
It is not a good practice to draw direct to window output
Because it needs refresh with each corresponding events
Try

Code: Select all

Procedure ShowMainWindow()
Protected WndWidth.i = 661
Protected WndHeight.i = 723

If OpenWindow(#MainWindow, 0,0,WndWidth,WndHeight, "window", #PB_Window_BorderLess | #PB_Window_ScreenCentered ) ;| #PB_Window_Invisible
  dummy = CreateImage(#PB_Any,WndWidth,WndHeight,24,$f0f0f0) 
  	StartDrawing(ImageOutput(dummy))
  	LineXY(0,0,WndWidth*DPI,0,$646464)
  	LineXY(WndWidth*DPI-1,0,WndWidth*DPI-1,WndHeight*DPI,$646464)
  	LineXY(0,WndHeight*DPI-1,WndWidth*DPI,WndHeight*DPI-1,$646464)
  	LineXY(0,0,0,WndHeight*DPI,$646464)
  	;statusbar
  	LineXY(0,WndHeight-25,WndWidth,WndHeight-25,$999990)
  	LineXY(WndWidth/2,WndHeight-25,WndWidth/2, WndHeight,$999990)	
  StopDrawing()
  img = ImageGadget(#PB_Any,0,0,WindowWidth(#MainWindow),WindowHeight(#MainWindow),ImageID(dummy))
  	
	LoadFont(#Font_Custom,"ARial",12)
	SetGadgetFont(#PB_Default,#Font_Custom)
	MainIcon = CatchImage(#PB_Any, ?MainStart, ?MainEnd - ?MainStart)
	MinimizeIcon = CatchImage(#PB_Any, ?MinimizeStart, ?MinimizeEnd - ?MinimizeStart)
	CloseIcon = CatchImage(#PB_Any, ?CloseStart, ?CloseEnd - ?CloseStart)
	BarIcon = CatchImage(#PB_Any, ?BarStart, ?BarEnd - ?BarStart)	
	
	CanvasGadget(#Main_title, 2,2,WndWidth-70,30)
	If StartDrawing(CanvasOutput(#Main_title))
		Box(0,0,660,35,$ffffee)
		DrawImage(ImageID(MainIcon),5,1,28,28)
		DrawingFont(FontID(#Font_Custom))
		Height = TextHeight("Window")
		DrawText(40,(30-Height)/2,"Windows",0,$ffffee)
     StopDrawing()
	EndIf
  
	ButtonImageGadget(#Main_title_minimize,WndWidth-70,1,35,31,ImageID(MinimizeIcon))
	ButtonImageGadget(#Main_title_close,WndWidth-36,1,35,31,ImageID(CloseIcon))
;   
	ContainerGadget(#Main_menu_cont,1,32,658,30)
		ImageGadget(#Main_menu_img,0,0,WndWidth*DPI,20*DPI,ImageID(BarIcon))
		ButtonGadget(#Main_menu_btn,1,1,120,26,"Options")
		ButtonGadget(#Main_menu_help,WndWidth-44,1,40,26,"Help")
  	CloseGadgetList()
	DisableGadget(#Main_menu_img,1)
		
  TextGadget(#Main_stb_txt1, 3,WndHeight-24,WndWidth/2-3,22, "Some text here",#SS_CENTERIMAGE)
  TextGadget(#Main_stb_txt2, WndWidth/2+1,WndHeight-24,WndWidth/2-2,22, "v1." + RSet(Str(#pb_editor_buildcount),2,"0") + "." + Str(#pb_editor_compilecount),#SS_CENTERIMAGE|#PB_Text_Right)
	
  SetWindowLongPtr_(GadgetID(img), #GWL_STYLE, GetWindowLongPtr_(GadgetID(img), #GWL_STYLE) | #WS_CLIPSIBLINGS)
  SetWindowPos_(GadgetID(img), #HWND_BOTTOM, -1, -1, -1, -1, #SWP_NOSIZE | #SWP_NOMOVE)

Else
	MessageRequester("ERROR","Main Windows cannot open.",#MB_ICONERROR)
	End
EndIf
EndProcedure
Egypt my love
User avatar
doctorized
Addict
Addict
Posts: 854
Joined: Fri Mar 27, 2009 9:41 am
Location: Athens, Greece

Re: ButtonImageGadget in front of image

Post by doctorized »

Thank you RASHAD!
Post Reply