Screen coordinates from ux/js?

How-to Discussions
1

I tried to find any hints on this one, but no real luck…

Is it possible to get the actual coordinates from a tap/click/press from within ux/javascript? (or do I need uno for it?)

Tried to fiddle with the object I get from a click…but can’t figure out if I can actually use it in any useful way…

2

Hey!

You can do this in your Clicked handler (in JS) by inspecting its argument like so:


<App Theme="Basic" ClearColor="#eeeeeeff">
    <Panel>
        <JavaScript>
            function buttonClicked(arg){
                  //You can see from the output that arg contians x and y coordinates
                debug_log(JSON.stringify(arg));
            }

            module.exports = {
                buttonClicked: buttonClicked
            };
        </JavaScript>

        <Button Width="400" Height="400" Clicked="{buttonClicked}"/>

    </Panel>
</App>

Example output:


{"data":{},"x":116.5,"y":328.5,"index":0}
3

Thanx!

4

Ok…back again. :-/ I have an element (Circle) that I have as a Draggable, and with WhileDragging I change the color of it. Now I was trying to somehow continously ‘trigger’ a js-function, to get the coordinats of this circle… Is this possible? Or am I on the ‘border’ of what’s possible to do with just ux/js…? I mean, a lot of the ux-stuff (tags and functionality) seem to be ‘prepared’ to do a lot of things…but maybe ‘gets in the way’ when you try to do a bit more ‘unique’ stuff?

Try to be as clear as possible…sorry if I’m not. :-/

5

Hi! From your description it sounds like you’re trying to do UI- / animation-stuff in the JS code. For performance reasons things like this should be avoided and we should instead work out if what you want to do can be achieved by using “more UX” for all the movable parts. :slight_smile:

If you can explain what you’re trying to build then we can see whether it’s possible with the functionality that’s shipping today or if we should look at adding new features to Fuse. :slight_smile:

6

Hi Remi.

Yeah, what I was trying to do was to make some kind of drag-sort in a list (Each-thingy). I thought that if I dragged an overlay panel (as a placeholder) I could - if I got the y-coord - sort the underlying list accordingly (with Layoutanimation I guess).

Maybe there is an easier way? Or even functionality ‘out of the box’ already?!

7

Hi Remi.

Yeah, what I was trying to do was to make some kind of drag-sort in a list (Each-thingy). I thought that if I dragged an overlay panel (as a placeholder) I could - if I got the y-coord - sort the underlying list accordingly (with Layoutanimation I guess).

Maybe there is an easier way? Or even functionality ‘out of the box’ already?!

8

Hi!

Drag-reorder gestures are planned for the physics library in Fuse. :slight_smile:

FuseJS is not meant to be able to control the UI on that level. We use Uno code for that and expose it as nice UX markup components.

To do this now, you either have to make your own Uno components, or wait for these things to pop up in the standard library/examples :slight_smile: