Ignition Exchange Resource Showcase

41 min video  /  39 minute read
 

Speakers

Mara Pillott

Application Engineering Manager

Inductive Automation

Dereck Saunders

Application Engineering Manager

Inductive Automation

Since the Ignition Exchange’s introduction in 2019, members of the Ignition community have contributed hundreds of resources ranging from pre-built templates, tools, and scripts to Ignition-powered retro arcade games — all available for free. Discover the full potential of the Ignition Exchange as we highlight some of its most valuable assets, including a handpicked sampling of the top Exchange resources developed by IA engineers. 

Transcript:

00:10
Mara Pillott: Hi, everyone. Welcome to the "Ignition Exchange Resource Showcase." We are Dereck and Mara, and we are the Application Engineering Managers at Inductive Automation. In application engineering, we implement Ignition projects for internal customers, for product demonstrations, and the Ignition Exchange. We also present webinars and presentations and consult with our customers on proof of concepts, best practices, and project planning for successful Ignition projects. Dereck, tell us a little about yourself.

00:40
Dereck Saunders: Thanks, Mara. Hello, everyone. I'm Dereck Saunders. As Mara said, I'm an Application Engineering Manager at Inductive Automation. Previously as an application engineer, I've worked on a variety of Ignition projects for oil and gas production, solar and winds, automotive manufacturing, water/wastewater, food and beverage production, inventory management systems, and more. Today, Mara and I lead a team of application engineers that help develop Ignition proof of concepts. We consult with customers on Ignition design best practices. We contribute resources to the Ignition Exchange, and we help develop a variety of Ignition projects, like Inductive Automation's public demo projects.

01:17
Mara Pillott: I've been working with Ignition since 2010 and previously served as a design services engineer. I've built a variety of projects for our customers, and I've also assisted them one-on-one with learning to build their projects. Most of my experience is in custom database solutions, and I'm giving a workshop next week for using databases in Ignition. So I hope to see some of you there. Today, we're going to talk about how to use the Exchange to elevate your projects.

01:44 
Dereck Saunders: Alright. So here's our agenda for today. We will be giving an overview of the Exchange, what it is, where you can find it, and how you can use its resources to elevate your project development. Next we'll go over a series of resources developed by IA that we would like to share with you today. After this session, we hope you'll explore some of the resources showcased, as well as the many resources developed by the Ignition community. Finally, we'll wrap the session up and answer some questions. So with that, let's get started.

02:09
Mara Pillott: So what is the Exchange? To explain, let's go back to the beginning. If you were here in 2019 watching the Build-a-Thon, you will remember when our own Kent Melville gave us the Exchange. Our dev team wanted to make Ignition even more customizable, encourage more collaboration, and help you save more time. We created a new online community with free resources. Now some of these are built right here at Inductive Automation, but you know what's really exciting? You, our community, are able to share your own resources. Today we're gonna be highlighting things that were built here at IA, but I encourage you to share your own and to check out our many community contributions. So what can you find in the Exchange? Well, really just about anything you could think of. I want you to go to the Exchange and try searching on keywords, categories, types. You're gonna find everything ranging from just like a single view, some scripting resources, entire projects, and so much more. Go check it out.

03:09
Mara Pillott: So why would you use the Exchange? You can just build anything you want with Ignition, but why build everything from scratch? Using prebuilt Exchange resources is going to jumpstart your project and save time. And you can use that for those trickier parts of your project that always seem to take up the bulk of your development time. You can find prebuilt projects in the Exchange and use those as a starting point. Once you download a project, it's yours. You can add views, make any changes you like. You can also find some prebuilt components and add those to your project. Today we're gonna show some examples where we start with a fairly complete project and we're gonna add some resources to improve it. We're also gonna show you some full project resources. We're focusing on only a few resources built here at Inductive, but there's many high-quality community resources. We encourage you to check those out and build your own. You could also keep your own set of resources just so you have a consistent look and feel for all of your projects.

04:05
Dereck Saunders: Alright, so just going over the resource submission process a little bit, resources are initially private when they are first submitted to the Exchange, and they are individually reviewed by an application engineer at Inductive Automation, and they're reviewed just to make sure everything with the resource generally works as expected and that it meets the quality standards expected for the Exchange. If we do find any issues during the review process, we provide feedback directly to the developer to help them improve the resource. And then once the resource has been approved, it's made publicly available on the Exchange. So there's a couple different ways to integrate Exchange resources into your projects. You can import them manually by going through the standard import process in the designer, or you can import them from the Ignition Exchange page on the gateway web page, which you may find to be just a little bit more convenient.

04:52
Dereck Saunders: So when we start to take a look at our specific resources in our presentation, you will see that some of them are deployed in a sample project. Our application engineering team developed a general manufacturing demo depicting the assembly of solar panels using robots for adhesive application and material handling. This demo will become the Perspective demo in the future, but we've decided to use it here as the foundation and backdrop to showcase a variety of IA-developed Exchange resources. With that, let's get into it and start talking about some of the great resources developed by IA. Our first resource is the Perspective Tag Meta Property Viewer. So in this resource, it includes a view that can be used as a pop-up to view any tag's meta properties from a Perspective session. Normally opening up the Ignition designer would be required to easily view all the tag's meta properties, but this resource provides the ability to view a tag's meta properties in real time from a Perspective session.

05:42
Dereck Saunders: This view is built to work dynamically with any standard tag type, so memory, expression, query, derived, whatever it may be. This resource is also configured to work with tag drop, so you can drag any individual tag onto a view and it will give you a small tag icon, which is dynamic based on the tag type. Hovering over the tag icon will display the full tag path, and clicking the icon will open the Tag Meta Property Viewer pop-up. Opening the pop-up will allow you to browse and view the tag's meta properties and also any custom properties that the tag may have. This will also work with any tag inside of a UDT, and all property values displayed are read-only. The main header includes the tag type, in this case a Boolean, the full tag path, its current value, quality, and timestamp. Similar to the tag browser in the designer, the header also has icons in the top right corner to indicate if the tag has scripting or alarms configured on it. Any tag scripts like a value-change script can also be viewed to further assist with any potential troubleshooting, diagnostics, or anything like that right from the session.

06:47 
Dereck Saunders: Alright. Next we have the Perspective Toast Notifications developed by Application Engineer Conner Futa. This resource provides the ability to create toast notifications in your projects. These toast notifications are commonly used in mobile-specific projects for tablets and phones, but these can also be deployed in a standard desktop Ignition application if you wanted to. These appear as small pop-ups with text, and they can be configured to be click-dismissable, autodismiss after a certain amount of time, and slide in from different directions. This resource does include a small demo to help get started to see some of the options for configuring toast in your project. You can simply enter the text you want to appear in the toast message, set a number of seconds for the message timeout, and click "send toast" to see it in action. There's also additional configuration that you can set within the demo to customize the toast. You can see different locations like top left, bottom right, center, set the animation style like center right, or enter top, and the message type as well.

07:44 
Dereck Saunders: Give these various options a try to see what works best for you, and then you can use the main views and scripting to build your own custom toast notifications in your project.

07:53
Mara Pillott: Thanks, Dereck. I'm going to gonna have some toast with my next project. Our next resource is Comments by Application Engineer Mitchell McPartland. The Comments resource can be used to power a blog-style system within your project. This can be useful for some ad hoc collaboration and communication between shifts or remote users. We see in this screenshot, people are discussing a fault. These notes are gonna be saved. We can look back at this later and see if this maybe happened before and who knows how to fix it. Now, you're probably going to have specific loggers in place to capture information, but this is something you can do really quickly and just give you a free-form method of communication. So resources are generally gonna include some README, maybe a guide or install notes. This page is going to tell us about the supported databases, the main view parameters, and if we want to know more about the resource, we've got a PDF document in the download folder. Now the first thing to note is we're gonna need a database connection, and we've got two parameters to set on a view. So we know we've got a database connection or gateway, we're going to hop in the designer.

08:57 
Mara Pillott: So this view is in the Comments folder under the Exchange folder. You will see some resources with different folder usages, but we really encourage you to put everything in a folder named "Exchange." This is gonna keep things separated from your other project resources and avoid any duplicated names. So any parameters I have here, I can set at runtime, but just to get started, I'm setting this database connection and schema parameters, and I'm gonna save the view. And those are the two properties I have highlighted in yellow. Once I've set the properties, I can click Create Database Tables, and that's gonna go ahead and create all the database tables I need, no setup in the database for me. So there's a few more parameters here. I'm just leaving date format default. Date range can be used for filtering. Instance name is gonna separate out your comments into different groups, and we're gonna see this in a minute. And you can change the default title to anything you like.

09:51
Mara Pillott: So I've got my pop-up all configured, and I need a way to open it. I want to have a set of comments for each robot. I'm gonna open the robot pop-up view in the designer. I added a button with a comment icon, and I'm gonna add a pop-up action. I just picked my comments view, and the only parameter I need to pass is the instance name, which I'm just binding to my robot name. So let's see it in action. The blog icon opens the comment's pop-up. They're organized by the instance name we set, so this is only showing comments that are related to this particular robot, and we can view all previous comments and add our own. So I'm the Robotech user. I want to let everybody know that I've got this robot calibrated. I'll just add that comment, and we can see it there. They've got some additional features. You can pin them, just like on a traditional forum. You can save your favorite comments. Users can edit or remove their own comments, but they can't remove anybody else's comments. And you can search these guys. You can filter them by date range. Maybe I wanna know when diagnostics were last run. I can just type that in the dialog box, and I can see if I've got any results related to diagnostics. There I go.

11:11
Dereck Saunders: Alright. Thanks, Mara. The next resource we're gonna take a look at is the CSS Animation Guide: A Robot Example developed by Application Engineer Mike Bordyukov. So this resource provides a detailed guide on how to perform basic animations in the Ignition Perspective Module using CSS. This guide covers how to create smooth motion, pause and resume animations, and synchronize two robots using a state machine. This project starts with basic animations and then demonstrates how to create more complex movements. The intermediate example shows how to combine multiple rotating elements to create an animated robot. You can adjust angles and duration to see how property adjustments affect the animations. You can also view the designer properties to better understand how to achieve and implement and adjust your own animations. The advanced example shows how multiple animations can be synced together, for example, a robot placing an object onto a moving conveyor, or in this case, two material-handling robots passing an object. These particular animations are controlled by a UDT with a state machine, allowing for animation pausing to accurately depict the actual robot or equipment movements and position.

12:16 
Dereck Saunders: The UDT tab of this resource includes more details on how the state machine is being controlled behind the scenes. Alright, so now let's take a look at the Simple Perspective SVG Editor developed by Application Engineer Charles Ahrens. So this resource is meant to allow users to edit SVG drawings that have been generated or modified within the Ignition designer as well as save those SVGs out as drawings out of the designer. You can add or edit circles, rectangles, paths, and text, and you can adjust the properties and color of each shape's fill and stroke or apply transforms to those shapes. You can edit drawings in either the designer or web browser and export those drawings to your computer as an SVG file. Alright, let's take a look at the SVG editor in action. Here we can see how to draw some simple shapes and maybe add some text to an SVG drawing. These shapes obviously aren't being used together to show a more complex drawing or depict equipment, but it should instead give you an idea of what the range of possibilities are with this awesome drawing tool in Perspective.

13:19 
Dereck Saunders: Next, let's take a look at a more practical example where we're editing an existing valve SVG. So here we can see how we can go in and manipulate and edit the valve to our liking, and then when we're happy with how it looks, we can download to use it elsewhere and clear the canvas for our next drawing. I'm honestly a fan of all the resources that we're showcasing here today, but I think this resource in particular really underscores the impact and importance of the Ignition Exchange and all the possibilities that it can unlock, thanks to the contributions of our Ignition community as well as our application engineers here at IA. Okay, so we just looked at how to draw and create SVGs in Perspective, but what if you want to take it a step further and animate them? So next we have the Perspective SVG Animation Resource, which was also developed by Application Engineer Charles Ahrens. This is a teaching/learning resource similar to the CSS animation guide that we looked at earlier, except this deals with SVG animations.

14:14 
Dereck Saunders: This resource has a few examples of SVGs being manipulated by elements within Ignition to create dynamic objects. Following these examples, a user could create an SVG representation of complex equipment in their facility and animate it dynamically to give users of that display a better idea of what is happening behind the actual process. Starting simply, the basic example shows how to move a circle around the screen controlled by two simple sliders for the X and Y coordinates, as well as a slider for changing the radius and color of the circle. Again, a very basic example just to start things off. The intermediate example uses some more complex expression bindings to draw a line connected between the center of the canvas and the center of the circle, which follows the circle wherever it goes. Additionally, this view has the ability to have automatic movement and the circle will rotate around the center point following a path that can be changed while running with the sliders.

15:05
Dereck Saunders: This automatic movement can be toggled with the manual and auto buttons. The advanced example uses lessons of movement and rotation and combines them into a robot arm, which has four positions that can be saved automatically and moved between them with a smooth motion. If you're looking to learn how to animate SVGs in your Ignition project, whether it's something very simple or even more complex, go check out this resource on how to get started.

15:29 
Mara Pillott: Wow, those are some amazing graphic tools we could use in almost any project. Our next few projects are simple but very powerful. First is the Copy to Clipboard by Application Engineer Conner Futa. This allows us to copy any text on the screen into our clipboard. In this case, let's say I sometimes just need to copy a serial number for robots so I can look up documentation or send emails to a vendor. If you wanted to look something up and they said, "What's your serial number?" and you had to go find it, you know how annoying that is. I added an embedded view to the robot view. I set my path to a link to the Copy to Clipboard resource in the Exchange folder. I've got one parameter named "toCopy" and I'm going to bind that to my serial number. So let's see it. I just click the copy icon next to the serial number. The icon turns green, so we know we've got the text in our clipboard, and we can paste it anywhere we like. I'm just going to go ahead and paste this into my email where I'm requesting some service.

15:38 
Mara Pillott: Next we have our JSON Viewer by Matt Raybourn. This resource exists just to make JSON human readable. Our imaginary robot manufacturer provided us some diagnostics as a JSON string. It's pretty long, it's not human readable, and it's not very useful in this format. In our JSON viewer, it's much better. It's human friendly, it's color coded, it's nicely formatted. We can find what we need here. We can pair this with Copy to Clipboard, and we can paste this in an email or a report or anywhere we want. We're going to stay on the subject of powerful user interfaces as I turn this back over to Dereck.

17:05
Dereck Saunders: Thanks, Mara. Our next resource is the Pan Zoom Frame developed by Application Engineer Mike Bordyukov. So this resource enables the manipulation of images or other views using CSS transformations. It offers two distinct views: a generic view that allows panning and zooming of any embedded view, and a specialized view for image components that provides more options for customization. As the name suggests, with this resource, you can pan over images or SVGs to provide a more interactive viewing experience. In this particular case, we can see how this resource is used to pan over an Ignition architecture diagram, but this could be any image, SVG, or even just another embedded view in Perspective. Even though this is just an architecture diagram, you can see how this could be especially useful for panning and zooming over detailed schematics and line drawings. While the pan zoom capabilities of this resource are awesome, this resource takes things a step further, allowing you to leverage dynamic displays that are driven by zoom level. By that, I mean we can design an embedded view to react to the zoom level of the pan zoom frame, which allows us to display certain components and details when zooming in, but then hide them when zooming out.

18:12
Dereck Saunders: Maybe we have a lot of tanks or other type of equipment on an overview screen, and we want the overview to stay relatively simple, but we still want to be able to drill down and get more details like tank level or tank contents without navigating away from the overview to a different screen or open a pop-up or dock view. This dynamic display driven by zoom level allows us to accomplish that all within the pan zoom frame, and this design approach certainly won't work for every project, and there will definitely be cases where it still makes sense to use a classic pop-up to drill down, but I think this resource offers a different and intriguing design approach that could be really useful in certain scenarios. Switching gears a little bit, let's talk about IEC 61850 and in particular the IEC 61850 Scripting Demo developed by Training Content Creator Rob Lapkass and Lead Quality Assurance Engineer Garth Gross. If you're unfamiliar with
IEC 61850, I'm not going to go into all the details here, but we do have some great resources and articles on our website and in the Ignition docs to help break it all down. Essentially it enables device interoperability and data standardization in electrical power systems and provides a better way for IEC-compliant field devices to read and write data.

19:23 
Dereck Saunders: We recently released our IEC 61850 Driver for Ignition, and with that came some new scripting functions to help explain those new functions. And to help explain those new functions, we have an Inductive University video called "Using IEC 61850 Scripting Functions," and this resource is a copy of the view shown in that video. While most of the features will not work without a valid device connection, you can still download the resource and take a closer look at how the scripts work and potentially connect an IEC 61850 simulator device as well. Staying the topic of IEC 61850, let's take a look at Sales Engineer Tom Goetz' IEC 61850 Graphics resource. The goal of the Ignition Exchange resource here is to provide basic graphics and configurations to components related to the IEC 61850 Driver. The configuration allows for users to change color, text, visibility, rotation, and state of switches and breakers.

20:17 
Dereck Saunders: The configuration works both in the designer as well as in session, and if modifications are allowed in session, a SQL database can be configured to store and retain changes made in the session. You can arrange and use any of the custom components as you would any embedded view to build out a substation layout, or you can use the dashboard component in this resource for easy configuring and arranging of the graphics. Alright, next let's take a look at the Inventory Prediction Manager developed by Sales Engineer Reese Tyson. So this application is built off of a UDT and scripts that monitor levels, predicts a run-out date using linear regression, and notifies emails, notifies a list of emails before the inventory runs out. The linear regression is performed on the historical data of the inventory levels to create a prediction of the date that the inventory will run out. Once that date is established, a user-configurable lead time can be set which will determine when the notification is sent out.

21:14 
Dereck Saunders: This application is designed to take a proactive approach to making sure material is available when you need it. As you can see, the Inventory Prediction Manager is also mobile responsive. Alright, next we have the Mobile Responsive UI resource. This resource was a joint effort by Application Engineers Conner Futa, Chase Dorsey, Sales Engineer Tom Goetz, Sales Engineering Director Kent Melville, and Design Department Manager Ray Sensenbach. Mobile responsive means creating an app that is easy to navigate, visually appealing, and functionally consistent. However, there is no user manual to tell you what to include in your mobile app or what structure is best for your purposes. This resource has examples of good mobile-responsive design, all wrapped up in a semifunctional demo CMMS project. The best practices for design include intuitive navigation, reversible actions, informative feedback, smart defaults, accessibility, error design, protecting user work, visual clarity, progressive disclosure, visual style, and functional behavior.

22:15 
Dereck Saunders: So this resource is also meant to be more of a teaching or learning tool than an actual resource that you would deploy in your project. It showcases a lot of great design techniques that I just mentioned and could also help inspire your next design or take your current mobile project to the next level with excellent UI that feels intuitive and is easy to use. If you're looking for an example of some stunning visuals and best practices in UI/UX, definitely go check out this fantastic resource.

22:42 
Mara Pillott: Well, speaking of user interfaces, our next resource is the Perspective Alert Dialogs, again by Ray Sensenbach. If you're like me and you came from the Vision world, you may have noticed that we can't use things like system.gooey.confirm or message box in Perspective. Perspective is HTML-based, so if we want those dialogs, we have to create some pop-up views. We could create them ourselves or we can use these nice themable dialogs that Ray already built for us. Like a lot of resources, it comes with an information view that's going to help you get started. The dialogs are totally customizable. You can select a theme to match your project. You can warn against an action, let users know if an action was successful, alert them to an error, or just give them some information. The alert pop-up is a single view with several parameters. They're going to set everything, icons, button text, message text, all your actions. Best of all, they're extensible. They come with some built-in functions, and you can add anything you like. Let's hop in the designer.

23:41 
Mara Pillott: So we can see we have several parameters for text, icons, and actions. We can set the action for each button. We can set any of these icons, alignment, remove icons, and we can change the state based on the states we saw in the previous slide. Each button has a set of message handlers. We can see here we've got two handlers, one for closing the pop-up and one that will log us out of our session. You're not limited to what you see here. Like I said, you can add any of your own custom message handlers. I have an icon over here that I can click to log out of my project, but I want to let users confirm before they close that project. I added an event handler. It's got a pop-up action. I set my parameters. I want my log-out action for the primary button, and for my secondary button, I just want to close the pop-up. I set some yes and no text, and it's not visible here, but I set a title and a message. So let's see it in action. I click the log-out icon and realize I don't want to log out. I can just click no, and the close pop-up action executes.

24:48
Dereck Saunders: Alright. Thanks, Mara. Now let's check out the System Monitor resource developed by Application Engineer Tyler Earnest. So this project is a basic system monitor for CPU and memory utilization of the gateway PC beyond that being used by Ignition itself. This is accessed using the Java ManagementFactory library. Two Perspective views are provided. One is a mobile view showing real-time details, and the other is a desktop view showing historical details over the last five minutes using tag history. An included system monitor UDT can be imported that includes CPU, total memory, available memory, and calculated in-use memory. So here's a better look of the desktop view showing those historical details for the CPU and memory usage. Obviously, you can customize this, alarm on the UDT tags for high CPU and memory usage or embed this elsewhere as part of a larger in-session diagnostics bundle. While it's common for Ignition to have its own dedicated server, there are definitely instances where Ignition is installed alongside a database or other software where knowing the overall machine CPU and memory usage and potentially alarming on it might be quite useful.

25:54
Dereck Saunders: Alright. Next, we have the GeoJSON Explorer developed by Application Engineer Mitchell McPartland. This Perspective project can be used to display GeoJSON data in the Map Component. For demonstration purposes, this resource retrieves datasets from data.gov that can be modified, and it can be modified such that it retrieves datasets from other sources as well, and there are examples included in this resource. You can browse a selection of datasets that the developer included and see a lot of different ways to visualize GeoJSON data. As cool as all the examples are, you will really unlock the full potential of this resource by leveraging your own GeoJSON data. There's a good amount of options you can choose from to display the GeoJSON data differently, including the base map type, the overlay, and the theme. We just talked a few minutes ago about UI/UX best practices with the mobile-responsive UI resource, but I think this resource also really showcases some really clean and intuitive UI.

26:49 
Dereck Saunders: And as you can see, this resource is also fully mobile-responsive and can be run on a phone or tablet right out of the box. And lastly, before I turn it back over to Mara, let's check out the Perspective Electronic Signature Framework resource developed by Chief Technology Evangelist Travis Cox. This resource shows how to leverage the new authentication challenge feature in Perspective to perform electronic signatures with full auditing. This resource provides a framework and example that you can use in your project. This resource is designed to be extended to any kind of action you want to perform. The example provided shows how to perform tag writes with a two-stage verification process. And this resource was made possible through the collaboration with 4IR, an Inductive Automation Solution Partner. 4IR Solutions provides an easy way to deploy Ignition and its partner ecosystem into the cloud via a fully managed solution. They have deep expertise in 21 CFR 11. So yeah, this is a really neat resource that Travis put together with 4IR and provides some awesome new functionality with this electronic signature framework.

27:53 
Mara Pillott: Alright, we've seen some pretty cool resources today, but I have one here that's going to help you with just about any project that you have. I talked about themes a little when I introduced dialogues. Ignition comes with built-in themes, but like anything, you're not limited to just what is built in. You can build your own themes using the built-in themes as a base. Now, these themes are built using cascading style sheets, but you can modify these with your favorite text editor, and if you want a more visual tool for building themes, check out this Theme Builder by Sales Engineer Tom Goetz. Let's take a minute and just talk about themes in Perspective. This was a little new to me coming from the Vision world. So like I said, it comes with built-in themes, and this is going to provide an initial style to your components. Now, we're going to focus on color today, but the themes allow you to change all the styling. For example, you can change scrollbar width or the default borders. The themes are built on cascading style sheets or CSS, like I said. These advanced users, you're going to just you're going to learn this very quickly on your own, but this resource is going to help you build a set of colors visually.

29:01 
Mara Pillott: So how does this look in a Perspective project? We saw an example of this in the dialogs project. There's a built-in session property for theme. Changing this theme is going to change the default colors of your components. Here we can see that choosing between the themes changes our background and text colors. I don't have any colors or styles set for these components. These are just default colors, and they're based on the theme. They range between light and dark, and you've got some cool and warm selections as well. Now, you can set custom colors for your components, or you can use the themes to just give yourself a set of color variables. In this example, I want purple buttons, but I still want all my buttons to work with the theme. I chose sequential 4 for my button background color. It only applies to this button, and it's going to follow my theme selection. So using light, I'm going to get a dark purple button with white text, and if I switch over to dark, I'm going to get a lighter background and darker text.

30:01
Mara Pillott: You can also use theme colors in your style classes. So in the previous example, I was just working with the color selection for a single component, but using styles, I could apply these selections to multiple components and give my users a consistent look and feel. So that gives you a few basics on themes, so let's see how we can use this theme builder to create a new theme. So the main view shows you all the colors in your selected theme. You can start with any existing theme as a base or import a theme. Here, I'm selecting light and dark, and we can see that my color sets are changing with my selection. Configuration is on the left, and the theme colors are displayed on the right. This just gives me a chance to preview. So I'm going to start with the dark theme, and I'm going to start changing some colors. Notice that the colors are grouped. In this example, I want to change my neutral colors. I want lots more blue, and I'm just going to slide that blue selection all the way over. As I change this, you notice that the preview colors change. The original colors are in one column, and my updates are in the far right.

31:08 
Mara Pillott: So this gives me some idea of where I'm going, but I don't really know how this is going to look on a screen. Well, I got a preview mode, and I can test drive my theme. Now I've got a really blue background, and you can see my neutral colors range from blue to yellow, and this really hurts my eyes, and I've gone way too far. But I got a reset button. I can reset everything using the bottom reset button, or I can just reset to a neutral group. Now maybe I just want to make a few changes. So I would just like call to action to be a nice Ignition orange. I can expand the individual color config, enter in my hex color, and apply that to call to action. So check it out. I get a nice orange color listed in the preview pane. I can come over here to see how it would look on my screen. I've got standard light theme for everything except call to action, and just a few other selections like my checkbox and slider are now the orange color that I'd like. I can keep making changes, and I can just see what they look like right here on screen.

32:11 
Mara Pillott: I'm going to apply my ICC 2023 color to the diverging colors and to the info color. I expanded the diverging color selection, entered in the hex color, and I applied that to the starting color property. All the diverging colors changed. Next, I expanded the individual color config and set that same hex color for my info. Once I'm happy with my theme, I'm going to want to use it in all my projects. So it's time to build my variable CSS file. I'm just going to click my build button, choose a starting theme, give it a name, and I can download this as a zip. So I've downloaded it. What do I do with it? Well, like a lot of the resources we have here, we've got a README file in the download, and I just had to copy my CSS file in my theme folder into the Ignition program files. So once I've got the theme in the Ignition install directory, I can use it. I can just go to my session property for theme, check out my dropdown selections. My new ICC 2023 theme is here. I can select this and notice that my button color is changing from that default blue to my new custom orange.

33:25 
Dereck Saunders: Nice. Alright. Thanks, Mara. So those are all the resources that we had to share here today. We do want to let you guys know that there are going to be some great new features coming to the Exchange soon. We do plan to add resource ratings, which should be great, and even more search capabilities. So stay tuned for that. And we look forward to bringing even more improvements to the Exchange in the future. Also, every single year we host the Ignition Exchange Challenge now. So all resources entered to about a month up before ICC are eligible for the challenge. And the winners will be announced at the live Build-a-Thon after this session, so you'll be learning their names soon. And we look forward to this year's announcement and seeing all of your new resources in the coming year. Lastly, while we wanted to showcase resources today that were developed by our application engineering team and others here at IA, we still want to say a big thank you to the entire Ignition community that contributes to the Exchange.

34:17 
Dereck Saunders: There have been a lot of incredible resources that have been built just in the last year by the Ignition community, and we invite you to go visit the Exchange now or later and check out all of the resources that are available. You might find something really useful that you've been waiting for but you didn't think existed. You might find something that you can leverage and build on to accomplish your project goals. You might find a helpful learning resource that helps you take the next step, or you might find something that inspires you to go create that next amazing feature or project. And if you build something that you think is useful, fun, or just plain cool, please upload it to the Ignition Exchange and share your creations with the Ignition community. Inductive Automation's motto has long been: Dream It, Do It. And I think that motto is personified, and to borrow a term that you may have heard once or twice this week, elevated by the Ignition Exchange and its contributors.

35:04 
Mara Pillott: So once again, we just really want to thank all of our contributors from Inductive Automation and all of you for what you've done in the Exchange. We've seen some amazing resources today. I just cannot wait to see what you, the Ignition community, are going to develop next. You never fail to surprise me. With that, we're going to conclude our presentation and answer any questions you might have.

35:36 
Audience Member 1: So the question was, if we're going to contribute to this, and we're working for a company, what is it that they have to agree to? What are the legal kind of, what's the paperwork?

35:47
Mara Pillott: Sure. Everything that you download from the Exchange is freely available and free to use in your, in anybody's projects. And it can be changed or modified at will.

35:57 
Audience Member 2: If he contributes.

35:58 
Mara Pillott: Sure. Sure. So if you want to ask something of your users, that's really, you know, that they give you credit or anything else, that's really not part of the Exchange. It's a freely available resource.

36:12 
Audience Member 1: So basically, the, whoever we work for needs to be okay with, basically.

36:16 
Mara Pillott: Oh, absolutely. Sure.

36:17 
Audience Member 1: Yeah, yeah, yeah. So what is the, is there like a legal, is there like a form you have to sign to sign away the...

36:24 
Dereck Saunders: There's an agreement that you sign when you set up an account for the Exchange, but that's essentially it.

36:29 
Audience Member 1: Okay. Thank you.

36:33 
Audience Member 3: I was wondering if there's talk about adding more videos to how to use these tools like you had today.

36:40 
Dereck Saunders: Yes, great question. And that is something that we are planning on doing. Right now, you know, if you uploaded a resource, you could potentially include a link to YouTube or whatever it may be for that resource. But our team is planning in the future to provide videos for every resource that's uploaded by IA. So in the future, the idea is to have a video companion with every resource that we make.

37:03 
Audience Member 4: So how do you decide which applications make it into the main installer? Or what should live in the Exchange?

37:13 
Dereck Saunders: Sorry, you're asking what our approval process is? Or just somebody who's just using the Exchange?

37:17 
Audience Member 4: Oh, what made you put it on the Exchange instead of just putting in the main program? Since it's being developed by the same company?

37:25 
Dereck Saunders: Oh, like why isn't in the platform that you would download with Ignition?

37:27 
Audience Member 4: Yeah.

37:28 
Dereck Saunders: Yeah. So you know, our dev team has a lot of things that they want to add to Ignition and a lot of things they need to maintain. With the Exchange, we have the flexibility to have developers build things that they think are useful. Maybe a while ago, it might be something that we might have built for one or two customers. Now we have the ability to build something that might be more generic and share it with a lot of different people. So it just gives us that flexibility, where we can build something that maybe dev would like to do. And maybe we'll come to Perspective or Ignition or whatever it may be someday. But you can essentially build something and upload it in a few weeks and have it be available for people to use.

38:01 
Mara Pillott: And it allows people outside of Inductive Automation to also contribute to this community, collaboration is very important here at Inductive. And even though you're giving your resource away, you're really publicly showing people what your developers can do. And I think there's some... There's some contributors that are pretty famous, really in the community for what they've built here on the Exchange.

38:23
Dereck Saunders: Yep.

38:25 
Audience Member 5: Are there any constraints on the sort of things we can put up on the Exchange, such as like injecting JavaScript into views and then with that, when it comes along to 8.3, are you doing regression testing on Exchange resources?

38:42 
Dereck Saunders: So I'm not sure on the JavaScript question. I'd have to check on that. We do do a full review of the resource. So anything that gets uploaded before it goes public for anyone to download, we do do a full review of the resource. And then for 8.3 in terms of regression testing, that is something that we probably will have to look at. But I don't know that we'll be going through and doing every single Exchange resource, probably the ones that IA has developed. But that'll probably be something that will be the responsibility of the person who uploaded the individual resource.

39:09 
Mara Pillott: And our developers are committed to making sure that you don't have regression problems with 8.3.

39:17 
Audience Member 5: And aside from JavaScript, are there any other absolute no-no's in terms of if I'm going to put a resource up there that you just say you shouldn't be doing that sort of thing?

39:27 
Dereck Saunders: I don't think so. If it's something that you can build in Ignition and it's part of your project, you can essentially upload it. Again, we do review the resource for anything that could potentially be malicious or anything like that. But yeah, if it's something that you can build in Ignition, you're pretty much free to upload it.

39:42 
Mara Pillott: There are certain types of function calls that we are specifically looking for in the review process that we might not allow. So if we had questions about anything you had built, or even if you have questions before you build it, go ahead and talk to us because we might be able to have a conversation with our reviewers about that.

40:01 
Audience Member 6: Just a suggestion of either a feature request, like someone could request a resource and people could look at making that or having a challenge or something to create a certain kind of resource for future stuff.

40:17 
Dereck Saunders: Yeah, you can go to the Ideas section of the Inductive Automation website and there is an Exchange section there where you can put in requests or just ideas or just see the status of something that you may be interested in. Yep.

40:29
Mara Pillott: But I like where you're going with that.

40:31 
Dereck Saunders: Yeah, for sure.

40:31 
Dereck Saunders: Exchange specifically.

40:34
Dereck Saunders: But other than that, I think that's it. Thank you.

40:38 
Mara Pillott: Thank you. Just like us, I'm sure you're looking forward to Build-a-Thon.

Posted on November 14, 2023