Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tutosrive/avl_tree_car_front/llms.txt

Use this file to discover all available pages before exploring further.

Adding obstacles one by one through the Add Obstacles dialog is useful for small experiments, but when you want to populate the AVL tree with a predefined set of road obstacles — for example, a saved test scenario — the Load JSON feature lets you do it in a single operation. You prepare a .json file that describes the road width and every obstacle, then point the dialog at that file. The controller validates the payload, POSTs it to the backend, syncs the returned IDs to the client-side road model, and redraws the D3.js tree automatically.

​
Prerequisites

No road needs to exist before using Load JSON. The button (#btn-load-json) is always enabled on the home screen. The controller creates RoadController and AVLController instances internally if they do not already exist.

​
JSON file format

Your .json file must follow this exact structure: 
{
  "configs": {
    "total_distance": 1200
  },
  "obstacles": [
    { "x": 100, "y": 50, "type": "cone" },
    { "x": 300, "y": 80, "type": "rock" },
    { "x": 600, "y": 120, "type": "tire" }
  ]
}
FieldTypeDescription
configs.total_distancenumberSets the road width client-side via road.setWidth(). Corresponds to the maximum X coordinate for the obstacle space.
obstaclesarrayList of obstacle objects to insert into the AVL tree.
obstacles[].xnumberHorizontal pixel position of the obstacle.
obstacles[].ynumberVertical pixel position of the obstacle.
obstacles[].typestringObstacle type name (see the obstacle types table).
The controller normalizes only the first character of each obstacle type string to uppercase before creating each Obstacle model instance (e.g. "cone" becomes "Cone"). All remaining characters are left unchanged — "ROCK" stays "ROCK", not "Rock". Use all-lowercase type strings to get clean Title Case values.

​
Obstacle types

The following type strings are accepted. Any capitalisation variant is valid.
Type stringDescription
coneTraffic cone
rockRock
treeTree
tireTire
nailNail
trunkTrunk
personPerson
carCar
bicycleBicycle
chairChair

​
Steps

1

Click Load JSON on the home screen

Click the Load JSON button (#btn-load-json). HomeController lazily initialises RoadController, AVLController, and LoadJSONController if they are not yet present, then calls LoadJSONController.init(). A modal dialog titled Load Obstacles From JSON appears.
2

Select your JSON file

Click the Load JSON file input and choose your .json file from disk. The browser reads the file using the FileReader API and populates the read-only textarea (#load-json-text) with the raw file contents. You can review the JSON in the textarea before proceeding.
// LoadJSONController — file read handler
reader.onload = (e) => {
    this.#elements.textarea.textContent = e.target.result;
};
3

Review the preview

The textarea shows the full JSON content. Verify that the obstacle list and total_distance look correct before proceeding. You can also type or paste JSON directly into the textarea — the content of #load-json-text is read via .value when you click Accept, so manual edits are respected.
4

Click Accept to send

Click Accept. LoadJSONController.#sendJSON() executes the following sequence:
  1. Resets the backend tree — emit_reset_avl() is called via Socket.IO before anything is sent, so the backend starts from an empty tree.
  2. Parses the textarea content — JSON.parse() converts the raw string into a JavaScript object.
  3. POSTs to /avl/add/configs — the full JSON object is sent as the request body.
POST /avl/add/configs
Content-Type: application/json

{
  "configs": { "total_distance": 1200 },
  "obstacles": [
    { "x": 100, "y": 50, "type": "cone" },
    { "x": 300, "y": 80, "type": "rock" },
    { "x": 600, "y": 120, "type": "tire" }
  ]
}
5

Backend response and client-side sync

On a status 200 response the controller:
  1. Shows a success toast with the backend’s response message.
  2. Calls road.setWidth(data.configs.total_distance) to apply the road width client-side.
  3. Maps each returned obstacle ID (from req.data, an array in insertion order) to the corresponding obstacle entry in the JSON, uppercases the type’s first character, and constructs an Obstacle model instance for each.
  4. Stores the full list with road.setObstacles(obstaclesList).
  5. Calls avlCtrl.getTree() which emits get_tree_avl to the backend and triggers a full D3.js tree redraw when the avl_tree_balanced Socket.IO event arrives.
  6. Enables both the Insert Obstacles (#btn-insert-obstacles) and Remove & Watch Roads (#btn-watch-roads) buttons.
  7. Closes the modal.
If the backend returns any status other than 200, a warning toast is shown and the modal stays open.

​
Error handling

ConditionBehaviour
Textarea is empty (!content)Toast: No data to send! — the POST request is not made
Textarea content is fewer than 50 charactersClient-side obstacle sync is skipped silently after a successful POST — the road model will not have obstacle objects populated
JSON.parse() failsAn exception is caught and logged; the modal stays open
Backend returns non-200 statusWarning toast with the backend’s message; no client state is changed
Clicking Accept always emits reset_avl to the backend before sending the new configuration. Any obstacles that were previously in the backend AVL tree are permanently cleared, even if the subsequent POST fails on the client side.

Build docs developers (and LLMs) love

Get started for freeTalk to us