TFT-grafieken:live geschiedenisgrafieken

Dit deel van de code tekent de omtrek van de grafiek, het tekent de x- en y-aslijnen, het tekent ook de markeringen en labelt de y-as met waarden.

• Lees Temperatuur

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

Deze korte coderegel leest de temperatuur van de DHT 11-sensor en slaat deze vervolgens op in een variabele.

• Tekenen Grafiek

if(blockPos <8) { // print de tijd tft.setCursor((mark[valuePos] - 5), (originY + 16)); tft.setTextColor (graphColor, WIT); tft.setTextSize(1); tft.println(timeBlock[waardePos]); // kaart de waarde locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // teken punt tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // probeer verbinding te maken met het vorige punt if(valuePos!=0) {tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor); } blockPos++; } else { // wis het canvas van de grafiek tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE); // breng de waarde in kaart - huidig ​​punt locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // teken punt - huidig ​​punt tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // teken alle punten voor (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); } // verander tijdlabels voor (int i =0; i <=8; i++) { tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16)); tft.setTextColor (graphColor, WIT); tft.setTextSize(1); tft.println(timeBlock[waardePos - i]); } } valuePos++; 

Dit lange deel van de code tekent de punten van de grafiek op hun waarden en voegt ze vervolgens samen via lijnen, de code controleert of het canvas van de grafiek vol is, als dat zo is, begint het de eerste waarde van de grafiek uit te werpen en verplaats de andere naar boven om ruimte te geven voor het invoegen van de nieuwe waarde. Als er nog ruimte over is, zal het apparaat met tussenpozen waarden blijven toevoegen.

De grafiek personaliseren

Het leuke van deze grafiek is dat hij 100% bewerkbaar is, dus de gebruiker kan de grootte van de grafiek, de locatie en de kleur aanpassen, de gebruiker kan ook alle gegevens in de grafiek weergeven dankzij de flexibiliteit. Dit zijn allemaal variabelen waar je om moet geven.

bool proDebug =0; uint16_t graphColor =BLAUW; uint16_t pointColor =ZWART; uint16_t lineColor =GROEN; String graphName ="Tijdgrafiek"; int grafiekBereik =50; int markSize =3; 

• proDebug is het debugging-hulpprogramma dat in het project is ingebouwd, het is standaard ingesteld op 0, indien ingesteld op 1/true, zal het de huidige temperatuur naar de seriële monitor afdrukken, dit is een debugging-hulpprogramma, merk op dat indien ingeschakeld, de seriële monitor is vereist om open te zijn om de code te kunnen uitvoeren.

• graphColor stelt de kleur van de grafiek in, de x- en y-lijnen en hun labels worden op deze kleur ingesteld.

• pointColour vertegenwoordigt de kleur van het punt dat de waarde in de grafiek illustreert.

• lineColour stelt de kleur van de lijn die de punten op de grafiek verbindt in op de geselecteerde kleur.

• graphRange is de ruggengraat van de grafiek, merk op dat het erg belangrijk is dat deze correct is ingesteld, het vertegenwoordigt de maximale waarde die kan worden getekend, ik gebruik een temperatuursensor, ik verwacht niet dat de waarde hoger zal zijn dan 50ºC, dus ik stel de waarde op 50, als u een ruwe analoge ingang wilt plotten, kunt u de graphRange instellen op 1024, de maximale waarde die een analoge pin kan weergeven.

• markSize vertegenwoordigt de grootte van het punt dat de waarde van de sensor op de grafiek aangeeft, de waarde vertegenwoordigt de lengte van het vierkant.

En dat is het dan, u hoeft zich alleen maar zorgen te maken, de rest van de variabelen wordt automatisch door de Arduino berekend.

Veranderen de Waarde

Het is leuk om de temperatuur in je kamer in een grafiek te zetten, maar het is nog beter als je sensorgegevens in de grafiek kunt weergeven, en je kunt, door slechts een paar regels code te bewerken, alle gegevens van bodemvocht tot licht in een grafiek zetten intensiteit. Hier is een handleiding om dit te doen.

Gaan Verder

Je kunt verder gaan experimenteren met het project, probeer de originX, originY, sizeX en sizeY constanten te bewerken om je grafiek een andere grootte en positie op het scherm te geven. Er is een header-bestand bij de hoofdschets gevoegd, het bevat de kleurcodes van sommige kleuren, probeer de kleur van de grafiek en de balken te veranderen. En dat is alles, uw gepersonaliseerde grafiek is klaar.

Bibliotheken

• Elegoo-bibliotheken - Copyright (c) 2012 Adafruit Industries onder de BSD-licentie.

• DHT - Auteur Rob Tillaart deze bibliotheek is in het publieke domein

Achtergrond

Ik heb onlangs een project gepubliceerd waarin 1, 2, 3 of 4 waarden in een staafdiagram worden weergegeven. Ik heb besloten om nog een sjabloon voor grafieken te publiceren. Er zijn geen sjablonen voor staafdiagrammen die niet overal lijnen hebben die voor verwarring kunnen zorgen, dus besloot ik de wiskunde opnieuw te doen en een eenvoudig project te publiceren waarmee iedereen zijn gegevens live in een geschiedenisgrafiek kan weergeven.

Schema's

schemas_g5pey3GWqv.fzz