The VANTIQ videos in this series are designed to show developers and operations managers the simplicity of building real-time, event-driven applications with VANTIQ. A specific use-case involving real-time field service of IoT-connected machines is discussed but please keep in mind that ANY event-driven application can be easily built in VANTIQ, supporting a wide range of use-cases.

—

This third video in the series walks you through building a web based client to display a simple status of the devices being monitored.

Video Transcript:

In this video we’ll build a simple WEB interface to our application for viewing the current state of our pumps. We’ll also add functionality to the existing application so we can display the devices indoor location to assist a technician on site.

We’ll start by modifying our lookups type.

In the project resource graph I’ll click on lookups.

This brings up a dialog that displays all the properties in our lookups table.

We’re going to add indoorLocation to this type, so we’ll click on the edit icon, which open up the editor for types. Types in VANTIQ allow us to persist data into the platform.

I’ll click the add properties button, set the name to indoorLocation and set the type to GeoJSON.

And we’ll save the modification to our lookups type.

Recalling from the first video, that we place the enriched data into our pumps type, we’ll add the same property to our pumps type we’ll click the pumps type in the resource graph edit it and add indoorLocation to it.

I’ve modified the lookups records with the following information, representing the pumps indoor location but when we compare that to the pumps table, we see the indoorLocation has not been set we’ll add functionality to our app that will place this data in the pumps type when the temp and rpms streams are correlated all that needs to be done to accomplish this, is to modify our transformData activity.

I’ll click on transformData and edit its configuration.

I’ll add an outbound property called indoorLocation and set the transformation expression to event.enrichData.lookups.indoorLocation.

Once we save the application the data will instantly start propagating to the pumps table each time the data is correlated.

Now lets build the client web pages.

In VANTIQ I’ll choose Develop Clients and then click New Client.

I’ll open the clients properties and give it the name “PumpApp” and mark it launch-able, which means that it will be exposed externally.

Now we want to display some information about all the pumps, so we’ll add a table widget.

To bind data to the table, we’ll need a data stream, so I’ll click on data streams and then new data stream.

I’ll name the stream PumpStream. There are several way we can receive data, directly as information arrives from a source like MQTT but in this case we’ll use a timed query, which will grab the latest version of the data at a specified interval.

For the DataType I’ll choose pumps and set the update interval to every 6 seconds, and we’ll group by the pumpId and save the work now we’ll bind it to our table by clicking on the table and choosing our PumpStream for columns we’ll set: the pumpId, the time it arrived, the temperature and the rpms, and i’ll adjust the table width a drop by dragging so as to take up more of the screen real-estate.

Let’s test our app, but running our client.  here we see all the data we’ve asked for in the table.

Now lets add some graphs to help quickly visualize potential issues.

I’ll drag a horizontal layout control widget onto the canvas and in it I’ll place a column chart and just to its right a bar chart.

I’ll click on the column chart and pick the PumpStream for the data stream on the X axis we’ll choose the pumpId, and on the Y rpms.  we’ll also set a threshold value of four thousand two hundred and fifty one in our bar chart we’ll also choose the pumpStream for the X axis we’ll choose temp.  For the Y we’ll choose pumpId and for the threshold, one hundred and ninety nine.

When we run our client application it now appears like this.

We’ll add an OnSelect function to our table which will have a single line in it.  client.goToPage with the parameters for the page we want to go to.  The page name is “PumpDetail” (which we haven’t created yet), and the data that we will pass to the page is an out of the box variable called extra which is all of the data from our query for the selected row.

Let’s add the second page to our application so when we click on a row in our table, it will take us to the PumpDetail page that we specified in the onSelect.

So we give it that name, PumpDetail.

We’ll also set an on Page Start function which will modify our data stream to just contain information about an individual pump.

So we’ll get the data stream using its name, “PumpStream”, specify a new query that constrains the query to the pumpId that was passed into the page when the user clicked on the table and then call for the DataStream to be immediately updated.

Now to visualize all of this I’ll add vertical and horizontal layouts to the canvas.

In the vertical layout, i’ll add two gauges, one for temp, and one for rpms, I’ll also put text widgets above each of our gauges so we know what they are.

We’ll name the top one Temp, and the lower RPMs. We’ll configure the top gauge using our datastream, and set the property to temp and we’ll set some thresholds: a warning at one hundred and fifty, Danger at one hundred and ninety nine, and a gauge maximum of two hundred and fifty.

For the bottom gauge we’ll use our data stream, and set the property to RPMS we’ll also set thresholds here as well: a warning at three thousand five hundred, Danger at four thousand two hundred and fifty, and a gauge maximum of five thousand five hundred.

Now, we’ll populate the horizontal layout object with external and indoor locations.  For this, we’ll drag on a map widget and a floor plan.

We’ll configure the map with our data stream and for the property we’ll use the location object and for the label the pumpId.

For our indoor floor plan we’ll set the datatsream, and choose the indoorLocation for the property, for the label we’ll choose the pumpId and for the floorpan URL we’ll use a VANTIQ document that can only be seen with the proper credentials.

A few quick cosmetic adjustments to the size of our objects and we’re done.

We have modified our existing application with new data to enrich the event stream. We’ve created a web client that can now be accessed with a valid user name and login.  

We can see the table with each of our pumpID’s and the overall detail for our pumps in the graphs on screen.

By clicking on a row in the table, we can drill down into an item and see additional details about the specific pump that was chosen.

Thanks for taking the time to watch this video series on VANTIQ. “The application platform for building event driven systems”. To see more videos or learn more about VANTIQ visit us at VANTIQ.com