Smart Car Radio

Since i drive an oldtimer from the year 1987 and the original radio was missing when i bought the car i opted for the cheapest radio i could possibly find. Having it for a little while now i am starting to get bored of it and its limited functions so i decided that it is time for an upgrade. I decided to make my own touchscreen radio using a Raspberry PI with a GPS module, FM receiver and an accelerometer connected to it so i can listen to the radio, have navigation on the screen and look at how fast im accelerating in the car. I'm hooking my car speaker up on the raspberry pi so the FM receiver can play radio through the speakers. Also im adding a function to keep track of routes i have driven with a MySQL database keeping track of my GPS and accelerometer data showing me where i started, ended, how long the trip took, how far the trip was and how much i spend on gas.

-Raspberry Pi 4 Model B

-7 inch touch screen

-GPS NEO-6M or 7M Module

-Tea5767 (radio receiver)

-MMA8452 (accelerometer)

-TPA3116 Amplifier

-MCP4151 (digital potentiometer) X2

-4AMP car supply / switch: https://mausberry-circuits.myshopify.com/collectio...

-Blank pcd board or breadboard

-AUX cable

-DC pigtail connector X2

-Custom made AUX to antenna port cable (optional)

On the image above you find my circuit. It was originally build on a breadboard but i had to replace this since the breadboard could simply not fit my case (more info on this later) hence why i am using the PCB board. Fritzing gave me a hard time fetching the right components so that's why i replaced some with alternatives that have the same pinout for instance the accelerometer in my fritzing is a MPU6050 that i was originally using but this one broke down so i had to replace it and thats how the MMA8452 came into place the pin's are exactly the same so i kept the fritzing. The connected lines on the PCB like the blue, green, purple, ... are soldered together so they can function parallel. As for the amplifier i replaced the potentiometer that came with it originally with 2 digital potentiometers. As you can see on the picture i had to desolder the original potentiometer and then solder the 6 pins coming from the MCP4151. As seen on the picture below the P0B and P0A are the cables left and right (shouldn't matter in what order) and the P0W are the middle ones. Also above those pins i had to connect the + and - to make sure the amplifier worked (small purple wire). For the screen, this came with a extra board that was really plug and play. Just connect the screen to the board and connect a HDMI to micro HDMI to the PI and it starts up. For now just feed your pi with the official power supply and the screen and amp with a 12 volt supply. I will show how to put it in a car later in this tutorial.

First make sure your raspberry pi has a SD card with a raspberry pi image on it. For this project we are using: Raspberry Pi OS with desktop and recommended software that you can find on this link: https://www.raspberrypi.org/software/operating-sys...

for more explination on this go to this link: https://www.raspberrypi.org/documentation/installa...

Now i recommend using PuTTY to make a SSH connection with your PI. Once you have done this login and execute the command: "sudo raspi-config". This should open a menu in this menu select "3 interface options". Here you will have to activate SPI, I2C and Serial port. For the Serial port select no on the login shell and yes on the serial port hardware.

Now make sure you have a working apache server on your PI for more info on this go to this link:
https://www.raspberrypi.org/documentation/remote-a...

While we are installing everything we will get the script needed later for the 4AMP from mausberry for this just execute following commands in the terminal:

-wget http://files.mausberrycircuits.com/carsetup.sh

-sudo bash carsetup.sh

-sudo reboot

For the last step install MariaDB on your raspberry PI we will need this to put the database on. for more information on this go to this link:

https://raspberrytips.com/install-mariadb-raspberr...

Now we come to the biggest part the code that will make everything work. You can find all my code on this github link (Most code is a hybrid of Dutch and English and the code is a real mess so sorry for that xD):

https://github.com/MestdaghBerre/SmartCarRadio

The code exists of 2 main parts a frontend and a backend. The frontend files are HTML, CSS for the website and a javascript file to make a connection with the backend. The backend exists of a datarepository to get the data out of the database and save new data to the database and a python file to make sure all sensor data is being saved in variables and sent to the database also in this python file we send all the data to the javascript file with app routes that we call in the javascript file to then display it. The data is send in a JSON object and implemented in the HTML through the Javascript file.

first you will need to get the database from the database-export folder. Just copy the code and paste it in My-SQL workbench and hit the lightning bolt, this should create the database. Next you will need to go to the table "radiozenders" where you can put in your favorite radio radio stations. Just choose a name and give in the right frequency, the id will auto increment and press apply if you added all desired stations.

Next you will need to download the map of your liking with mobile atlas creator (MOBAC) found in the link under this text. Once you installed MOBAC open it and in the top left corner select the map of your liking i opted for OpenStreetMap Hikebikemap.de. Then select a zoom level, i used 17. and start selecting the region you want in relatively small squares since if you make the selections huge it will most likely not be able to get every tile you want leaving you with a lot of blank space in your gps. I personally had a lot of problems getting this step done aswell

https://mobac.sourceforge.io/

The next step will be testing the HTML files, Javascript code and python code you can do this by making a SSH connection with your PI on Visual Studio Code, you can find how to do that here: https://www.raspberrypi.org/blog/coding-on-raspber...

Once you are in visual studio code make sure all the code is downloaded on the raspberry pi in a folder of preference and then open this folder. Go to the backend folder and select appb.py, click the play button in the top right corner and it should start running the application. Next you type your Raspberry PI address into google and that should take you to a menu where you see all the files, there select Home.html and that should take you to the homepage. Here you can go ahead and test all the functions you can find normally if you did everything right until this step you should be able to change the background in the settings page and also see a IP there, you should be able to see your accelerometer scale move according to its speed, change the radio volume (if you already connected speakers), browse between the stations you added, look at your location, ... If not make sure you connected everything correctly and that for instance your gps module is getting a signal (a blinking light)

Now all that is left to do is make sure that the appb.py starts running when you start the Raspberry PI. This will make sure the website opens on a local host on the touchscreen. All we need to do is a simple command in the terminal, you can do this on PuTTY, just type the command sudo systemctl enable mijnproject.service followed by sudo reboot. After this if your touchscreen is connected the website should pop up.

Say you want to change the background image that i am using (my car) that is easely done aswell by just dragging any image you want into the "Fotos" folder. Then go to the screenb.css file in the style folder. In that file search for .background it should be around line 110 and change the url path to your picture.

If you will be using this in your car you will most likely also need to change most words in the HTML or javascript file since these are mainly Dutch if you need help with changing this you can always contact me.

For this step i cut metal pieces into a box to make them fit perfect in the original radio holder that you can see on the second picture sitting around the wooden plank in the front. I left the top open so i can acces the components easily and so that the gps gets the best connection. I added a plank of wood at the bottom to make a small floor for my components so i could screw them to it. Since this was a really tight fit i had to make an extra plank to screw the screen board onto and hang it upside down so that the screen cables can connect correctly and so that i had more space for the other components at the bottom as you can see on the third picture. On the fourth picture you can see the metal sheet that we cut. As i said before this is a really tight fit and as you can see there would be no space to place a breadboard in my case so thats why i opted for the PCB that you can see on the first picture in the top left. Ofcourse if you have the space and you don't feel like soldering you can opt for the breadboard

For this step we need the Mausberry 4AMP and some soldering. First Make sure your AUX cable goes from the Radio Receiver to the amp next put your pigtails in the AMP and the screen board. Solder these cables to the 4AMP cables like seen in the picture i also put a connector at the end so i can install and take it out quickly. Make sure the 12 volts of the pigtails go to the red cable of the 4AMP and the grounds go to the black one, the yellow cable doesn't need any soldering to be done but you can place a connector on it aswell to make it an easy install. The red wire will have to be connected to your ignition wire (meaning it only gets 12 volts when the key is turned). the black wire goes to the ground and the yellow one goes to the static 12 volts cable. next put the jumper cables that you received with the board on the in and the out pin and connect them to the PI (out goes to GPIO 23 and in goes to GPIO24). then just connect the PI on the 4AMP using a USB C to USB C cable. Then we will have to connect the speakers to the amplifier. Here all we have to do is take 2 cables and strip a part of them off so we can screw it into position. For the other end i again opted for the connector plugs since in my car the speaker cables already had these on them also my speaker cables are put together hence why i only use Right + and Right - on the amplifier. As for the antenna i had a custom cable made from AUX to whatever port my antenna needed since i really dont know much about these things. All i had to do was plug the AUX in the radio receiver and then antenna (that you can see in the last picture) in the other end.

Normally if you got here everything should work by now so congratulations! :)

This project took me 3 full weeks but was really fun to make for me and i hope you guys all enjoy it as much as i do

If you are facing any problems don't hesitate to contact me in the comments

Also if you made this please send me a picture i would love to see your results!