While nothing is very complicated in the vehicle-monitor, it does require knowledge in different domains to understand how it works, and be able to build your own, and especially if you want to modify it. Everything is well documented on the internet (Arduino, ESP32, the used libraries, mithril.js, web development, etc.), and a lot of people from different communities can help you, but be aware that if you are a beginner, you will need time to learn everything that is needed to tinker with this project.
The system is made of an [ESP32 microcontroller](https://en.wikipedia.org/wiki/ESP32) connected to various sensors. The ESP32 also has an integrated wifi interface, which is used to host a web server. Using any web browser, typically from a smartphone or tablet (also works from PC), the user can then connect to the ESP32 to display the graphical interface and interact with it.
The main electronic circuit, showing how sensors are connected to the ESP32 is described in folder `schema/MCU_board`, in [Kicad](https://www.kicad.org/) format. Some sensors are connected to the `I2C` port, this is not shown on this schema (it is possible to link multiple sensors on the same `I2C` port).
The microcontroller is programmed in C++, using the Arduino framework (but keep in mind we target an ESP32 microcontroller,whose capabilities are quite different from the ATmega328P used on Arduino Uno boards).
The web server is implemented using the [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer) library. While the ESP32 hosts the entirety of the web app, most of it are just static files (a single HTML file, which links to CSS and javascript resources). The dynamic part is very simple and consists of a few web services used to retrieve data in JSON format.
The web application consists of several files in the `WebApp/src` folder, which are packaged to three files which are generated in the `WebApp/www` folder using [webpack](https://webpack.js.org/).
Webpack is based on `node.js`, so the first step is to [install node.js](https://nodejs.org/en/) (you should select the "LTS" latest version).
Once `node.js` is installed, go in folder `vehicle-monitor/WebApp` and run the command `npm install`. This should download all the dependencies needed to build the web app. You need to do this only once.
Then execute `npm run build` to build the web app. This should generate new files in `vehicle-monitor/WebApp/www`. If you want to work on the code, you can also use `npm run dev` which will generate the files, and then will keep listening for code changes. Each time you save a source file, it will automatically rebuild.
Now the web app has been built, you can open `vehicle-monitor/WebApp/www/index.html` with you preferred web browser, and this should display the user interface in `test mode`. In this mode, the user interface will display fake data, since it is not connected to any real device and can't collect data from real sensors.
This project has been developped using [PlatformIO](https://platformio.org/) to compile the code. It may or may not be possible to build it in the Arduino IDE, this has not been tested. The first step is to install PlatformIO. You have several choices to use PlatfomIO, ranging from command line to various IDE integrations. The command line interface will be described here for simplicity, but you should consider using an IDE if you want to work on the code. Here are the instructions to [install PlatformIO for command line usage](https://docs.platformio.org/en/latest/core/installation.html).
Once installed, go in folder `vehicle-monitor/ESP32` and run the command `pio run`. This should compile the program. However, it should complain that the file `vehicle-monitor/ESP32/src/wifi-credentials.h` is missing. You have to copy the existing file `wifi-credentials.h.template` and rename it to `wifi-credentials.h`, and modify its contents to configure your wifi network (details are documented in the file itself). Once this is done, execute `pio run` again, and if everything goes smoothly, this time it should work.
You can upload to the ESP32 chip with the command `pio run -t upload`. Please refer to the PlatformIO documentation to learn how to configure the connection to your ESP32.
You will also need to upload some files to the ESP32 file system (SPIFFS). These files are stored in `vehicle-monitor/ESP32/data`, and the subfolder `www` is actually a symlink to the web app you built in the previous section. To upload the files, run `pio run -t uploadfs`. Again, if needed, refer to the PlatformIO documentation for details.
# Using Eclipse as IDE
The repository contains a `.metadata` folder, `.project` files, and a `.cproject` file for the CDT plugin. It's not perfect but brings some autocompletion and error linting. On Windows, you will need to add a `HOME` environment variable pointing to `C:\Users\your_user_name` for include files to be correctly found by CDT.
