Save the graph of the Trend Widget as a Picture

[iamt_ps]

Hello,

I want to ask if there is a way to save the graph that is shown on the trend widget as an image file when triggered by an boolean variable?

Thanks for the Help

[webiq-sk]

Can you please explain a bit more when and how this should be done?

1. ✅ A bool item changes from 0 to 1 -> execute this
2. ❓Where should the image file be stored? In the browser that is currently open on the same area of the HMI where the trend display is running? Or on the server for archiving?
3. ❓Will the HMI potentially by viewed on multiple systems? In this case different users can be viewing different parts of the HMI and possibly not in the same area the trend display is on? (A workaround would be to always have the trend display running but not visible)
4. ❓If the graph should be stored on the client browser a download dialog will be shown (unless the browser is running in Kiosk mode - then usually no downloads are possible)
5. ❓3+4 If a OPC-UA item is used and the image should be stored in the browser what could happen is that a user viewing any part of the HMI is suddenly shown a download dialog which might be quite unexpected
6. ℹ️ If the HMI is currently not shown in any browser for whatever reason (but the HMI still running in the server) no graph can be stored on the client, because there is no client then which means loss of screenshots in case the item changes.
7. If the image should be stored every time the item changes regardless of a connected client this becomes a bit more tricky and you'd have to use a headless browser then with some scripting.

You cannot download files in web browsers from a website without asking the user for a download location, though you can often setup browsers to always store downloads locally. Whether files can be downloaded in a browser is a browser configuration and not related by WebIQ - a web browser can also not specify a certain directly where to download a file - web technology does not allow that for security reasons.

[iamt_ps]

Okay i am trying to answer your questions.

1. Yes the Picture should be created when there is a bool item that changes from 0 to 1

2. The Image should be downloaded on the Client Browser, because the Server is running on the ctrlX PLC but i need the files on the PC where the HMI is displayed.

3. The HMI is only viewed by one System at the Time and the Trend Object is always on the screen but it is not always in Live Mode

4. I know that there will be a download dialog but unfortunately this is the only solution that i know to get this to work. 

5. You are right an OPC UA Item is used but the image saving can be expected through the process of the machine and the user will be given an information that an image of the Trend Display will be created

6. This Case can not happen since it is required to always show the HMI when the machine is running by regularities

7. I dont need that functionalities

Another Question would be if I could directly write to the file system of the Computer, if the Server is running on the PC instead of the PLC so that i dont need to download the files from the Browser?

[webiq-sk]

Thanks for the clarification. I will provide a sample code later for the HMI (currently in development).

As a web HMI the Trend Display is a full JavaScript implementation that requires a browser to display it. It is rendered in and by the browser, the image is not (and cannot be actually for performance reasons) rendered by the server. As such then option 7. would be the way to go: have a process e.g. written in JavaScript utilizing NodeJS as a script running on the server that runs a headless browser continuously and then stores the downloaded file locally. However, we can't provide a simple example here as this is a larger (though not large) project. If you are interested you can of course contact us to discuss this.

[webiq-sk · Accepted solution]

Sorry, a detailed analysis showed that it is not possible to achieve it. I assumed that the trend display renders everything into a single canvas element, but it does not. So though you could technically generate a screenshot of the trend lines you would not be able to capture the scales around it which will probably not be sufficient for you.

As an alternative you'd have to retrieve the trend data in a custom script, render that e.g. in ChartJS which provides a download function as it renders everything inside a canvas element. We do not use a canvas element for everything for performance and styling reasons allowing for better styleability of the widget with CSS.