I have a project that the user does some testing with, it includes the results and a nice heatmap and I'd like them to be able to print out the results in a report. However, the report designer doesn't have 1:1 charts that match Perspective. So I thought I could somehow grab the heatmap render and print it on the report.
As I understand it, charts are rendered as SVGs to be displayed in the view. Is there a way I can grab that SVG and save it to put on a printable report?
Thoughts?
Perhaps with some JS Magic. @victordcq
Natively, I don't believe that you can get this, as it is generated to be part of the markup for the page.
Could you just request a print of the view/chart in question? Introduced in 8.1.28:
https://docs.inductiveautomation.com/display/DOC81/New+in+this+Version#NewinthisVersion-Newin8.1.28
I'll give it a shot, thanks!
I tried to make a print button that called a component, but it's only bringing up itself to print. The button is the root container, but I want to call a nested coordinate container. The documenation says I can target a component, view, or page.
I had originally tried using an onStartup event, but the charts didn't have time to render before the requestPrint fired, so I'm trying this onAction event instead.
def runAction(self, event):
self.requestPrint('crdReport')
You don't specify a component name as an argument, simply 'component', 'view', or 'page', verbatim. It interprets the rest based on what object you call the method on.
That clears it up some, thank you.
I think what I need to do is make a print button that triggers the requestPrint() on the other component.
Like so?
self.page.getSibling("containerName").requestPrint()
Probably not with .page in there. But something like that, yes.
This is what I settled on and it works!
def runAction(self, event):
report = self.parent.getChild('containerName')
report.requestPrint('component', 'Report Title')
Hi hw79,
How did you solve the position of the component being printed?
If I place a component on the right side of the view, it is also printed on the right side of the paper. With a large resolution screen this places my component on far out on page 2 - after a blank one.
I made a new view with just what I wanted printed. I then made a 'print' button with the onAction script I posted.
In that view, I also made the 'containerName' container and placed everything that I wanted to print inside that container. Keep in mind it can be messy because you can't put containers in containers or they won't print, so everything has to be flat in the container (no nesting).
I changed the z level of the print button to be on top of the container (but not in it) so when the user clicks it, it doesn't print with the page.
Hopefully this helps.
Best Regards,
--H
Did you fix the printing issue with component placement on large screens? I'm facing a similar problem where the component on the right side extends to page 2. How did you handle this resizing problem?
I also encounter cutoffs when printing the entire page. Any tips on dynamically adjusting the perspective view to fit the desired page size?
Current view:
Print Preview:
I made a coordinate view with the props.defaultSize 850 x 1100 (the size of a sheet of paper in pixels, it sort of makes sense in my head to do this, it's probably not necessary.)
Inside the root I made two more coordinate containers, a header (850 x 25) and the body (850 x 1050) I use the header to offset the page to keep it visually consistent with the top print margin. Everything I want to print goes inside the body container and non-printed stuff goes in the root container.
Then I sort of used that layout as a WYSIWYG for the printing. Being a coordinate container it doesn't resize for different screens and stays more-or-less true to how the PDF/print will look.
The hierarchy looks something like this:
View
|-'root'
|-'ccHeader'
|-'btnPrint'
|-'ccBody'
|-'lblTitle'
|-'dspStuff'
|-'tblOtherStuff'
|-'lblDateTime'
I hope this helps (and makes sense)