The line of the graph is not constant, it jumps all over again

[Koldo_Moralejo_Velad]

Hi, im trying to display the values of a potentiometer in my app, but the line of the graph jumps all over again. I've tried everything and nothing works. This is the code I've used. Thanks.

nt in = A0;
int value = 0;
char letra;
int LED = 13;

void setup() {
Serial.begin(38400);
pinMode(in,INPUT);

}

void loop() {
//Map the value from 10 bits to 8 bits:

byte val = map(analogRead(in),0,1024.0,0,150); //Byte = 8 bits = 2 to the 8 = 255
Serial.println(val);
Serial.println("|");
Serial.println("43.0631446");
Serial.println("|");
Serial.println("-2.5052305");
Serial.println("|");

// Indicate the state of inputPin
if (value == HIGH) {
Serial.print("1");
} else {
Serial.print("0");
}

// Check for serial input to control the LED
if (Serial.available()) {
letra = Serial.read();

if (letra == 'A') {
  digitalWrite(LED, HIGH);
} else if (letra == 'B') {
  digitalWrite(LED, LOW);
}

} //Serial.write will send only one byte at a time
delay(400); //Small delay between each data send
}

[ABG]

Be sure to use println() at the end of each message to send from the sending device, to signal end of message.

Only use print() in the middle of a message.

Be sure not to println() in the middle of a message, or you will break it into two short messages and mess up the item count after you split the message in AI2.

Do not rely on timing for this, which is unreliable.

In the AI2 Designer, set the Delimiter attribute of the BlueTooth Client component to 10 to recognize the End of Line character.

Also, return data is not immediately available after sending a request,
you have to start a Clock Timer repeating and watch for its arrival in the Clock Timer event. The repeat rate of the Clock Timer should be faster than the transmission rate in the sending device, to not flood the AI2 buffers.

In your Clock Timer, you should check

  Is the BlueTooth Client still Connected?
  Is Bytes Available > 0?
     IF Bytes Available > 0 THEN
       set message var  to BT.ReceiveText(-1) 

This takes advantage of a special case in the ReceiveText block:

ReceiveText(numberOfBytes)
Receive text from the connected Bluetooth device. If numberOfBytes is less than 0, read until a delimiter byte value is received.

If you are sending multiple data values per message separated by | or comma, have your message split into a local or global variable for inspection before trying to select list items from it. Test if (length of list(split list result) >= expected list length) before doing any select list item operations, to avoid taking a long walk on a short pier. This bulletproofing is necessary in case your sending device sneaks in some commentary messages with the data values.

Some people send temperature and humidity in separate messages with distinctive prefixes like "t:" (for temperature) and "h:" (for humidity).
(That's YAML format.)

The AI2 Charts component can recognize these and graph them. See Bluetooth Client Polling Rate - #12 by ABG

To receive YAML format messages, test if the incoming message contains ':' . If true, split it at ':' into a list variable, and find the prefix in item 1 and the value in item 2.

[Koldo_Moralejo_Velad]

I've changed the DelimiterByte to 10, and I've substituted all the Serial.println to Serial.print but the graphic still does the same. The reading and the splitting of the text isn't the problem, I can recieve, split and save the data in different variables without issues. The graphic line still makes jumps.

[ABG]

Post the new code and aia from both sides.

[Koldo_Moralejo_Velad]

I haven't change any code, just the DelimiterByte and the serial.print. Sorry for asking, but could you send me a picture of how the blocks and the arduino code would look like with the solution you have written me before? I am new and I have no clue how to do it. Thanks in advance. My actual code is the following:

int in = A0;
int value = 0;
char letra;
int LED  =  13;

void setup() {
  Serial.begin(38400);
  pinMode(in,INPUT);

}

void loop() {
  //Map the value from 10 bits to 8 bits:
  
  byte val = map(analogRead(in),0,1024.0,0,150);    //Byte = 8 bits = 2 to the 8 = 255  
  Serial.print(val); 
  Serial.print("|");
  Serial.print("43.0631446");
  Serial.print("|");
  Serial.print("-2.5052305");
  Serial.print("|");
  
  // Indicate the state of inputPin
  if (value == HIGH) {
    Serial.print("1");
  } else {
    Serial.print("0");
  }
  
  // Check for serial input to control the LED
  if (Serial.available()) {
    letra = Serial.read();
    
    if (letra == 'A') {
      digitalWrite(LED, HIGH);
    } else if (letra == 'B') {
      digitalWrite(LED, LOW);
    }
  }                             
  delay(400);                                       
}

And the blocks are the same of the previous post.

[ABG]

You have failed to distinguish between a message delimiter (\n) and a data delimiter (|).

That throws off all item selection indices.
Go back and reread my delimiters canned reply.

[Koldo_Moralejo_Velad]

I don't know if this is what you were trying to say but these are the changes I've made:

int in = A0;
int value = 0;
char letra;
int LED = 13;

void setup() {
Serial.begin(38400);
pinMode(in,INPUT);

}

void loop() {
//Map the value from 10 bits to 8 bits:

byte val = map(analogRead(in),0,1024.0,0,150);

Serial.print(val);
Serial.print("|");
Serial.print("43.0631446");
Serial.print("|");
Serial.print("-2.5052305");
Serial.print("|");

// Indicate the state of inputPin
if (value == HIGH) {
Serial.println("1");
} else {
Serial.println("0");
}

// Check for serial input to control the LED
if (Serial.available()) {
letra = Serial.read();

if (letra == 'A') {
  digitalWrite(LED, HIGH);
} else if (letra == 'B') {
  digitalWrite(LED, LOW);
}

}
delay(400);
}

The graph works better but still does the gaps:

[ABG]

@Koldo_Moralejo_Velad

The graph works better but still does the gaps:

Do you want a continuous line?

Use the AI2 Chart component.

FAQ Section: Charts and Graphs

AI2 Charts Component AI2 Charts Component Help - MIT Oct 2022 AI2 Charts Usage Guide - @elatoskinas Charting CSV Data by DateTime in the AI2 DataFile component - ABG Charting from TinyDB by Date - ABG Realtime Chart sample - @Kevinkun Charting from ESP32 via Bluetooth - @Patryk_F Javascript based Chart..js examples / Spanish / Juan Antonio How to generate an animated Pie Chart using the Chart.js library Gauge Charts Plotly JS file to display real time data - Giriraj Pawar Highcharts Se…

P.S. Regarding your code, capturing the previous x and y values should be done AFTER using them to plot the incoming data, not BEFORE. Check the FAQ's Canvas based samples.

[Koldo_Moralejo_Velad]

That was the problem, now works. Thanks for helping me.