Skip to content

Telemetry data

Stream and visualize real-time telemetry data with an Android app and Streamlit

Learn how to build an end-to-end telemetry data pipeline for IoT applications. Use our Android companion app to stream sensor data from your phone and visualize it in a Streamlit app.

Get Started

To get started make sure you have a Quix account, signup for a completely free account at https://quix.io

You will need an Android mobile phone for this tutorial (we're working on the Apple app).

If you need any assistance, we're here to help in The Stream, our free Slack community.

Library

Most of the code you'll need has already been written. It lives in our library, which is accessible from inside the Quix portal or directly via our open source GitHub repo. We'll be referring to the library often so make sure you know where it is.

Components

Android App - Our companion app for collecting real-time sensor data from your phone. It's pre-built and published to the Play store to save you time. You can also access the source code in our Github repo.

Streamlit App - See your location on a map and other activity metrics.

QR Settings Share - A lightweight UI and API for sharing settings with the Android app.

Build It

This guide will show you how to deploy each of the components, starting with QR Settings Share.

1. QR Settings Share

Follow these steps to deploy the QR Settings Share.

  1. Navigate to the Library and locate "QR Settings Share"

  2. Click "Setup & deploy"

  3. Click "Deploy"

Info

The service will be deployed to your workspace

Open the UI with these steps

  1. Once deployed, click the service tile

  2. Click the "Public URL"

  3. Append the following querystring to the url in the address bar

?topic=phone-data&notificationsTopic=notifications-topic

These are needed by the Android app and will be passed to it via the QR code you'll generate in a moment

  1. You can now enter a username and device name into the relevant inputs

These can be anything! But sensible values will help understand which token belongs to which user

  1. Click OK

  2. You can now click Generate Token

Several things happened when you clicked the button.

A token was generated in Quix with an expiry time in around 1 month.

The token was published to an API and a link to the token was generated.

The QR shown on screen is a short-lived link to the longer lasting token.

Info

Scanning the token with the Android App will allow the app to receive its configuration information without you having to enter any long token strings by hand.

2. Android App

It's time to install the Android app!

  1. Go to the Google Play store and search for "Quix Tracker App" ensuring it's the one published by us.

[Screenshot of Play store coming soon]

  1. Install the app.

  2. Tap the menu hamburger

  3. Tap settings

  4. Tap SCAN QR CODE

  5. Generate a new QR code in the QR Settings Share website you deployed in step 1

  6. Scan the QR code with your device

    The Token, Workspace and topics should now be configured

  7. Tap the menu hamburger once again

  8. Tap Dashboard

  9. Tap START at the bottom of the screen

    Your device is now streaming to the topic called 'phone-data' in your workspace

    These parameters are being streamed from your phone:

    • Accuracy
    • Altitude
    • BatteryLevel
    • BatteryPowerSource
    • BatteryState
    • EnergySaverStatus
    • gForceX
    • gForceY
    • gForceZ
    • Heading
    • Latitude
    • LogInfo
    • Longitude
    • Speed

    Tip

    Leave the app running until you've completed the next step.

3. Streamlit app

Explore the data inside Quix and then deploy a frontend app.

Within Quix:

  1. Click Data Explorer on the left hand menu

  2. Select the "phone-data" topic

  3. You should have at least one stream, select it

  4. Select as many parameters as you want. The gForce ones are great for this tutorial

  5. You can see the gForce from your device displayed on the waveform in real time

Deploy an app:

  1. Click Library on the left hand menu

  2. Search for Streamlit Dashboard

  3. Click Preview code

  4. Click Edit code

  5. Ensure phone-data is selected for the input field

  6. Click Save as project

    The code for the dashboard is now saved to your workspace. You can now edit it to ensure it works with the data coming from the device

  7. Locate the following line in streamlit_file.py

st.line_chart(local_df[["datetime",'Speed','EngineRPM']].set_index("datetime"))
  1. Replace 'Speed' with 'gForceX'

  2. Replace 'EngineRPM' with 'gForceY'

  3. Remove the following code block

with fig_col2:

st.markdown("### Chart 2 Title")

st.line_chart(local_df[["datetime", 'Gear', 'Brake']].set_index("datetime"))
  1. Click Run near the top right corner of the code editor

    The dashboard will run right here in the development environment

    Click the icon that appears next to the project name (circled here in green)

  2. Once the dashboard has loaded you will see sensor data from your device in real time

    Below this is also the raw data showing all the values from the device

  3. Close the dashboard

    The dashboard you were just using was deployed to a temporary URL in the development area

    You need to deploy it to its permanent home!

  4. Click the Deploy button in the top right corner.

  5. Click Service in the Deployment Settings

  6. Click the toggle button under Public Access

  7. Click Deploy

    You will be redirected to the home page

  8. Once the dashboard has been built and deployed click the deployment tile

  9. Click the Public URL

You are now looking at your dashboard in its permanent home

Be aware that there is no security on the dashboard

Next Steps

You've just connected your mobile device to Quix and deployed a Streamlit app to view the data in real time.

Now try showing some different parameters in the app, or build a transformation in Quix to make better use of the raw data.

What will you build? Let us know. We'd love to feature your project or use case in our newsletter.

If you need any assistance, we're here to help in The Stream, our free Slack community.

Ciao for now!

We hope you enjoyed this tutorial. If you have any questions or feedback please contact us on The Stream.

Thank you.!