2.2.2 does not allow you to edit stuff as it constantly updates and overwrites your input

[kongomongo]

hi there,

trying 2.2.2 with a m400. Everything seems to work until you try editing values like circumference or speed limit: every second your input gets replaced by the current value, so it is impossible to change values ?!

[2024-10-25 20:38:01.728] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:03.395] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:05.066] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:06.737] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:08.407] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:10.106] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:11.749] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:13.419] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:15.090] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:16.761] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:18.431] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:20.102] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:21.773] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:23.444] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:25.114] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:26.786] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:28.456] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:30.126] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:31.797] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}
[2024-10-25 20:38:33.468] [info]  received can package: {
  canCommandCode: 50,
  canCommandSubCode: 3,
  canOperationCode: 0,
  sourceDeviceCode: 2,
  targetDeviceCode: 15,
  dataLength: 6,
  data: [ 196, 9, 192, 1, 201, 8 ]
}

[andrey-pr]

What numbers do you try to set? Are they out of range?

[kongomongo]

speed limit is 25, i click the down arrow, 24.... half a second later its 25 again.

that's why i posted an excerpt from the log, it seems every 1-2 seconds a new package arrives. I am assuming the code does not lock updates when editing a value. So for some reason this new m400 motor sends updates every 1-2 even when you dont actively query it. Maybe it has to do with a newer firmware on the m400 controller?

[kongomongo]

[kongomongo]

worked now using OpenBafangTool.2.0.1-rc, but still I am wondering if it's possible to fix this

[andrey-pr]

worked now using OpenBafangTool.2.0.1-rc, but still I am wondering if it's possible to fix this

Yes, its bug in my program, I should fix it

[kongomongo]

Sorry I am a total react noobie, does this help?

In a React app, to prevent incoming data from overriding a value that a user is actively editing, you can implement a few strategies to control the update behavior conditionally. Here are a few methods that could work well in this case:

1. Add a "User is Editing" State to Temporarily Disable Updates
   One effective approach is to use an isEditing state that tracks whether the user is actively editing a field. When the user starts editing a value (e.g., on focus or change events), set isEditing to true. When the user finishes (e.g., on blur or after saving), set isEditing back to false. While isEditing is true, ignore the incoming CAN bus updates for that specific field.

Here's a basic example:

import React, { useState, useEffect } from 'react';

function EditableField({ canBusValue }) {
  const [value, setValue] = useState(canBusValue);
  const [isEditing, setIsEditing] = useState(false);

  // Update the field only if not editing
  useEffect(() => {
    if (!isEditing) {
      setValue(canBusValue);
    }
  }, [canBusValue, isEditing]);

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  const handleFocus = () => {
    setIsEditing(true);
  };

  const handleBlur = () => {
    setIsEditing(false);
    // Save value to backend or dispatch action here if needed
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleInputChange}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
}

This will allow the field to receive data from the CAN bus, but it will pause the updates while the user is interacting with it.

2. Use a Buffer and Check for Changes Before Updating
   Another approach is to create a buffer for incoming CAN bus data that only updates the UI if there hasn’t been recent user interaction. For example, use a timer that delays updates by a few seconds after the user finishes editing.

Here’s how it might look:

function EditableField({ canBusValue }) {
  const [value, setValue] = useState(canBusValue);
  const [isEditing, setIsEditing] = useState(false);
  const [lastEditTime, setLastEditTime] = useState(Date.now());

  useEffect(() => {
    // Update value if it's been a while since last edit
    const now = Date.now();
    if (!isEditing && now - lastEditTime > 2000) {
      setValue(canBusValue);
    }
  }, [canBusValue, isEditing, lastEditTime]);

  const handleInputChange = (e) => {
    setValue(e.target.value);
    setLastEditTime(Date.now());
  };

  const handleFocus = () => setIsEditing(true);
  const handleBlur = () => setIsEditing(false);

  return (
    <input
      type="text"
      value={value}
      onChange={handleInputChange}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
}

This code ensures that after the user stops editing, the field won’t be updated for a specified period (2 seconds in this example).

[andrey-pr]

Sorry I am a total react noobie, does this help?

In a React app, to prevent incoming data from overriding a value that a user is actively editing, you can implement a few strategies to control the update behavior conditionally. Here are a few methods that could work well in this case:

1. Add a "User is Editing" State to Temporarily Disable Updates
   One effective approach is to use an isEditing state that tracks whether the user is actively editing a field. When the user starts editing a value (e.g., on focus or change events), set isEditing to true. When the user finishes (e.g., on blur or after saving), set isEditing back to false. While isEditing is true, ignore the incoming CAN bus updates for that specific field.

Here's a basic example:

import React, { useState, useEffect } from 'react';

function EditableField({ canBusValue }) {
  const [value, setValue] = useState(canBusValue);
  const [isEditing, setIsEditing] = useState(false);

  // Update the field only if not editing
  useEffect(() => {
    if (!isEditing) {
      setValue(canBusValue);
    }
  }, [canBusValue, isEditing]);

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  const handleFocus = () => {
    setIsEditing(true);
  };

  const handleBlur = () => {
    setIsEditing(false);
    // Save value to backend or dispatch action here if needed
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleInputChange}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
}

This will allow the field to receive data from the CAN bus, but it will pause the updates while the user is interacting with it.

2. Use a Buffer and Check for Changes Before Updating
   Another approach is to create a buffer for incoming CAN bus data that only updates the UI if there hasn’t been recent user interaction. For example, use a timer that delays updates by a few seconds after the user finishes editing.

Here’s how it might look:

function EditableField({ canBusValue }) {
  const [value, setValue] = useState(canBusValue);
  const [isEditing, setIsEditing] = useState(false);
  const [lastEditTime, setLastEditTime] = useState(Date.now());

  useEffect(() => {
    // Update value if it's been a while since last edit
    const now = Date.now();
    if (!isEditing && now - lastEditTime > 2000) {
      setValue(canBusValue);
    }
  }, [canBusValue, isEditing, lastEditTime]);

  const handleInputChange = (e) => {
    setValue(e.target.value);
    setLastEditTime(Date.now());
  };

  const handleFocus = () => setIsEditing(true);
  const handleBlur = () => setIsEditing(false);

  return (
    <input
      type="text"
      value={value}
      onChange={handleInputChange}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
}

This code ensures that after the user stops editing, the field won’t be updated for a specified period (2 seconds in this example).

Thank you, thats good idea. I'll implement it when I have time