Hey guys ,
i want to display a graph of temperature on tft touch 7''. i sent all the tempeture values to an Sd card.
Can i diplay a 24 hours graph ? and save it on the SD Card ?
Yes to both.
Yes, it is possible to display 24 hours of temp info on a 7" touch screen.
I display 5 days of air pressure info on a small screen.
Start with how many pixels you want to designate to displaying 24 hours of info.
Lets say you use a "" to represent a graphed point. How many pixels does the "" occupy?
In my case I have a 128X128 OLED display. Each "_" takes 5 pixels. If I advance the cursor position 2 places forward that allows me to see the next position. The overlap with the previous position enhances the look of the graph. I update the graph every hour but advance the cursor once every 2 hours. I am able to display 5 days worth of graphed data.
Here is my task that operates a graph that you might be able to use as a model:
void fUpdateDisplay( void * parameter )
{
// Color definitions
// http://www.barth-dev.de/online/rgb565-color-picker/
/*
ColorPalette[0] = 0x0000; //BLACK
ColorPalette[1] = 0x001F; //BLUE
ColorPalette[2] = 0xF800; //RED
ColorPalette[3] = 0x07E0; //GREEN
ColorPalette[4] = 0x07FF; //CYAN
ColorPalette[5] = 0xF81F; //MAGENTA
ColorPalette[6] = 0xFFE0; //YELLOW
ColorPalette[7] = 0xFFFF; //WHITE
ColorPalette[8] = 0xFFFFD8; //LIGHTYELLOW
ColorPalette[9] = 0xFF8040; //BROWN
*/
int rowRef = 80;
int hRef = int( oPressureHistory[0] );
const int nextPoint = 2;
int nextCol = 0;
int16_t aqColor = 216; //minimum value
for (;;)
{
xEventGroupWaitBits (eg, evtDoDisplay, pdTRUE, pdTRUE, portMAX_DELAY ); //
xSemaphoreTake( sema_mqttOK, portMAX_DELAY );
mqttOK ++;
xSemaphoreGive( sema_mqttOK );
vTaskDelay( 1 );
tft.fillScreen( ColorPalette[0] );
tft.setTextSize( 2 );
log_i( "oTemperature %f", oTemperature );
if ( (oTemperature >= 73.0f) && (oTemperature <= 100.0f) )
{
log_i( "if ( (oTemperature >= 73.0f) && (oTemperature <= 100.0f) )" );
// green to decrease and red to increase no blue
int tempDiff = int( 100.0f - oTemperature );
log_i( "oTemperature %f tempDiff %d", oTemperature, tempDiff );
int NewRed = tempDiff << 10;
int NewGreen = 0x07E0 - (tempDiff << 5 );
//int NewRed = ColorPalette[3] - (tempDiff << 5 ) ; // load in green decreased by temperature
log_i( "NewRed %d NewGreen %d", NewRed, NewGreen );
NewRed |= NewGreen ;
log_i( "NewRed | NewGreen %d ", NewRed );
tft.setTextColor( NewRed );
}
if ( oTemperature <= 0.0f )
{
log_i("white");
tft.setTextColor( ColorPalette[7] ); // white
}
if ((oTemperature >= 32.0f) && (oTemperature < 72.0f) )
{
//log_i("if ((oTemperature >= 32.0f) && (oTemperature < 72.0f) )");
//blue decreases, no red, green increases
int tempDiff = int( oTemperature - 32.0f );
if( tempDiff > 31 ) tempDiff = 31;
log_i(" oTemperature %f tempDiff %d", oTemperature, tempDiff );
int NewBlue = ColorPalette[1] - tempDiff; // decrease blue
log_i( "NewBlue %d", NewBlue );
int NewGreen = (tempDiff) << 5 ;// increase green
log_i( "NewGreen %d", NewGreen );
NewGreen |= NewBlue; // combine blue into newgreen
log_i( "NewGreen or'ed %d", NewGreen );
tft.setTextColor( NewGreen );
}
if ((oTemperature >= 72.0f) && (oTemperature < 73.0f) ) tft.setTextColor( ColorPalette[3] ); //green
if ( (oTemperature < 32.0f) && (oTemperature >= 0.0f) )
{
log_i( "if ( (oTemperature < 32.0f) && (oTemperature >= 0.0f) )" );
int NewBlue = ColorPalette[1]; // blue
//blue is max for each step below 32 red and green increase by one
//get steps below 32
int tempDiff = int( 32.0f - oTemperature );
NewBlue = NewBlue + ( (tempDiff) << 5); //add green
NewBlue = NewBlue | (xOff << 10);//add red
tft.setTextColor( NewBlue ); // red
} //if( (oTemperature <= 32.0f) %% (oTemperature >= 0.0f) )
if ( oTemperature >= 100.0f ) tft.setTextColor( ColorPalette[2] ); // red
tft.setCursor( 0, 0 );
if ( oTemperature < 100.0f )
{
tft.print( "Tmp " + String(oTemperature) );
} else
{
tft.print( "Tmp " + String(int(oTemperature)) );
}
tft.setCursor( 0, 20 );
tft.setTextSize( 2 );
if ( oHumidity < 49.0f )
{
//reduce green component, increase blue component, red @0
//get difference from 50%
int xOff = 2 * ( abs(50 - int(oHumidity)) ); // used to make adjustments to green and blue
//shift xOff to the left by 5 places reduce green by xOff
newGreen = ColorPalette[3] - ( (xOff) << 5); //green falls off by xOff
// increase blue by xOff
newGreen = newGreen | (xOff);
//log_i( "ColorPalette[3] %d newGreen %d", ColorPalette[3], newGreen );
tft.setTextColor( newGreen );
}
//@50%
if ( (oHumidity <= 51.0f) && (oHumidity >= 49.0f) )
{
tft.setTextColor( ColorPalette[3] ); //green
}
// above
if ( oHumidity > 51.0f )
{
//reduce green component, increase red component, blue @0
//get difference from 50%
int tempDiff = (int)oHumidity - 50;
if( tempDiff > 31 ) tempDiff = 31;
int newGreen = ColorPalette[3] - ( tempDiff << 5 ); //green falls off by xOff
int newRed = tempDiff << 10;
// increase red by xOff
newGreen = newGreen | tempDiff;
tft.setTextColor( newGreen );
}
tft.print( "Hum " + String(oHumidity) );
// set AQI text color
if ( (oIAQ * 216) >= (90.0f * 216))
{
int redColor = (int)oIAQ - 90;
redColor *= 216;
int green = ColorPalette[3] - (redColor << 5);
int blue = ColorPalette[1] - redColor;
aqColor &= 0x7FF; //set green to and blue to max
redColor = redColor << 10;
aqColor |= redColor;
tft.setTextColor( aqColor );
}
if ( oIAQ * 216 > 60.0f * 216 && oIAQ * 216 < 90.0f * 216 )
{
int blueColor = (int)oIAQ - 60;
blueColor *= 216;
aqColor &= (0x7E0 - (blueColor << 5) ); //set green reduce green by blue
aqColor |= blueColor;
tft.setTextColor( aqColor );
}
if ( oIAQ * 216 <= 60.0f * 216 )
{
int greenColor = oIAQ * 216;
greenColor = greenColor << 5;
tft.setTextColor( greenColor );
}
// display AQI
tft.setCursor( 0, 40 );
tft.print( "AQI " + String(oIAQ) );
//
tft.setTextSize( 1 );
/////////<<<<<< start the graph thing here >>>>>>>>>>>>>>>
tft.setTextColor( ColorPalette[1] ); //set graph line color
tft.setCursor( 0, 118 );
tft.print( " Pres: " + String(oPressure) + "mmHg" );
hRef = int( oPressureHistory[0] );
nextCol = 0;
xSemaphoreTake( sema_HistoryCompleted, portMAX_DELAY );
for (int i = 0; i <= DataCells; i++)
{
int hDisplacement = hRef - int( oPressureHistory[i] ); // cell height displacement from baseline
tft.setCursor( nextCol , (rowRef + hDisplacement) );
tft.print( "_" );
nextCol += nextPoint;
//place vertical bar representing a 24 hour time period.
if ( (nextCol % 24) == 0 )
{
//tft.drawLine( col, row, width, height, color );
tft.drawLine( uint16_t(nextCol), uint16_t(rowRef + 5), uint16_t(nextCol), uint16_t(rowRef + 11), ColorPalette[7] );
}
}
// advance cursor to place a begin of graph marker. each letter is 5 spaces wide but graph position marker only advances 2 spaces
// to keep cursor at begining place cursor +2 the nextCol position.
tft.setCursor( (arrayCellPtr * nextPoint), (rowRef + 3) );
tft.print( "I" );
xSemaphoreGive( sema_HistoryCompleted );
// log_i( "fUpdateDisplay MEMORY WATERMARK %d", uxTaskGetStackHighWaterMark(NULL) );
}
vTaskDelete( NULL );
} // void fUpdateDisplay( void * parameter )
There should be an example included in whatever display library you are using which tells you all you need. In the simplest method, you increment the x-coordinate according to time and the y-coordinate according to the temperature you are measuring, and put a dot there..
This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.