Improve anchor panel UI

[lentsius-bark]

Describe the project you are working on

3D puzzle platformer and a productivity app, both with heavy use of control nodes. Especially the respective latter.

Describe the problem or limitation you are having in your project

Even after years of using godot, every time this panel comes up I spend time looking for the right thing to click even though I already know what anchor I need to select

Describe the feature / enhancement and how it helps to overcome the problem or limitation

I propose redesigning the anchors panel in a visual way. So that the anchors can be represented visually, in a square representing the screen, rather than by buttons in a list. Most importantly the buttons for respective anchors would already be positioned where the anchor itself is in relation to the abstracted screen.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

This image shows a UI mock up I put together to show a potential direction I see this taking. As you can see this anchor panel has 1:1 functionality with the current implementation, saves space and let's users explore.

As the user hovers their mouse over parts of the ui, appropriate anchor lines light up and their text shows up at the top.

In order to move only the anchors, the panel informs the user to hold shift.

Most importantly though, it is a visual representation of the screen, I believe a similar implementation would allow new user to more quickly grasp both how to use the panel as well as what it does. For old time users it'd come with the advantage of being faster.

EDIT: Here's a version showcasing the hover states in other words, when the user hovers over an element before confirming the anchor selection:

EDIT2 : One more thing, due to its compact size it could make sense to also put the element into control inspector panels

If this enhancement will not be used often, can it be worked around with a few lines of script?

It's used all the time with UI. Be it games or apps that Godot is being actively used for the development of

Is there a reason why this should be core and not an add-on in the asset library?

The anchor picker (panel) is part of core already.

[dploeger]

That's a very nice design IMHO. I'd suggest selecting the anchors by "drawing" the window inside the panel. For example to have it full screen I'd click top left and then drag to the bottom right. There'd be snap points at 0,.25,.5,.75 and 1.

[dploeger]

Ah, like you showed on Twitch, dragging wouldn't be required, you just click a point or a line and see a visual representation of the window how it would look depending on what you hover, that'd be great.

[ee0pdt]

In the Twitter thread another user mentioned the Unity pattern:

Just thought it was worth mentioning here for prior art. I personally like the way they show all the options in one glance, but other users said it felt over-engineered.

[ee0pdt]

Also worth mentioning, Figma:

[YuriSizov]

I fully agree that the current dropdown list is hard to use proficiently. Not for the least part due to how often I need "Full Rect", but it's at the bottom of the damn list! 👀

Anyway, I have some reservations about the proposed concept. It didn't click with me immediately, what I have to do with the UI to select the preset that I want. One of the first thoughts was that I need to drag to select multiple points for "wide" presets (kind of like that unlock mechanism on modern smartphones). I have a suspicion that people would have hard time learning how to use it, but on the other hand I don't have any doubt that after learning it this concept would allow for very fast work.

At the same time, it seems that Unity uses a similar idea to represent various states, but what works for them better here is the fact that each state is still a dedicated button/interactive area. I think I like it more from that perspective, it gives a more certain cue to click on various sections to change the mode (without having to rely on hover to see a message telling you that clicking on a dot will set the anchors to, say, Top-Right). At the same time, their layout with lots of lines feels a bit overwhelming and more complex than it should be, yours definitely wins with its visual simplicity.

I think, that for starters we can try to rearrange the buttons in a grid like that, maybe make the icons bigger and easier to read, and test that flow out. I saw your concerns that a custom control may be too much for us to implement (it loses some points on UI consistency), but if it comes naturally from a more primitive but familiar layout, that would make it easier to justify.

[YuriSizov]

I forgot to mention it, but I also liked the suggestion to have something like that as a viewport gizmo. That way it should give great visual feedback to the user before they commit to the action, and would probably remove the need for the toolbar completely.

[lentsius-bark]

@pycbouh sounds good! Any step in a direction where the selection is more visual, represented in a square ratio that allows for easier look up of target anchor would be awesome!

Additionally thanks to "CptFubar" there a POC of the idea proposed above:
https://lentsius-bark.itch.io/godot-anchor-panel?secret=IeBCWnDWVTIVzTzxkHK9MzeG0

[lentsius-bark]

Anyway, I have some reservations about the proposed concept. It didn't click with me immediately, what I have to do with the UI to select the preset that I want. One of the first thoughts was that I need to drag to select multiple points for "wide" presets (kind of like that unlock mechanism on modern smartphones). I have a suspicion that people would have hard time learning how to use it, but on the other hand I don't have any doubt that after learning it this concept would allow for very fast work.

@pycbouh I'd like to add a point for this one, although it might not be instantly clear, hovering your mouse over and seeing how things are changing should prove as a quick step in learning as to what's going on. Moving the mouse is cheap in terms of time spent, the visual representation is instant and a few tries later it should click.

As I mentioned in my previous comment however, I support any direction this takes :)

I fully agree that the current dropdown list is hard to use proficiently. Not for the least part due to how often I need "Full Rect", but it's at the bottom of the damn list! 👀

It's always the full rect isn't it?! 😄

[fire-forge]

One of the first thoughts was that I need to drag to select multiple points for "wide" presets (kind of like that unlock mechanism on modern smartphones).

This sounds like a great solution! Doing this would also allow for selecting half or quarter-sized anchors. You could drag from a corner to the middle for a quarter, or from a corner to the middle of a side for a half. That is something that can't be done in either the current UI or in the concept, although I'm not sure how much it would be used.

[CptFubar]

As everyone can test this proposal as a functional addon in the asset Library at the moment, a additional functionality revealed itself to be very useful in my opinion, after applying a change to a control node it remains displayed, offering a fast iteration of the changes that need to be applied. With the current solution you have to reopen and navigate the menu for any further change.

[ghost]

I really hope the Godot Team can accept this proposal and add this without any big problems, it looks very clean.