Hello there,
Is there a way to translate or transform each widget? I would like to change the position of each of them, but I don’t see how I can do it…
thank you!
Hello @sfphynx , I had similar questions recently. The best way for me so far is to use childwindows to place things where I want.
What I am doing is utilize them as if I would do by creating grids in CSS. This ofc may end up to an overkill for simple things and adding (let’s say 9 childwindows for) a grid of 3x3 can be too much, sacrificing resources just to render things out in a “pretty” and consistent way.
Another option, not really consistent to me, but probably the most efficient, is to use a rectangle primitive and an invisible button (or just a primitive rectangle and make it to behave as it was a button).
A thing with imgui primitives tho, is that they are not being masked always by imgui windows, this involves the ingui’s drawlist indeed, where we don’t have access really from the provided nodeset.
Thus for usually I am going for the first option..
If anybody else have a different approach I would like to know it too!
Ps: last thing that just popped in my mind, but I didn’t try it yet is the yoga-flex lib by @antokhio , I suppose this could be helpful for situations like this.
Well Flex ImGui would make this l, but I’m not sure about state of lib, due to imgui widgets don’t have consistent api it was kinda nightmare to align things together if you don’t really know imgui so it end up more proof of concept instead of working solution, I’ve would suggest try VL.Avalonia
Not sure what kind of project you are doing, if it’s an touchscreen go with Flex.Touchy if it’s an app try the Avalonia
@nissidis Gotcha, thanks for the input. I’m gonna try the childwindows. Or rethink the UI so that it gets closer to imgui ‘philosophy’ of arrangements. But I’m glad I am not the only one who wonders about this. (BTW, I am still waiting for your tutorials of your video on IG! <3)
@antokhio thanks for the link, I am going to check Avalonia.
the project I am doing is an automatic video mixing program : you put path to folders containing videos and pictures, and then it mixes with effects randomly or following a logic.. but I need multiple variables that can be accessed by the user. therefore I need an easier layout of buttons and sliders to make things easy to understand! let’s say I am remaking Resolume Arena, but my own version
mmmm, I am surprised there is no easier way to set the UI.
The great side of vvvv gamma compared to TD for me is the ability to make an .exe, and deliver it as a piece of software. So that when I deliver it to a client, he doesn’t have to tweak values in boxes hidden in a bucket of spaghettis …
As I am not a programmer, more of a designer, I would love to have a lightweight consistent UI set and easy to use out of the box with gamma
anyway, thank you for your inputs boys. I will come back with a few more questions when I have tried your suggestions !
1 Like
Hi @sfphynx,
you can use ImGui’s SetCursorPosition, SetCursorPositionX, SetCursorPositionY nodes before your widgets to place them (“forcefully”) wherever you want. Note, the “cursor” in ImGui is the place where the next widget will be drawn.
If you still want to participate in ImGui’s layouting, then use ChildWindows, their size can be configured with 0 (take the whole space) or negative (take the whole space minus size) values. ChildWindows can be: stacked into each other, placed with the SameLine between them for horizontal layout, or without for vertical Layout. Note, if you have two ChildWindows with SameLine between them, and the first window has size (0,0), it will eat the whole space leaving the second ChildWindow invisible.
Hope these hits will help.
Best,
Anton.
I feel you as a Designer who has gotten into vvvv many years ago. Building UIs is always a natural part of all software tools we make.
With ImGui you can do a lot with a bit of fiddling and thinking about how layout works. You use ChildWindows as containers and you can calculate their widths and heights in some layout patch. For example I just calculate the widths of columns if I divide horizontally. You calculate like a column width and set that to your child windows.
Useful ImGui nodes are:
- GetContentRegionAvailable - tells you how much space is left from where the cursor is right now
- SetNextItemWidth - sets the width of a widget immediately after it
- GetCursorPos - Gets the current position of the virtual drawing position
- SetCursorPos - Sets the cursor to a new value
Then you just build your own components out of widgets with layout logic. After a while you will have a good set of UI elements to use.
In the end you can build stuff like:
It just takes a bit of time to set things up and get used to how ImGui works, but its really very flexible.
3 Likes
Ah yes, I would also add the SameLine node as pretty important. Similar to the web by default in ImGui everything flows in a new line, but with this node between 2 widgets you can have them float horizontally, sort of like a <span> in HTML.
I have tried Avalonia, which works good.
I also tried Elementa, which works ok, it is closer to what I expect. But, for some strange reason, it doesn’t work well with the RenderWindow Stride I am using
I then came back to IMGUI…. I am doing it for IMGUI for now…. I am going to see how far I can go again. But it doesn’t work the normal way as I expected in a vvvv /skia/stride context where you can move around things with transformSRT or matrix.
thank you everyone! I will report about the usability whenever I am done with it!
thank you!
Yes and no. It works the same way for child windows. You just set their translation and size. Obviously rotate doesn’t really make sense in that context.
Its fairly similar to how the web works, which is pretty good, because it takes care of a lot of things like automatically stacking UI elements, adding scroll bars where necessary, etc.
We have a UI system that we built in Skia ourselves which just takes absolute coordinates and trust me that is way harder to manage than if you have some automatic flow of elements.