Forbedring af Displayoutput - Serie om Luftkvalitets monitoreringsstation, Afsnit 13

Lektionsmål

Målet med denne lektion er at forbedre den visuelle præsentation på TFT-skærmen ved at tilføje enheder (såsom °C for temperatur og % for luftfugtighed) og forbedre den overordnede visning. Du vil lære, hvordan du øger læsbarheden og æstetikken af datavisningen ved hjælp af formateringsteknikker, der gør dataene mere klare og engagerende.

Introduktion

En veldesignet skærm gør det lettere at fortolke sensordata og giver dit projekt et mere professionelt udseende. Dette er særligt vigtigt i IoT-applikationer, hvor tydelig datavisualisering kan være afgørende for brugere, der interagerer med systemet.

Nøgleaspekter ved et Forbedret Display

Når du forbedrer displayoutputtet, er der flere vigtige aspekter at overveje:

1. Måleenheder: Medtag altid enheder ved siden af dine værdier for at gøre dataene lettere at forstå. I vores tilfælde vil det være grader Celsius (°C) for temperatur og procent (%) for luftfugtighed.

2. Skriftstørrelse & Stil: Valg af den rette skriftstørrelse og stil er afgørende for læsbarheden. Større tekst til vigtige værdier og mindre tekst til etiketter hjælper med at fremhæve nøgledata.

3. Layout & Afstand: Korrekt placering og afstand mellem dataelementerne på skærmen forhindrer rod og sikrer, at displayet ser pænt og organiseret ud.

4. Farvevalg: Brug af kontrasterende farver til tekst og baggrund forbedrer synligheden og reducerer øjenbelastning.
   

Liste over nødvendige komponenter:

	AHT10 Høj præcisions temperatur og fugtighedsmåler
	TTGO T-Display ESP32 16MB med WiFi, Bluetooth og 1.1" farve LCD skærm
	Dupont kabler 40 stk

Forbedring af den Visuelle Præsentation med Farver og Stilarter

Brugen af farver til at skelne mellem etiketter og dataværdier kan markant forbedre skærmens æstetik. Vi har allerede implementeret dette ved at bruge forskellige farver til temperatur- og fugtighedsdata. Dette kan yderligere udvides ved at tilføje ekstra visuelle elementer såsom rammer, baggrundsfarver til tekst eller grafiske elementer som linjer og bokse.

Her er et eksempel, hvor vi tilføjer flere farver og grafiske elementer:

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
}

Forklaring:

• Afrundede rektangler: Vi har tilføjet baggrundsfarver bag temperatur- og fugtighedsdata ved hjælp af tft.fillRoundRect(). De afrundede hjørner giver skærmen et mere moderne udseende.

• Tekstfarve: Tekstfarven er sat til sort, hvilket skaber en stærk kontrast mod de farvede baggrunde (cyan og gul) og forbedrer synligheden.

• Afstand: Etiketter og dataværdier er placeret længere fra hinanden vertikalt, hvilket gør skærmen mindre rodet og lettere at aflæse.

Dette skaber et mere poleret og visuelt tiltalende display, hvor nøgledata tydeligt er opdelt i deres respektive sektioner.

Konklusion

I denne lektion fokuserede vi på at forbedre skærmoutputtet ved at tilføje enheder, justere skriftstørrelser, forbedre layoutet og introducere farver og stilarter. Disse forbedringer hjælper med at skabe en mere læsbar og professionelt udseende skærm, der giver brugerne større klarhed, når de interagerer med systemet.

Ved afslutningen af denne lektion bør du nu have et fuldt forbedret datadisplay på TFT-skærmen, hvilket gør projektet mere funktionelt og æstetisk tiltalende.

I de kommende lektioner vil vi integrere yderligere funktioner som webserver-funktionalitet og WiFi-forbindelse, hvilket udvider vores IoT-enheds kapaciteter endnu mere.

Eksperimentér gerne med yderligere designelementer og find nye måder at forbedre din skærm på!