Live datagrafieken op Arduino Mega: TFT LCD historie met DHT11-sensor

Onderdelen en benodigdheden

Apps en online diensten

• Arduino Web Editor

Over dit project

Overzicht

Heb je ooit je data professioneel willen grafisch weergeven op een TFT LCD? Het probleem is dat het maken van een grafiek lastig is door alle berekeningen.

Dit project neemt al die stress van je schouders en laat je je eigen gepersonaliseerde historiegrafiek maken in seconden. Je hoeft slechts 5 variabelen aan te passen.

Video

Afbeelding

Functionaliteit

Dit project maakt grafieken makkelijk en leuk voor iedereen. Alle zware berekeningen zijn al gedaan; de gebruiker past slechts 2 variabelen aan en kiest de kleur. Hier zijn voorbeelden van de veelzijdigheid:

De grafiek plott de temperatuur live, met intervallen van 6 seconden. De waarde wordt weergegeven door een punt, verbonden met lijnen. De verstreken seconden staan op de x-as, de waardenbereik op de y-as.

De Arduino Mega leest de DHT11-sensor en slaat de temperatuur op in een variabele, die vervolgens op de aangepaste grafiek wordt getoond. Hieronder een diagram van de functionaliteit:

Hier is een afbeelding van de code-overzicht:

• Read Temperature leest de temperatuur van de sensor
• Process Data verwerkt de sensorwaarde en map deze op de grafiek
• Graph Data toont de gemapte waarden op de grafiek

Je hoeft alleen een basiskennis te hebben van hoe dingen op een TFT LCD gepositioneerd worden; dit wordt hieronder uitgelegd.

Ik noem het hele LCD het canvas, waar alles getekend wordt. Alle TFT LCD-bibliotheken werken vergelijkbaar, dus de functies in deze code werken ook met andere bibliotheken. Hieronder een schets van een rechthoek op een TFT LCD:

In deze schets wordt een rechthoek getekend. De regel voor het tekenen is:

tft.fillRect(originX, originY, sizeX, sizeY, Colour);

• originX (z in diagram): afstand vanaf rechterkant scherm naar vorm
• originY (x in schets): afstand vanaf bovenkant scherm naar vorm
• sizeX: grootte op x-as (lengte)
• sizeY: grootte op y-as (hoogte)

Voordelen

De gebruiker van dit project profiteert in:

• Sensordata grafisch weergeven op een TFT LCD
• Dit in seconden realiseren

Het project bouwen

Stap 1: Benodigde apparatuur

Dit project gebruikt een DHT11-sensor, maar elke sensor kan worden gebruikt. Het wijzigen van de sensor wordt later uitgelegd.

• 1× Arduino Mega
• 1× Elegoo 2.8" TFT LCD
• 1× DHT11-sensor
• 1× Breadboard
• Jumper-draden

Stap 2: De schakeling aansluiten

Hier is het schema; sluit de DHT11 aan op de Arduino Mega en je kunt beginnen.

Stap 3: De code begrijpen

Er zijn 3 hoofdonderdelen in de code:

• Grafiek instellen
• Temperatuur lezen
• Grafiek tekenen

Grafiek instellen

// Teken titel
tft.setCursor(10, 10);
tft.setTextColor(BLUE);
tft.setTextSize(4);
tft.println(graphName);

// Teken outline
tft.drawLine(originX, originY, (originX + sizeX), originY, graphColor);
tft.drawLine(originX, originY, originX, (originY - sizeY), graphColor);

// Teken markers
for(int i = 0; i < numberOfMarks; i++) {
  tft.drawLine(mark[i], originY, mark[i], minorSizeY, graphColor);
}

// Teken getallen (y-as labels)
for(int i = 0; i < 6; i++) {
  tft.drawLine(originX, (originY - number[i]), minorSizeX, (originY - number[i]), graphColor);
}

// Teken waarden
for(int i = 0; i < 6; i++) {
  tft.setCursor((minorSizeX - 30), (number[i] + numberSize));
  tft.setTextColor(graphColor);
  tft.setTextSize(1);
  tft.println(val[i]);
}

Deze code tekent de grafiekoutline: x- en y-as, markers en y-as labels met waarden.

Temperatuur lezen

chk = DHT.read11(22);
temp = (DHT.temperature);

Deze regel leest de temperatuur van de DHT11 en slaat deze op in een variabele.

Grafiek tekenen

if(blockPos < 8) {
  // Print tijd
  tft.setCursor((mark[valuePos] - 5), (originY + 16));
  tft.setTextColor(graphColor, WHITE);
  tft.setTextSize(1);
  tft.println(timeBlock[valuePos]);
  // Map waarde
  locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
  // Teken punt
  tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
  // Verbind met vorig punt
  if(valuePos != 0) {
    tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor);
  }
  blockPos++;
} else {
  // Wis canvas
  tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE);
  // Map huidige waarde
  locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
  // Teken huidige punt
  tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
  // Teken alle punten
  for(int i = 0; i < 8; i++) {
    tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor);
  }
  // Teken alle lijnen
  for(int i = 0; i < 7; i++) {
    tft.drawLine(mark[blockPos - (i + 1)], locationBlock[valuePos - i], mark[blockPos - (i + 2)], locationBlock[valuePos - (i + 1)], lineColor);
  }
  // Update tijdlabels
  for(int i = 0; i <= 8; i++) {
    tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16));
    tft.setTextColor(graphColor, WHITE);
    tft.setTextSize(1);
    tft.println(timeBlock[valuePos - i]);
  }
}
valuePos++;

Deze code tekent de punten en verbindt ze met lijnen. Als het canvas vol is, schuift de grafiek: de oudste waarde verdwijnt en de rest verschuift voor de nieuwe waarde.

De grafiek personaliseren

De grafiek is 100% aanpasbaar: grootte, positie, kleur, en je kunt elke sensordata weergeven. Dit zijn de variabelen die je aanpast:

bool proDebug = 0;
uint16_t graphColor = BLUE;
uint16_t pointColor = BLACK;
uint16_t lineColor = GREEN;
String graphName = "Time Graph";
int graphRange = 50;
int markSize = 3;

• proDebug: debug-modus (0=uit, 1=aan). Print temperatuur naar Seriële Monitor. Let op: Seriële Monitor moet open zijn als ingeschakeld.
• graphColor: kleur van grafiek, assen en labels.
• pointColor: kleur van de punten op de grafiek.
• lineColor: kleur van de lijnen tussen punten.
• graphRange: cruciaal – maximale waarde die gegrafiseerd kan worden. Voor temperatuur (max ~50°C) zet je 50. Voor analoge input (0-1023) zet je 1024.
• markSize: grootte van het punt dat de sensorwaarde markeert (lengte van het vierkantje).

Dat is alles waar je je om hoeft te maken; de overige variabelen worden automatisch berekend.

De waarde wijzigen (andere sensor)

Temperatuur in je kamer is leuk, maar nog beter is elke sensordata weer te geven. Door een paar regels code aan te passen kun je van bodemvocht tot lichtintensiteit alles grafisch maken. Hier is een handleiding:

Verder experimenteren

Experimenteer met originX, originY, sizeX, sizeY voor andere grootte/positie. Er is een header-bestand bij de hooftsketch met kleurcodes. Probeer kleuren van grafiek en balken te wijzigen. Je gepersonaliseerde grafiek is klaar!

Bibliotheken

• Elegoo Libraries – Copyright (c) 2012 Adafruit Industries onder BSD-licentie.
• DHT – Auteur Rob Tillaart, publiek domein.

Achtergrond

Ik publiceerde recent een project dat 1-4 waarden op een staafdiagram grafisch maakt. Ik besloot een andere template te publiceren voor historiegrafieken. Er zijn geen templates voor staafdiagrammen zonder verwarrende lijnen, dus ik deed de wiskunde opnieuw en publiceerde een simpel project voor live historiegrafieken.