Problem with TVout printing serial data after updates.

I have a chrome app that sends serial weather data. It sends data every 30 seconds. What I’d like it to do is read the serial data and print it at the same location on the screen. The data will have a variable length depending on the temp or conditions sent. My Chrome app is sending the data and my code will print it. My first attempt just keeps printing the data character after character. This works but is not what I want. My second try is print the characters spaced every 6 pixels then wait for no serial data to set a clear text area variable. When serial is available clear the text area and print the data. The first time I runt the script it works great. after that it starts to get messed up. It seems to add space to the data.

I know there must be a better way but I can’t seem to find what I need with google or I am not searching for the correct solution.

Still learning new techniques and trying to improve.
Thanks
Andy

Sketch loaded and waiting for data.

First data received and looks good. Not sure why it is padded on the left.

After first data this is what I get.

Example animated gif of other update screens.

1st try

#include <TVout.h>
#include <pollserial.h>
#include <fontALL.h>

TVout TV;
pollserial pserial;

void setup()  {
  TV.begin(_NTSC);
  TV.select_font(font6x8);
  TV.println(7,7,"Just the Temp ");
  TV.println("-- Version 0.1 --");
  TV.set_hbi_hook(pserial.begin(9600));
}

void loop() {
  if (pserial.available()) {
    
    TV.print((char)pserial.read());
  }
}

2nd try

#include <TVout.h>
#include <pollserial.h>
#include <fontALL.h>
int charSpace = 1;
int clearScreen = 0, waitForIdle = 1;
unsigned long currentMillis = 1;
long previousMillis = 0;
long interval = 20000;

TVout TV;
pollserial pserial;

void setup()  {
  TV.begin(_NTSC);
  TV.select_font(font6x8);
  TV.println(7,7,"Just the Temp ");
  TV.println("-- Version 0.2 --");
  TV.set_hbi_hook(pserial.begin(9600));
}

void loop() {
  
  if (pserial.available()) {
    if(clearScreen == 1) {
      TV.draw_rect(0,40,120,30,0,0);
      //TV.clear_screen();
      clearScreen = 0;
      waitForIdle = 1;
    }
      TV.print(charSpace += 6, 44,(char)pserial.read());
      currentMillis = millis();

  } 
  else {
    waitForIdle++;
    if(currentMillis - previousMillis > interval) {
      previousMillis = currentMillis; 
      //Serial.flush();
      clearScreen = 1;
    }
  }

}
What I'd like it to do is read the serial data and print it at the same location on the screen.

"It" being the Chrome app?

I know there must be a better way

Yes, there is. Send an end-of-packet marker, like the periods, exclamation marks, and questions marks we use to end sentences.

You never need to guess where a sentence ends, do you Why is sending data from one device to another any different It shouldn't be

PaulS:
You never need to guess where a sentence ends, do you Why is sending data from one device to another any different It shouldn't be

I like the way PaulS's answers often illustrate his point in the way he writes them.

The last two answers don't help nothing to solve the problem. The problem is not solved by a terminator character. I'm having the same problem doing something similar and is not and end-of-packet that will solve!

Here, I presume: http://forum.arduino.cc/index.php?topic=371936

In that thread you say:

Problem solved with 4800 baud rate.

I can't help thinking these are in fact two different problems.