Product Tour – Video 3: Client Builder

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.

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 show lookups table highlighting the new data
but when we compare that to the pumps table, we see the indoorLocation has not been set show the pumps table all new data is null
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 show the results of queries against this table
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
Lets 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 client.goToPage(“detail”, extra);
Lets 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

// adjust the query

var ds = client.getDataStreamByName(“PumpStream”);

var p = new TimedQueryParameters();

p.whereClause = { pumpId: parameters.pumpId};


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. = parameters.pumpId;
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 onto 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
Featured Resources
White Paper
VANTIQ - Enabling the Digital Enterprise
Read the vision of Marty Sprinzen, CEO of VANTIQ, on how VANTIQ truly enables the real-time digital enterprise.
New Gartner Report - Free!
Innovation Insight for Event Thinking
Read Gartner’s latest report on the event-driven application revolution PLUS new product tour videos, VANTIQ FAQ, and interview with VANTIQ co-founders Marty & Paul.
Demo Video
Real-Time Application Overview and VANTIQ Demo
A detailed overview of why real-time, event-driven applications are required to truly transform your business operations. Includes a demo of how to rapidly build and deploy one.

Follow Vantiq