Drag and Drop in perspective

Ignition
1

Hi,

In a perspective application we are developing, we would like to use “drag and drop” extensively.

Specifically, it would allow us to solve different functionalities in a very visual and intuitive way: from being able to dynamically configure part of the plant layout, to being able to define ordered lists of priorities (in what order a production list will be executed, or given a group of redundant engines in what order they will be started, etc.).

In HTML there is the “Drag and Drop API” https://www.w3schools.com/html/html5_draganddrop.asp, however, the associated events (ondrop, ondropover, ondragstart, etc.) are not available in Perspective.
We have been testing alternative solutions. For example we have tried an alternative based on the solution proposed by http://forum.inductiveautomation.com/t/perspective-mouse-click-drag/28583/18. However, it does not behave very smoothly, nor do we end up finding a way to make it work well in all the areas we need. For example, the elements on which we would allow drag and drop should be able to be inside a table, without a view canvas.

We have also been testing doing a fake drag and drop by playing with onMouseDown and onMouseUp events, combined with onMouseEnter and onMouseLeave, and modifying the page styles to make the mouse pointer the “dragging hand” when dragging. But the result is pretty lousy visually as you can’t see the object you want to drag.

Has anyone had a similar problem?

Thank you very much!

2

It’s not a perfect solution, but could you adapt the Dashboard Component to your needs?

3

I have been testing the Dashboard component. It is a better solution than the ones I had tried. But I think I will not be able to adapt it for the required features.

The main problem is that widgets can be removed and added, and I couldn’t find a way to disable these two options. All elements should always be on screen.

Also, it is very rigid both aesthetically and in the way it behaves.By scripting I could partially solve the second problem, (for example, revert “drag and drop” actions that should not be allowed, revert widget size changes, etc, although visually it would be a bit contradictory).

4

Hi mate, did you have any progress on using this component?

I tried it a couple of months ago. It kind of doing the job, but not in a good workflow.
Similar like you, basically I want to draw the pnid on the runtime screen and assign each component with the tag name to map with PLC UDT.

5

Hi! In the end, the only way I found to solve my problem was to use this GitHub - inductiveautomation/ignition-sdk-examples: Ignition SDK Example Projects and this HTML Drag and Drop API - Web APIs | MDN to make a perspective component for drag and drop. It took me some work, but once set up, it worked well.

6

You can inject some js which allows for d&d... Its not pretty and requires js knowledge
A sdk is definitly the smarter way to do it, but requires more work. (altho i hope you didnt spend the 3 years on only this :p)

7

Yes, I know about your magic :slight_smile: But I needed something a bit polished because it was used in many places in the application in different ways, and whoever took over the project wouldn’t cry too many hours. In the end, I spent a few days on it, especially understanding how the SDK worked, setting up the environment, etc. But I think it was a good investment because it allowed me to solve other problems that I have been having and that I would hardly have been able to solve in any other way. Having a script point that runs on the client is the only thing I miss in Ignition…

1 Like
8

Ignition still has this. In Vision, where it was all along. :man_shrugging:

3 Likes
9

Haha yea understandable

Well that is kinda what the markdown component can be used for

1 Like