What’s New in Ignition 8.3

00:10
Speaker 1
Details, see some of the features in action for 8.3. So, as I said, I promised I’d show three features at 8.3. One is the drawing tools. We’ll take a look at that, see the details around that. We’ll look at the Perspective Forms component and sort of how that will work with offline mode. I won’t show the offline mode there because the Perspective native app has not been launched to the Apple Store. But I will then show Event Streams so you guys can see what Event streams looks like, how that functions. And all of these are just early betas. They’re what you see today. There’ll obviously be some additions. There are more to it than what I’m going to show here. I’m going to show you the basics of them, but hopefully you get a good sense of how those work.

00:56
Speaker 1
So we’ll start here with the drawing tools. And of course, rather than it being lots of PowerPoint presentations, we’re going to go right into the designer. So with the drawing tools, the main thing that this does is if I look at the Perspective components and I realize it might be a little bit small for some of you. If you all want to. If anybody wants to come up closer, you certainly can. But the main thing that it does is adds a component to Perspective called Drawing. You can see here on the right hand side. So drawing. Of course, if I were to bring in an SVG, I would be able to edit it, all of that. But if I want to draw something from scratch, I would use this component here. I drag it onto my screen and it is an SVG component.

01:40
Speaker 1
For all intents and purposes, that’s what it is. If I drag one in, you would see that’s what it would look like and you get all the elements in there. Now, of course, you don’t want to do that in the property model. You want to right click and go to Edit Drawing. Or you can double click to get into it. And this is the drawing editor. So here is where you can specify what you want the view box to be, the width and height, kind of what you want your standard aspect ratio to be. If you want a background, if you want to show grids and snap to grids on there. If you want to specify change the grid colour. You can also show guides. Guides can be quite useful in that.

02:18
Speaker 1
I can actually say I wanted to put a guide here and a guide here. And also like up at the top, you put those guides and you can snap stuff to those guides, which is quite helpful, especially For a lot of designers who are trying to get things to be perfectly aligned the way they want it to be aligned, you get a lot of those kind of base things you would find in a lot of different graphic editing software. So we built this whole thing from scratch. We didn’t use anything that was out there and built it to be pretty full featured. So you can kind of specify the settings there for what you want your SVG to look like. And then from there you use the various components.

02:56
Speaker 1
Over here on the left hand side, you can use a path tool to draw any sort of just your own path. Along with there is a pen tool and a pencil tool you can use. Of course, there’s all the shapes, there’s rectangle, circles, polygons and stars. So those tools, you can of course use those. And the polygon you specify how many sides you want, all that good stuff. There’s also a text tool, and this is actually very helpful because if you know, in perspective, when you do a label component, the label component, the font does not automatically change as the screen size changes. You would have to use styles where you can specify through they like mobile responsive design, you know, different screen sizes. You can make the font bigger; you can certainly do that.

03:48
Speaker 1
But if the text is inside of the SVG, it will scale based on that SVG how the SVG scales. So as that component gets bigger, the text would get proportionally bigger as well, which can be useful for some situations where you do want that text to get bigger or smaller automatically. So a lot of times people will make that part of their little template that will be in the SVG rather than being a label that’s next to it as well. Of course that can you combine that label the text within the SVG to whatever you want. So we’ll definitely show that. All right, so let’s say I take a square here, I draw that.

04:21
Speaker 1
On the right hand side is where you can specify, of course, you know, the X, the Y, the width and height, the opacity of it, the fill colour, the stroke colour. And you’ll notice of course that there’s icons over here to do binding. So this is where I could, for example, if I want the fill colour to be bound to an expression or something with an ignition, I can certainly do that. Let’s just say I made it red here and there you go. Now that is in fact red. And we can then put, let’s put a text field right below that. And the text, we’re going to say hello world. Oh, the good old hello world. You know it. So we’ll put that there. All right, so there’s my awesome, cool SVG. It’s the best thing ever.

05:08
Speaker 1
But you’ll notice that at the top there are. You can specify Z order, send things to the front or back. You can have an undo redo. You can group things together and ungroup them. So if you have an SVG you want to ungroup them, move things around, you get all those elements over here on the right. You can also create the grouping over here as well. And then there are some important ones to do, like clipping and masking multiple different SVGs. Sorry, different shapes. You can also convert things to an object to a path where you can then manipulate the path items directly. So if I were to use that particular tool when I go to something, I can manipulate the path of that. So there’s my cool SVG. And you see right now it is not resizing automatically.

05:55
Speaker 1
So just going back in there, I’d have to specify what I want that view box to be. So a lot of times it’s 00. Maybe like 100 by 100. I might need to make that a little bit bigger. Let’s go 1,000. Okay, so I do that and now I have that view box. And you’d see, of course I didn’t have the right size. But you can get the idea that scales now the way that we want that to scale, just like any other SVG. Okay. So that’s the. That’s kind of the way to. From scratch to kind of configure this component. But there are a couple different other ways you can use this. You can most definitely go get an SVG from your computer and you can. Or from anywhere and you can bring it into the designer.

06:42
Speaker 1
So I have my logo, the Index Automation logo there. But it’s. I take the CNC machine, I would not save and link that’s gonna save to the image browser and then put it onto a screen. You don’t wanna do that because you can’t manipulate it. You wanna embed. Embedding is an actual SVG component. And you can see there that with this now I can go in and edit this drawing and I can manipulate this CNC graphic. So quite easy to do that to work with it. And I thought it’d be fun to kind of show you a bigger one. This in ductile booth. This is a long time ago when we go to trade shows, we had to get people to take us seriously. So we worked with this cartoonist to make this crazy backdrop and thought it’d be really funny with this backdrop.

07:26
Speaker 1
I’d have to make it bigger here. But this was way back in the day. But I had the SVG. I thought, why not like show this? So when people get people to take us seriously, you know, we have to say, you know, no clue. We’ll work for clients, we’ll work for tags. Love SQL. You know, this is the conventional way. There’s the inductive way. Anyways, that was a. Just. Just a little throwback there. But if I go in and look at edit drawing, I would have all the different elements of this that I can go in and work look at. Now clearly there’s a lot to this one.

08:00
Speaker 1
But like I was saying, if I wanted to go and find something specific and then be able to go and change the styling of that or whatever, it’s much easier when I’m in here to go and find that than it is to go look at the property model. Cause like can see what I’ve selected. So I can manipulate that. All right, so there’s. I bring an SVG in. The other area is you can go up tools Symbol Factory. We have all the Symbol Factory graphics. You know, take it or leave it. They’ve been in there for a while. And let’s say I want to go find, you know, something related to the windmill. I can bring that in. And with that, of course, it is an SVG. We can go in and edit the drawing and go manipulate that as well.

08:42
Speaker 1
Pretty easy to work with. The last one I want to show you on this is if I go to the components, we also have some symbols down here, the motor pump, sensor, valve and vessel. These are kind of smart symbols that we put into perspective. If I take the motor on here, maybe I’ll set the appearance to be a mimic. So just the point is that some people like these graphics, but they want to manipulate them even further and do some other changes to them. That’s perfectly fine. But you can’t customize the look and feel really. Besides what we give you here on those components, you can right click on these and you can say convert to drawing. If I convert to drawing now, that is an actual SVG that I can go and manipulate and make my own.

09:30
Speaker 1
Of course, we typically put these things inside templates where I have bindings based on a parameter so I can reuse that in my project over and over again. So this is just a component like others that’s kind of a building block, right. So that we can create our own framework for our components and then we can use them in our project. So that is what the drawing tools looks like. Like pretty simple, but powerful in that you can actually use those drawing tools to make these kinds of components. All right, so let’s go on to the next one, which is Perspective Forms. This one is, like I said, I’m very excited about because it makes building forms a lot easier, a lot more approachable, especially repeating forms.

10:13
Speaker 1
If you have, you know, lots of different labels and text fields and all that, you can copy and paste them from one project to another or one form to another. But then you have to, you know, a lot of people find in Perspective, the one thing that’s difficult is to. To go select down the hierarchy, the tree to find those, select that component and you have to manipulate. It’s a lot of different selections. Whereas with this component, it’s one component. So everything’s there, you can find it all in one place. Makes things a lot simpler. So let’s take a look at that. Let’s go here. So with this one, just like the previous example, we have a component for that. I’m going to go and search for it here. Form.

10:53
Speaker 1
It is a form component, and there is one implementation of that called a simple entry form. This is the way it just gets started. If I drag the form in, it would be nothing in there at all. But with the simple entry form, it gives you some configuration at first. So if I look over here on the properties for this, I can see the columns, the actions, all the data that’s here. And the way this works is under columns. This is where you can actually create multiple columns of data. And so right now I just have one column, but we built it so you can have multiple columns and you can specify how you want those the layout to work. Especially mobile responsive layout. It’s really important that when you build this, that it also handles mobile responsive design for you.

11:39
Speaker 1
As you can see that it will do that automatically depending on how you want to lay that form out. So I have one column, there’s my items, and I have one item with multiple rows. And here I’ve got the first row and the widget. So it looks like it’s a lot of like nested. Here it is, we are going to have a visual editor of this. It’s not going to make the first initial release, but we’ll have a visual editor where you can, that will create this property model for you. But ultimately you can see this first one is that label at the top. So simple name and entry form. There’s that label up here and that is just a simple header. Right. There’s just a label on the next row. I’ve got three, excuse me, three widgets.

12:24
Speaker 1
First name, middle name and last name. And you can see that those are of type text. And with that of type text I can have, you know, there’s configuration for the text object for what I want that object to do. Now, by default, we don’t put everything in here. There’s a lot of. There’s gonna be a lot of documentation around this component because if I look in here, I can add validation fields. I’ll show you some examples of this validation field style fields. I can do autocompletion. We can take advantage of your browser’s autocomplete, especially if you give it hints like this is a phone number or an address or email. It will automatically use your browser’s autocomplete features, which is quite nice. That’s tied into this as well. But you can.

13:07
Speaker 1
Each of these different pieces you can configure in your form, of course, along with adding new stuff. And when you add new stuff, you have a whole slew. I don’t know if you can see this very well. I wonder if I can at least magnify this section. That might be a little better. So you can see the list text, email URLs, passwords, numbers, telephone text areas. Excuse me, checkboxes, toggles, sliders, all these different kinds of components, file uploads. And I anticipate that we will add tons of widgets as we go forward. Right. We’re not gonna find everything, but there probably is another two dozen that we can figure out and put in here that people will want. So we’re definitely trying to, you know, we wanna get a good base, but we’ll definitely have ones where we can do a lot more.

13:59
Speaker 1
So I wanna show you this one. I built this contact form, pretty simple. Kinda show you a couple of things. One is the validation aspect. So if I look at this one again, sorry, these are all a little bit small. I’ll zoom in maybe a little bit on this one. A little bit easier. But if I look at this first name here and I look at the text, you see there’s validation and the validation has a constraint and there’s a min length constraint. There is also a required field. So the required field puts that star, the asterisk, that’s a required field and that constraints. In terms of whether I do pattern, I need to pass a regex.

14:37
Speaker 1
You know regular expression or if I have min length, max length or different fields will have different kind of constraints you can define then the actual message, you know, the validation message would happen. So if I were to go on the runtime and try to just tab over, you’ll see that it says please fill out this field. You’re in control of the icon, the label, the colour, the style, all of that. But it makes it really simple. And then if I look at the component over here, if I scroll down on the right under the validation, you can see that is invalid is true, it’s not valid. And the status, you can see what each of the fields that are in that form, what their status is. Is it missing value missing? Is it not passed something?

15:24
Speaker 1
Or if it’s, you know, if it’s valid, we’re good to go. So it gives you that kind of hint. You may not use that, but the idea is to provide some extra information if you want to use it outside that, outside the component there. So with that we got the form validation that’s automatically there. You’ll notice the submit button doesn’t allow you to submit there. The phone number that we have here not only does validation, but it also will make sure that you know your phone number will adhere to a style. Oh, I don’t know why that is not. Doesn’t like my style. Okay, whatever. But you can make it so that it can pass a regular expression such that it looks a certain way.

16:11
Speaker 1
Because if you want to store that, sometimes you want it to be formatted a particular way for that to work. And there’s just again you can put all that in the property model over here on the right for how that would work. Now another thing that’s really cool is you can actually additional fields or form elements based on other selections. So if I say want to provide feedback and I say true, you’ll notice that it adds another form element that we can fill out there. So we have the ability to add, remove various parts of the form or kind of change that from other fields that you’re filling in. And if I look at like the state’s a drop down list.

16:50
Speaker 1
Now one thing to note is that for this to work in offline mode, the values have to be given here to the component. So if it was bound to a SQL query for those states or whatever your dropdown selection would be, you have to make sure that you save the view with the values in there so that they’re in there. So that if I was an offline, the Query won’t work, but I still have the last saved set of values that would work. So it’s one thing to kind of consider people will want to do binding and just realize those bindings will not function in an offline capability. But that is of course still possible to do. So let’s mention a couple other things real quick.

17:33
Speaker 1
If I come down to the bottom, there is the ability for you to define how you want the action to work the submit action. And by default it will be fire a component event. Which means when I submit that if I filled out the fields, everything was correct. If I submit it, what it would be submitted to is an event on this component. So that’s the on submit action. Perform just like any other events. You can do something with it, open up a pop up or, you know, run a script or whatever. So that would be one way of submitting the form. The other way is this FHIR submission event. This is what would be offline.

18:11
Speaker 1
So you can do both if you want, but that checking that box makes it will cache it on the device when I do submission and then it would, when it’s back in range, it would synchronize that back to the server. And the way that it does it right now, again, I’m sure a lot of this will get added over time, but if I go to session events, there’s that form submission event that would have been fired and we can handle that however we want because we don’t know how you want to handle it. You might want to write the tags, you might want to send it to Kafka, you might want to write it to a database, all sorts of things are optional. But so right now it’s handled through a Python script.

18:48
Speaker 1
I know that we will, I’m sure, define some more specific handlers on this, but as of right now, that’s how that is working. So pretty simple, pretty powerful. I’m not gonna be able to. There’s other features there as well. There’s a whole lot that you can do in this one component, but it does make building forms a lot easier. And we’ll have good university videos, we’ll have good documentation, we’ll have a lot available to you at first, so you can see how to take advantage of that. Cool. Making sense. All right. Excited about that one for sure. Me too. All right, so let’s go to the third feature I want to share with you, which is Event Streams.

19:29
Speaker 1
So Event Streams is like, I think, a really big game changer for Ignition So that we can take advantage of all the different data sources that are there. So just to reiterate from what you said before, we have sources, an event stream. You will define a source. The source is one source. So let’s say it was, you know, a Kafka source or an MQTT source, where I’m just subscribing on a topic. And this could be anything. With MQTT and Ignition, our modules work off our tag system, right? So if I want to publish data, it’s from tags. If I want to subscribe data, it turns it back into tags. With event streams, we can do more than just work with tags. We can subscribe to any topic and we can publish on any topic. It could be sparkplug, it could be non sparkplugged.

20:11
Speaker 1
So it gives us a lot of more options for how to handle that data. Especially if I want to subscribe to something and then just write that to a database, I don’t have to actually put it to a tag. Event Streams allows us that more flexibility. That’s what I mean by being more versatile. I’m not telling you how to do it. I’m not being prescriptive. We’re letting you decide what you want those sources and handlers to actually be. So it could be any kind of source and handler, as we mentioned before, lots of different options. We’re tying in different systems. I’ll show you here tags, I’ll show you Alarms and Kafka as an example. But there’s going to be a lot of hooks into the system.

20:43
Speaker 1
So every module we have at Ignition and our partner modules, and even if you wanted to build your own custom module with the SDK, you can extend it and you can actually add any sources or handlers. All you got to do is just that small little bit of code for that source or handler. The rest of the infrastructure, that framework we take care of, we do all of that within Ignition, So it makes that part a lot simpler. The air handling, all the caching of the data, the guaranteeing things move the way it needs to, we take care of all that. And the performance and scalability of this, that’s all handled by us. It’s these different source and handlers that really allow you to decide what you want to do with that particular data. It doesn’t have to be process data.

21:21
Speaker 1
It could be any kind of data, right? It could be business data coming in from Kafka where we can handle it and do something. So that’s what I get excited about, is this framework to be able to really move data in a lot of unique ways. And plus when we additional connectors to AMQP or, you know, AWS, SNS and SQS and I mean, there’s all sorts of different MongoDB change streams will be a part of the release. There’s all sorts of different ones that are out there. We can take advantage of them. All right, so the way this is done, you see in the designer event streams on the left hand side, it’s a project resource like others, you can define one or more streams much like you can provide one or more perspective views or alarm notification pipelines or whatever.

22:07
Speaker 1
And when you define one, I would specify what I want the source to be. So as I said, the list is a lot larger than this. Don’t get worried, don’t be worried. There’s gonna be a lot more source and handlers. I’m just working off of a internal release that I have. But there’s all sorts of things that are possible as I showed you in that slide. So I just have here just a few that we can actually play around with and look at. Kafka and HTTP are the two that I’ll show. So once I do that, I’m gonna go to this Kafka one. Once I do this, Kafka is the source. So here’s my source at the top, that is Kafka. I would specify the settings for Kafka here. If you’re not familiar with it’s very much pub sub, just like mqtt. There’s topics.

22:52
Speaker 1
And so what I’m doing is basically for a particular connector on the server, I have my topic, Travis, that I’m listening on, waiting for that to come in. And then I will take that payload and do something with it. So this is really, it’s really small, huh? Let’s make it. Let’s see if we can make it a little bit bigger. Is that a little better? So with that source, right, specify what you know. This is the settings for Kafka. If you’re familiar with Kafka, this will make a lot of sense. Then what happens when that data comes in? There’s an encoder, so it might be a string, and you want to convert that to JSON, it might be JSON. You want to convert to spark plug. You basically specify what you want that payload to look like, what you want the format to be.

23:37
Speaker 1
Because we do that. Because then various handlers might be more specific about what kind of data they want. So you have an encoder you can filter data if you want to. And filtering is a way to just, you know, reject a particular value that’s coming in that we may not want to do anything with it to return false in those particular cases. Right now it’s Python scripting. I’m sure there will be additional filtering options that are more built in as we go on. Transform is a way to manipulate the data. So say I want to take the payload and I want to add something to it or change it or something like that. Maybe I want to go XML the JSON. And if we can’t handle that automatically, there would be a way to do that through a Python script if you need to.

24:16
Speaker 1
Again, I’m sure there will be some examples out there of things that will bake in rather than just being a Python script. Right. I know we’ll learn a lot of feedback from people as they start using it to see what would be make most sense. And buffering is a way for us to cache those, make sure we cache those results so they can get to the handler. Because if, you know, if the handler, the database connection was down, we don’t want to lose those events. Right. If we’re expecting those events to go. So think of that as like the store and forward of the event streams. And then there’s handlers, and the handlers are what we’re going to do with that data. So I can define one or more handlers here.

24:56
Speaker 1
You can define as many as you want, and those are going to be a larger list. Again, there’s a lot more than just what’s here right now. But I have a logger one where I’m basically logging that to our console log with an Ignition. And then I have a script one which right now that script is just right into a tag. But again, you could do whatever you want with these and you can have multiple of them and that same message will get put to all those handlers. So this particular one that I have is quite simple.

25:23
Speaker 1
It’s taking a Kafka message, bringing it in, and I’m logging the actual, the full message to the console log and I’m writing that value result to a tag, the Kafka read tag over here as a document tag, just as a simple way of kind of showing how this would work. So let me go into a. I have a. I have a Python script outside of Ignition that is going to generate a Kafka topic and connect to the same broker that Ignition’s connected to. I’m just kind of showing this outside, typically Kafka, right? You have other applications putting in data in there. It’s not gonna just be ignition. So what I’m gonna do is I’m gonna run this, which is simply going to add that record in. So it should send this record the integer 609668.

26:09
Speaker 1
So in ignition I should see that my tag got that same value 609668. And if I go into my logs, go to. Sorry, trying to make it easier. It’s a really secure password. You can see there is my Kafka read message. I went to logs. Okay. So it’s really simple. But if I wanted to write that to a database, there’s a database handler. The database handler would allow you to map individual items of that JSON message. Two columns. So it’s all no code, right? Low code, no code. And very easy for that manipulation to happen. So that’s an example of the Kafka read. Likewise, we can do. I have the alarms here. This alarms one is. I’m just waiting for an alarm message in ignition.

27:02
Speaker 1
So when alarm occurs in ignition, it’s going to then go and handle it to by sending it to Kafka. So I’m actually going to publish a topic called Ignition alarm. So I’m going to take an alarm from ignition and publish it to Kafka in this example. Again, like if, if we didn’t have the vent streams, we would have had to like make the connector and then give you a specific way to like say make alarms go to Kafka. But I don’t have to do that here. I can make it be alarms, I can make it be tags. I can make it. This is what’s cool about Ven Streams. It gives you that flexibility with where you want, what you want to do with the data. So I’m going to come down here.

27:37
Speaker 1
I have another Python app which is just going to wait for a topic. So you can see that right now it’s waiting. There’s no value in there. If I come to ignition and I take this boolean and I write that boolean once, then come back up here. I can see there’s my in Kafka, there’s my alarm message. And that thing also got put into logs as well. So but again, this is what’s so powerful about this Event streams is I you can figure out how you want to hook these things up and how you want to move data around and how that whole thing works. So we are going to support OPC alarms and events as well. There’s all Sorts of things like, they’re just. It gets me very excited about the possibilities that are here with that.

28:26
Speaker 1
So the last one I want to show you here, last example is this third one, this HTTP read. Because another thing that happens is that you. We have these different standards like MQTT and OPC and Kafka and all those are great. But some IT departments just want to do like an HTTP, you know, like a REST call and want to be able to send data to Ignition or vice versa. Get data from Ignition. Right. And so those are both very much possible as well. But I have this one as a source, which means that Ignition is actually adding a REST endpoint to the gateway for this particular event stream. And I can post to that URL, which would then give me the data that I can then deal with here. And in my case I’m going to just log it to the console logs.

29:20
Speaker 1
So if I go into. Do I have. Let me open Postman real quick. And you don’t have to do anything with this. You don’t have to, you don’t have to create the endpoint. We do it automatically for you as part of that event stream. So it’s really quite cool. So I’m gonna go this event streams post, which you can see, it’s going to my local machine and system event stream demo and HTTP read. Right. So you can see the same kind of path to that. So if I simply go and run this that is now submitted, it was error 200 or success, you know, status 200. So it’s successful. And if you see here, I got HTTP read that came through for the event stream.

30:03
Speaker 1
But imagine that get written to Kafka or that get written to MQTT or to tags with Ignition or write written to a database. Again, whatever you want that to be. So hopefully you guys get excited about, you know, these are three features of a set of tons of features within 8.3 that hopefully can get. Get ready for. But beta is going to be out in December. We’re on track for it. You’ll be able to get your hands on it very soon to play with all this, you know, in demo environments to kind of really see what this release can do for you guys. So with that, I think I’m going to conclude on my part, if you have any questions, come by and find me before the end of the day. Thank you.