@6v6gt
This is the code for drawing a graph, only I have absolutely NO idea how to map the temperature readings from a DS18B20 onto this graph. I only want to draw the temperature reading every 30 minutes.
The sensor is immaterial, data is data. The simplest way to do this is to convert the data to a sensible y coordinate and place a pixel there at the x interval you have already determined. The code you post is incomplete and meaningless, but the above principle would apply to any display and there is bound to be an example of what you essentially need included in the library for your particular display. This is likely to be an example of a sine wave.
I realise that, but how do you turn it into that?? And no, there is no example of what I want in the library. Absolutely none whatsoever. I have checked every single example already.
You see all those setCursor() statements? They're plotting the grid. It looks like the legends are in %. So scale your data as %. Then the formula is:
y = ymin + (datum% * (ymax - ymin) / 100);
ymax-ymin is the number of pixels vertically in the plotting area. The datum is in percent, hence the 100 divisor. You iterate thru x. Look at the setCursor() statements.
#include "Adafruit_GFX.h" // Hardware-specific library
#include <MCUFRIEND_kbv.h>
#include "Universum_TFTColours.h" // Universum library for colours
#include <OneWire.h>
#include <DallasTemperature.h>
MCUFRIEND_kbv tft;
#define ONE_WIRE_BUS 2
#define TEMPERATURE_PRECISION 1000
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
// Global variables
int valueBlock[500];
int timeBlock[500];
int locationBlock[500];
int valuePos;
int blockPos;
int temp;
// Editable Variables
bool proDebug = 0;
uint16_t graphColor = BLUE;
uint16_t pointColor = BLACK;
uint16_t lineColor = GREEN;
String graphName = "Temp Graph";
int graphRange = 50;
int markSize = 3;
// Calculate Values
const int numberOfMarks = 8;
const int originX = 45;
const int originY = 200;
const int sizeX = 270;
const int sizeY = 150;
const int deviation = 30;
int boxSize = (sizeX / numberOfMarks);
int mark[] = {(boxSize + deviation), ((boxSize * 2) + deviation), ((boxSize * 3) + deviation), ((boxSize * 4) + deviation), ((boxSize * 5) + deviation), ((boxSize * 6) + deviation), ((boxSize * 7) + deviation), ((boxSize * 8) + deviation)};
const int minorSizeY = (originY + 10);
const int minorSizeX = (originX - 10);
int numberSize = (sizeY / 6);
int number[] = {numberSize, (numberSize * 2), (numberSize * 3), (numberSize * 4), (numberSize * 5), (numberSize * 6)};
int numberValue = (graphRange / 6);
int val[] = {graphRange, (numberValue * 5), (numberValue * 4), (numberValue * 3), (numberValue * 2), numberValue};
void drawHome()
{
tft.fillScreen(BLACK);
delay(500);
tft.setCursor(10, 10); // set the cursor
tft.setTextColor(BLUE); // set the colour of the text
tft.setTextSize(5); // set the size of the text
tft.println("DS18B20");
tft.setCursor(10, 80); // set the cursor
tft.setTextColor(CYAN); // set the colour of the text
tft.setTextSize(3); // set the size of the text
tft.println("Graphing");
tft.setCursor(30, 110); // set the cursor
tft.setTextColor(CYAN); // set the colour of the text
tft.setTextSize(2); // set the size of the text
tft.println("History Graphs");
tft.setCursor(10, 160); // set the cursor
tft.setTextColor(WHITE); // set the colour of the text
tft.setTextSize(2); // set the size of the text
tft.println("Daniel Van Nattan");
delay(4000);
tft.fillScreen(WHITE);
delay(500);
}
void drawGraph()
{
// draw title
tft.setCursor(10, 10); // set the cursor
tft.setTextColor(BLUE); // set the colour of the text
tft.setTextSize(4); // set the size of the text
tft.println(graphName);
// draw outline
tft.drawLine(originX, originY, (originX + sizeX), originY, graphColor);
tft.drawLine(originX, originY, originX, (originY - sizeY), graphColor);
// draw lables
for (int i = 0; i < numberOfMarks; i++)
{
tft.drawLine(mark[i], originY, mark[i], minorSizeY, graphColor);
}
// draw numbers
for (int i = 0; i < 6; i++)
{
tft.drawLine(originX, (originY - number[i]), minorSizeX, (originY - number[i]), graphColor);
}
// draw number values
for (int i = 0; i < 6; i++)
{
tft.setCursor((minorSizeX - 30), (number[i] + numberSize));
tft.setTextColor(graphColor);
tft.setTextSize(1);
tft.println(val[i]);
}
}
void graph()
{
sensors.requestTemperatures();
temp = sensors.getTempCByIndex(0);
timeBlock[valuePos] = ((millis() - 4500) / 1000);
valueBlock[valuePos] = temp;
if (proDebug)
{
Serial.println(timeBlock[valuePos]);
}
if (blockPos < 8)
{
// print the time
tft.setCursor((mark[valuePos] - 5), (originY + 16));
tft.setTextColor(graphColor, WHITE);
tft.setTextSize(1);
tft.println(timeBlock[valuePos]);
// map the value
locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
// draw point
tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
// try connecting to previous point
if (valuePos != 0)
{
tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor);
}
blockPos++;
}
else
{
// clear the graph's canvas
tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE);
// map the value - current point
locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
// draw point - current point
tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
// draw all points
for (int i = 0; i < 8; i++)
{
tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor);
}
// draw all the lines
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);
}
// change time lables
for (int i = 0; i <= 7; i++)
{
tft.setCursor((mark[(7 - i)] - 5), (originY + 16));
tft.setTextColor(graphColor, WHITE);
tft.setTextSize(1);
tft.println(timeBlock[valuePos - i]);
}
}
valuePos++;
}
void setup()
{
if (proDebug)
{
Serial.begin(9600);
while (!Serial) {};
}
sensors.begin();
tft.reset();
delay(500);
uint16_t identifier = tft.readID();
identifier = 0x9341;
tft.begin(0x9488);
tft.setRotation(1);
drawHome();
drawGraph();
}
void loop()
{
graph();
delay(100);
}
But I want to change the size of the graph, and also where it displays the time that it measured the temperature, I want it to say hours, not seconds, plus I want the time flipped, so zero is on the right side of the screen. How do I do this?
Do you realize a "for() " can be written to begin at a value and subtract from that value until it gets to zero? A "for()" is not always an addition and moving to the right.
I think this is the time??
But what is the -30412, -30410??
The main question I have is where do I set where the first point is drawn?
// draw point
tft.fillRect((mark[valuePos] - 2), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
// map the value - current point
locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
// draw point - current point
tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
// draw all points
for (int i = 0; i < 8; i++)
{
tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor);
}
From what I can work out, I think this is where it decides the place to draw the points (in void graph()), but I don't know where to edit it to choose where on the X plane I draw it.
