Join us for a chat
Open sources of vvvv on GitHub
Follow our news on Mastodon
Follow a shared screenshot gallery on Pixelfed
Do big business on LinkedIn
Watch tutorials on YouTube
Join and organize meetups on MobilizonHello, I am currently trying to create a stride button in ImGui Stride with a texture. I’ve already read forum posts about this, but it’s not quite clear to me. Is this the right approach or is there a better way? Best regards Jens
Stride_Button_TextureWidget.zip (48.5 KB)
I think you pretty much got it.
I would put the texture and button in a group and then set the cursor position for the group. It makes it easier to understand and you can also just create a process node with your custom image button and then position it like any other ImGUI widget if it has a group inside.
Stride_Button_TextureWidget_group.vl (25.5 KB)
Also I would always make sure that the ImGui context is connected through everything. If you hover over the last output of the ImGui region and it says “NULL” than you haven’t connected it somewhere. It’s not essential, but it’s just cleaner and will help you once you get into more advanced ImGui patches.
Happy patching! :)
1 Like
Thank you, how do I get the button in the centre of the screen, I mean that the position in the window is the same as in the full screen?
Just calculate it. I always have a process node I just call “Layout”, that I can use anywhere.
Basically you want to get the whole area you are working with by using GetContentRegionAvailable and divide by 2.
Also get the size of the button by using GetItemRectSize or something to that effect. Divide that by 2 subtract from the previous result. You will probably have to put in a FrameDelay, which is fine though.
You might be tempted to just use the button size directly, but I think it’s better to use GetItemRectSize, because that way it will work even if you change something about the button.
Not super elegant, but it works fine. I am using just that in a large project with ImGui I am working on.
Stride_Button_TextureWidget_centered.vl (30.3 KB)
Thanks, I’ll try that. It would be nice if there was a less complicated way in Stride.
The ScreenWidget created an additional quad in the wrong place, I only saw it when I set the background to white. How do I deal with this, just leave out the ScreenWidget?
Yeah, you don’t need the scene widget. I just left it in, because you had it in your patch. The scene widget is for displaying a Stride scene, but it’s not necessary if you don’t use it. In the end Stride is just the render engine and it doesn’t care what you render with it. If you just want to use it for rendering a UI, that is fine.
I just made process nodes out of things I use a lot, so I can re-use them. It’s not really Stride, it’s ImGui. ImGui is just a UI library that is very flexible and “low level”, meaning you have to patch a lot of the logic yourself. But it’s actually better that way. If it was too specific already, then it would be harder to create exactly what you want.
If you have ever used another even more low level UI library like Winforms, then you will see how incredible ImGui already is and how easy it makes things!
These basic things like calculating positions and sizes is a very common thing and you will use it a lot.
Here is a screenshot of a patch in Winforms for a very simple window with basically 5 items, some text, a text box to display log information, an icon and two buttons:
In ImGui the same thing would be around 10 nodes. So I say ImGui already makes things so much easier ;)
By simple I mean putting a texture button in front of a 3D-Stride environment.
Your calculation for the centre is great and helped me a lot.
Yes, but that’s what I mean. Stride isn’t really concerned if what you are rendering is 2D or 3D. It’s just a render engine. You could also use Skia, but Stride is actually faster, even at just rendering 2D.
1 Like