Urho3D Editor - how to drag UI Elements with the mouse

Discussions Support
#1

Hi,

I can use the editor to create my UI Elements, all works fine. But I have to manually edit the Position and Size Attributes in the Attribute Inspector of an UI Element. Is there a possibility to drag UI Elements with the mouse ?

Thanks.

1 Like
#2

Hi there and welcome.

I would say no. The closest thing to dragging would be to start dragging on the little ā€œarrow up/downā€-icon beside the value in the attribute panel for fine tuning. But inplace resize is not possible (at least not that I know of)

1 Like
#3

Hi, yes we can drag UI elements - at least I have applied it to entire windowsā€¦


        SubscribeToEvent(window_,     E_DRAGMOVE,     URHO3D_HANDLER(MyApp, HandleWindowDragMove));

...


    /// User is dragging our GUI window
    void HandleWindowDragMove(StringHash eventType, VariantMap& eventData){
        /// Unpack the 2D position delta
        using namespace DragMove;
        int dx = eventData[P_DX].GetInt();
        int dy = eventData[P_DY].GetInt();
        /// Compute new window position
        IntVector2 pos = window_->GetPosition();
        pos.x_ += dx;
        pos.y_ += dy;
        /// Apply new window position
        window_->SetPosition( pos );
        /// Display new position in window title
        auto* windowTitle = window_->GetChildStaticCast<Text>("WindowTitle", true);
        windowTitle->SetText( String(pos.x_)+", "+String(pos.y_));

   //     URHO3D_LOGINFO(String(dx)+", "+String(dy));

    }
#4

You also need to set the ui element as movableā€¦

#5

Hi Leith,

Thanks for taking your time to answerā€¦ There was a bit of misunderstanding, though: I know how to programmatically do this in code at runtime :-), I was only wondering whether the provided Urho3D Editor supported dragging of UI elements when I am layouting them.

Thanks

1 Like
#6

Ah, my mistake.
To be honest, I only recently got the editor to run reliably, and I donā€™t know it well enough to comment. What I do know, is that I had to refactor my code, to make it editor friendly. Example? My app had two scenes, one for the game, and one for scene manager and gamestates ā€¦ this was a terrible fit with the editor - I got it to work in the end, but I think it was ultimately a bad design pattern for working with the editor.

#7

Thanks dertom,

I might hack around the urho editor code to provide that functionality (maybe: picking UI element and pressing shift allows dragging the element) ā€¦

PS: I know layouts are the way to go, but I like fixed positoning for prototyping purposes .

Greetings

1 Like
#8

Actually, you can drag window element inside editor (and the game too) - ā€˜Is Movableā€™ option make it happen. But it does work only with one Horiz/Vert Alignment setting - Left/Top.

1 Like
#9

And yes, you can just hack into editor to allow you key combination to set the ā€˜Positionā€™ field of the current selected element, it seems quite easy.

1 Like
#10

Is there any good tutorial on the editor? I have played around with it a little but havenā€™t been able to use it for UI development as I creating the ui elements donā€™t show up on the screen when I create them though I do see the property box. Mostly Iā€™ve been doing that programmatically so far. And yes, to make something movable just set its movable property.

#11

For the UI elements created in the editor you need to set the size values in the attribute panel. E.g. if you start with the uiwindow. Worked for me.

1 Like
#12

Welcome @HappyWeasel! :confetti_ball: :smiley:

Iā€™ll consider this a feature request for ManaWarg.

#13

Hi,

as I creating the ui elements donā€™t show up on the screen when I create them though I do see the property box

I think for UI Elements (the generic container / baseclass), the initial size is zero. So you have to set the size property for it to show up (blue border) and probably also set the position to some free space on your screen

Bye

1 Like
#14

I tried to load a movable window layout into the editor - layout for a window created in code, and dumped to xml for inspection in the editor / reload in the app.
I see what you mean - you canā€™t (in the editor) move ui elements marked as movable - the dragmove event is not being serviced. We could get around this by either using script or injecting custom components into the UrhoPlayer host appā€¦ but simply moving something marked as movable seems fairly reasonable to expect of our editor!
Thereā€™s more - the value of sliders never changes (in the inspector), it looks from here like the editor is fairly useless for editing/testing UI without additional support. On the bright side, drop down lists seem well-behaved :slight_smile:

#15

Unmovable UI elements should also be draggable and mouse-scalable when designing them. I think we just need a better editor, and I could use some help making this a reality.

#16

Itā€™s all in script, this is really not my thing, but I could lower myselfā€¦
If I saw benefit for myself, what avenue? PR? :slight_smile:

#17

Thatā€™s one of the reasons I started the ManaWarg project instead of modifying the AS editor.
Gitter

#18

Hooking up execution of named functions to c++ callers was never a problem - but getting data back used to be. Hopefully Iā€™ve helped to put some cracks in the language barrier - we no longer need to start in script land and have script land own our objects, we can now use script to get work done, and mostly stay in native land. I see it as a positive, and like you, Iā€™ve started some very early work on a realtime editor. Itā€™s not as fancy as yours, but its fully stateful, and rock solid. It will serve as a good lesson on GUI basics as well as data persistence in Urho projects :slight_smile: To be honest, if there was any one part of the editor I wanted to touch immediately, it would be the terrain editor controls - adding realtime terrain painting is fairly trivial.

1 Like
#19

Seen?

1 Like
#20

Why is this stuff not already in there? What are we waiting for?