Lektionsmål

Målet med denna lektion är att förbättra den visuella presentationen på TFT-skärmen genom att lägga till enheter (såsom °C för temperatur och % för luftfuktighet) och förbättra den övergripande visningen. Du kommer att lära dig hur du ökar läsbarheten och estetiken hos datavisningen med hjälp av formateringstekniker som gör data mer tydliga och engagerande.

Introduktion

En välutformad skärm gör det lättare att tolka sensordata och ger ditt projekt ett mer professionellt utseende. Detta är särskilt viktigt i IoT-applikationer, där tydlig datavisualisering kan vara avgörande för användare som interagerar med systemet.

Nyckelaspekter för en förbättrad display

När du förbättrar displayutgången finns det flera viktiga aspekter att överväga:

1. Måttenheter: Inkludera alltid enheter bredvid dina värden för att göra data lättare att förstå. I vårt fall blir det grader Celsius (°C) för temperatur och procent (%) för luftfuktighet.

2. Teckenstorlek och stil: Valet av rätt teckenstorlek och stil är avgörande för läsbarheten. Större text för viktiga värden och mindre text för etiketter hjälper till att framhäva nyckeldata.

3. Layout och avstånd: Korrekt placering och avstånd mellan dataelementen på skärmen förhindrar röran och säkerställer att displayen ser snygg och organiserad ut.

4. Färgval: Användning av kontrasterande färger för text och bakgrund förbättrar synligheten och minskar ögonbelastningen.
   

Lista över nödvändiga komponenter:

	AHT10 Hög precision temperatur- och fuktighetssensor
	TTGO T-Display ESP32 16MB med WiFi, Bluetooth och 1.1" färg LCD-skärm
	Dupont-kablar 40 st

Förbättring av den visuella presentationen med färger och stilar

Användningen av färger för att skilja mellan etiketter och datavärden kan markant förbättra skärmens estetik. Vi har redan implementerat detta genom att använda olika färger för temperatur- och fuktighetsdata. Detta kan ytterligare utökas genom att lägga till extra visuella element såsom ramar, bakgrundsfärger för text eller grafiska element som linjer och boxar.

Här är ett exempel där vi lägger till fler färger och grafiska element:

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

  // Rensa skärmen
  tft.fillScreen(TFT_BLACK);

  // Visa temperaturdata med en bakgrundsfärg
  // Cyan avrundad 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);

  // Visa fuktighetsdata med en bakgrundsfärg
  // Gul avrundad 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); // Uppdatera var 5:e sekund
}

Förklaring:

• Avrundade rektanglar: Vi har lagt till bakgrundsfärger bakom temperatur- och fuktighetsdata med hjälp av tft.fillRoundRect(). De avrundade hörnen ger skärmen ett modernare utseende.

• Textfärg: Textfärgen är inställd på svart, vilket skapar en stark kontrast mot de färgade bakgrunderna (cyan och gul) och förbättrar synligheten.

• Avstånd: Etiketter och datavärden är placerade längre ifrån varandra vertikalt, vilket gör skärmen mindre rörig och lättare att läsa.

Detta skapar en mer polerad och visuellt tilltalande display, där nyckeldata tydligt är uppdelade i sina respektive sektioner.

Slutsats

I denna lektion fokuserade vi på att förbättra skärmutgången genom att lägga till enheter, justera teckenstorlekar, förbättra layouten och introducera färger och stilar. Dessa förbättringar hjälper till att skapa en mer läsbar och professionellt utseende skärm som ger användarna större klarhet när de interagerar med systemet.

Vid slutet av denna lektion bör du nu ha en helt förbättrad datadisplay på TFT-skärmen, vilket gör projektet mer funktionellt och estetiskt tilltalande.

I de kommande lektionerna kommer vi att integrera ytterligare funktioner som webbserverfunktionalitet och WiFi-anslutning, vilket utökar vår IoT-enhets kapacitet ännu mer.

Experimentera gärna med ytterligare designelement och hitta nya sätt att förbättra din skärm!