Handle complex GUI

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By EnrikeChurin

I’m wanting to build a software with Godot engine. Control nodes work great for regular GUI elements like buttons, menus, etc. But I need to have a viewport in the middle of an app with some complex UI. This software is gonna be for music creation, a DAW (digital audio workstation), so I have to have tracks shown in the middle and ability to move, resize, edit them. Like from GarageBand or Logic or Ableton or FL Studio or any daw, the colorful rectangles. My initial idea was to use node2d somehow, but I’m hesitating about what to do.

You don’t need Viewport nor Node2D for your “tracks”. Everything could be done with Control based nodes, as they specifically designed to work on GUI layouts.

And you’d better state a concrete question: then you can get a concrete answer.

sash-rc | 2021-08-19 08:02

Sorry, didn’t mean viewport node…
What about control nodes? Are they capable?

EnrikeChurin | 2021-08-19 08:03

What control node specifically and how should I use? The question is so inconcrete because I need advice from someone who has used it before. I don’t know much myself, if I did I wouldn’t have even posted here.

EnrikeChurin | 2021-08-19 08:13

What control node specifically and how should I use?

Specifically for what? Well, “I want something like Ableton” is not a concrete question and requires too much efforts (including guessing) to answer.

Aside of this, from what I understood, you could use just Control and draw on it with CanvasItem methods or ColorRect + same + shaders. UI in Godot is very powerful and complex (and sometimes quirky too). You can use themes and individual styles, and sometimes combinations with Node2Ds too :slight_smile: to achieve required look. The power of Control and its distinction from Node2D is that they designed to wok together in layouts.

Again, I think it’s more practical, if you’d begin learning (by starting a prototype project) and once you hit a real problem, you’ll be able to form a specific question(s) for a collective benefit.

sash-rc | 2021-08-19 12:33

I need something like ableton pls… just paste code here pls… lol

EnrikeChurin | 2021-08-19 15:00

:bust_in_silhouette: Reply From: dethland

Maybe using some TextureRect to draw the rectangles. Then use a script to spawn them where ever you want. For the windows (or viewports) in the middle, maybe using the WindowDialog under the Popup node can help.

I am reading an article related to customizing the outlook of WindowDialog, it may help you. The link is below.


Thank you for your anwser! But can you add some patterns on top? Like this

EnrikeChurin | 2021-08-18 17:39

I think it can do it, the TextureRect surely can display images. However, you may need more scripts to generate those patterns.

dethland | 2021-08-18 17:50

Ok, thanks, will try to implement this

EnrikeChurin | 2021-08-18 17:54