Flywheel

Flywheel Challenge UI

HTML5 Canvas UI installed on a Windows Surface device

Flywheel Challenge UI Finite State Machine application
Client
Flywheel
Role
Senior Front-End Engineer
Company
Night Agency
Period
Play

Overview

This application was developed in Javascript rendering the entire UI in a Web Canvas. The Web Application was installed on a Windows Surface device with a Java server running that was parsing values, like RPM & Torq, from two bikes. So the Javascript application was getting those parameters from the Java Server and presenting them to the users of the two bike under the form of a spinning session challenge.

Tech Stack

No framework used, simple vanilla Javascript with the support of a Finite State Machine library to handle the application internal states changes and transitions.

Screens states

Test bikes step

flywheel_01_test_bikes.jpg

Start screen

flywheel_02_start.jpg

Users start the spinning session

flywheel_03_spinning_low.jpg

High intensity screen

flywheel_04_spinning_high.jpg

Winner screen

flywheel_05_winner.jpg

Themed version

flywheel_themed.jpg