Greetings everyone. I am new to Ignition. I have been working with HMI system for 10 years but mostly with Cimplicity. Which comes to my question or need some guidance. In Cimplicity one could draw and create anything with a box and circle, group them and you could animate movement in X Y direction would some clicks. In Ignition on the other hand i am having some issues of finding the "best" way to make a picture or a drawing move across the screen according to a tag/signals from OPC UA. Lets say i want to make a circle move from point A to point B from a tag/signal from the OPC UA.
Just need some help where to start, i am fairly new to JavaScript, JSON, SVG and CSS, i know some basic Python.
A Cimplicity client is a local application. An Ignition Perspective client is a browser. They are so fundamentally different that you will need to pretend your Cimplicity experience doesn't exist.
That's fine. Part of Perspective's design philosophy is to minimize the need to understand web technologies. Minimize, not eliminate. Ignition's free online training is the best place to start.
Be prepared for a shock. First, Ignition uses Jython, not Python, which is the language but not the extended ecosystem. And its syntax is v2.7, not v3.x. But it enables direct use of Java's standard library and any loaded extensions, which is a really big deal for Ignition.
If you prefer to work with something conceptually closer to Cimplicity, consider using Ignition Vision. Its clients, like Cimplicity, are a local application, and Java Swing, the foundation for Vision the way MS Forms is the foundation for Cimplicity, supports similar design patterns and UI tricks. Of course, this option only matters if your situation permits you to use Vision. In some ways, it is now the "red-headed stepchild" of the Ignition world.
First of all, thank you for the quick response. Regarding Ignition universities i have done all the courses and even got my cup:)!
My experience with Cimplcity was just an information to maybe give some hints of my experience with working with SCADA/HMI systems.
The company i am working with are going for Perspective so i have to work in that and not Vision.
All i need to know is what i need to learn and use to move an image from one point of the screen to another. For example the movement of a roughneck. And show how far it has moved from a range of 0 meters to 20 meters.
Reading all about SVG ,CSS and using JavaScript have confused me somewhat:)
I didnt find anything on the forum for what i am looking for.
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.
