[feature-2017, feature-2024] Round slider in perspective

Ignition Early Access
1

Hello,
I need some help and idea on how to create a circular or round slider in perspective like following component:

IMG_20210222_132131
IMG_20210222_132131870×1488 221 KB

https://roundsliderui.com/demos.html#various-circle-shapes

It seems working with mouse event in perspective has some limitation for dragging objects. Specially when dragging object over Internet there is see jumps.
Any help and trick will appreciate.

2

The touch event doesn’t return coordinate so it’s some how impossible to create it in perspective when using mobile phone

3

Any plan to fix onTouch event to return x y coordinate?

4

Hi Nader,
Short Answer
I’ll create a ticket, but there are more pressing fixes/features in Perspective.

Long, Technical Answer
This appears to be a limitation of React.TouchEvent, and an underlying limitation of HTML Touch API itself.

Here is the interface for a React.MouseEvent

    interface TouchEvent<T = Element> extends SyntheticEvent<T, NativeTouchEvent> {
        altKey: boolean;
        changedTouches: TouchList;
        ctrlKey: boolean;
        /**
         * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
         */
        getModifierState(key: string): boolean;
        metaKey: boolean;
        shiftKey: boolean;
        targetTouches: TouchList;
        touches: TouchList;
    }

and here’s React.MouseEvent for comparison

    interface MouseEvent<T = Element, E = NativeMouseEvent> extends SyntheticEvent<T, E> {
        altKey: boolean;
        button: number;
        buttons: number;
        clientX: number;
        clientY: number;
        ctrlKey: boolean;
        /**
         * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
         */
        getModifierState(key: string): boolean;
        metaKey: boolean;
        movementX: number;
        movementY: number;
        pageX: number;
        pageY: number;
        relatedTarget: EventTarget | null;
        screenX: number;
        screenY: number;
        shiftKey: boolean;
    }

notice the lack of direct access to coordinate values.

There does appear to be a way around this using the touches property seen here. I think what you’re proposing is technically feasible, but not yet implemented in Perspective.

2 Likes
5

Hi Perkins,

If this is the case you can simply add circular slider component in perspective components platte for us.
For you and dev team importing new widget in perspective 8s so easy compare for us specially right now there is no good documents and tutorial for that.
Even if we have touch event coordinate I notice in internet connection the feedback is laggy and useless.

6

ok, I’ll file a feature request ticket for a circular slider component too

2 Likes
7

Hi @nader.chinichian - I’m wondering about your use case for needing a round slider in your Perspective application(s). Is there a certain type of data you’d like to control or a design mock you are trying to recreate? It’s an interesting idea, any concrete information about what you’re trying to do here would be helpful to our teams. Thanks

8

Hi Ray,
This first and most for beauty of design. Of course we can do data input for linear slider but I certainly believe in some cases in my design I feel circular type is fun and modern.
Also client ask for it. For example for some machine in reality, they have Knob for tuning a parameter. So the best and near way to mimic it in HMI is using circular slider.
If you give me touch event with x y coordinate I can create it easily.
Of course Mouse movement event better to handle in javascript instead of running python script in sever side. This cause laggy response in realtime.

1 Like