homebridge-roborock-matter 2.1.0

package/roborockLib/lib/map/zones.js

@@ -0,0 +1,851 @@
+var mapBase64, selectedElement;
+var left,
+  topMap,
+  mapMinX,
+  mapMinY,
+  mapSizeX,
+  mapSizeY,
+  goToTarget = false;
+var zoomLevel = 0.55;
+var scaleFactor = 2;
+
+var zoomStep = 0.1;
+var minZoom = 0.5;
+var maxZoom = 3;
+var wheelZoom = 1;
+
+var panOffsetX = 0;
+var panOffsetY = 0;
+var isPanning = false;
+var startX = 0;
+var startY = 0;
+
+var popupX, popupY;
+
+var go_to_pin_image =
+  "data:image/png;base64,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AAAOVWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDplODk0ZjlkMy1iNjZlLTQ1ODQtODY0MS0zMGI5MTk2ZDM2NTQiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YjM1MWM4ODEtZmQwYi00MjlkLWExZDMtNjkwOTFiNWE1YzYxIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YTZlMmNkZTctOGZhZC00ZDVhLWI5N2UtY2VhZTc0NWNmYjVmIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIKICAgR0lNUDpUaW1lU3RhbXA9IjE2NzczNjQ5MzQzNDYyMjgiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4zMiIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjM6MDI6MjVUMjM6NDI6MTIrMDE6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIzOjAyOjI1VDIzOjQyOjEyKzAxOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjcxYWIyOGQtODExMy00NWRiLWJkMjQtNGJkOTJjZjk5NThmIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIgogICAgICBzdEV2dDp3aGVuPSIyMDIzLTAyLTI1VDIzOjI1OjIzIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA4MjZiNWE2LTgwZjctNDU2My1hY2UwLThjMTMzYjQyZmZhNCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMy0wMi0yNVQyMzo0MjoxNCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz6W+nyxAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wIZFioOADz0AgAAAyVJREFUaN7tmr9uE0EQhz8ncmKSwglQkMSCIg0URMgFFUUkZARyj1DeIhQuIsQj0LqnJHkBK6FJ5QK5IIpBsuhiWVEiOY7y3/INxaybBOE9+27vbPknjWSfd2fmu/Xt7c4djDXWWGMNkRLhupcJ4CnwHHgNrADLwLxp0AT+AD+B78Ae8BsS3pCdR5kCeQPyA+QExAORHuaZtj9M36lhgX0FsmMB2Mt21Fd8QVMgGyA3AcB27cb4TMUNdgbkG0gnQNiudYzvmbjA3gPZDAH0tm1qrGhhJ0C+Wk5Kg5pnYk1ECfwB5NoBbNeuNWY0sPdBjhzCdu1IY7uFTYAUI4DtWlFzcAf8CKQeIXBdc/CvfieAt8Cinw6ZDBQKUC5Do6FWLuuxTMZ3/EWTg7MRrvgZkXxepFIR8Ty5I8/T3/J536NccQW7CHJpm9jKikitJj1Vq2lbH8CXmkv4wDk/y8dSSaxVKvleduZcXMNPgEmbhrkcZLP2jrNZ7WOpSZNL6MBztvvopSVIp+0dp9Pax8defs4F8LQtcCoFyaS942RS+/gAnnYBfAaITcOrK2i37R2329rHdjIxuYQOfAJYlWDqdWi17B23WtrHUp7JJfRZejVGs/SqC+CHIBcxuA9faC5uFh97MVhp7blcWq77XfBnMiKFgki5LNJoqJXLeiyT6WsDse4SeBnkPMLd0rnm4G63dAhUIyy1VE0OroATZ8BWhMBbJgenVY95kNMI/s6nGrs/DVABTDSBYgSjWzSxIynkPQNpOhzdpsbsXwPWeBO/gJLDM1wyMSMtxi+AtByMbktjDaYgqviH5lqWMM+qiXFIPCQLIMchju5xEKMbNPRaiMBrxE8yC7IbAuyu+o6lJAvSDhC2rT5jLfkU0IPxjvqKvWQOZD8A4H31NRSSFwNuH8/Vx9BIEuZlFK/PJ/0bjh+HBgI91eesvTtE72jdgX4McuAD9kD7DLXkvWVZ90bbjoTkc49bVUfbjIxkFmT7P8DbMV5N9Q39AKT6D9iq/jaSkpe39s4tPTbSknfmdYVL/exWEdzcZQL4aL58GcKXwccaa6yx3Okve0d25MUPGTcAAAAASUVORK5CYII=";
+var goToPin = new Image();
+
+var canvasOffsetX, canvasOffsetY;
+
+var data;
+var map;
+var popupTimeout;
+var timeoutStart;
+
+var selectedObstacleID;
+
+window.onload = function () {
+  var popup = document.getElementById("popup");
+  var popupImage = document.getElementById("popup-image");
+  var triangle = document.getElementById("triangle");
+  var largePhoto = document.getElementById("largePhoto");
+  var largePhotoImage = document.getElementById("largePhoto-image");
+  var dataImagePattern =
+    /^data:(image\/[a-z0-9.+-]+);base64,([a-z0-9+/=\s]+)$/i;
+
+  function revokeObjectURL(imageElement) {
+    if (imageElement.dataset.objectUrl) {
+      URL.revokeObjectURL(imageElement.dataset.objectUrl);
+      delete imageElement.dataset.objectUrl;
+    }
+  }
+
+  function decodeImageData(rawValue) {
+    if (typeof rawValue !== "string") {
+      return null;
+    }
+
+    const value = rawValue.trim();
+    if (!value) {
+      return null;
+    }
+
+    const match = value.match(dataImagePattern);
+    if (!match) {
+      return null;
+    }
+
+    const mimeType = match[1].toLowerCase();
+    const base64Payload = match[2].replace(/\s+/g, "");
+
+    try {
+      const binary = atob(base64Payload);
+      const bytes = new Uint8Array(binary.length);
+      for (let index = 0; index < binary.length; index++) {
+        bytes[index] = binary.charCodeAt(index);
+      }
+      return new Blob([bytes], { type: mimeType });
+    } catch {
+      return null;
+    }
+  }
+
+  function clearImageSource(imageElement) {
+    revokeObjectURL(imageElement);
+    imageElement.removeAttribute("src");
+  }
+
+  function applySafeImageSource(imageElement, rawValue) {
+    const imageBlob = decodeImageData(rawValue);
+    if (!imageBlob) {
+      console.warn("Ignoring unsafe obstacle image source");
+      return false;
+    }
+
+    revokeObjectURL(imageElement);
+    const objectUrl = URL.createObjectURL(imageBlob);
+    imageElement.dataset.objectUrl = objectUrl;
+    imageElement.src = objectUrl;
+    return true;
+  }
+
+  var socket = new WebSocket("ws://" + window.location.hostname + ":7906");
+
+  socket.onopen = () => {
+    console.log("Connected to WebSocket server");
+
+    socket.send(JSON.stringify({ command: "getRobots" }));
+  };
+
+  socket.onmessage = (event) => {
+    // console.log(`Received message: ${event.data}`);
+    data = JSON.parse(event.data);
+    var command = data.command;
+    // console.log(`Received message command: ${command}`);
+
+    switch (command) {
+      case "robotList":
+        console.log("Robot IDs: " + data.parameters);
+
+        selectedElement = document.getElementById("robotSelect");
+
+        if (selectedElement.childElementCount == 0) {
+          data.parameters.forEach((robot) => {
+            var option = document.createElement("option");
+            option.value = robot[0];
+            option.text = robot[1];
+            selectedElement.add(option);
+          });
+
+          getMap(selectedElement.value); // get map once for the selected robot
+          selectedElement.addEventListener("change", (event) => {
+            getMap(event.target.value);
+          });
+        }
+        break;
+
+      case "map":
+        map = data.map;
+        console.log(`map:`, map);
+
+        if (selectedElement.value == data.duid) {
+          mapBase64 = data.base64;
+          scaleFactor = data.scale;
+          left = map.IMAGE.position.left;
+          topMap = map.IMAGE.position.top;
+          drawBackgroundImage();
+        }
+        break;
+      case "get_status":
+        if (selectedElement.value == data.duid) {
+          if (data.parameters.isCleaning) {
+            // console.log("Cleaning in progress for robot: " + data.duid);
+            startButton.disabled = true;
+            stop.disabled = false;
+          } else {
+            // console.log("Cleaning not in progress for robot: " + data.duid);
+            startButton.disabled = false;
+            stop.disabled = true;
+          }
+        }
+        break;
+    }
+  };
+
+  socket.onclose = () => {
+    console.log("Disconnected from WebSocket server");
+    setTimeout(() => {
+      window.onload();
+    }, 10000);
+  };
+
+  function getMap(duid) {
+    const commandGetMap = {};
+    commandGetMap.command = "getMap";
+    commandGetMap.duid = duid;
+    socket.send(JSON.stringify(commandGetMap));
+  }
+
+  const canvas = document.getElementById("myCanvas");
+  const ctx = canvas.getContext("2d");
+  ctx.imageSmoothingEnabled = false;
+
+  const maxPanX = canvas.width / 2;
+  const maxPanY = canvas.height / 2;
+
+  canvasOffsetX = canvas.getBoundingClientRect().left;
+  canvasOffsetY = canvas.getBoundingClientRect().top;
+  console.log("canvasOffsetX: " + canvasOffsetX);
+  console.log("canvasOffsetY: " + canvasOffsetY);
+
+  async function localCoordsToRobotCoords(imagePoint) {
+    const image = new Image();
+    image.src = mapBase64;
+    const point = {};
+    await new Promise((resolve) => {
+      image.onload = function () {
+        point.x = Math.round((imagePoint.x + left) * 50.0);
+        point.y = Math.round(
+          (image.height / scaleFactor + topMap - imagePoint.y) * 50.0
+        );
+        resolve(point);
+      };
+    });
+    return point;
+  }
+
+  function mouseXtoCanvasX(e) {
+    return (e.pageX || e.touches[0].clientX) - canvasOffsetX - 2;
+  }
+  function mouseYtoCanvasY(e) {
+    return (e.pageY || e.touches[0].clientY) - canvasOffsetY - 2;
+  }
+
+  function canvasXtoMapX(x) {
+    return roundTwoDecimals(
+      ((x - panOffsetX) / wheelZoom / zoomLevel + mapMinX) / scaleFactor
+    );
+  }
+  function canvasYtoMapY(y) {
+    return roundTwoDecimals(
+      ((y - panOffsetY) / wheelZoom / zoomLevel + mapMinY) / scaleFactor
+    );
+  }
+
+  function getOriginalX(transformedX) {
+    return Math.floor(
+      (transformedX - map.IMAGE.position.left) * scaleFactor - 2 - mapMinX
+    );
+  }
+  function getOriginalY(transformedY) {
+    return Math.floor(
+      (map.IMAGE.dimensions.height / scaleFactor +
+        map.IMAGE.position.top -
+        transformedY) *
+        scaleFactor -
+        2 -
+        mapMinY
+    );
+  }
+
+  function rectXtoRobotX(x) {
+    return Math.round(canvasXtoMapX((x + panOffsetX / wheelZoom) * wheelZoom));
+  }
+  function rectYtoRobotY(y) {
+    return Math.round(canvasYtoMapY((y + panOffsetY / wheelZoom) * wheelZoom));
+  }
+
+  let rects = [];
+  let zones = [];
+  let isDragging = false;
+  let isResizing = false;
+  let selectedRect = null;
+  let offsetRectX, offsetRectY;
+  let redDotOffsetX, redDotOffsetY;
+
+  async function downEvent(e) {
+    const mouseX = mouseXtoCanvasX(e);
+    const mouseY = mouseYtoCanvasY(e);
+    console.log(`mouseX: ${mouseX} mouseY: ${mouseY}`);
+
+    const mapX = canvasXtoMapX(mouseX);
+    const mapY = canvasYtoMapY(mouseY);
+
+    const point = await localCoordsToRobotCoords({ x: mapX, y: mapY });
+
+    // console.log("mousedown robot pos: " + JSON.stringify(point));
+    console.log("Robot coords: " + JSON.stringify([point.x, point.y]));
+    if (goToTarget == true) {
+      const data = {};
+      data.duid = selectedElement.value;
+      data.command = "app_goto_target";
+      data.parameters = [point.x, point.y];
+      socket.send(JSON.stringify(data));
+      goToTarget = false;
+      drawMap(true);
+    }
+
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+
+      const canvasMinRectX = Math.round(
+        (rect.x + panOffsetX / wheelZoom) * wheelZoom
+      );
+      const canvasMinRectY = Math.round(
+        (rect.y + panOffsetY / wheelZoom) * wheelZoom
+      );
+
+      const canvasMaxRectX = Math.round(
+        (rect.x + rect.width + panOffsetX / wheelZoom) * wheelZoom
+      );
+      const canvasMaxRectY = Math.round(
+        (rect.y + rect.height + panOffsetY / wheelZoom) * wheelZoom
+      );
+
+      offsetRectX = mouseX - canvasMinRectX;
+      offsetRectY = mouseY - canvasMinRectY;
+
+      redDotOffsetX = (mouseX - canvasMaxRectX) / wheelZoom;
+      redDotOffsetY = (mouseY - canvasMaxRectY) / wheelZoom;
+      const distanceRedDot = Math.sqrt(
+        Math.pow(redDotOffsetX, 2) + Math.pow(redDotOffsetY, 2)
+      );
+
+      if (distanceRedDot < 10) {
+        console.log("Resizing");
+        selectedRect = i;
+        isResizing = true;
+        e.preventDefault();
+      } else if (
+        offsetRectX >= 0 &&
+        offsetRectY >= 0 &&
+        offsetRectX <= rect.width * wheelZoom + 1 &&
+        offsetRectY <= rect.height * wheelZoom + 1
+      ) {
+        console.log("Square selected: " + i);
+        selectedRect = i;
+        isDragging = true;
+        e.preventDefault();
+        break;
+      }
+    }
+
+    if (!isResizing && !isDragging) {
+      isPanning = true;
+      startX = mouseX - panOffsetX;
+      startY = mouseY - panOffsetY;
+      console.log("startX: " + startX + " startY: " + startY);
+      drawMap(true);
+    }
+
+    if (map?.OBSTACLES2) {
+      map?.OBSTACLES2?.forEach((obstacle) => {
+        const canvasX =
+          getOriginalX(obstacle[0] / 50) * zoomLevel * wheelZoom + panOffsetX;
+        const canvasY =
+          getOriginalY(obstacle[1] / 50) * zoomLevel * wheelZoom + panOffsetY;
+        const x = obstacle[0] / 50;
+        const y = obstacle[1] / 50;
+
+        const distance = Math.sqrt(
+          Math.pow(mouseX - canvasX, 2) + Math.pow(mouseY - canvasY, 2)
+        );
+        console.log(`distance: ${distance}`);
+
+        if (distance <= 5) {
+          selectedObstacleID = obstacle[6];
+
+          if (popupTimeout) {
+            clearTimeout(popupTimeout);
+            popupTimeout = null;
+          }
+          console.log(`obstacle coords x: ${x}, y: ${y}`);
+
+          popupX = x;
+          popupY = y;
+
+          const data = {};
+          data.duid = selectedElement.value;
+          data.command = "get_photo";
+          data.attribute = {
+            data_filter: {
+              img_id: selectedObstacleID,
+              type: 1, // 1 = small photo, 0 full photo
+            },
+          };
+
+          clearImageSource(popupImage);
+
+          triangle.style.left = "45px";
+          triangle.style.top = "100px";
+
+          popup.style.display = "block";
+
+          socket.send(JSON.stringify(data));
+          socket.onmessage = function (event) {
+            const serverData = JSON.parse(event.data);
+
+            if (
+              serverData.image &&
+              applySafeImageSource(popupImage, serverData.image)
+            ) {
+              socket.onmessage = null;
+
+              popupImage.addEventListener("click", function () {
+                console.log(`Request to large photo started!`);
+                const data = {};
+                data.duid = selectedElement.value;
+                data.command = "get_photo";
+                data.attribute = {
+                  data_filter: {
+                    img_id: selectedObstacleID,
+                    type: 0, // 1 = small photo, 0 full photo
+                  },
+                };
+                socket.send(JSON.stringify(data));
+
+                socket.onmessage = function (event) {
+                  const serverData = JSON.parse(event.data);
+
+                  if (
+                    serverData.image &&
+                    applySafeImageSource(largePhotoImage, serverData.image)
+                  ) {
+                    popup.style.display = "none";
+                    clearImageSource(popupImage);
+                    largePhoto.style.display = "block";
+
+                    largePhotoImage.onclick = function () {
+                      clearImageSource(largePhotoImage);
+                      largePhoto.style.display = "none";
+                    };
+                    socket.onmessage = null;
+                  }
+                };
+
+                setTimeout(() => {
+                  clearImageSource(largePhotoImage);
+                  largePhoto.style.display = "none";
+                }, 10000);
+              });
+            }
+          };
+
+          // Hide the popup after 10 seconds
+          timeoutStart = Date.now();
+          popupTimeout = setTimeout(() => {
+            popup.style.display = "none";
+            clearImageSource(popupImage);
+            socket.onmessage = null;
+            popupTimeout = null;
+            selectedObstacleID = null;
+          }, 10000);
+          updatePopupPosition();
+          isPanning = false;
+        }
+      });
+    }
+    drawMap(true);
+  }
+
+  canvas.addEventListener("mousedown", downEvent);
+  canvas.addEventListener("touchstart", downEvent);
+
+  function upEvent(e) {
+    isDragging = false;
+    isResizing = false;
+    isPanning = false;
+    if (rects.length > 0) {
+      updateRobotZones();
+    }
+
+    // This is needed to prevent the popup from hiding instantly after showing it
+    const elapsed = Date.now() - timeoutStart;
+    if (elapsed > 250) popup.style.display = "none";
+
+    e.preventDefault(false);
+  }
+  canvas.addEventListener("mouseup", upEvent);
+  canvas.addEventListener("touchend", upEvent);
+
+  canvas.addEventListener("mouseleave", () => {
+    isPanning = false;
+  });
+
+  let goToX = 0;
+  let goToY = 0;
+  async function moveEvent(e) {
+    const mouseX = mouseXtoCanvasX(e);
+    const mouseY = mouseYtoCanvasY(e);
+    if (isDragging) {
+      rects[selectedRect].x = roundTwoDecimals(
+        (mouseX - panOffsetX - offsetRectX) / wheelZoom
+      );
+      rects[selectedRect].y = roundTwoDecimals(
+        (mouseY - panOffsetY - offsetRectY) / wheelZoom
+      );
+    } else if (isResizing) {
+      rects[selectedRect].width = roundTwoDecimals(
+        (mouseX - panOffsetX - rects[selectedRect].x - redDotOffsetX) /
+          wheelZoom
+      );
+      rects[selectedRect].height = roundTwoDecimals(
+        (mouseY - panOffsetY - rects[selectedRect].y - redDotOffsetY) /
+          wheelZoom
+      );
+    } else if (goToTarget) {
+      goToX = (mouseX - panOffsetX) / wheelZoom;
+      goToY = (mouseY - panOffsetY) / wheelZoom;
+    } else if (isPanning) {
+      const deltaX = roundTwoDecimals(mouseX - startX);
+      const deltaY = roundTwoDecimals(mouseY - startY);
+
+      // Calculate the limits based on the map dimensions and zoom level
+      const minOffsetX = maxPanX - mapSizeX * zoomLevel * wheelZoom;
+      const maxOffsetX = maxPanX;
+      const minOffsetY = maxPanY - mapSizeY * zoomLevel * wheelZoom;
+      const maxOffsetY = maxPanY;
+
+      // Clamp the pan offsets within the defined boundaries
+      panOffsetX = clamp(deltaX, minOffsetX, maxOffsetX);
+      panOffsetY = clamp(deltaY, minOffsetY, maxOffsetY);
+
+      updatePopupPosition();
+    }
+  }
+  canvas.addEventListener("mousemove", moveEvent);
+  canvas.addEventListener("touchmove", moveEvent);
+
+  canvas.addEventListener("wheel", (e) => {
+    e.preventDefault();
+    const clientX = mouseXtoCanvasX(e);
+    const clientY = mouseYtoCanvasY(e);
+    const prevZoom = wheelZoom;
+
+    if (e.deltaY < 0) {
+      wheelZoom += zoomStep;
+    } else {
+      wheelZoom -= zoomStep;
+    }
+    wheelZoom =
+      roundTwoDecimals(Math.min(Math.max(wheelZoom, minZoom), maxZoom) * 100) /
+      100;
+
+    panOffsetX = roundTwoDecimals(
+      clientX + panOffsetX - (clientX * wheelZoom) / prevZoom
+    );
+    panOffsetY = roundTwoDecimals(
+      clientY + panOffsetY - (clientY * wheelZoom) / prevZoom
+    );
+
+    updatePopupPosition();
+    drawMap(true);
+
+    if (rects.length > 0) {
+      updateRobotZones();
+    }
+
+    console.log(`wheelZoom: ${wheelZoom}`);
+  });
+
+  const deleteButton = document.getElementById("deleteButton");
+  deleteButton.addEventListener("click", function () {
+    if (rects[selectedRect]) {
+      rects.splice(selectedRect, 1);
+      console.log("rects.length: " + rects.length);
+      if (rects.length < 5) {
+        addButton.disabled = false;
+      }
+      if (rects.length < 1) {
+        deleteButton.disabled = true;
+      }
+      selectedRect = rects.length - 1;
+      drawMap(true);
+    }
+  });
+
+  const addButton = document.getElementById("addButton");
+  addButton.addEventListener("click", function () {
+    goToTarget = false;
+
+    const width = (25 * scaleFactor) / wheelZoom;
+    const height = (25 * scaleFactor) / wheelZoom;
+    const x = canvas.width / 2 - width / 2;
+    const y = canvas.height / 2 - height / 2;
+
+    rects.push({ x: x, y: y, width: width, height: height });
+    console.log("length: " + rects.length);
+    if (rects.length > 0) {
+      deleteButton.disabled = false;
+    }
+    if (rects.length > 4) {
+      addButton.disabled = true;
+    }
+    console.log("Square spawned at: " + x + ":" + y);
+    selectedRect = rects.length - 1;
+    drawMap(true);
+    updateRobotZones();
+  });
+
+  const startButton = document.getElementById("startButton");
+  startButton.addEventListener("click", function () {
+    const data = {};
+    data.duid = selectedElement.value;
+    if (zones.length > 0) {
+      data.command = "app_zoned_clean";
+      data.parameters = zones;
+    } else {
+      data.command = "app_start";
+    }
+    console.log("Zones to start with: " + JSON.stringify(zones));
+    socket.send(JSON.stringify(data));
+    rects = [];
+    drawMap(true);
+
+    startButton.style.display = "none";
+    pauseButton.style.display = "inline-block";
+  });
+
+  const pauseButton = document.getElementById("pauseButton");
+  pauseButton.addEventListener("click", function () {
+    const data = {};
+    data.duid = selectedElement.value;
+    data.command = "app_pause";
+    socket.send(JSON.stringify(data));
+
+    startButton.style.display = "inline-block";
+    pauseButton.style.display = "none";
+  });
+
+  const stop = document.getElementById("stopButton");
+  stop.addEventListener("click", function () {
+    data.duid = selectedElement.value;
+    console.log(map);
+    data.command = "app_stop";
+    socket.send(JSON.stringify(data));
+
+    startButton.style.display = "inline-block";
+    pauseButton.style.display = "none";
+  });
+
+  const dock = document.getElementById("dockButton");
+  dock.addEventListener("click", function () {
+    const data = {};
+    data.duid = selectedElement.value;
+    data.command = "app_charge";
+    socket.send(JSON.stringify(data));
+  });
+
+  const goTo = document.getElementById("goToButton");
+  goTo.addEventListener("click", function () {
+    goToTarget = true;
+    goToPin.src = go_to_pin_image;
+    drawMap(true);
+  });
+
+  const resetZoom = document.getElementById("resetZoomButton");
+  resetZoom.addEventListener("click", function () {
+    panOffsetX = 0;
+    panOffsetY = 0;
+    wheelZoom = 1;
+    updatePopupPosition();
+    drawMap(true);
+  });
+
+  const image = new Image();
+  const tempCanvas = document.createElement("canvas");
+
+  async function drawBackgroundImage() {
+    // console.log("mapBase64:" + mapBase64);
+    image.src = mapBase64;
+    image.onload = await function () {
+      const tempCtx = tempCanvas.getContext("2d", { willReadFrequently: true });
+
+      let mapMaxX = 0,
+        mapMaxY = 0;
+      mapMinX = image.width;
+      mapMinY = image.height;
+
+      tempCanvas.width = image.width;
+      tempCanvas.height = image.height;
+      tempCtx.drawImage(image, 0, 0);
+
+      // Get the image data and calculate the actual dimensions of the image
+      const imageData = tempCtx.getImageData(0, 0, image.width, image.height);
+      const pixels = imageData.data;
+      for (let i = 0; i < pixels.length; i += 4) {
+        const alpha = pixels[i + 3];
+        if (alpha > 0) {
+          // Check if the alpha value is non-zero
+          const x = (i / 4) % image.width;
+          const y = Math.floor(i / 4 / image.width);
+
+          mapMinX = Math.min(mapMinX, x);
+          mapMinY = Math.min(mapMinY, y);
+          mapMaxX = Math.max(mapMaxX, x);
+          mapMaxY = Math.max(mapMaxY, y);
+        }
+      }
+      // Add some padding to the map
+      mapMinX--;
+      mapMinY--;
+      mapMaxX++;
+      mapMaxY++;
+
+      mapSizeX = mapMaxX - mapMinX;
+      mapSizeY = mapMaxY - mapMinY;
+
+      const aspectRatio = canvas.width / canvas.height;
+
+      const contentAspectRatio = mapSizeX / mapSizeY;
+
+      if (contentAspectRatio > aspectRatio) {
+        console.log(
+          "Aspect ratio is greater than canvas aspect ratio mapSizeX: " +
+            mapSizeX +
+            " mapSizeY: " +
+            mapSizeY
+        );
+        zoomLevel = Math.round((canvas.width * 100) / mapSizeX) / 100;
+      } else {
+        console.log(
+          "Aspect ratio is less than canvas aspect ratio mapSizeX: " +
+            mapSizeX +
+            " mapSizeY: " +
+            mapSizeY
+        );
+        zoomLevel = Math.round((canvas.height * 100) / mapSizeY) / 100;
+      }
+      console.log("zoomLevel: " + zoomLevel);
+
+      drawMap(true);
+    };
+  }
+
+  function updateRobotZones() {
+    // console.log("rect.x : " + rect.x + " rect.y: " + rect.y);
+    // console.log("rect.x : " + rect.x + " rect.y: " + rect.y);
+
+    // console.log("canvasOffsetX : " + canvasOffsetX + " canvasOffsetY: " + canvasOffsetY);
+    // console.log("panOffsetX : " + panOffsetX + " panOffsetY: " + panOffsetY);
+
+    // console.log("x : " + getX(rect.x) + " y: " + getY(rect.y));
+    // console.log("rect.x : " + rect.x + " rect.y: " + rect.y);
+
+    zones = [];
+    for (const rect in rects) {
+      const zone = [];
+
+      // const x = canvasXtoMapX(rects[rect].x);
+      const x = rectXtoRobotX(rects[rect].x);
+      const y = rectYtoRobotY(rects[rect].y);
+      const xMax = rectXtoRobotX(rects[rect].x + rects[rect].width);
+      const yMax = rectYtoRobotY(rects[rect].y + rects[rect].height);
+
+      localCoordsToRobotCoords({ x: x, y: y }).then((coords1) => {
+        console.log("coords1.x : " + coords1.x + " coords1.y: " + coords1.y);
+        localCoordsToRobotCoords({ x: xMax, y: yMax }).then((coords2) => {
+          console.log("coords2.x : " + coords2.x + " coords2.y: " + coords2.y);
+
+          zone.push(Math.min(coords1.x, coords2.x));
+          zone.push(Math.min(coords1.y, coords2.y));
+          zone.push(Math.max(coords1.x, coords2.x));
+          zone.push(Math.max(coords1.y, coords2.y));
+          zone.push(parseInt(document.getElementById("cleanCount").value)); // clean count
+          zones.push(zone);
+          // console.log("zone: " + JSON.stringify(zone));
+          console.log("Zones length: " + zones.length);
+          console.log("Zones to start with: " + JSON.stringify(zones));
+        });
+      });
+    }
+  }
+
+  function updatePopupPosition() {
+    if (popupTimeout) {
+      const x = getOriginalX(popupX) * zoomLevel * wheelZoom + panOffsetX;
+      const y = getOriginalY(popupY) * zoomLevel * wheelZoom + panOffsetY;
+
+      popup.style.left = `${x - parseInt(popupImage.style.width, 10) / 2 + 10}px`;
+      popup.style.top = `${y - parseInt(popupImage.style.height, 10)}px`;
+    }
+  }
+
+  // Create a temporary canvas to draw the truncated image
+  const truncatedCanvas = document.createElement("canvas");
+  let rafId = null;
+  function drawMap(manualDraw = false) {
+    if (manualDraw || isDragging || isResizing || isPanning || goToTarget) {
+      truncatedCanvas.width = mapSizeX;
+      truncatedCanvas.height = mapSizeY;
+      const truncatedCtx = truncatedCanvas.getContext("2d");
+      truncatedCtx.drawImage(
+        image,
+        mapMinX,
+        mapMinY,
+        mapSizeX,
+        mapSizeY,
+        0,
+        0,
+        mapSizeX,
+        mapSizeY
+      );
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.save();
+      ctx.translate(panOffsetX, panOffsetY);
+      ctx.scale(wheelZoom * zoomLevel, wheelZoom * zoomLevel);
+
+      ctx.drawImage(truncatedCanvas, 0, 0, mapSizeX, mapSizeY);
+
+      for (let i = 0; i < rects.length; i++) {
+        const rect = rects[i];
+
+        ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
+        ctx.fillRect(
+          rect.x / zoomLevel,
+          rect.y / zoomLevel,
+          rect.width / zoomLevel,
+          rect.height / zoomLevel
+        );
+        ctx.lineWidth = 5;
+        ctx.strokeStyle = "rgba(255, 255, 255, 1)";
+        ctx.strokeRect(
+          rect.x / zoomLevel,
+          rect.y / zoomLevel,
+          rect.width / zoomLevel,
+          rect.height / zoomLevel
+        );
+
+        ctx.fillStyle = "red";
+        ctx.beginPath();
+        ctx.arc(
+          (rect.x + rect.width) / zoomLevel,
+          (rect.y + rect.height) / zoomLevel,
+          10,
+          0,
+          2 * Math.PI
+        );
+        ctx.fill();
+
+        console.log("Square position: " + JSON.stringify(rect));
+      }
+
+      const goToPosX = (goToX - 8) / zoomLevel;
+      const goToPosY = (goToY - 12) / zoomLevel;
+      const goToSizeX = goToPin.width / 2;
+      const goToSizeY = goToPin.height / 2;
+
+      ctx.drawImage(goToPin, goToPosX, goToPosY, goToSizeX, goToSizeY);
+
+      ctx.restore();
+
+      // this is needed to update the canvas only when needed
+      if (!rafId) {
+        rafId = requestAnimationFrame(() => {
+          rafId = null;
+          drawMap();
+        });
+      }
+    }
+  }
+
+  function roundTwoDecimals(number) {
+    return Math.round(number * 100) / 100;
+  }
+
+  function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+};