Smart Car UI banner

Smart Car UI

Created by: Terraegg
6 devlogs
12h 53m 59s

I am going to design and build a more modern, clean UI for a vehicle’s head unit (CarPlay). This will ideally include: weather updates, vehicle controls (windows, air conditioning, seat heating, etc.), a music and radio system, a reverse camera, and a vehicle health module for running part diagnostics.

  • When I say “design and build” I am not going to physically build the part or direct integration to any vehicle, only the UI for it.

Car Model Used: https://sketchfab.com/3d-models/2025-bmw-m4-competition-f8141ecd755547989c9209784b71ad43

Demo Repository

README

Loading README...
Terraegg
Terraegg shipped Smart Car UI
18 days ago

Shipped this project!

Hours: 12.9
Cookies: 🍪 265
Multiplier: 20.52 cookies/hr

Throughout the project I learned how to use threeJS (that was my main goal for the project) as well as learning a couple new blender skills. I build a mock alternative to apples popular CarPlay, ofc it dose not actually work but it was a fun project to work on.

Terraegg
Terraegg worked on Smart Car UI
18 days ago
0h 20m logged

Formatted (using prettier) document and customized readme. I also have somehow destroyed every single empty line in the process (sorry to anyone who decides to read through the source code)

Attachment
0
Terraegg
Terraegg worked on Smart Car UI
18 days ago
3h 13m logged

There is a lot to wrap up, but here goes. I’ve added a switch to change between a 2D and 3D model. I built a settings page to turn animations on/off, set the default model loading mode, and display the version of the Smart Car UI. I integrated Google Maps for an interactive map system. I then built the heating page, which allows for changing both the A/C and set temperature; this includes an interactive image where the seats can be clicked to change the heat level of each one. I also added a simulated reverse camera and a top-down preview of the vehicle when in reverse.

Attachment
Attachment
0
Terraegg
Terraegg worked on Smart Car UI
19 days ago
1h 57m logged

I have added a 2D option to the myBMW page (which changes based on the door settings). I have also animated the wheels and windows on the 3D model to respond to the environment settings. I’ve also ironed out a few bugs that were causing the window to freeze while the model was loading.

Attachment
1

Comments

chefpenguino
chefpenguino 19 days ago

this looks amazing bro, good stuff :)

Terraegg
Terraegg worked on Smart Car UI
20 days ago
5h 0m logged

Today I fixed a couple of issues with animations not completing entirely. After that I began work on the media player. This player is able to play from radio stations around the world live using “RadioPage”. It also has a online player that just for the mock plays only local files. To wrap of the day I added time, weather and temp to the dashboard along side the settings icon and text.

Attachment
Attachment
Attachment
Attachment
Attachment
0
Terraegg
Terraegg worked on Smart Car UI
21 days ago
1h 22m logged

I have finished the first section (myBMW), where the user is able to manage their vehicle. This has a movable 3D model built using Three.js along with some statistics (placeholder data for now) displayed at the top-left of the screen. The statistics can be rotated and dragged, with a snapping feature that aligns it to the sides.

Model Credit: https://sketchfab.com/3d-models/2025-bmw-m4-competition-f8141ecd755547989c9209784b71ad43

Attachment
0
Terraegg
Terraegg worked on Smart Car UI
21 days ago
0h 59m logged

I began development on the carplay UI adding a myBMW section along side a image of the model. I went with pastel colors and more of a plush feel. I am next going to start work on the varible editor that will allow for users to customize vehicle options (such as speed, temp, windows, locks etc.) These will later also reflect the carplay UI.

Attachment
0