Strange display behavior chart, TFT, array

Using Arduino Programming Questions
#1

Hi guys,

I got a strange behavior on a display trying to print some point dataset on a chart:
I m using UNO R3 and a ili9341 spi 240X320 TFT. I use to it and it is working fine with a derived from the Adafruit_GFX library.

I got a matrix with 24 rows and 2 columns presumably recording temperature and humidity but for the example I will put random numbers.

when I display the data, it looks like the humidity one (array [k][0]) is ''moving 2 time faster'' than the temperature one (array [k][1]): a bite like if my k is doing 2 iterations for that line the( k and k+1).. thus what is even more strange is that it affect the ''x'' coordinate which is rather fixed by (240 + 20) - (10 * k).

in the line: tft.drawCircle( (240 + 20) - (10 * k), (180 - (tempHistory[k][0] - 50) ), 2, BLUE);
if you replace the(180 - (tempHistory[k][0] - 50) ) by [k][1] everything is working fine .... really strange !

is anyone able to reproduce the bug?
Is somebody see something strange in that loop?

here the full code, and enclosed the full project .. you just need an TFT screen to tell me if you got the bug or not!!

thx for any help, it get me crazy!


#include "TFT_ILI9341.h"
#include <SPI.h>
#include <Wire.h>




#define TFT_CS    5  // 10
#define TFT_RST    4// 8  // you can also connect this to the Arduino reset in which case, set this #define pin to 0!
#define TFT_DC     6  //9
#define TFT_LED   10
//#define TFT_SCLK    13 
//#define TFT_MOSI    11 

#define  BLACK   0x0000   // color code: http://www.rinkydinkelectronics.com/calc_rgb565.php
#define BLUE    0x001F   // or http://www.barth-dev.de/online/rgb565-color-picker/
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF
#define LBLUE   0x7639
#define GRASS   0x2D08
#define GREENTREE 0x1A64
#define BROWNTREE 0x7203
#define GREY     0xD6BA
#define DARKGREY  0x9CD3
#define DESERT    0xF6CA
#define ORANGE    0xF343



//Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS,  TFT_DC, TFT_RST);
TFT_ILI9341 tft = TFT_ILI9341();




byte max_Y;
int max_X;

unsigned long currentMillis;
unsigned long previousMillis;

const byte Arrayl = 24 ; //  row  ...
const byte ArrayC = 2; // column
float tempHistory[Arrayl][ArrayC] ;



void setup() {


  // put your setup code here, to run once:
  Serial.begin(9600);

  tft.begin();

  tft.setRotation(3); //rotation de l ecran: 0,1,2,3
  max_Y = tft.height();
  max_X = tft.width();

  Wire.begin(); // initialization port I2C ->RTC module


  //#################### fill the array with 0 everywhere #########################
  for (byte i = 0; i < Arrayl; i++) {
    for (byte j = 0; j < ArrayC; j++) {
      tempHistory[i][j] = 0;


    }

  }




  //#########################" background screen for the chart graph ###################"

  tft.fillScreen(LBLUE);
  tft.setTextColor(YELLOW);
  tft.setCursor (65, 15);
  tft.setTextFont(1);
  tft.setTextSize(3);
  tft.print("chart");

  tft.drawRect(20, 50, 2, 150, BLACK);
  tft.drawRect(20, 200, 240, 2, BLACK);


  //drawn the ticks///////////
  byte j = 1;

  for (int i = 250; i >= 20; i -= 10) {

    tft.drawRect(i, 200, 2, 5, BLACK);

    if ((j % 2) == 0) {
      tft.drawRect(i, 200, 2, 8, BLACK);
      tft.setTextFont(1);
      tft.setTextSize(1);
      tft.setCursor (i - 3, 210);
      tft.print(j);
    }
    j++;
  }

}



void loop() {

  currentMillis = millis();

  if ((currentMillis - previousMillis) > 5000) {
    previousMillis = currentMillis;

    //move the array number downward to be able to allocate more recent data

    for ( int k = 0; k < ArrayC; k++) {

      for (int j = Arrayl - 1; j >= 1; j--) {
        tempHistory[j][k] = tempHistory[j - 1][k];
        tempHistory[j][0] = tempHistory[j - 1][0];

      }
    }

    //put some new random number in the array at [0][1] and [0][0] location

    tempHistory[0][1] = random(0, 30);
    tempHistory[0][0] = random(50, 90);


    tft.fillRect(20 + 2, 50, 240 + 20, 150, LBLUE);
    tft.fillRect(260, 13, 50, 40, LBLUE);


    //display last value set in tempHistory[0][1]
    tft.setCursor (260, 15);
    tft.setTextColor(WHITE);
    tft.setTextFont(1);
    tft.setTextSize(2);
    tft.print(tempHistory[0][1], 1);
    tft.setTextSize(1);
    tft.print(("C  "));

    //display last value set in tempHistory[0][0]
    tft.setTextSize(2);
    tft.setCursor (265, 35);
    tft.print(tempHistory[0][0], 0);
    tft.setTextSize(1);
    tft.println(("%"));


    //make the chart

    for ( int k = 0; k < Arrayl; k++) {

// array [k][1] no problem during the display
      tft.drawCircle( (240 + 20) - (10 * k), (180 - (tempHistory[k][1] - 0)), 2, RED);

      tft.setCursor (((240 + 20) - (10 * k) - 6), (180 - (tempHistory[k][1] - 0)));
        tft.setTextColor(RED);
      tft.print(k);

// array [k][0]  problem during the display!! move in the X dimension 2 way faster than it should thus value looks repeated

      tft.drawCircle( (240 + 20) - (10 * k), (180 - (tempHistory[k][0] - 50) ), 2, BLUE);
      tft.setCursor (((240 + 20) - (10 * k) - 6),(180- (tempHistory[k][0] - 50)));
      tft.setTextColor(WHITE);
      tft.print(k);

    }

  }


}
#2

This is the problem

    //move the array number downward to be able to allocate more recent data

    for ( int k = 0; k < ArrayC; k++) {
      for (int j = Arrayl - 1; j >= 1; j--) {
        tempHistory[j][k] = tempHistory[j - 1][k];
        tempHistory[j][0] = tempHistory[j - 1][0];
      }
    }

The first time through the outer for() loop, k is 0, so you are essentially doing this

    //move the array number downward to be able to allocate more recent data

    tempHistory[j][0] = tempHistory[j - 1][0];
    tempHistory[j][0] = tempHistory[j - 1][0];
  }

which is moving your data twice as fast
#3

Hi blh64,
yes there is a problem here ....thx for the spotting! I will have a try and let you know if it solves my display problem!

EDIT: It does solve the problem! many thx!

#4

Another thing you can do is make it easier for humans to read by declaring a couple of constants for which array you are accessing, either temperature (TEMP) or humidity (RH) and renaming your array variables.

#include "TFT_ILI9341.h"
#include <SPI.h>
#include <Wire.h>

#define TFT_CS    5  // 10
#define TFT_RST    4// 8  // you can also connect this to the Arduino reset in which case, set this #define pin to 0!
#define TFT_DC     6  //9
#define TFT_LED   10
//#define TFT_SCLK    13
//#define TFT_MOSI    11

#define  BLACK   0x0000   // color code: http://www.rinkydinkelectronics.com/calc_rgb565.php
#define BLUE    0x001F   // or http://www.barth-dev.de/online/rgb565-color-picker/
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF
#define LBLUE   0x7639
#define GRASS   0x2D08
#define GREENTREE 0x1A64
#define BROWNTREE 0x7203
#define GREY     0xD6BA
#define DARKGREY  0x9CD3
#define DESERT    0xF6CA
#define ORANGE    0xF343

//Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS,  TFT_DC, TFT_RST);
TFT_ILI9341 tft = TFT_ILI9341();

byte max_Y;
int max_X;

unsigned long previousMillis;

const byte maxRows = 24 ; //  row  ...
const byte maxCols = 2; // column
float tempHistory[maxRows][maxCols] ;

enum { RH, TEMP };  // humidity is column 0, temperature is column 1

void setup() {
  Serial.begin(9600);

  tft.begin();

  tft.setRotation(3); //rotation de l ecran: 0,1,2,3
  max_Y = tft.height();
  max_X = tft.width();

  Wire.begin(); // initialization port I2C ->RTC module


  //#################### fill the array with 0 everywhere #########################
  for (byte i = 0; i < maxRows; i++) {
    for (byte j = 0; j < maxCols; j++) {
      tempHistory[i][j] = 0;
    }
  }

  //#########################" background screen for the chart graph ###################"

  tft.fillScreen(LBLUE);
  tft.setTextColor(YELLOW);
  tft.setCursor (65, 15);
  tft.setTextFont(1);
  tft.setTextSize(3);
  tft.print("chart");

  tft.drawRect(20, 50, 2, 150, BLACK);
  tft.drawRect(20, 200, 240, 2, BLACK);

  //drawn the ticks///////////
  byte j = 1;

  for (int i = 250; i >= 20; i -= 10) {
    tft.drawRect(i, 200, 2, 5, BLACK);
    if ((j % 2) == 0) {
      tft.drawRect(i, 200, 2, 8, BLACK);
      tft.setTextFont(1);
      tft.setTextSize(1);
      tft.setCursor (i - 3, 210);
      tft.print(j);
    }
    j++;
  }
}


void loop() {

  unsigned long currentMillis = millis();

  if ((currentMillis - previousMillis) > 5000) {
    previousMillis = currentMillis;

    //move the array number downward to be able to allocate more recent data

      for (int j = maxRows - 1; j >= 1; j--) {
        tempHistory[j][RH] = tempHistory[j - 1][RH];
        tempHistory[j][TEMP] = tempHistory[j - 1][TEMP];
      }

    //put some new random number in the array at [0][1] and [0][0] location

    tempHistory[0][TEMP] = random(0, 30);
    tempHistory[0][RH] = random(50, 90);

    tft.fillRect(20 + 2, 50, 240 + 20, 150, LBLUE);
    tft.fillRect(260, 13, 50, 40, LBLUE);

    //display last value set in tempHistory[0][1]
    tft.setCursor (260, 15);
    tft.setTextColor(WHITE);
    tft.setTextFont(1);
    tft.setTextSize(2);
    tft.print(tempHistory[0][TEMP], 1);
    tft.setTextSize(1);
    tft.print(("C  "));

    //display last value set in tempHistory[0][0]
    tft.setTextSize(2);
    tft.setCursor (265, 35);
    tft.print(tempHistory[0][RH], 0);
    tft.setTextSize(1);
    tft.println(("%"));


    //make the chart

    for ( int k = 0; k < maxRows; k++) {

      // array [k][1] no problem during the display
      tft.drawCircle( (240 + 20) - (10 * k), (180 - (tempHistory[k][TEMP] - 0)), 2, RED);

      tft.setCursor (((240 + 20) - (10 * k) - 6), (180 - (tempHistory[k][TEMP] - 0)));
      tft.setTextColor(RED);
      tft.print(k);

      // array [k][0]  problem during the display!! move in the X dimension 2 way faster than it should thus value looks repeated

      tft.drawCircle( (240 + 20) - (10 * k), (180 - (tempHistory[k][RH] - 50) ), 2, BLUE);
      tft.setCursor (((240 + 20) - (10 * k) - 6), (180 - (tempHistory[k][RH] - 50)));
      tft.setTextColor(WHITE);
      tft.print(k);
    }
  }
}
#5

I will keep it in mind for the next time! thx for the tips!

#6

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.