[RELEASED] Dynamic Panels - draggable, resizable, dockable and stackable UI panels

Community Showcases
21

Hi YasirKula,

Your work is amazing! Thanks so much for providing this, it’s exactly what we need!
Cheers!

1 Like
22

Just updated the asset on GitHub: GitHub - yasirkula/UnityDynamicPanels: Draggable, resizable, dockable and stackable UI panel solution for Unity 3D

Asset Store version will be updated soon. Here’s the changelog:

  • Added PanelSerialization for runtime serialization (it is simpler to use than the temporary solution I’ve posted in my previous message)
  • Added an option to completely remove the free space from the canvas
  • Added initial size property to docked panels
  • Exposed PanelTab class for modifying tabs

NOTE: after upgrading your project, it is recommended that you save your scene(s) with dynamic panels at least once for the IDs of the tabs and the canvases to be serialized (needed by PanelSerialization).

23

Hi

Great work on your asset, it’s really great, saved us a lot of time.

However, is there a way to prevent the user from create floating panels?

24

You can delete/comment out these lines: UnityDynamicPanels/Plugins/DynamicPanels/Scripts/PanelManager.cs at 72182de0744ad51d7520d70004d321e9c49a8d26 · yasirkula/UnityDynamicPanels · GitHub

25

What function do i need to call to make a new tab in a script while the game is running(not in editor)

Edit: Never mind i was just looking in the wrong class. Somehow i missed it the first time i was looking in Panel.cs

26

Hi there,

awesome asset man! However, I have three questions or requests:

  • Is there a way to prevent certain docking positions, e.g. the user can dock panels on right, bottom, left, but not at the top edge of the rectangle?
  • I would like to scale my freespace in the middle of the dockable panels, depending on their size. Up to now, I realized the free space as a panel in the middle, but this way the user can drag and drop it, which must not happen. How would you do that?
  • I have a panel at the left and one at the right. Left panel has minimum x = 222, right panel has minimum x = 160. However, when I undock the right panel and dock the one which was left, it uses the min x = 222 and not the x = 160. How could I define docking zones with certain min sizes?
27
  1. If it is the edge of the canvas, you may try commenting out one of these lines, otherwise it is not possible.
  2. The free space is indeed a panel in the middle but it is marked as dummy internally, so a user can’t drag and drop it. You can make this variable public to access the free space panel.
  3. There is no neat solution for this, however feel free to make modifications to the code to achieve this. You’ll probably have to tweak at least PanelManager.AnchorPanel.
28

Hi,
thanks for your reply! Nr. 1 worked with some additional minor changes.
The others I’ll have at them.

29

great work!! its Useful to me.

1 Like
30

Hi! This asset looks really impressive, i played around with the webgl version, really neat.

I have a few questions:
1- Can you hide the tab widget so that you only see the panel? (Even if by modifying code, I don’t mind)
2- Can you drag a panel by clicking anywhere in the window, rather than just the tab?

Thanks!

31

Yes, with a little modification, it is possible to achieve these.

1- Modify DynamicPanels/Resources/DynamicPanel.prefab as follows:
a) set DynamicPanel/Content/RectTransform/Top value to 2
b) set DynamicPanel/PanelHeader/RectTransform/Height value to 0

2- Add the following script to the content of your panel:

using DynamicPanels;
using UnityEngine;
using UnityEngine.EventSystems;

public class PanelDragFromWithin : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    private PanelHeader panelHeader;
   
    private void Awake()
    {
        panelHeader = GetComponentInParent<Panel>().GetComponentInChildren<PanelHeader>();
    }

    public void OnBeginDrag( PointerEventData eventData )
    {
        panelHeader.OnBeginDrag( eventData );
    }

    public void OnDrag( PointerEventData eventData )
    {
        panelHeader.OnDrag( eventData );
    }

    public void OnEndDrag( PointerEventData eventData )
    {
        panelHeader.OnEndDrag( eventData );
    }
}
1 Like
32

Whoa thanks for the quick reply!! I’ll be trying this tonight!

1 Like
33

Is there a way to keep the panels rendering when they’re outside a canvas? Had a bit of success with custom shaders but wondering what the best approach would be

Example below :slight_smile:

34

You can comment out these lines: UnityDynamicPanels/Plugins/DynamicPanels/Scripts/DynamicPanelsCanvas.cs at e81a2f3d38e306de18889c37f14f2968feec2cb5 · yasirkula/UnityDynamicPanels · GitHub

No other changes necessary :slight_smile:

1 Like
35

Thanks so much! Works perfectly

1 Like
36

Hi @yasirkula !

Amazing job on the asset. You just saved me a whole lot of time and effort. Your work is very much appreciated.

1 Like
37

thanks for this asset! Quick question- is there a way to have a panel resize from the center anchor of a ui object? For example, if I grab the right side of a panel to resize it I would like to have the left and right side scale in or out simultaneously. Let me know, thanks!

38

I think it can be achieved by modifying the Panel.OnResize function. Hope it helps!

39

How did you get the scene to appear in the top left panel? I like how it’s scalable without distorting the image.

40

I’ve used a RenderTexture and resized it with the Scene panel. I’ve shared its source code here: Where To Get The Demo Project · Issue #5 · yasirkula/UnityDynamicPanels · GitHub