vehicle-monitor is a monitoring system for electric vehicles (log various sensors, such as consumed power, solar production, speed, slope, etc.)

Architecture

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 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.

ESP32 (hardware)

The main electronic circuit, showing how sensors are connected to the ESP32 is described in folder schema/MCU_board, in Kicad 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).

ESP32 (software)

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 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.

Web app

The user interface is implemented as a single page application, using the mithril.js framework.

Building

Web app

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.

Webpack is based on node.js, so the first step is to install node.js (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.

ESP32

This project has been developped using PlatformIO 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.

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 .project files, and a .cproject file. To use these, install Eclipse and the CDT plugin, then create a new workspace in the root folder of the project, and finally import projects from the ESP32 and WebApp folders into your workspace. This setup is not perfect, can probably be improved, but should bring some autocompletion and error linting. Eclipse should prompt you to install more plugins when opening some files, depending on the file extension. On Windows, you will also need to add a HOME environment variable pointing to C:\Users\your_user_name for include files to be correctly found by CDT.