See how the Vantiq platform manages the entire application lifecycle so you can focus on your business and not the underlying infrastructure.
Explainer Video
See why Vantiq is the leading platform to create powerful real-time business solutions that are digitally transforming entire industries.
Demo Video
Vantiq powers the edge and edge applications by giving you a platform that is both fully distributed and multi-tenant to build low latency edge applications at scale. Learn more in this short demo video.
Take a deeper dive into the stories and applications created on Vantiq.
Hear directly from our customers about why they chose Vantiq.
View all our current partners and the different use cases they serve.
Learn how a partnership with Vantiq enables you to build, integrate, and deliver high-value solutions at the speed of business innovation.
Community Resources
The best Vantiq Partner resources for training, discussion, documents, and more.
Our partner-driven solution center, where you can discover event-driven applications built by our network of global partners.
About Us
Learn why organizations from around the world are choosing Vantiq to run their operations in real time.
See the people that make this all possible, including our executive team and board of directors.
Vantiq is the culmination of decades of software experience, read the story on how it all started.
Interested in a career at Vantiq? View all of our active job postings.
Latest Activities
Vantiq and partner Casne Engineering discuss how low-code applications on the edge are enabling utilities companies to more effectively operate remote environments.
In this webinar, IBM's CTO of Edge Computing, Rob High, and Vantiq CEO, Marty Sprinzen, dive into the business impact of edge-native applications and how we get there.
White Paper
As the world becomes increasingly digital, businesses spanning all industries must bridge the gap between physical systems and the virtual world.
White Paper
Learn about EDA and how businesses across all industries are utilizing it to successfully digitally transform their organizations.
Vantiq Resources

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.

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

This website uses cookies to provide you with a better user experience. By using our site you agree to the use of cookies as described by our cookie policy. If you do not want to accept all cookies from our website, please see our cookie policy on how to modify the types of cookies that are accepted by your browser client.

Get in Touch with Vantiq

Please complete the form below and a Vantiq representative will be in contact.
This form may not appear if your browser is running in private mode.