My client wants to display some simple animations on the page - as in, animation files that they have generated and saved as some kind of file. These animations would be stored on the gateway PC (windows 10) and displayed on an iPad. Is this possible? What format would the animations need to be in? And can I control when the animation starts and stops?
After a bit of playing around, I’ve found that if I put an image on the view and link it to a gif, I can start and stop the animation by enabling a tint on the image. If tint is true, gif stops playing. If tint is false, gif resumes. I can put a “tint” on the image that’s completely transparent, so that gives me a way of at least stopping the animation where I want it. So as long as my client can provide the animations to me in gif format (and I’m sure they can), I can make it work.
However, it does seem a little bit of a hack, and I’m wondering if there’s a more elegant way to do it. For one thing, it behaves slightly differently between the browser/designer and the iPad app.
In the designer or in a web session, if I “pause” by applying the tint, the gif shows the first frame of the gif, but keeps “looping” in the background, and will pick up from wherever it happens to be in that loop when you “unpause”.
In the app, if I “pause”, the gif freezes on the currently displayed frame. If I “unpause”, the gif disappears for a second, then replays from the start.
The app behaviour is ultimately the preferred option (and I’m using the app at runtime), so again, this does exactly what I need - but as I say it seems a bit of a hack, and I’d hate to think that a minor update to Ignition could slightly change how gifs are handled and break my solution.
Any other ideas?
1 Like
I agree, that is a bit of a hack. It’s a clever hack that made me smile, but a hack nonetheless!
I guess I’d need to ask more about these “animations”. Could they be exported as an mp4 maybe? I think that format would be easier to embed as something that could be stopped and started. As far as I know, animated gifs cannot be paused or resumed at a certain frame.
Are they simple enough that they could be embedded SVGs? SVG supports some basic animation…
At this stage, animation format is completely flexible. The client is aware that they’re on the absolute bleeding edge with Perspective being still in Beta, and they know that (for a while at least), they’re going to have to tailor their process to meet the capability of perspective, instead of the other way around. So if we tell them they need to use format X, they’ll find a way to give me the animations in format X.
The animations are quite simple, but I’m not sure that they’re quite simple enough to be animated SVG’s.
To give a bit more context, we have a cooling process. Due to the nature of the process, we can’t directly monitor the cooling of the actual product, but we want to have some graphics to indicate the cooling process. To this end, the client has worked with some experts in the field to generate some data on exactly what curves etc the cooling process will follow given a certain set of conditions.
So, the operator will load a certain product into the machine and start the cooling process. We will load up three animations which will be linked to the selected product:
- A time countdown with a “product temperature” readout. Again, we can’t actually measure the product temperature without destroying it, so this temperature readout will be based on the curves that have been developed during testing - they should in theory be completely accurate
- A “live trend” of the product temperature. Same again - this will be simulated, but should be accurate
- A simulated thermographic camera representation of the product - again, based on actual test lab data for the product and the process, but it can’t at this stage be based on a real-time thermal camera
Item 1 I could hack together with the PLC and display “real-time” simulated data from the PLC.
Item 2 I could probably do with an animated SVG - I’d imagine that it would be conceivable to manipulate the trend line path with an animation process
Item 3 probably needs to be a full-on animation, as a thermal camera render is quite an involved picture
Since I (most likely) have to resort to a full-on animation clip for item 3, I figure I might as well make them all a full animation clip. I can potentially combine them all into one clip, or if they’re separate, I’m at least controlling them all the same way so I’m not trying to sync a video with an animated SVG with a real-time-simulation from the PLC.
Hmm, interesting…
I would say that it would be best to take your simulation and implement it in Python which would drive the readout in #1 (using something like a memory tag) and the chart in #2 (might simply be history based on the memory tag?)
As for the simulated thermographic camera, this is a bit trickier. What’s the timeframe of this cooling process? If it is slow, it might make sense to simple step through a series of discrete frames as images…
1 Like
Yeah, I could certainly generate the first two as some sort of real-time simulation, using either the PLC or Ignition scripts as the driver. It’s just the third one that’s the complication.
The cooling process is extremely fast, we’re looking to wipe off ~100°C in 1-2 minutes, maybe even less. So it’d be a lot of frames to manage, if we went down that path. Likely possible, but probably a bit unwieldy.
My own application aside, I can see a really useful feature in short video clips like this on perspective. I’m imagining a maintenance technician who uses an iPad to scan a QR code on a machine component, and is then shown a short video on how to replace/calibrate/configure the component. Or an operator tapping a “tool change” button and being shown a video on the tool change procedure. So many ways that operations and maintenance activities could be enhanced and training hours/documentation/paperwork reduced.
Yeah, a video (such as an mp4) would probably be best. These should be easy to embed. We’re doing it using an iframe in the demo project, but adding a video component with playback controls as a component would be easy.
1 Like
Great! Is there any documentation around doing it with the iframe object, that I could play with for the time being? Is there any way of triggering a start/stop using this method?
Bump - have been doing a little bit of looking into embedding videos with iframe, but the only results I keep coming up with are for embedding YouTube videos, which is no good for my application. Is there any Ignition documentation around this completed yet (or coming soon)? If not, I’ve got it working for now with the gif hack, so I’ll carry on that way - just trying to at least be aware of other options 
Hi @ASF,
Unfortunately, the documentation we have currently for the i-frame component only lists a YouTube video example.
https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Inline+Frame
In hindsight I probably should have seen that coming 
my main issue is that this system won’t have internet access, it’s a closed system. Would it be possible to use this approach with a video stored on the gateway, substituting the URL for the path of the video in some manner? Or would that require the WebDev module, if it were possible at all?
With regard to a longer term solution (i.e. adding a component for embedding mp4’s with bindable start/stop/skip controls), what sort of timeframe might we be looking at before that one is ready for release? Are we talking a few months, or sometime this year, or in the next couple of years? I know you may not be able to answer that - but if you’re able to give me any sort of idea I can just go to my client and say “this is what you’ve got to work with now, but in maybe [time] there’s likely to be an improved solution available”.
Disclaimer: Use with caution. But, if you put a file into <install directory>/home/webserver/webapps/main/, it will be automatically mounted and served up at localhost:8088/<filename>. You should then be able to put it into an iframe.
I would expect a video player this year, probably a few months - not several years down the road.
2 Likes
Is it possible to do the same thing with the PDF Viewer or even show a PDF in the iframe? I can get videos working great this way and I can get the PDF Viewer to display a PDF in the same location when typed in with localhost but when with the actual IP address of the gateway it will not work.