homebridge-roborock-vacuum-update/roborockLib/lib/map/zones.js

Comprehensive Homebridge plugin for Roborock vacuum cleaners with full HomeKit integration including mopping, dock features, and advanced controls.

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 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);
	}

	// maybe I need the functions one day
	// function mapXtoCanvasX(x) {
	// 	return roundTwoDecimals((x * scaleFactor - mapMinX) * wheelZoom * zoomLevel);
	// }
	// function mapYtoCanvasY(y) {
	// 	return roundTwoDecimals((y * scaleFactor - mapMinY) * wheelZoom * zoomLevel);
	// }

	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
						},
					};

					if (popupImage.src) popupImage.src = "";

					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) {
							popupImage.src = 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) {
										popup.style.display = "none";
										largePhoto.style.display = "block";
										largePhotoImage.src = serverData.image;

										largePhotoImage.onclick = function () {
											largePhoto.style.display = "none";
										};
										socket.onmessage = null;
									}
								};

								setTimeout(() => {
									largePhoto.style.display = "none";
								}, 10000);
							});
						}
					};

					// Hide the popup after 10 seconds
					timeoutStart = Date.now();
					popupTimeout = setTimeout(() => {
						popup.style.display = "none";
						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));
			}

			// ctx.beginPath();
			// ctx.arc(100, 100, 50, 0, 2 * Math.PI);
			// ctx.fillStyle = "red";
			// ctx.fill();
			// ctx.stroke();

			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);
	}
};