Lektionsmål

Målet med den här lektionen är att förbättra den visuella presentationen på TFT-skärmen genom att lägga till enheter (som °C för temperatur och % för luftfuktighet) och förbättra visningen som helhet. Du lär dig hur du förbättrar datavisningens läsbarhet och utseende med formateringstekniker som gör informationen tydligare och mer engagerande.

Introduktion

En väl utformad skärm gör det enklare att tolka sensordata och ger ditt projekt ett mer professionellt utseende. Det är särskilt viktigt i IoT-tillämpningar, där tydlig datavisualisering kan vara avgörande för användare som arbetar med systemet.

Viktiga aspekter av en förbättrad skärmvisning

När du förbättrar skärmens visning finns flera viktiga aspekter att tänka på:

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

2. Textstorlek & stil: Rätt textstorlek 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 centrala data.

3. Layout & avstånd: Korrekt placering och avstånd mellan skärmens dataelement förhindrar ett rörigt intryck och gör att skärmen ser prydlig och organiserad ut.

4. Färgval: Kontrasterande färger för text och bakgrund förbättrar synligheten och minskar ansträngningen för ögonen.
   

Lista över nödvändiga komponenter:

	AHT10 temperatur- och luftfuktighetsmätare med hög precision
	TTGO T-Display ESP32 16MB med WiFi, Bluetooth och 1.1" LCD-färgskärm
	Dupontkablar, 40 st

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

Att använda färger för att skilja etiketter från datavärden kan förbättra skärmens utseende avsevärt. Vi har redan gjort detta genom att använda olika färger för temperatur- och luftfuktighetsdata. Det kan utvecklas vidare genom att lägga till visuella element som ramar, bakgrundsfärger för text eller grafiska element som linjer och rutor.

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;

  // 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
}

Förklaring:

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

• Textfärg: Textfärgen är svart, vilket ger stark kontrast mot de färgade bakgrunderna (cyan och gult) och förbättrar synligheten.

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

Detta ger en mer genomarbetad och visuellt tilltalande skärm där viktiga data tydligt delas upp i sina respektive avsnitt.

Slutsats

I den här lektionen fokuserade vi på att förbättra skärmens visning genom att lägga till enheter, justera textstorlekar, förbättra layouten och införa färger och stilar. Förbättringarna hjälper till att skapa en mer lättläst och professionell skärm som ger användarna större tydlighet när de använder systemet.

I slutet av lektionen bör du nu ha en fullt förbättrad datavisning på TFT-skärmen, vilket gör projektet mer funktionellt och estetiskt tilltalande.

I kommande lektioner integrerar vi fler funktioner som webbserverfunktionalitet och WiFi-anslutning, vilket utökar IoT-enhetens möjligheter ytterligare.

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

Om mätningarna: Stationen i den här serien mäter temperatur och relativ luftfuktighet med AHT10. Det är mätningar av inomhusklimatet, inte direkta mätningar av CO2, VOC eller partiklar. Seriens benämning ”luftkvalitetsövervakning” ska förstås med denna begränsning.