3. Demo UI
Danger
This tutorial is out of date. Please check the tutorials overview for our latest tutorials.
This is the UI for this tutorial, it enables the user to see where a device is located, the path it has taken and indicates where a crash has occurred.
The UI you will deploy is shown in the following screenshot:
Deploying the UI
The following steps demonstrate how to select the UI from the Code Samples and deploy it to your Quix environment.
Follow these steps to deploy the prebuilt UI:
-
Navigate to
Code Samples
and search forEvent Detection Demo UI
. -
Click the
Deploy
button. -
Ensure that the
topic
input box containsphone-data
.This topic will be subscribed to and will contain the sensor data from the data source you deployed earlier.
-
Ensure that the
eventTopic
input containsphone-out
.This topic will be subscribed to and will contain any events generated by the crash event detection service you deployed earlier.
-
Click
Deploy
and wait while the UI is deployed and started. You will be redirected to your environment homepage once it's completed.
Success
You have deployed the UI for this demo!
-
Click the "open in new window" button on the
Crash Detection Demo UI
tile. -
Observe the various elements of the UI:
Note
You will need some data streaming into the
phone-data
topic for the UI to activate.Ensure the services you deployed in the previous stages of this tutorial are up and running. Have your phone to hand or make sure the CSV data source is running
a. The map showing the location reported by your phone or from the prerecorded data.
b. Telemetry data from your phone.
c. The timestamp of any crash events.
You can click a crash event to see where it ocurred on the map.