You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
3:58Icons
-
4:01Image Management in Perspective
-
3:14Dragging and Dropping Images
Take Topic Challenge
Supplemental Videos
-
6:16Video Player
-
4:23PDF Viewer
LESSON
PDF Viewer
Description
Learn about Perspective's PDF Viewer component.
Video recorded using: Ignition 8.0
Transcript
(open in window)[00:00] In this lesson, we'll take a look at the perspective modules PDF viewer components. This component was designed to render PDFs directly in a prospective session. Starting off in the designer, I have an empty container here. I'm going to head over to the component palette and under the display category, we do have our PDF viewer component, which I'll just drag into the container here. We can see that we have an initial PDF that the component is showing but of course, you'll probably want to change this to something else. The way you'll change that is with the source property. Now, the source property needs a path that leads to a PDF. And this path can be a number of different things, it could be a URL to a PDF that's hosted somewhere or it could just lead to the bytes that make up the PDF. Now, if you have the PDF just sitting on the gateways file system, an easy way to get that PDF into this component would be by creating a Web Dev resource. I'm not going to go to in depth on what Web Dev is, we do have some content in the user manual if you're curious, but just to get this component up and running, I'm going to switch over to the Web Dev workspace. I'm going to right click on Web Dev and I'm going to create a new file resource, which is simply going to allow me to pass in a file and the gateway will make that file available at a certain path. So, I'll create the new file resource. I have this best practices PDF, I would like to use, so I'm going to hit open. I'll use the name that it suggest here and I'll create the new resource. And now we have the new resource. So the next step to get the path that I need, I'm going to right click on this resource and I'm going to copy the mounted path. Which places that path I need in these systems clipboard. Now, we're ready to go back to the perspective workspace. I'll switch back to the view I had open and I'll select the PDF viewer component again. Now, we can just replace the source property here. So, I'll just backspace and actually I'll just right-click and paste in here. And you can see it's now rendering my PDF. Now as far as available properties on the PDF viewer component, you can tell it's pretty simplistic. Page just represents the currently shown page in the PDF, so of course, if you wanted to change this, you simply change the value of page and it will switch which page is rendered on the component. Page count here is a read-only property just represents the maximum number of pages on the component. And then show page number here as well do you want us to show the current out of the maximum number of pages in the PDF on the component or not. Now if you wanted this component to be interactable from a session, that's just a matter of placing some components on the view here and then changing or poking up a binding that interacts with the page count here. So for example, I could head over to the component palette and under the input category of properties here I have a couple of options but I think I'll just select the slider which I'll place on the view here. Now when we're clicking and dragging the dial on the slider the value here changes. So of course, I could switch back to my PDF viewer component and then bind the page property to the value that's on the slider. So, I'll click on my PDF viewer component here and for the page property here, I'll click the little binding icon, I'll select a property type, we'll browse for properties here, we'll find our slider components under props here, I'll grab the value, will click okay, and we can see that it's going to start with a value of zero which of course isn't really going to be a great experience on my PDF viewer here. So, maybe I could go back to the slider components and just set the minimum to a value of one so we start on page one. And of course, we could bind the maximum property on the slider to the page count that's on the PDF viewer so that way we always cap out at the maximum number of pages but you get the idea. So, now I can go into preview mode here and I can move my dial and now I can interact with the component. And of course, this works from the session. And that's really it for the PDF viewer component. It's pretty simplistic, but it's ideal to use if you have any sort of PDFs you need to show in a perspective session.