TFT display - text scroll or text wrap?

Status
Not open for further replies.

j_dunavin

Well-known member
I'm not sure exactly what to look for, though I know how I want the display to behave.

I have a teensy 3.1 with the pjrc color touch tft. So far I can display messages anywhere I want on the screen, but I have to set the possition for each message.
I want the ability to display multiple messages in a vertical row. One message appears, then the next message below that one and so on.
It's not scrolling is it? I don't want the text to keep moving.
I think it's more like text wrapping, but the message isn't as long as the display.
Can I define a print area, and leave some of the screen blank for a graph maybe?
I want line one 1st message, line two 2nd message and so forth.

Any examples or help would be appreciated.
Thanks
Joe
 
Well, it turns out that PRINTLN does the job!
set the cursor, print your text and PRINTLN for the following messages will write them under the one you just printed.

Now, could someone tell me how I could get a message to print and any new message would appear above the 1st one and push the older messages down?
 
Didn't work exactly like I hoped.
So I have 4 triggers, 4 messages, I would like them to print in the order they trigger, and go away in the order the condition is reset.

To help with this , how do I get a print text to go away? Not just re printing the same text in the back ground color, because that means the text is still there.
There must be a way to clear that text?
 
The screen doesn't known about text just pixels, so probably the most reliable method is to have a 4 place array that stores message numbers as bytes, and a new arrival shuffles the old ones down. Then your screen draw process blanks all four lines and then looks in your array location 0, and prints that message in the first box (or nothing if the array is set to zero) and then keep working down through location 1,2 etc.
It may be possibly to cut pixels and then redraw them further down, but that would be a very hacky way to achieve things. Better to explicitly draw the messages each time in the right place and makes it pretty easy to have a timout process by just having a timer array to go with your active message array.
 
Everything is possible, it all depends on how much work you wish to do:

That is you can setup your own scrolling... I know I did part of this at one point... Not sure where the code is... But lets assume
you have: 4 lines of text, that you wish each row of text to be a rectangle, that lets say each line is 20 pixels high and 200 pixels wide.

So lets say lines start at(0, 0), (20, 0), (40, 0), (60, 0)...

So when you wish to display a new line of text, again depending on how you want it), but one approach is to have all the new text display at the 60, 0 location... So the code could work like:
a) scroll the text of lines 2-4 up 1 line, this can be accomplished a couple of ways:

1) remember the text of each line and simply output them again up one line... You either need to clear out the line first before you rewrite it, or you can use opaque text output: setTextColor(x, background_color) and then blank out the pixels after your text. Could do this smart and remember the text position after each output, so you know how wide it was and then only blank out from new current end to old current end...

2) You can use more memory and read in the pixels and then rewrite them up one line... So again if you use the sizes I mentioned you need a memory buffer of: uint16_t that is to copy in one chunk: 200*60... You could do it in multiple steps like one line at a time 200*20...
So you would do something like:
Code:
uint16_t mybuffer[200*60);
...
    tft.readRect(20, 0, 200, 60, mybuffer);
    tft.writeRect(0, 0, 200, 60, mybuffer);
    tft.fillRect(0, 60, 200, 20, BACKGROUND_COLOR);
    tft.setSetCursor(0, 60);
    tft.print(.....)


Now if you wish for one of those lines to go away... you can do it either of the ways above... for example suppose you wish for the 3rd line of text to disappear. You could do it like 2) above.

That is you wish to move down the stuff for the first two lines...

That is you would do something like:
Code:
uint16_t mybuffer[200*60);
...
    tft.readRect(0, 0, 200, 40, mybuffer);  // Read in the first two lines..
    tft.writeRect(0, 20, 200, 40, mybuffer); // copy them down one line width
    tft.fillRect(0, 0, 200, 20, BACKGROUND_COLOR); // blank out the first line...
Again above I read/write 40 rows as we are needing to copy down 2 lines. If it was the 4th line ... 60... 2nd 20. first none...

Hope that gives you a hint on a few ways to do it.
 
Making some Progress...

I found that if I read the state of the pin I can just paint a black box, just once, so the screen doesn't flicker. It only flickers when the switch is switched for that particular input, but since the messages move, it's not so noticeable. But it does work :D

This is pretty messy, I think putting the messages in an array, and calling on the array would be much better, right?
The messages also only appear in the order that they are shown in the code. If they are in an array, could they be shown in the order that they are triggered?

Thank you for any help or examples, you guys are awesome!

Code:
#include "SPI.h"
#include "ILI9341_t3.h"
#include <font_ArialBold.h>


#define TFT_DC 9
#define TFT_CS 10
#define TFT_RST 8



ILI9341_t3 tft = ILI9341_t3(TFT_CS, TFT_DC, TFT_RST);



elapsedMillis sincePrint;
 
int buttonPin1= 14;    //sets pins buttons are connected to
int buttonState1 = 0;         // current state of the button
int lastButtonState1 = 0;     // previous state of the button


int buttonPin2= 15;
int buttonState2 = 0;         // current state of the button
int lastButtonState2 = 0;     // previous state of the button

int buttonPin3= 16;
int buttonState3 = 0;         // current state of the button
int lastButtonState3 = 0;     // previous state of the button

int buttonPin4= 17;




void setup() {

  tft.begin();
  tft.setRotation(1);
  tft.fillScreen(ILI9341_BLACK);
  tft.drawLine(0, 55, 350, 55, ILI9341_WHITE);
 

  pinMode(buttonPin1, INPUT_PULLUP);  //assigns button pins as inputs //currently pulled high
  pinMode(buttonPin2, INPUT_PULLUP);   //currently pulled low
  pinMode(buttonPin3, INPUT_PULLUP);   //currently pulled low
  pinMode(buttonPin4, INPUT_PULLUP);   //currently pulled low
 
  

}

void loop(void) {

 

  int buttonState1 = digitalRead(buttonPin1);
  int buttonState2 = digitalRead(buttonPin2);
  int buttonState3 = digitalRead(buttonPin3);
  int buttonState4 = digitalRead(buttonPin4);


  tft.setCursor(0, 70);

  
if(buttonState1== LOW) {   
  tft.setFont(Arial_14_Bold);
  tft.setTextColor(ILI9341_YELLOW);
  tft.println(" TACOS");
     }
 if (buttonState1 != lastButtonState1) {   
  tft.fillRect(0, 70, 250, 300,ILI9341_BLACK);
     }
  lastButtonState1 = buttonState1;
  
 if(buttonState2== LOW) {
  tft.setFont(Arial_14_Bold);
  tft.setTextColor(ILI9341_RED); 
  tft.println(" BURGERS");
  }
if (buttonState2 != lastButtonState2) {   
  tft.fillRect(0, 70, 250, 300,ILI9341_BLACK);
   }
  lastButtonState2 = buttonState2;


  if(buttonState3== LOW) {
    tft.setFont(Arial_14_Bold);
 tft.setTextColor(ILI9341_GREEN); 
  tft.println(" FRENCH FRIES");
  }
if (buttonState3 != lastButtonState3) {   
  tft.fillRect(0, 70, 250, 300,ILI9341_BLACK);
  }
 lastButtonState3 = buttonState3;
  
  }
 
Status
Not open for further replies.
Back
Top