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 email@example.com.
We are experiencing playback issues from our video hosting provider. Please check back shortly.
2:08Scalable Vector Graphics (SVGs)
1:10Images (png, jpg, gif)
1:41Multi-Line Labels and Buttons
1:43Adding Icons to Labels and Buttons
2:53HTML in Ignition
Take topic challenge
Components are what fill up your windows with useful content. They are the widgets that you deal with every day – buttons, text areas, dropdowns, charts, and so on. The Vision module comes with a host of useful components out of the box, many of which are specialized for industrial controls use. All components have position, layout and other customizers, some of which are highly specilized for the individual component. Other modules, like the Reporting module, add more components for specialty purposes.
Video recorded using: Ignition 7.7
Transcript(open in window)
[00:00] Components are what fill up your windows with useful content. They are the widgets that you deal with everyday, such as buttons, text areas, drop down lists, charts, images, and more. The Vision module comes with a host of useful components out of the box, many of which are specialized for industrial controls use. Other modules, like the Reporting module, add more components for specialty purposes. Configuring components will likely be the bulk of designing a project in Ignition. So here is the basic workflow. In the Ignition Designer, on the right-hand side is our component palette. And these are all the components Ignition comes with out of the box. And they range from Input components to Buttons, Display elements, Tables and Charts, Calendar components, Admin components, Alarming components, and more. Modules like the Reporting module add their own specialty components that we can work with. So we can take any component we find on the right-hand side and drag it onto our screen. So here, for example, I can take a Cylindrical Tank, and put that onto the window. To the left of that, I may take a Linear Scale and make that the actual scale of the tank. I can put a Meter onto the window. I can take some Labels and put that onto the window.
[01:03] I can go up here and take Buttons and Input components and drag those onto the window to build it up. Every component we put onto the window has a few things in common. The first is they have a set of Properties that we can work with. So if I click on the Cylindrical Tank here, for example, in the bottom left, here are all the Properties for the tank. And these properties basically change the way the tank looks and the way it behaves. So there's a Property called Value here, which is actual level of the tank. If I set that to 50, and you'll see the tank level fill up. I scroll down to the bottom, there's a Property called Liquid Color which is actual color of the liquid in the tank. If I set that to orange, you see it reflect on the screen. Every component has a different set of Properties, so the Meter down here has a different set of Properties than the tank. I can scroll through the list of Properties and I can change the way that it looks. The second thing the components have in common is a Size and Position on the screen. So we, the Size and Position is actually, you manipulate it by you, using your mouse. I can actually move the component around the screen, I can make it bigger or smaller using the handles. I can also right-click and look at the Size Position here in pixels.
[02:00] The third thing they have in common is the Layout. So I can right-click on the component and go down to Layout. Every component has Layout which basically dictates how the component's going to resize to a new resolution. In Ignition you're not designing for a specific resolution. It actually will rescale the components based on the new resolution for you, automatically. We're going to look further into the Layout in another lesson. The fourth thing they have in common is Customizers. So special components like this Linear Scale, here, if I right-click, go down to Customizers, they have their own special Customizers which is nice graphical interface and how to configure that component. So this one has a Customizer called Scale Indicators which allows me to add one or more indicators to the component that I can see on it. So if I add another one here, that's an arrow, and I put the Value to maybe, let's say, 65, and press OK, you'll see that there's an arrow, now, on the Linear Scale that was done by the Customizer. The fifth thing they have in common is Security. So I can right-click on any component and go down to Security. And, basically, down over here on left-hand side, we can specify who has access privileges to this component, who is allowed to see it, who is allowed to use it, and more.
[03:06] The last thing components have in common, if I right-click here, is Scripting, which allows us to configure scripts on the components when people do things like click on the component, when Properties change, when key presses happen, and more. So the idea is we can take any component in Ignition, we can drag 'em onto our screens, and we can start configuring them to make the screen come to life.