TrakBox phone display

This topic is for the phone display that TrakBox makes available in real time to display your speed on a phone.

The racing TrakBox uses a hot spot you provide with your cell phone to connect to the internet. The racing TrakBox uses the internet connection to sync with a time server on the internet to ensure timestamps in the data are accurate. Using the network connection between the racing TrakBox and your phone provides a display which can be used to monitor your current speed in real time on your phone.

When the racing TrakBox starts, it has web server running. The web server publishes a small web page which you can be view in a web browser on your phone.

The actual web page displayed is uploaded to the micro-controller using the Arduino ESP8266 LittleFS Filesystem Uploader for IDE 1.x

here is a link to the github repository
https://github.com/earlephilhower/arduino-esp8266littlefs-plugin

Read the installation instructions to install the plug-in. Then read the usage instructions.
Basically, every time you create a new firmware file (called a sketch in Arduino) the IDE makes you create a new folder to store that sketch. To use the little file system plug-in you must create a folder named data in that same folder you created to store the sketch. When you run the little file system data upload command from the IDE, all the files in the data folder will be uploaded into flash memory on the micro-controller.

The rationale behind using the littleFS utility is so that the web page served by the racing TrakBox as a dash display can be saved and edited using a normal html file instead of having to be embedded in the Arduino code. Thus the file can be developed in a regular html IDE with syntax checking and such.

Since this page has thus far only been tested on Android phones this information is being provided so others can customize the file to allow it to work on different phones. Everyone is welcome to post ideas and enhancements.

The web page used to display the phone dash display is served using the ESP Async web server found here.
This library is a fully asynchronous TCP library that doesn’t block the main loop of the firmware thus not slowing data recording.

The ESP Async Webserver contains a simple template processing engine which can replace template placeholders with actual values. It works by extracting the placeholder name from response text and passing it to user provided function which should return an actual value to be used instead of placeholder. Placeholders are delimited within the html code with % symbols like this: %TEMPLATE_PLACEHOLDER%.

The current web page is set to reload every 1 second or so. Each time the web page reloads, a new value for MPH is displayed