Perspective - SVG, CSS Javascript, 3rd party for animating movment from tags

So, just in case you're looking for the "easiest" way to do this, it's just by setting the x and y properties of a component. Simple Ignition bindings can connect to these properties. No scripting needed.

This would be for if you're doing a coordinate container specifically. These are closest to your traditional HMI, and would normally be for a P&ID style representation. See the one at our demo project here: Perspective

If you're doing mobile responsive design with flex layouts, you don't get the x and y properties, but you can always drop a coordinate container inside one of your flex layouts and then drop components / graphics in there.

The suggestion of adding animations can be neat here too, instead of a circle just popping from one position to another, it will make it smoothly flow. This linked post above has a good example. Animation of a photo . If you do that, just go to the component you're animating, go to style, click to create a new property and name it transform, and then put the top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out as the value for that property. Then, anytime the x and y changes, it makes the component smoothly move instead of snapping to the new location.

If you want to go a little fancier, the View Canvas component that was mentioned in this thread could be worth exploring too.

And if you're importing an SVG and choose "Embed Image", you'll get all the coordinate properties right in the property tree for every element inside the SVG, which you can also do standard bindings to.

1 Like