Build an Interactive, Realtime Experience

Aim

This Data Streaming and Processing tutorial will help you build your own realtime interactive creation.

The multiple elements, tools and techniques used in this tutorial will allow you to experience much of what Quix has to offer.

By the end you will have:

  • Created services to process data in realtime

  • Deployed a public facing website with desktop and mobile elements

  • Created an experience you can share with friends and colleagues

Project Architecture

architecture

The solution has 3 main elements:

  • Two services to process data

  • A NodeJS UI to display a race track and send data from your mobile device

However, this is all running with the Quix Serverless environment.

You have to create and deploy 3 projects, we have: . Created an always on high performance back-end . Created API’s and Services focused on performance . Opened firewall ports and optimised DNS propagation

Prerequisites

  1. A Quix account

  2. A mobile device

If you don’t have a Quix account yet, go here and create one.

Overview

This walkthrough covers the following:

  1. Creating the python services and NodeJS UI’s

  2. Deployment of the above

  3. Some fun!

Getting Started

Login to Quix and create a new Workspace. A Quix Workspace is a container to help you manage all the data, topics, models and services related to a single solution so we advise using a new, clean one for this tutorial.

Create Topics

Once the workspace has been created. Create 3 topics.

These Topic names should be used as specified, or the demo code will not work
  1. gamedata

  2. car-game-input

  3. car-game-control

Find out about Topics here.
Check out this Tutorial Short for help with creating your topics.
Keep the Topic ID’s safe for later. You will need them in the project code.

Create the projects

The Quix Library contains various samples to allow users to quickly explore possible applications of Quix, they’re pre-configured with the settings needed to work with your personal workspace.

You will be using the Library within the Quix Platform to quickly create your projects from sample code.

You will need to create 3 projects:

Table 1. Projects

Name

Description

Input

Receives raw input from the mobile device (controller)

Control

Processes raw game input, produces speed, x and y coordinates and vehicle angle

NodeWebApp

The web site that hosts the user interface. This is what you see on your mobile device and on your computer

Using the instructions below, create each project.

Using the same project names as listed is not vital. However, it will help us help you if you run into any issues.

Game Input Project Creation

The "Input" project is a Python model project which takes the raw input from the mobile device. It converts the "Y_grav" parameter value to a "steering" value. And passes the throttle and brake values along too.

Table 2. Game Input Project Creation

select input sample

In the Quix Portal click the "Library" icon on the nav bar. Select "Model" from the tabs near the top, then select Python and the "Stream Processing Input Demo" sample project

select gamedata choose input topic

Select the 'Input Topic'. Be sure to select the 'gamedata' Topic that you created earlier.

select input choose output topic

Select the 'Output Topic'. Be sure to select the 'car-game-input' Topic that you created earlier.

save as project

Save this template code by clicking "Save as Project" in the top right

name the project input project

Give your project a name, 'input', and click "Create"

Game Control Project Creation

The "Control" project is also a Python model project. This one takes the cleaned data from the previous stage "Input" and uses it to control several aspects of the game.

The model determines the cars forward and reverse speed, max speed and even acceleration. It detects if the car is on the grass and will limit maximum speed. The car you see on the screen is completly controlled by this model which uses data from your mobile device.

Table 3. Game Control

select control sample

In the Quix Portal click the "Library" icon on the nav bar. Select "Model" from the tabs near the top, then select Python and the "Stream Processing Control Demo" sample project

select control choose input topic

Select the 'Input Topic'. Be sure to select the 'car-game-input' Topic that you created earlier.

select control choose output topic

Select the 'Output Topic'. Be sure to select the 'car-game-control' Topic that you created earlier.

save as project

Save this template code by clicking "Save as Project" in the top right

name the project

Give your project a name, 'control', and click "Create"

Node UI Sample

The "UI" project for this demo is a NodeJS application. It’s the home of the UI elements including the "track" page, mobile device page and the initial "QR code" landing page.

Table 4. NodeWebApp

select node sample

In the Quix Portal click the "Library" icon on the nav bar. Select "Sample Projects" from the tabs near the top, then select "Node" and the "Stream Processing Demo" sample project

save as project

Save this template code by clicking "Save as Project" in the top right

name the node project

Give your project a name, 'NodeWebApp', and click "Create"

The topics used for the node web app are hard coded and therefore we advise you to use the topics and names we have suggested this time around.

Deployment

Time to deploy all the projects to the Quix Serverless environment.

Deployment to Quix is easy and, as we’ll demonstrate, you can run both internal services and external facing web sites.

Deploy the Projects

Find out more about deployments here.

You will deploy all the projects to Quix. Follow the detailed guide for step-by-step instructions:

Input Project

Table 5. Game Input Project Deployment

select projects

Within the Quix Portal click the "Projects" icon on the nav bar. Select the Input project.

deploy button

Click the Deploy button near the top right

deploy input project name

Enter a name for the deployment e.g. "Input"

deploy input project service type

Choose the "Service" deployment type

DEPLOY

Click Deploy

Control Project

Table 6. Game Control Project Deployment

select projects

Within the Quix Portal click the "Projects" icon on the nav bar. Select the Control project.

deploy button

Click the Deploy button near the top right

deploy control project name

Enter a name for the deployment e.g. "Input"

deploy input project service type

Choose the "Service" deployment type

DEPLOY

Click Deploy

NodeWebApp Project

Table 7. Game NodeWebApp Project Deployment

select projects

Within the Quix Portal click the "Projects" icon on the nav bar. Select the NodeWebApp project.

deploy button

Click the Deploy button near the top right

deploy NodeWebApp project name

Enter a name for the deployment e.g. "NodeWebApp"

deploy input project service type

Choose the "Service" deployment type

deploy node public access

On the "Network" tab, enable "public access" and enter a URL prefix e.g. "NodeWebApp"

The full URL for your NodeJS web application is shown below the URL prefix.

DEPLOY

Click Deploy

Fun!

Now for the fun part we mentioned earlier.

All being well, you should now have 3 services deployed. These are 2 Python models and 1 NodeJS website.

In the Deployments page, next to the NodeJS applications name you will see a small globe icon. You can click this or expand the row, with the icon at the left hand side of the row, to view the URL to the NodeJS website.

Navigate to the NodeJS website and follow the instructions from there.

If something isn’t quite right or you need help with any element of this or anything relating to Quix, please drop us a line on our Discord @ https://discord.gg/cRmJXpWqnD

What’s Next

Now that you’ve got our version of the Data Stream Processing Example up and running why not make some changes!

Here’s a list of the things we wanted to add but got side tracked on other fun stuff!

  1. A points system

  2. A trace of where the car has been and maybe how fast it was traveling at the time.

  3. Multiplayer! - We think we could support a full F1 grid

  4. How about web cams! - See the other players as they play?

What else can you come up with? How about using the code to create another type of game or demo?

  1. Online Pong?

  2. Your own version of Slack/Teams/etc