Lesson objectives

The goal of this lesson is to improve the visual presentation on the TFT screen by adding units (such as °C for temperature and % for humidity) and improving the overall display. You will learn how to increase the readability and aesthetics of the data display using formatting techniques that make the data clearer and more engaging.

Introduction

A well-designed screen makes sensor data easier to interpret and gives your project a more professional appearance. This is especially important in IoT applications, where clear data visualization can be essential for users interacting with the system.

Key aspects of an improved display

When improving display output, there are several important aspects to consider:

1. Units of measurement: Always include units next to your values to make the data easier to understand. In our case, these will be degrees Celsius (°C) for temperature and percent (%) for humidity.

2. Font size & style: Choosing the right font size and style is crucial for readability. Larger text for important values and smaller text for labels help highlight key data.

3. Layout & spacing: Proper placement and spacing between data elements on the screen prevent clutter and ensure that the display looks neat and organized.

4. Color choices: Using contrasting colors for text and background improves visibility and reduces eye strain.
   

List of required components:

	AHT10 high-precision temperature and humidity sensor
	TTGO T-Display ESP32 16MB with WiFi, Bluetooth and 1.1" color LCD screen
	Dupont cables, 40 pcs

Improving visual presentation with colors and styles

Using colors to distinguish labels from data values can significantly improve the aesthetics of the screen. We have already implemented this by using different colors for temperature and humidity data. This can be extended further by adding visual elements such as borders, text background colors, or graphical elements like lines and boxes.

Here is an example where we add more colors and graphical elements:

void loop() {
  sensors_event_t humidityEvent, temperatureEvent;
  aht.getEvent(&humidityEvent, &temperatureEvent);
  float temperature = temperatureEvent.temperature;
  float humidity = humidityEvent.relative_humidity;

  // Ryd skærmen
  tft.fillScreen(TFT_BLACK);

  // Vis temperaturdata med en baggrundsfarve
  // Cyan afrundet rektangel
  tft.fillRoundRect(5, 15, 130, 100, 5, TFT_CYAN);
  tft.setTextColor(TFT_BLACK);
  tft.drawString("Temp:", 10, 25, 2);
  tft.drawString(String(temperature, 1), 10, 55, 4);
  tft.drawString("C", 110, 65, 2);

  // Vis fugtighedsdata med en baggrundsfarve
  // Gult afrundet rektangel
  tft.fillRoundRect(5, 130, 130, 100, 5, TFT_YELLOW);
  tft.setTextColor(TFT_BLACK);
  tft.drawString("Humidity:", 15, 135, 2);
  tft.drawString(String(humidity, 1), 10, 165, 4);
  tft.drawString("%", 110, 175, 2);

  delay(5000); // Opdater hvert 5. sekund
}

Explanation:

• Rounded rectangles: We have added background colors behind the temperature and humidity data using tft.fillRoundRect(). The rounded corners give the screen a more modern appearance.

• Text color: The text color is set to black, creating strong contrast against the colored backgrounds (cyan and yellow) and improving visibility.

• Spacing: Labels and data values are positioned farther apart vertically, making the screen less cluttered and easier to read.

This creates a more polished and visually appealing display where key data is clearly divided into its respective sections.

Conclusion

In this lesson, we focused on improving display output by adding units, adjusting font sizes, improving the layout, and introducing colors and styles. These improvements help create a more readable and professional-looking screen that gives users greater clarity when interacting with the system.

By the end of this lesson, you should now have a fully improved data display on the TFT screen, making the project more functional and aesthetically pleasing.

In upcoming lessons, we will integrate additional features such as web server functionality and WiFi connectivity, expanding our IoT device's capabilities even further.

Feel free to experiment with additional design elements and find new ways to improve your screen!

About the measurements: The station in this series measures temperature and relative humidity using the AHT10. These are indoor climate readings, not direct measurements of CO2, VOCs, or particles. The series name “air quality monitoring” should be understood with this limitation.