Converted Analog To Digital Dash

This application is for users who love the latest and greatest trends in today's automotive industry. I have had a dream of converting my old 1988 Mazda's analog dashboard into a digital touch screen. This app is meant to mimic the conversion of an older cars analog dashboard to that of a newer digital dashboard. In order to do so realistically one would connect a raspberryPi and Arduino to the On Board Diagnostics (OBD) Port in their car via serial cable. Nearly every car made after 1996 has an OBD2 port which can send parameter IDs, making it possible to extract human-readable data from your car such as speed, RPM, throttle position, and much more.

Ideally, this custom app will be robust enough to take in any cars serial data and parse it into meaningful signals and data displayed on a new digital touch screen no matter how old the car. With that being said, in order to narrow down the complexity and get a feel for the application in full I have "mimicked" some of the signals a car might emit making this an integrated systems project using the Arduino Uno microcontroller. The hardware connected to the Arduino is reading serial data in real time and sending it to the current dashboard display. Want to give it a spin? Check out the wiring diagram found on the next page. Don't have the hardware? Don't worry I have created full-blown functionality through just the web-app itself. Feel free to check out the live site here.

Built With

Front End

Back End

Deployment and Package Management

Installation

1. Clone the repo git clone https://github.com/Sbutler8/converted-analog-to-digital-dash.git
2. Create root .env file based on example .env-example file touch .env
3. Create frontend .env file based on example .env-frontend-example cd react-app/ && touch .env
4. Install backend dependencies cd converted-analog-to-digital-dash/ && pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
5. Install frontend dependencies cd ../react-app && npm install
6. Start virtual environment in frontend cd .. && pipenv shell
7. Apply the migration to the database flask db upgrade
8. Seed the database flask seed all
9. Start backend flask run
10. Open new terminal and start frontend cd ../react-app && npm start
11. Open browser to http://localhost:3000/

Features

1. Display the following live serial data:

• speed in [mph]
• warning gas light
• warning lights on light
• warning low oil light
• warning battery light
• warning check engine light

2. The ability to upload user profile photos and an image of their car using AWS S3 third party API

3. Weather data displayed and updated every five minutes based off current location

4. Live geolocation services pinpointing where the user is in real time using Google Maps API

5. Auto complete Google Maps dropdown for a simpler directions lookup prefill option.

6. Google Maps visualization of directions from current location to input destination.

7. Step-by-step directions in an easy to follow list format.

8. On Board Diagnostic Parameter IDs (OBD PIDs) lookup to decode what the error code your car is throwing means. Used implementing IBM's Car API.

9. The ability to change which car you are driving with customized pre-filled fields when performing PID code lookups.

10. Ability to see full stack web application features in full with or without the Arduino hardware using easy toggle switch.