Glitch data received with nodeMCU

Hi, my project is to controll 4 servos via WIFI with my smartphone. I'm very new to app design and wifi requests. The app i designed is visually working fine but the values I'm receiving on the nodeMCU are glitchy. The data sent by the app is the 4 positions that the servos need to target. The 4 variables are not glitching in the app, i can change them with joysticks and display them without any issues. But the values that are printed to the Serial monitor of the NodeMCU are glitchy. There is quite some lag (between 500ms and 1s) and the past values sometimes are printed again. this causes the Servos to do weird movement.

An example of the glitch when requesting the values 16, 21, 0, 0 for the servos :

{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":133,"pos2":50,"pos3":0,"pos4":2}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":128,"pos2":39,"pos3":0,"pos4":2}
{"pos1":128,"pos2":39,"pos3":0,"pos4":2}
{"pos1":128,"pos2":39,"pos3":0,"pos4":2}
{"pos1":128,"pos2":39,"pos3":0,"pos4":2}
{"pos1":128,"pos2":39,"pos3":0,"pos4":2}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}
{"pos1":16,"pos2":21,"pos3":0,"pos4":0}

Here is my code from the app :

Here is my code for the NodeMCU:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "Servo.h"

const char* ssid = "...";
const char* password = "...";

ESP8266WebServer server(80);

// Define output pin
const int servoPin1 = D0;
const int servoPin2 = D1;
const int servoPin3 = D2;
const int servoPin4 = D3;

int servoPos1 = 0;
int servoPos2 = 0;
int servoPos3 = 0;
int servoPos4 = 0;

Servo servo1;
Servo servo2;
Servo servo3;
Servo servo4;

void setup() {
  Serial.begin(115200);
  servo1.attach(servoPin1, 500, 2400);
  servo2.attach(servoPin2, 500, 2400);
  servo3.attach(servoPin3, 500, 2400);
  servo4.attach(servoPin4, 500, 2400);

  // Connect to WiFi
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi...");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConnected. IP address: ");
  Serial.println(WiFi.localIP());

  // Define route: root
  server.on("/", []() {
    server.send(200, "text/plain", "NodeMCU is running");
  });

  server.on("/update", []() {
    if (server.hasArg("pos1")) servoPos1 = server.arg("pos1").toInt();
    if (server.hasArg("pos2")) servoPos2 = server.arg("pos2").toInt();
    if (server.hasArg("pos3")) servoPos3 = server.arg("pos3").toInt();
    if (server.hasArg("pos4")) servoPos4 = server.arg("pos4").toInt();

    String json = "{\"pos1\":" + String(servoPos1) + ",\"pos2\":" + String(servoPos2) + ",\"pos3\":" + String(servoPos3) + ",\"pos4\":" + String(servoPos4) + "}";
    Serial.println(json);
    server.send(200, "application/json", json);
  });
  // Start server
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();
  servo1.write(servoPos1);
  servo2.write(servoPos2);
  servo3.write(servoPos3);
  servo4.write(servoPos4);
}

Any idea what the problem could be?

What's your Clock1 Timer interval setting?

I don't see any handshaking between the two sides of the data connection.

Are you creating a backlog at the nodeMCU input side by flooding it from the AI2 side?

interval of 50ms. i want the movement of the servo to be as smooth as possible. I tried changing the timer interval but it didnt change anything so i don't think its a flooding.

WIth a handshaking, i would remove the clock right?

Not necessarily.

If you add 4 extra global variables to hold the previous values of your 4 (left/right,x/y) global variables from previous dragged events, you could avoid sending duplicate values and wasting air time. You would guard your Web Get with a four way Or (old not equal new Joystick global)

If you add that same test and Web Get to the end of the Web1.GotText event, you could get a jump on the Clock Timer if it is too slow.

The Clock Timer is still useful to get the data moving if the joysticks have moved.

If all that does not help, consider breaking up your Canvas into multiple Canvases separated by a Label, to avoid fat finger problems leaking drags from one joystick to the other joystick.

P.S. It's not clear from your blocks what are the component types of Left_Joystick and RIGHT_Joystick. Are they sprites, balls, or canvases? Where do those angles come from, and what are their ranges and metrics (degrees/radians?)

Ok thats a good idea to make it faster. If i understand, i would send to the nodemcu a new position request only if the position has changed?

But i don't think it would resolve the glitch issue. Do you think putting an aqu num would be a good solution? To be honest, I would prefere a simpler one.

What's an aqu num?

Yes.

ack num sry

The position calculation in the app are working perfectly. the html url are correctly built. The problem is that the NodeMCU doesn't get the right values. It may come from a past request coming to late and still being processed or some buffer i dont know

Adding an ack number to the message would clarify any doubts as to timing issues.
Clock1.SystemTime is accurate and easy.

I still wonder about your Ai2 joystick input.

I used this joystick extension. As I'm new to this i just followed the instructions to get the values.

Consider adding a log to your app, adding the transmissions to a global list for review by a List Picker. If you insert new values at item 1, the Elements will appear with the most recent at the top. Reload the Elements in the Before Picking event.

This will let you see if the data leaving your app has the glitches already in it.

Regarding the joysticks, I don't support extensions.