Hello
I am working on a ui project. I’m trying to build a very flexible and dynamic ui like the one of Adobe (at least something like that). I thought I found the right way but I can’t go on cause container weired behaviour. It’s a little bit complicated to explain so I did a video.
Thanks
TD build 2020.28110
Leonardo Benelli
https://drive.google.com/file/d/1dg-IjNaUD48tChjR6qkmcl69qwDPoqHD/view?usp=sharing
The problem you’re having is your mixing expressions with the resizing panel logic, which works by setting values directly to the parameters (breaking expressions).
If you want to use the built in resizing functionality you’ll want to stay away from having expressions in the width/height/X/Y parameters of each panel COMP.
in general, when making flexible UI like this - you have a number of panes on an axis (left to right, top to bottom, etc) and one or more of those panes are “stretchy” which means they will always fill the remainder.
Usually, in the nested scenarios like in your video, you can simply make the “last” pane the stretchy one. Its up to you though.
To make them stretchy def want to use the fill width and fill height parameters, and its also recommended to use the anchors parameters instead of raw pixel width and height since it’s not quite as difficult to visualize the maths that way. Def use cases for both though.
Also, by using the panel component wires (vertical wires) you can properly nest panels in a way where they are compartmentalized away from other panels, can use margins, and other things.
nestedResizablePanels.1.toe (4.0 KB)
1 Like
Hi lucasm
thanks for your reply. When I started to work on my project I tried to use the built in resizing functionality of Touchdesigner and to use the fill or the anchors for horizontal and vertical mode but without success. At some point something did not work at it should or I had to accept some sort of pre configurated windows pattern.
In theory the expressions should works. I did not use expressions to set parameters. I use expressions to set expressions and I’m pretty sure I did expressions with the right relationship. In fact in the video I can move the container with the slider but when I try to move it by dragging it breaks the expressions. Maybe I missed something or it’s a bug?
Ahh I see!
well the one thing I am noticing for sure - and maybe you can shed some more light on what is actually happening is these parameters go from expression, to constant mode when you drag that middle divider up and down right?
Are there any python scripts being executed on click, or drag, etc?
Or is everything expression driven only?
I see that the par.x parameter is being set to 0 when you drag, are you using the panel reposition functionality of the light grey divider to accomplish what you have here?
HI lucasm
this is how I tought this project.
The orizontal and vertical dividers are containers. Vertical dividers always have x (and w) parameter in constant mode and orizontal dividers always have y (and h) parameter in constant mode. This way expressions always refers to existing numbers to avoid looping expressions. Vertical dividers have repositionymin and repositionymax set to 0 to avoid vertical movement and repositionxmin and repositionxmax driven by expressions. The same thing with x and y inverted for orizontal dividers. Windows x, y, w, h parameters are driven by expressions related to orizontal and vertical dividers. When I drag the divisor there are no python script executed, simply the changing of x or y parameter of the divisor drives the expressions.
If you were interested in taking a look at the project you will find it in attachment.
Windows have two children: one container for the top bar and one select comp for the rest. The main part of the programming is in the top bar. To create a new window I can drag the top left icon towards one of the four sides of the window. This will create a new window in that position. The project is still in a initial phase. The python scrips to create a new window only cover two directions (drag to the right and drag to the top) and only limited cases (drag to right 8 over 16 cases and drag to top 7 over 16 cases). I haven’t written yet the python script to delete windows.
Thanks a lot for any kind of attention you will give me.
Leonardo
grid.toe (56.4 KB)
hey check out this attached file, I made some additions to the o_div1 that I got when I recreated your setup from the video.
I didn’t have time to get this fully perfect but I think you’ll get the direction I was going!
grid.32.toe (153.9 KB)
Basically, what is happening is your reposition X range is 0:0:
and the X position for that particular container is:
So as soon as you start to move it, it snaps the X position to a value between 0:0 which forces the expression to disable itself.
you might want to set the X reposition range to something like 342:342 if that’s what X is equal to.
You might be able to do this with an expression, or some scripts inside the divider.
I was trying some more complicated stuff inside as well, to re enable the expressions after the reposition action finished.
Hope this helps!
1 Like
It would be interesting for us to know what didn’t work as these features were all developed to keep people from having to use any expressions for this stuff.
I watched the video and could not tell what wasnt working, but that looked possible via parameters. I then looks at the .toe file you posted but it didn’t behave the way it it looked in your video, so I’m not sure what I am looking at.
FYI @lucasm example worked for me as it was already split up
Hi lucasm
I think you are right!! Probably I mishunderstood the meaning of repositionxmin/max parameter. What I was looking for is to avoid the movement an that axis. At this point I’m surprised for doing the right script for the other parameter! 
Thanks a lot!! I will take a look at your reposition script and I will let you know what’s going on.
Bye
Leonardo
Hello Ben
what I remember is the difficulty in managing the drag edge to resize function, expecially in case of nested container. Furthermore during dragging edges the panel of the container was not working as I expected.
Leonardo
You are a genius!! Simply changing 0 with me.par.x and everything works like a charm!!
2 Likes