Bluetooth System Monitor Using ESP32 + TFT Screen

by DustinWatts in Circuits > Microcontrollers

25631 Views, 266 Favorites, 0 Comments

Bluetooth System Monitor Using ESP32 + TFT Screen

main_image.jpg
graph.jpg

System information monitors are popular. At one glance you can see all important information about your computer. CPU temperature, fan speeds, memory usage, etc. What if I told you there is a chance you already have everything you need to make one yourself? And even make it send the data over Bluetooth, so you don't need a long cable connected to your computer. Or use it with your laptop but don't have to take it everywhere with you.

In this Instructable you will learn how to wire up an ILI9488 screen to an ESP32. Upload the code, and run a host script on your computer to send the data. In the end you will have a handy little system information monitor sitting on your desk.

Supplies

  • A 38-pin ESP32-WROOM-32 Development Board AliExpress / Amazon
  • An ILI9488 TFT screen XPT2046 touch controller AliExpress / Amazon
  • An optional ESP32 + TFT Combiner PCB

Tools:

  • A soldering iron and solder.
  • Wire strippers.
  • Flush cutter.

Even better than buying the loose parts and have to build it, is using the ESP32 TouchDown. Which I designed and sell. It is an ESP32 with an capacitive touch screen. It has USB-C and battery management for fully wireless operation. It comes with an SD Card slot and a passive buzzer. You can buy it here.

*Full disclosure: these are affiliate links

Watch the Video

Build your own Bluetooth System Monitor

To give you an overview of the project you can watch the video of this project.

Done watching? Let's build it!

Get the Parts You'll Need

ts.png
hastouch.png
esp32_ali.png

If you do not already have an ESP32 and an ILI9488 TFT + Touchscreen lying around. You can find them pretty cheap on AliExpress.

I used these parts:

- A 38-pin ESP32-WROOM-32D Development Board from AliExpress or Amazon*

- An ILI9488 TFT screen with XPT2046 touch controller from AliExpress of Amazon*

- An optional ESP32 + TFT Combiner PCB (Order from PCBWay)

Not all ILI9488 TFT screens are created equally. It is important to make sure you have selected a screen with touch!

*Full disclosure: these are affiliate links

Hardware: Connect the TFT Screen to the ESP32

connecting_ili9488.png
ESP_TFT_WIRING.png

The wiring may seem a bit daunting at first. But don't let all the wires scare you. It is pretty straight forward. The images above will help you when you wire your TFT + Touchscreen to your ESP32.

This is also decision making time. There are few options when it comes to connecting the two together. You can use a breadboard, you can use prototyping board or you can order a PCB specifically to connect the ILI9488 + touch to the 38-pin ESP32 DevKitC. I'd like to point out that the breadboard option is only an option for testing your connections and screen. It is not very practical to have on your desk and loose connections can cause problems.

It is important to know that these screens run at 3.3V. Connecting them to 5V can cause damage!

These are the connections you need to make from the ESP32 -> ILI9488:

3.3V -> VCC

GND -> GND

GPIO15 -> CS

GPIO4 -> RESET

GPIO2 - > DC/RS

GPIO23 -> SDI(MOSI) and T_DIN

GPIO18 -> SCK and T_CLK

GPIO32 -> LED

GPIO21 -> T_CS

GPIO19 -> T_DO

GPIO27 -> T_IRQ

SDO(MISO) is not used for the TFT screen, so you are left with one unconnected pin on the TFT module. That's ok!

If you like to order a PCB designed to make it easy to connect the ESP32 to the TFT screen, you can download the gerber files here: https://github.com/DustinWatts/ESP32_TFT_Combiner... You can also order them directly from PCBWay where I had mine made: https://www.pcbway.com/project/shareproject/ESP32_TFT_Combiner_V1.html

Software: Installing Arduino IDE Libraries

espcore.png
boardsmanager.png

Installing the Arduino IDE ESP32 core.

Go to Arduino -> Preferences and click on the icon behind the input field for Additional Board Managers URLs. Next, copy and paste the following link (without quotes) in the popup box: "https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json"

Click OK and OK. Next, go to Tools -> Board: -> Board Manager and search for "ESP32". Install the latest version and click "Close".

Installing the necessary libraries.
This project uses a few libraries. Two of these libraries can be installed though the the Library Manager.

Go to Sketch -> Include Library -> Manage Libraries and search for, and install the following libraries:

  • Adafruit-GFX-Library
  • TFT_eSPI

If you are using the ESP32 TouchDown (esp32touchdown.com) then you will also need the Capacitive Touch library:

Go to "https://github.com/DustinWatts/FT6236", click on "Code" and "Download .ZIP".

In the Arduino IDE, go to Sketch -> Include Library -> Add .ZIP library

TFT Screen Configuration

ftd_define_driver.png
ftd_define_bl.png
ftd_define_esp.png

Before compiling and uploading the Bluetooth-System-Monitor.ino sketch, you will have to edit the User_Setup.h file included with the TFT_eSPI library.

This can be found in your Arduino sketchbook folder under "libraries". If you have not renamed the TFT_eSPI library folder, the file User_Setup.h can be found in TFT_eSPI-master.

Here you will have to uncomment the lines that apply to your hardware configuration. To make things easier, you can find the user_setup.h file you will need for this project in the downloaded repository in the "user_setup.h Examples" folder. Copy the file "ESP32_Dev_Kit_V1_ILI9488_Resistive.h" to "/TFT_eSPI-master/". Rename the "User_Setup.h" that is already there to "User_Setup.old" (this way you keep the original in case something goes wrong). Now rename "ESP32_Dev_Kit_V1_ILI9488_Resistive.h" to "User_Setup.h". (<- CASE sensitive!) Save and close the file.

If you are using the ESP32 TouchDown, the same config applies!

Download the Arduino Sketch and Upload to the ESP32

ESP32_Partition.png
ESP32_sketch_data.png
Warning_levels.png
touch_select.png

ESP Sketch Data Upload Tool

This project uses the SPIFFS (ESP32 flash memory) to store images used as background. You'll need to upload these to the ESP32 before you upload the sketch to the ESP32. For this you'll need the ESP32 Sketch Data Upload tool.

You can download this from Github: "https://github.com/me-no-dev/arduino-esp32fs-plugin". Follow the instructions on the Github to install the tool:

  • Download the tool archive from releases page.
  • In your Arduino sketchbook directory, create tools directory if it doesn't exist yet.
  • Unpack the tool into tools directory (the path will look like /Arduino/tools/ESP32FS/tool/esp32fs.jar).
  • Restart Arduino IDE.

(On MacOS create the tools directory in ~/Documents/Arduino/ and unpack the files there).

Upload the data folder

Before you upload the data folder to the ESP32, you'll first have to select the right partitioning scheme.

  1. Go to Tools -> Board and select ESP32 Dev Module.
  2. Still under Tools, select Partition Scheme. -> "Default 4MB with spiffs".
  3. Plug in the ESP32.
  4. Click on Tools and select "ESP Sketch Data Upload".

Tip!: If the data upload fails, chances are you have the serial monitor open. If this happens, close the serial monitor and try again.

Bluetooth-System-Monitor.ino

On Github you can find the full source code for this project. Go to the Bluetooth-System-Monitor Github repository and click "Code" and "Download .ZIP": https://github.com/DustinWatts/Bluetooth-System-M...

Extract and rename the extracted folder to "Bluetooth-System-Monitor". This is so the Arduino IDE does not complain that the folder and the sketch do not have the same name. If this happens, you will get a popup asking you if it should move the sketch. The dangerous thing here is, that it will only move the sketch and not the Data folder. This will result in errors when uploading!

Open the Bluetooth-System-Monitor.ino sketch in the Arduino IDE.

Some settings in the sketch

Firstly, depending on the board you are using (with resistive touch, capacitive touch, or no touch) you will have to uncomment the correct one. For example, if you are using the ESP32 TouchDown uncomment: "#define ENABLE_CAP_TOUCH". If you are using a DevKitC with separate TFT, uncomment "#define ENABLE_RES_TOUCH".

In the sketch you can set some warning levels. This will make the text under the icons red. Scroll down until you see "// Define warning levels, change this as you like". Here you can set some warning levels.

You can also set the scale of the y-axis of the graphs. This is done under "// The scale of the Y-axis per graph". If these are to big or to small, the data will not be displayed correctly on the graph. You might have to experiment with these.

Upload the sketch to the ESP32

Go ahead and upload the Bluetooth-System-Monitor.ino sketch to the ESP32. The settings under tools besides the Partition Scheme can be left to the default (see image). Go to "Sketch" and select "Upload". This may take a while because it is a large sketch.

And now that is done, let's get our computer to send data to our System Monitor!


Connecting for the First Time

add_windows_bluetooth.png
connect_to_mac.png

Before we can use the Bluetooth System Monitor with our computer, we have to let it know that we have a Serial Bluetooth connection for it. Make sure the ESP32 is powered up.

On Windows:

Right click on the Start menu, click on Settings and then on Devices. Click on "Add Bluetooth or other device". Select "Bluetooth". Wait for it to find "ESP32" or "MyDisplay". Click on it. It should now be connected. After this you can click done.

Open the Device Manager (right click on the Start menu) and click on the arrow next to Ports. There should now be a device called “Standard Serial over Bluetooth link". This is the COM port you will have to use in the next step.

Note: On my setup, two new devices showed up. I used the first of the two. But you might have to experiment with this.

On MacOS:

Open Preferences and click on "Bluetooth". It should already display "ESP32" or "MyDisplay", but you might have to wait until it finishes searching. Select "ESP32" or "MyDisplay" and click "Connect". To see what the actual device name is, you can open a Terminal and type: "ls /dev/tty.*" this will list all serial ports for you.

Python Script Sending Data to the System Monitor

python_windows_changes.png
comport_windows.png
macos_comport.png

I have provided two python scripts, that will send data to your System Monitor. One for Windows and one for MacOS. Both require you to have the latest version of Python installed. If you do not already have that, you can download and install from here: https://www.python.org/downloads/

Windows

For the script to run correctly, you will need to install a few Python Modules. These modules are `psutil`, `pyserial` and `pythonnet`. You can use PIP to install these. Open a command prompt as Administrator, by clicking on the start menu and type "cmd", then right-click on Command Prompt and select "Run as Administrator". Navigate to the folder `Bluetooth-System-Monitor/host_python`, the folder where you downloaded the Sketch. In here install the Python modules needed:

  • `pip install pyserial`
  • `pip install psutil`
  • `pip install pythonnet`

After the modules are installed correctly, open `windows_host.py` in you favorite code editor. I am using VSCode, but SublimeText or another will also work. In here you will have to at least edit one line of code. The line that says `connection = serial.Serial('COM16')`. The image above will give you a clue where to look. This is the COM port the script will send data to. Make sure it is between quotes and you use capital letters. You could change the drive letter to another drive to report it's free space. But this is optional. Save the changes and you are done!

Make sure that where ever you run this script from, the included .dll file is in the same folder. To run this script you need to run it as an Administrator!

MacOS

MacOs is a bit easier then Windows. This is mainly because you do no need to change the COM port, as the name is the same across all Macs. So no need to edit the script, but if you like you can change the HDD which to report the free space of and you can edit the polling time. Another thing is that, on Windows, you will need a .dll to read some info from your computer, but on MacOS, it can all be done with pure Python. The only thing you have to do in this case, is install two modules. Open up a Terminal and navigate to the folder where the Python script is. In there, install:

  • `pip install pyserial`
  • `pip install psutil`

On MacOs you also need to run this script as an Administrator. So use `sudo python macos_host.py` to run.

Making a Case...

thingiverse.png
bottom_screenshot.jpg
top_screenshot.jpg
3d_render.png

This project uses the same screen as another project I made, FreeTouchDeck. You can use the case for that one also for this System Monitor.

This design will fit the screen and ESP32 with or without the combiner PCB. The case is designed to be a press-fit. You could however add a touch of CA glue (crazy glue) to keep the top firmly attached to the bottom. You can find the case on Thingiverse: https://www.thingiverse.com/thing:4661069 I printed it in PLA with a 0.2 mm layer height. The top doesn't need support if you print it face down. The bottom needs some minimal support if you print it with the opening down. If you like to modify the case to your liking, you can find the Fusion 360 files on Github: https://www.thingiverse.com/thing:4661069

By now there are quite a few remixes of my original design on Thingiverse. Check them out here:

https://www.thingiverse.com/search?q=FreeTouchDeck

For the ESP32 TouchDown, you can find the case here:

https://github.com/DustinWatts/esp32-touchdown/tre...

Done! or Get Some Help....

main_image.jpg

If everything went like it should, you now have a handy little system monitor on your desk! Feel free to have a dig around all the code, and make improvements where you see fit. If you like to share it with me and the world, join my Discord, follow me on Twitter and subscribe to my YoutTube channel. Or create a PR on the Github repo.

Troubleshooting

Not using the combiner PCB but using a breadboard can make for bad connections and a screen that doesn't seem to work. So if you seem to have a screen that is not working, double and triple check your connections!

Also if newer versions of the ESP32 core of TFT_eSPI (or any library for that matter) contain changes that need a code change, things might not work. I try to catch these changes and update the code accordingly, but it may not always happen straight away.

If you comment with any complications, please include the following information:

  • Are you using the combiner PCB?
  • Are you using a breadboard?
  • Did you solder the connections using a protoboard or point to point?
  • What version of the ESP32 core are you using?
  • What version of the TFT_eSPI library are you using?
  • Any other libraries or software that might have an effect?

This makes troubleshooting for me much easier, as otherwise I have to ask it first before I can help you :)

Final Note

Thanks for taking the time to read through this pretty long Instructable, it is much appreciated!

----------------------------------

Discord: https://discord.gg/RE3XevS

Twitter: https://twitter.com/DustinWattsNL

YouTube: https://www.youtube.com/dustinwatts

-----------------------------------