fix(ui): Reduce path render solution and render charger + robot as lo…

…cations
Hypfer · Mar 7, 2021 · 1c4e4f3 · 1c4e4f3
1 parent fe31438
commit 1c4e4f3
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 84 deletions.
diff --git a/client/zone/js-modules/locations.js b/client/zone/js-modules/locations.js
@@ -6,6 +6,13 @@
  * and can define hooks for user-interaction such as tapping or panning.
  */
 
+const robot = "data:image/png;base64,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";
+const img_robot = new Image();
+img_robot.src = robot;
+
+const charger = "data:image/png;base64,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";
+const img_charger = new Image();
+img_charger.src = charger;
 
 const delete_button = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAX6QAAF+kB74ID/gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAUoSURBVFiFtZfda1pnHMc/zzm+9ag5Ek3VvEASrTEUukpmRqEwt8uNDcbu+l9su9oouQmUjUH/hcFod7mxwgaDQbtBoc1JLkqwpkltS7P40ph0Ok01Jj67SI7VxKjp2PfqnPP8fL7f5+fzexP0iXA4bB8YGHhPCPGxlPJtIcQ44Dlc/ht4CixKKW/VarXbyWRyt599RS+DWCw2LISYE0JcAdx96i0BN4H5paWl7BsJSCQSjlKpdFUI8RmgAdjtdvx+Pz6fD03TsNlsAOzu7rKzs0OhUCCXy7G72zx8Bbjudruv3blzp9q3gJmZmSDwE/AOgMfjIRqN4vV6EaK706SUbG1tkUqlKBaL5ud7iqJ8YhhGrqeAWCz2lqIovwAjVquVCxcuEAgEehJ3EpLNZlleXqZerwP8BXywtLS0fKKAeDweaDQaBjDqdDqJx+O4XK5TER9FpVLBMAzK5TJAZm9vb/bBgwcb5rpqPiQSCUetVvsNmHa5XFy+fJkzZ878J3IAm83GyMgIuVyOer3uVlX1kqZpN7a3t/cBFNOwVCpdBWatVivxeByr1QocuDKfz5+aOJ/PI6UEwGq1Mjs7i9VqRUp5Sdf1r0w7FQ5CTVGUHwBrLBZjcHCwSZ5MJnn48CH7+/sMDQ31Rb66usry8jLVahW/348QApvNhqZpZLNZgJnR0dHvMplMWQEQQswBmsfjIRAINDd68eIFz549AyCdTvPo0aO+yFdXVwFYX19v814wGETXdQBXo9GYA1DD4bDd4XB8D9gvXryI0+ls/sC8gFtbWwBsb2939UQrOUAoFGJiYqL5LoRA0zQ2NjYAIoODg9cVj8fzPjBgs9nwer3HNo1EIkQikeZ7Op0mlUr1RT49PX3MzufzYbfbAXSHw5FQg8Hg50B8ZGSkzf2tMIWZnnj58mWbJ/olN71QLpcplUoIIUoWYMZU1g2RSAQpJWtra01PKIqCEKKNPBwOE41Gu+7l8/lYX19HSjljASaBtv/+JExNTbURmmJMhEKhnuRHuCYVYABoxn0vRCIRzp07d+x7OBw+0e1HYRYxQFe6GZ6ETnXBTDqnhcJB7TYLRk8cvXAm+s0TR7iKCvAEDorGaclDoVBbiK6trXUM0aM4LEwATxRgEaBQKJyafHp6uu880QqTS0q5qEgpbwFdC06vOD+tCJNLVdWflVqtdhso1Wq1jl7oN8n0K2Jzc9Ns2Yo7Ozt/Kofd602AVCrVdpvz+fyxJNMt1I6GaDqdJpd73YVJKVlZWQFACHEjmUzummE4D1SKxaJZLgE4e/Ys4+PjzZP3k2SmpqaanhgbG8Pv9zfXMpmM2Sf+o6rqPBz2A9lstjw8POwA3i0UCgSDQWw2G0IIhoaG0HW9rar1gtfrRdd1JicnmzmjXC6zuLhIo9EAuGYYxq/Q0hG53e5rwL16vc7CwkIzVoUQJxapbjAbETiIe8Mw2NvbA7hbrVa/Nu06NaULwNj/1JQ+t1gss/fv32+GnNpqnMlkysPDw78DH9Xr9YGNjQ00TcPlcr1RW57JZDAMg2q1CvBcCPGhYRhPW+067hqPxwNSyh+llJcAdF0nGo3i8/n6ErK5ucnKykrrYHLXYrF82nryrgLgYBj1eDxfSim/AFzwejTzer04nc620axSqVAoFMjn862jWRn4tlgsfvP48eNaJ56exzm8F3PAFUDvZX+IohDihqqq851OfSoBJs6fP29zOBwJczwHJjgYzyVQBJ5IKRcVRbn16tWrP/odz/8FrN5m2Cy9u4AAAAAASUVORK5CYII=";
 const img_delete_button = new Image();
@@ -37,6 +44,68 @@ const img_segment_active = new Image();
 img_segment_active.src = segment_active;
 
 
+export class Robot {
+    constructor(x ,y, angle) {
+        this.x = x;
+        this.y = y;
+        this.angle = angle;
+    }
+
+    draw(ctx, transformFromMapSpace, scaleFactor) {
+        const p1 = new DOMPoint(this.x, this.y).matrixTransform(transformFromMapSpace);
+
+        function rotateRobot(img, angle) {
+            var canvasimg = document.createElement("canvas");
+            canvasimg.width = img.width;
+            canvasimg.height = img.height;
+            var ctximg = canvasimg.getContext("2d");
+            ctximg.clearRect(0, 0, img.width, img.height);
+            ctximg.translate(img.width / 2, img.width / 2);
+            ctximg.rotate(angle * Math.PI / 180);
+            ctximg.translate(-img.width / 2, -img.width / 2);
+            ctximg.drawImage(img, 0, 0);
+            return canvasimg;
+        }
+
+        const scaledSize = {
+            width: Math.max(img_robot.width / (2.5 / scaleFactor), img_robot.width),
+            height: Math.max(img_robot.height / (2.5 / scaleFactor), img_robot.height)
+        };
+
+        ctx.drawImage(
+            rotateRobot(img_robot, this.angle),
+            p1.x - scaledSize.width / 2,
+            p1.y - scaledSize.height / 2,
+            scaledSize.width,
+            scaledSize.height
+        );
+    }
+}
+
+export class Charger {
+    constructor(x ,y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    draw(ctx, transformFromMapSpace, scaleFactor) {
+        const p1 = new DOMPoint(this.x, this.y).matrixTransform(transformFromMapSpace);
+
+        const scaledSize = {
+            width: Math.max(img_charger.width / (2.5 / scaleFactor), img_charger.width),
+            height: Math.max(img_charger.height / (2.5 / scaleFactor), img_charger.height)
+        };
+
+        ctx.drawImage(
+            img_charger,
+            p1.x - scaledSize.width / 2,
+            p1.y - scaledSize.height / 2,
+            scaledSize.width,
+            scaledSize.height
+        );
+    }
+}
+
 /**
  * Represents a point the robot can be sent to.
  */
@@ -980,4 +1049,4 @@ export class SegmentLabel {
             stopPropagation: false
         };
     }
-}
+}
diff --git a/client/zone/js-modules/path-drawer.js b/client/zone/js-modules/path-drawer.js
@@ -1,11 +1,3 @@
-const rocky = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAX6QAAF+kB74ID/gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAVjSURBVFiFtZdPbFPZFcZ/x45x7Jhx7FghBNtgL4pqEYGgQkJyUJICUitmSuiigl0kVpWyqGY1aBg9KSLSMBILEOsuyBCyqSh4EEWV6xGMFNFpFrGi/JHGKaFOi4wNOP4Xi/GZRWw3w4BtGPhW791z7vd977573ztHaBGjo6PWrq6uQeAj4FfALqCzGn4G/Bv4FrgJRA3DKLfCK80SDMPoBT4DTqvq1hb9ZkXky3K5PDY+Pv7ftzJgGEY78Kmq/gmwAzgcDnbv3k0gEMDtdmOz2QAoFouk02mWl5dZXFwkn89vkIvkgYvAuGEYpZYNnD17drvFYrkBHATwer0MDQ0RCAQQabxoqkoikSAajZJMJmvD0yIybBjG/5oaOHfu3F6z2fyVqu6w2WwcP36cUCjUVPhVRubm5ohEIpRKJYD/VCqV346NjcVfa8AwjB5V/SfgdbvdnD59Go/H80bCLyOTyTA5OUkqlQJYffHixcHz58/Xl8a8SbxdVf8G/NLj8XDmzBmcTufPEgew2Wz09fWxsLBAsVjcajabD/X19U08ePDgewDTptxPgYM2m41Tp07VN9i7QI2zvb0dVT3kdrvP1mJm2DhqqnoNsAwPD7Nz5853Jl6D3W7H6XQyPz8PcGBwcPDPsVgs11aNfwbYvV4voVCoKdnDhw+5f/8+q6uriAh+v5/+/n62b9/ecN6ePXuYnp4mmUw6qpp/NI+OjlrtdvtVwHrixAncbndDkpmZGW7dusX+/fs5cuQIe/fuZX19nUgkgsfjabhpRYTOzk5mZ2cRkV8MDAxcbOvq6vq1qm51OBwEAoGG4k+fPuXu3buMjIywbdu2+ng4HMbr9TI1NYXf78dut7+WIxgM4nA4yOVyThEZaFPVDwHcbjczMzMNDSwtLREKhX4kXsOuXbvwer3cuXOn6R5yu93kcjmAj9pE5ICqsrKywsrKSsOJFouFY8eOvTbe29vLvXv3mJ2dbchTg6oeaFPVAIDP58NqtTackMlkWFtbe208m83icrlwuVwNedbX13n06BFAsA34AODkyZNNJy4vL3Pjxg3C4TBbtmz5USyXy7GwsMDIyAjd3d1NH+TSpUuIiNPUMPMlBAIBfD4f165d49mzZ/XxVCrFxMQE+/btayr+MtqALOApFotNVwBgeHiYaDTKlStXcLlcVCoV1tbWCIfDhMPhlkSLxSIAqvq8DUgAnkwmQ29vb9PJZrOZo0ePcvjwYR4/foyI0NPTg8ViaUkcIJ1O1y4TJjbKKBKJRMsEAFarFb/fj8/neyNx2NhLACLyL5Oq3gRYXFykUqm8EdHboFKpsLS0VLv+q8lkMv0DyObz+bqz94lEIkE+n0dEnptMpq9NhmGUReRLgGg0iqq+N3FVJRqN1m4nDMMomwDK5fKYiOSTySRzc3PvzUA8Hmd1dRUgVy6Xx6BakFRL54sAkUiEJ0+evHPxVCrF7du3ARCRL8bHxx/XDVQxDkyXSiUmJyfrZ/VdoFAocP36dUqlEiLyTTqd/rwWq9eEsVjsxeDg4Fci8odCoeCcn58nGAzS0dHxs8TT6TRXr16tnf1VETl24cKF+mfUvDk5Fovl+vv7/y4iHxaLxQ/i8ThOp5Pu7u63Ksvj8ThTU1Nks1mAFRH5jWEY323OeyWrYRg9wF9U9RDAjh07GBoaIhgMNjVSqVTqjUl1wyEi35TL5d/X3ntTA1BvRj9R1Y8BB0BHR0e9NXO5XPXXUygUyGQyP2nNgJyIfJFOpz+/fPny+qt0WmlOe/h/c9pSoyAiz4GJanP6k6d+IwObjGwBBlT1d9UqKgB0ioiq6nM2fmrfqupNk8n0davt+Q+B3zZ0rleEjAAAAABJRU5ErkJggg==";
-const img_rocky = new Image();
-img_rocky.src = rocky;
-
-const charger = "data:image/png;base64,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";
-const img_charger = new Image();
-img_charger.src = charger;
-
 /**
  * Object for drawing the robot path onto its on canvas.
  * It's not displayed directly but used to easily paint the map image onto another canvas.
@@ -22,35 +14,27 @@ img_charger.src = charger;
 export function PathDrawer(width, height) {
     let path = { current_angle: 0, points: [] };
     let predictedPath = undefined;
-    let robotPosition = {
-        points: [2560, 2560],
-        metaData: {
-            angle: 0
-        }
-    };
-    let chargerPosition = [2560, 2560];
     const canvas = document.createElement("canvas");
 
     canvas.width = width;
     canvas.height = height;
     // Used to draw smoother path when zoomed into the map
     let scaleFactor = 1;
     let actualScaleFactor = 1;
-    const maxScaleFactor = 5000/Math.max(width, height);
+
+    //required for mobile safari
+    //see https://github.com/jhildenbiddle/canvas-size#test-results
+    const maxScaleFactor = 4096/Math.max(width, height);
 
     /**
      * Public function for updating the path
      *
      * @param {Array} newPath
-     * @param {any} newRobotPosition
-     * @param {any} newChargerPosition
      * @param {any} newPredictedPath
      */
-    function setPath(newPath, newRobotPosition, newChargerPosition, newPredictedPath) {
+    function setPath(newPath, newPredictedPath) {
         path = newPath;
         predictedPath = newPredictedPath;
-        robotPosition = newRobotPosition || robotPosition;
-        chargerPosition = newChargerPosition || chargerPosition;
     }
 
     /**
@@ -79,56 +63,6 @@ export function PathDrawer(width, height) {
         return coords.map(d => Math.floor(d / 5 * scaleFactor));
     }
 
-    function drawCharger(position) {
-        const ctx = canvas.getContext("2d");
-
-        const chargerPositionInPixels = mmToCanvasPx(position);
-        const scaledSize = {
-            width: Math.min(img_charger.width / (2.5 / scaleFactor), img_charger.width),
-            height: Math.min(img_charger.height / (2.5 / scaleFactor), img_charger.height)
-        };
-
-        ctx.drawImage(
-            img_charger,
-            chargerPositionInPixels[0] - scaledSize.height / 2,
-            chargerPositionInPixels[1] - scaledSize.width / 2,
-            scaledSize.height,
-            scaledSize.width
-        );
-    }
-
-    function drawRobot(position, angle) {
-        const ctx = canvas.getContext("2d");
-        function rotateRobot(img, angle) {
-            var canvasimg = document.createElement("canvas");
-            canvasimg.width = img.width;
-            canvasimg.height = img.height;
-            var ctximg = canvasimg.getContext("2d");
-            ctximg.clearRect(0, 0, img.width, img.height);
-            ctximg.translate(img.width / 2, img.width / 2);
-            ctximg.rotate(angle * Math.PI / 180);
-            ctximg.translate(-img.width / 2, -img.width / 2);
-            ctximg.drawImage(img, 0, 0);
-            return canvasimg;
-        }
-
-        const robotPositionInPixels = mmToCanvasPx(position);
-
-        const scaledSize = {
-            width: Math.min(img_rocky.width / (2.5 / scaleFactor), img_rocky.width),
-            height: Math.min(img_rocky.height / (2.5 / scaleFactor), img_rocky.height)
-        };
-
-
-        ctx.drawImage(
-            rotateRobot(img_rocky, angle),
-            robotPositionInPixels[0] - scaledSize.width / 2, // x
-            robotPositionInPixels[1] - scaledSize.height / 2, // y
-            scaledSize.width, // width
-            scaledSize.height // height
-        );
-    }
-
     function drawLines(points, ctx) {
         let first = true;
 
@@ -168,9 +102,6 @@ export function PathDrawer(width, height) {
             ctx.stroke();
             ctx.setLineDash([]);
         }
-
-        drawCharger(chargerPosition);
-        drawRobot(robotPosition.points, robotPosition.metaData.angle);
     }
 
     // noinspection JSDuplicatedDeclaration

diff --git a/client/zone/js-modules/vacuum-map.js b/client/zone/js-modules/vacuum-map.js
@@ -9,7 +9,9 @@ import {
     GotoTarget,
     SegmentLabel,
     VirtualWall,
-    Zone
+    Zone,
+    Robot,
+    Charger
 } from "./locations.js";
 import {TouchHandler} from "./touch-handling.js";
 
@@ -103,6 +105,28 @@ export function VacuumMap(canvasElement) {
             }));
     }
 
+    function updateRobotPosition(robot) {
+
+        locations = locations
+            .filter(l => !(l instanceof Robot));
+
+        if (robot) {
+            const p1 = convertFromRealCoords({x: robot.points[0], y: robot.points[1]});
+            locations.push(new Robot(p1.x, p1.y, robot.metaData.angle));
+        }
+    }
+
+    function updateChargerLocation(charger) {
+
+        locations = locations
+            .filter(l => !(l instanceof Charger));
+
+        if (charger) {
+            const p1 = convertFromRealCoords({x: charger.points[0], y: charger.points[1]});
+            locations.push(new Charger(p1.x, p1.y));
+        }
+    }
+
     function updateGotoTarget(gotoTarget) {
 
         locations = locations
@@ -161,13 +185,20 @@ export function VacuumMap(canvasElement) {
         const no_mop_areas = mapData.entities.filter(e => e.type === "no_mop_area");
         const virtual_walls = mapData.entities.filter(e => e.type === "virtual_wall");
         const segments = mapData.layers.filter(e => e.type === "segment");
+        const robotPosition = mapData.entities.find(e => e.type === "robot_position");
+        const chargerLocation = mapData.entities.find(e => e.type === "charger_location");
 
-        updateSegmentMetadata(segments);
-        updateGotoTarget(go_to_target);
+        //the order is important here
         updateCurrentZones(active_zones);
         updateForbiddenZones(no_go_areas);
         updateForbiddenMopZones(no_mop_areas);
         updateVirtualWalls(virtual_walls);
+
+        updateChargerLocation(chargerLocation);
+        updateRobotPosition(robotPosition);
+
+        updateSegmentMetadata(segments);
+        updateGotoTarget(go_to_target);
     }
 
     /**
@@ -202,15 +233,11 @@ export function VacuumMap(canvasElement) {
         if (options.noPath) {
             pathDrawer.setPath(
                 undefined,
-                robot_position ? robot_position : undefined,
-                charger_location ? charger_location.points : undefined,
                 undefined
             );
         } else {
             pathDrawer.setPath(
                 path ? path : undefined,
-                robot_position ? robot_position : undefined,
-                charger_location ? charger_location.points : undefined,
                 predicted_path ? predicted_path : undefined
             );
         }
@@ -317,8 +344,6 @@ export function VacuumMap(canvasElement) {
 
         pathDrawer.setPath(
             path ? path : undefined,
-            robot_position ? robot_position : undefined,
-            charger_location ? charger_location.points : undefined,
             predicted_path ? predicted_path : undefined
         );
         pathDrawer.scale(initialScalingFactor);