TFT-Diagramme:Live-Verlaufsdiagramme

Dieser Teil des Codes zeichnet den Umriss des Diagramms, er zeichnet die x- und y-Achsenlinien, er zeichnet auch die Markierungen und beschriftet die y-Achse mit Werten.

• Lesen Temperatur

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

Diese kurze Codezeile liest die Temperatur vom DHT 11-Sensor und speichert sie dann in einer Variablen.

• Zeichnen Grafik

if(blockPos <8) {// die Zeit ausgeben tft.setCursor((mark[valuePos] - 5), (originY + 16)); tft.setTextColor(graphColor, WEISS); tft.setTextSize(1); tft.println(timeBlock[valuePos]); // den Wert zuordnen locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // Punkt zeichnen tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // Versuch eine Verbindung zum vorherigen Punkt herzustellen if(valuePos !=0) { tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor); } blockPos++; } else { // Leere die Leinwand des Graphen tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE); // den Wert zuordnen - aktueller Punkt locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // Punkt zeichnen - aktueller Punkt tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // alle Punkte zeichnen for(int i =0; i <8; i++) { tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor); } // alle Linien zeichnen 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); } // Zeitangaben ändern for(int i =0; i <=8; i++) { tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16)); tft.setTextColor(graphColor, WEISS); tft.setTextSize(1); tft.println(timeBlock[valuePos - i]); } } valuePos++; 

Dieser lange Teil des Codes zeichnet die Punkte des Diagramms an ihren Werten und verbindet sie dann durch Linien. Der Code überprüft, ob die Zeichenfläche des Diagramms gefüllt ist. Wenn dies der Fall ist, wird der erste Wert des Diagramms ausgegeben und die anderen nach oben verschieben, um Platz für das Einfügen des neuen Werts zu schaffen. Wenn noch Platz übrig ist, fügt das Gerät in Intervallen Werte hinzu.

Diagramm personalisieren

Das Tolle an diesem Diagramm ist, dass es zu 100% editierbar ist, sodass der Benutzer die Größe des Diagramms, seine Position und seine Farbe bearbeiten kann. Der Benutzer kann dank seiner Flexibilität auch alle Daten auf dem Diagramm anzeigen. Sind alle Variablen, die Sie interessieren sollten.

bool proDebug =0; uint16_t graphColor =BLAU; uint16_t pointColor =SCHWARZ; uint16_t lineColor =GRÜN; String graphName ="Zeitdiagramm"; int graphRange =50; int markSize =3; 

• proDebug ist das in das Projekt integrierte Debugging-Dienstprogramm, es ist standardmäßig auf 0 gesetzt. Wenn es auf 1/true gesetzt ist, wird die aktuelle Temperatur auf dem Serial Monitor ausgegeben. Dies ist ein Debugging-Dienstprogramm. Beachten Sie, dass der Serial Monitor, wenn er aktiviert ist, muss geöffnet sein, damit der Code ausgeführt werden kann.

• graphColor stellt die Farbe des Diagramms ein, die x- und y-Linien und ihre Beschriftungen werden auf diese Farbe gesetzt.

• pointColor stellt die Farbe des Punktes dar, der den Wert im Diagramm darstellt.

• Linienfarbe stellt die Farbe der Linie, die die Punkte im Diagramm verbindet, auf die ausgewählte Farbe ein.

• graphRange ist das Rückgrat des Diagramms, beachten Sie, dass es wirklich wichtig ist, dass es richtig eingestellt ist, es stellt den maximalen Wert dar, der grafisch dargestellt werden kann. Ich verwende einen Temperatursensor, ich würde nicht erwarten, dass der Wert 50 ° C überschreitet, also stelle ich die Wert auf 50, wenn Sie einen analogen Roheingang grafisch darstellen möchten, können Sie den graphRange auf 1024 setzen, den maximalen Wert, den ein analoger Pin anzeigen kann.

• markSize stellt die Größe des Punktes dar, der den Wert des Sensors im Diagramm kennzeichnet, der Wert stellt die Länge des Quadrats dar.

Und das ist alles, worüber Sie sich Gedanken machen müssen, die restlichen Variablen werden automatisch vom Arduino ermittelt.

Ändern die Wert

Es ist schön, die Temperatur in Ihrem Raum grafisch darzustellen, aber es ist noch besser, wenn Sie alle Sensordaten in der Grafik anzeigen könnten, und Sie können durch einfaches Bearbeiten einiger Codezeilen alle Daten von der Bodenfeuchtigkeit bis zum Licht grafisch darstellen Intensität. Hier ist eine Anleitung dazu.

Geht Weiter

Sie können mit dem Projekt weiter experimentieren und versuchen, die Konstanten originX, originY, sizeX und sizeY zu bearbeiten, um Ihrem Diagramm eine andere Größe und Position auf dem Bildschirm zu geben. Der Hauptskizze ist eine Header-Datei beigefügt, die die Farbcodes einiger Farben enthält. Versuchen Sie, die Farbe des Diagramms und der Balken zu ändern. Und das war's, Ihr personalisiertes Diagramm ist fertig.

Bibliotheken

• Elegoo-Bibliotheken - Copyright (c) 2012 Adafruit Industries unter der BSD-Lizenz.

• DHT - Autor Rob Tillaart Diese Bibliothek ist gemeinfrei

Hintergrund

Ich habe vor kurzem ein Projekt veröffentlicht, das 1, 2, 3 oder 4 Werte in einem Balkendiagramm grafisch darstellt. Ich habe mich entschieden, eine weitere Vorlage für die grafische Darstellung zu veröffentlichen. Es gibt keine Vorlagen für Balkendiagramme, die nicht überall Linien haben, die zu verwirren drohen, also habe ich beschlossen, die Berechnungen noch einmal durchzuführen und ein einfaches Projekt zu veröffentlichen, das es jedem ermöglicht, seine Daten live in einem Verlaufsdiagramm darzustellen.