PureBasic Forums - English

http://www.purebasic.com
https://www.purebasic.fr/english/

SplitterGadget with more than two gadgets

https://www.purebasic.fr/english/viewtopic.php?t=33710

Page 1 of 3

SplitterGadget with more than two gadgets

Posted: Mon Aug 11, 2008 12:12 pm
by PB
I've been trying with no luck to use a SplitterGadget with more than one
gadget. For example, a ListIconGadget at top-left, an EditorGadget next
to it at top-right, a SplitterGadget underneath those, and a PanelGadget
underneath that. The aim is that when I move the SplitterGadget down,
the ListIconGadget and EditorGadget resize vertically together where the
PanelGadget was. I won't be moving the PanelGadget up, I just want the
user to be able to drag the splitter down to see more of those top two
gadgets when desired (never less of them).

But the syntax for the SplitterGadget allows only two gadgets to be
specified, so in my case, ListIconGadget and PanelGadget, leaving the
EditorGadget out. :( How would you approach this problem? No code
is necessary; just the theory and I can do the rest. :)

Posted: Mon Aug 11, 2008 12:22 pm
by milan1612
2 SplitterGadgets, one of them containing the other one and another Gadget :P
(If I understood you correctly)

Posted: Mon Aug 11, 2008 12:33 pm
by Fluid Byte
Dunno if I interpreted it correctly but maybe like this?

Code: Select all

OpenWindow(0,0,0,400,300,"void",$CC0001)
CreateGadgetList(WindowID(0))
ListIconGadget(0,0,0,0,0,"Name",250)
EditorGadget(1,0,0,0,0)
SplitterGadget(2,0,0,0,0,0,1,#PB_Splitter_Vertical)
PanelGadget(3,0,0,0,0)
CloseGadgetList()
SplitterGadget(4,0,0,0,0,2,3)

For i=1 To 50 : AddGadgetItem(0,-1,"ListIcon Item #" + Str(i)) : Next

AddGadgetItem(3,-1,"tab1") : AddGadgetItem(3,-1,"tab2") : AddGadgetItem(3,-1,"tab3")

Repeat
	EventID = WaitWindowEvent()

	If EventID = #PB_Event_SizeWindow
		ResizeGadget(4,0,0,WindowWidth(0),WindowHeight(0))
	EndIf
Until EventID = #PB_Event_CloseWindow

Posted: Mon Aug 11, 2008 2:13 pm
by Tranquil
In all other cases I use containers to size them correctly. So I place the splitter between the containers.

Re:

Posted: Sun May 05, 2019 12:53 am
by BarryG
Hi, I wanted to try Fluid Byte's code but it doesn't compile. An error about OpenGadgetList() needing calling again? I don't understand why.

What I am aiming to do is have two ExplorerListGadgets at top, with two EditorGadgets below them (one below each Explorer), so that I can resize the top two against the bottom two. But for me, SplitterGadgets are hard to understand, I'm ashamed to say.

Here's some basic code that shows what I want to achieve:

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

ExplorerListGadget(0,0,0,0,0,"c:\") ; Top left.
ExplorerListGadget(1,0,0,0,0,"c:\temp\") ; Top right.

EditorGadget(2,0,0,0,0) : SetGadgetText(2,"c:\") ; Bottom left.
EditorGadget(3,0,0,0,0) : SetGadgetText(3,"c:\temp\") ; Bottom right.

; How do I split the top two gadgets with the bottom two here?

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow

Re: SplitterGadget with more than two gadgets

Posted: Sun May 05, 2019 1:48 am
by skywalk

Code: Select all

OpenWindow(0,0,0,400,300,"void",$CC0001)
ListIconGadget(0,0,0,0,0,"Name",250)
EditorGadget(1,0,0,0,0)
SplitterGadget(2,0,0,0,0,0,1,#PB_Splitter_Vertical)
PanelGadget(3,0,0,0,0)
AddGadgetItem(3,-1,"tab1")
AddGadgetItem(3,-1,"tab2")
AddGadgetItem(3,-1,"tab3")
CloseGadgetList()
SplitterGadget(4,0,0,0,0,2,3)
For i=1 To 50
  AddGadgetItem(0,-1,"ListIcon Item #" + Str(i))
Next
ResizeGadget(4,0,0,WindowWidth(0),WindowHeight(0))
Repeat
  EventID = WaitWindowEvent()
  If EventID = #PB_Event_SizeWindow
    ResizeGadget(4,0,0,WindowWidth(0),WindowHeight(0))
  EndIf
Until EventID = #PB_Event_CloseWindow

Re: SplitterGadget with more than two gadgets

Posted: Sun May 05, 2019 7:59 am
by calixarene
Here is the code for your reference. There are three splitter gadgets so that you can change the size to whatever you like (no container). This is the easier for your case. I hope this help you as I learn a lot from this forum.

When you use containers with splitter gadgets, remember to resize every gadgets related to the container inside the resize procedures. I found that the containers width and height will change automatically when splitter gadget change size.

Code: Select all

Global WindowMain
Global ExplorerListLeft, EditorLeft, ExplorerListRight, EditorRight, SplitterLeft, SplitterRight, SplitterMain

Declare ResizeGadgetsWindowMain()

Procedure OpenWindowMain(x = 0, y = 0, width = 750, height = 505)
  WindowMain = OpenWindow(#PB_Any, x, y, width, height, "", #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
  ExplorerListLeft = ExplorerListGadget(#PB_Any, 15, 10, 300, 232, "")
  EditorLeft = EditorGadget(#PB_Any, 15, 251, 300, 239)
  ExplorerListRight = ExplorerListGadget(#PB_Any, 324, 10, 411, 232, "")
  EditorRight = EditorGadget(#PB_Any, 324, 251, 411, 239)
  SplitterLeft = SplitterGadget(#PB_Any, 15, 10, 300, 480, ExplorerListLeft, EditorLeft, #PB_Splitter_Separator)
  SetGadgetState(SplitterLeft, 232)
  SplitterRight = SplitterGadget(#PB_Any, 324, 10, 411, 480, ExplorerListRight, EditorRight, #PB_Splitter_Separator)
  SetGadgetState(SplitterRight, 232)
  SplitterMain = SplitterGadget(#PB_Any, 15, 10, 720, 480, SplitterLeft, SplitterRight, #PB_Splitter_Vertical | #PB_Splitter_Separator)
  SetGadgetState(SplitterMain, 300)
EndProcedure

Procedure ResizeGadgetsWindowMain()
  Protected FormWindowWidth, FormWindowHeight
  FormWindowWidth = WindowWidth(WindowMain)
  FormWindowHeight = WindowHeight(WindowMain)
  ResizeGadget(SplitterMain, 15,10, FormWindowWidth -15, FormWindowHeight -10) ; This is the main splitter so it must be resized
EndProcedure

Procedure WindowMain_Events(event)
  Select event
    Case #PB_Event_SizeWindow
      ResizeGadgetsWindowMain()
    Case #PB_Event_CloseWindow
      ProcedureReturn #False

    Case #PB_Event_Menu
      Select EventMenu()
      EndSelect

    Case #PB_Event_Gadget
      Select EventGadget()
      EndSelect
  EndSelect
  ProcedureReturn #True
EndProcedure

Define EventID, KeepRunning
OpenWindowMain()

If WindowMain
  Repeat
    EventID = WaitWindowEvent(100)
    KeepRunning = WindowMain_Events(EventID)
  Until KeepRunning =#False  
EndIf

Re: SplitterGadget with more than two gadgets

Posted: Mon Apr 29, 2024 12:51 pm
by BarryG
Hi all. Just trying to adapt the example above to show 4 gadgets in the corners of a window, with the top two being separated by the the bottom two with a SplitterGadget(). Since the SplitterGadget() can only use 2 gadgets, I tried putting the top two and bottom two into ContainerGadgets(), but nothing appears in the window at all. What am I doing wrong?

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

ContainerGadget(0,0,0,400,150)
ExplorerListGadget(1,0,0,100,100,"c:\") ; Top left.
ExplorerListGadget(2,200,0,100,100,"c:\temp\") ; Top right.
CloseGadgetList()

ContainerGadget(3,0,150,400,150)
EditorGadget(4,0,150,100,100) : SetGadgetText(2,"c:\") ; Bottom left.
EditorGadget(5,200,150,100,100) : SetGadgetText(3,"c:\temp\") ; Bottom right.
CloseGadgetList()

SplitterGadget(6,0,150,400,5,0,3,#PB_Splitter_Separator) ; Separate the top two gadgets from the bottom two.

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow

Re: SplitterGadget with more than two gadgets

Posted: Mon Apr 29, 2024 2:30 pm
by jacdelad
Just a quick look, not at my computer now: The height of your splitter gadget ist 5, which is not much (5 pixels...). You have to define the whole area which is covered by both gadgets of the splitter gadget.

Re: SplitterGadget with more than two gadgets

Posted: Mon Apr 29, 2024 10:09 pm
by BarryG
Oops, I thought the 5 was the bar height. My bad. :(

Here's a better version, but the 4 gadgets don't resize to fill the space according to where the splitter bar is? Like the example in the manual does.

Also, there's terrible flickering when moving the bar despite using SmartWindowRefresh(). :(

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

SmartWindowRefresh(0,1)

ContainerGadget(0,0,0,400,150)
ExplorerListGadget(1,0,0,200,150,"c:\") ; Top left.
ExplorerListGadget(2,200,0,200,150,"c:\temp\") ; Top right.
CloseGadgetList()

ContainerGadget(3,0,150,400,150)
EditorGadget(4,0,0,200,150) : SetGadgetText(4,"c:\") ; Bottom left.
EditorGadget(5,200,0,200,150) : SetGadgetText(5,"c:\temp\") ; Bottom right.
CloseGadgetList()

SplitterGadget(6,0,0,400,300,0,3,#PB_Splitter_Separator) ; Separate the top two gadgets from the bottom two.

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow

Re: SplitterGadget with more than two gadgets

Posted: Mon Apr 29, 2024 10:42 pm
by TassyJim

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

SmartWindowRefresh(0,1)

ContainerGadget(0,0,0,400,300)
ExplorerListGadget(1,0,0,200,300,"c:\") ; Top left.
ExplorerListGadget(2,200,0,200,300,"c:\temp\") ; Top right.
SplitterGadget(7,0,0,400,300,1,2,#PB_Splitter_Vertical)
CloseGadgetList()

ContainerGadget(3,0,150,400,300)
EditorGadget(4,0,0,200,300) : SetGadgetText(4,"c:\") ; Bottom left.
EditorGadget(5,200,0,200,300) : SetGadgetText(5,"c:\temp\") ; Bottom right.
SplitterGadget(8,0,0,400,300,4,5,#PB_Splitter_Vertical)

CloseGadgetList()

SplitterGadget(6,0,0,400,300,0,3,#PB_Splitter_Separator) ; Separate the top two gadgets from the bottom two.

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow
I wonder how far you can go?

Jim

Re: SplitterGadget with more than two gadgets

Posted: Mon Apr 29, 2024 11:32 pm
by chi

Code: Select all

Procedure WinResize()
  ResizeGadget(6, #PB_Ignore, #PB_Ignore, WindowWidth(0)-10, WindowHeight(0)-10)
EndProcedure

OpenWindow(0, 0, 0, 400, 400, "Splitter", #PB_Window_SystemMenu|#PB_Window_MinimizeGadget|#PB_Window_MaximizeGadget|#PB_Window_SizeGadget|#PB_Window_ScreenCentered|#PB_Window_Invisible)

ExplorerListGadget(0, 0, 0, 0, 0, "c:\")
ExplorerListGadget(1, 0, 0, 0, 0, "c:\temp\")

EditorGadget(2, 0, 0, 0, 0) : SetGadgetText(2, "c:\")
EditorGadget(3, 0, 0, 0, 0) : SetGadgetText(3, "c:\temp\")

SplitterGadget(4, 0,   0, 400, 200, 0, 1, #PB_Splitter_Vertical)
SplitterGadget(5, 0, 200, 400, 200, 2, 3, #PB_Splitter_Vertical)

SplitterGadget(6, 5, 5, 390, 390, 4, 5, #PB_Splitter_Separator)
SetGadgetState(6, 250)
BindEvent(#PB_Event_SizeWindow, @WinResize())

HideWindow(0, #False)
While WaitWindowEvent() <> #PB_Event_CloseWindow : Wend

Re: SplitterGadget with more than two gadgets

Posted: Tue Apr 30, 2024 10:37 am
by BarryG
Hi TassyJim and Chi. Good examples but they both flicker with glitches like crazy, and you've added vertical splitters between the top two and bottom two gadgets? My code doesn't want that. Just one splitter in the middle of the top two and the bottom two. The glitching is something I can't figure out how to stop. It looks so bad:

Image

I was going to try PureLust's "DeFlicker" module but that seems to be used for a gadget resize, and in my code none of my gadgets actually get resized with the "ResizeGadget()" command, so I can't use that?

Re: SplitterGadget with more than two gadgets

Posted: Tue Apr 30, 2024 11:12 am
by RASHAD
Play around with CanvasGadget it may help

Code: Select all


Procedure sizeCB()
  ResizeGadget(0,#PB_Ignore,#PB_Ignore,WindowWidth(0)-20,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeGadget(1,#PB_Ignore,#PB_Ignore,#PB_Ignore,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeGadget(2,#PB_Ignore,#PB_Ignore,#PB_Ignore,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeGadget(3,#PB_Ignore,#PB_Ignore,WindowWidth(0)-340,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeImage(0,WindowWidth(0),WindowHeight(0))       
  SetGadgetAttribute(0,#PB_Canvas_Image ,ImageID(0)) 
EndProcedure

sgcolor = $67DBF7

flags = #PB_Window_Invisible | #PB_Window_SystemMenu| #PB_Window_MaximizeGadget| #PB_Window_MinimizeGadget| #PB_Window_ScreenCentered | #PB_Window_SizeGadget
OpenWindow(0,0,0,800,600,"Test",Flags)

If CreateStatusBar(0, WindowID(0))
  AddStatusBarField(100)
  AddStatusBarField(50)
  AddStatusBarField(100)
EndIf

StatusBarText(0, 0, "Area 1")
StatusBarText(0, 1, "Area 2", #PB_StatusBar_BorderLess)
StatusBarText(0, 2, "Area 3", #PB_StatusBar_Right | #PB_StatusBar_Raised) 

CreateImage(0,800,600,24,sgcolor)
CanvasGadget(0,10,10,780,560,#PB_Canvas_Container)
SetGadgetAttribute(0,#PB_Canvas_Image ,ImageID(0))

ListIconGadget(1,0,0,188,560,"Column 0",100,#PB_ListIcon_FullRowSelect|#PB_ListIcon_GridLines)

ExplorerListGadget(2,192,0,188,560,"c:\")

ExplorerListGadget(3,384,0,396,560,"c:\")

CloseGadgetList()
While WindowEvent() : Wend 
BindEvent(#PB_Event_SizeWindow,@sizeCB()) 
HideWindow(0,0)

Repeat
  
  Select WaitWindowEvent()
      
    Case #PB_Event_CloseWindow
      Quit = 1
      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case 0
          Select EventType()
            Case #PB_EventType_MouseEnter
              SetGadgetAttribute(0,#PB_Canvas_Cursor,#PB_Cursor_LeftRight)
              
            Case #PB_EventType_MouseLeave
              SetGadgetAttribute(0,#PB_Canvas_Cursor,#PB_Cursor_Default)
              
            Case #PB_EventType_LeftButtonDown
              cx = GetGadgetAttribute(0,#PB_Canvas_MouseX)               
              Downflag = 1
              If cx > GadgetX(2)
                split = 2
                ww = GadgetWidth(2)+GadgetWidth(3)+4
              Else
                split = 1
                ww = GadgetWidth(1)+GadgetWidth(2)+4
              EndIf             
              
            Case #PB_EventType_MouseMove
              If Downflag = 1
                cx = GetGadgetAttribute(0,#PB_Canvas_MouseX)
                If (cx < GadgetX(3)-12 And split = 1) Or (cx > GadgetX(2)+4 And split = 2)
                  If split = 1
                    ResizeGadget(1,#PB_Ignore,#PB_Ignore,cx,#PB_Ignore)                      
                    ResizeGadget(2,cx+4,#PB_Ignore,ww-cx-4,#PB_Ignore)
                  Else
                    ResizeGadget(2,#PB_Ignore,#PB_Ignore,cx-GadgetWidth(1)-4,#PB_Ignore) 
                    While WindowEvent() : Wend  
                    ResizeGadget(3,cx+4,#PB_Ignore,ww-GadgetWidth(2)-4,#PB_Ignore)                                        
                  EndIf
                EndIf
              EndIf
              
            Case #PB_EventType_LeftButtonUp
              Downflag = 0                          
              ;ResizeGadget(3,#PB_Ignore,#PB_Ignore,#PB_Ignore,#PB_Ignore)
              
          EndSelect                   
      EndSelect         
      
  EndSelect 
  
Until Quit = 1
End

Re: SplitterGadget with more than two gadgets

Posted: Tue Apr 30, 2024 12:02 pm
by BarryG
Doesn't help, Rashad. See below. I also wanted top/bottom gadgets like my example, not side by side.

Image
All times are UTC+01:00
Page 1 of 3

Powered by phpBB® Forum Software © phpBB Limited