Skip to content

Commit

Permalink
minor designer bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabrielburnworth
gabrielburnworth committed Jul 8, 2020
1 parent 5678191 commit 4527c4b
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 45 deletions.
60 changes: 37 additions & 23 deletions frontend/farm_designer/map/layers/images/__tests__/map_image_test.tsx
View file
Expand Up @@ -15,7 +15,7 @@ import {
fakeCameraCalibrationData,
} from "../../../../../__test_support__/fake_camera_data";

const NOT_DISPLAYED = "<svg><image></image></svg>";
const NOT_DISPLAYED = "image-not-shown";

describe("<MapImage />", () => {
const fakeProps = (): MapImageProps => {
Expand Down Expand Up @@ -43,20 +43,20 @@ describe("<MapImage />", () => {

it("doesn't render image", () => {
const wrapper = svgMount(<MapImage {...fakeProps()} />);
expect(wrapper.html()).toEqual(NOT_DISPLAYED);
expect(wrapper.html()).toContain(NOT_DISPLAYED);
});

it("renders pre-calibration preview", () => {
const p = fakeProps();
p.image && (p.image.body.meta = { x: 0, y: 0, z: 0 });
p.image.body.meta = { x: 0, y: 0, z: 0 };
const wrapper = svgMount(<MapImage {...p} />);
wrapper.find(MapImage).setState({ imageWidth: 100, imageHeight: 100 });
expect(wrapper.html()).toContain("image_url");
});

it("gets image size", () => {
const p = fakeProps();
p.image && (p.image.body.meta = { x: 0, y: 0, z: 0 });
p.image.body.meta = { x: 0, y: 0, z: 0 };
const wrapper = svgMount(<MapImage {...p} />);
expect(wrapper.find(MapImage).state())
.toEqual({ imageWidth: 0, imageHeight: 0 });
Expand Down Expand Up @@ -118,10 +118,10 @@ describe("<MapImage />", () => {
};

const INPUT_SET_1 = fakeProps();
INPUT_SET_1.image && (INPUT_SET_1.image.body.meta.x = 0);
INPUT_SET_1.image && (INPUT_SET_1.image.body.meta.y = 0);
INPUT_SET_1.image && (INPUT_SET_1.image.body.meta.z = 0);
INPUT_SET_1.image && (INPUT_SET_1.image.body.meta.name = "rotated_image");
INPUT_SET_1.image.body.meta.x = 0;
INPUT_SET_1.image.body.meta.y = 0;
INPUT_SET_1.image.body.meta.z = 0;
INPUT_SET_1.image.body.meta.name = "rotated_image";
INPUT_SET_1.cameraCalibrationData = {
offset: { x: "50", y: "75" },
center: { x: "240", y: "320" },
Expand All @@ -135,15 +135,15 @@ describe("<MapImage />", () => {
INPUT_SET_1.mapTransformProps.quadrant = 3;

const INPUT_SET_2 = cloneDeep(INPUT_SET_1);
INPUT_SET_2.image && (INPUT_SET_2.image.body.meta = {
INPUT_SET_2.image.body.meta = {
x: 221, y: 308, z: 1, name: "marked_image"
});
};
INPUT_SET_2.cameraCalibrationData.origin = "TOP_RIGHT";
INPUT_SET_2.mapTransformProps.quadrant = 1;

const INPUT_SET_3 = cloneDeep(INPUT_SET_2);
INPUT_SET_3.mapTransformProps.quadrant = 2;
INPUT_SET_3.image && (INPUT_SET_3.image.body.meta.name = "calibration_result");
INPUT_SET_3.image.body.meta.name = "calibration_result";

const INPUT_SET_4 = cloneDeep(INPUT_SET_3);
INPUT_SET_4.mapTransformProps.quadrant = 3;
Expand Down Expand Up @@ -183,7 +183,7 @@ describe("<MapImage />", () => {
INPUT_SET_15.cameraCalibrationData.origin = "TOP_RIGHT";

const INPUT_SET_16 = cloneDeep(INPUT_SET_11);
INPUT_SET_16.image && (INPUT_SET_16.image.body.meta.name = "1234");
INPUT_SET_16.image.body.meta.name = "1234";
INPUT_SET_16.cropImage = false;
INPUT_SET_16.cameraCalibrationData.origin = "TOP_LEFT";

Expand All @@ -194,20 +194,26 @@ describe("<MapImage />", () => {
INPUT_SET_18.cameraCalibrationData.origin = "BOTTOM_RIGHT";

const INPUT_SET_19 = cloneDeep(INPUT_SET_18);
INPUT_SET_19.image && (INPUT_SET_19.image.body.meta.name = "1234");
INPUT_SET_19.image.body.meta.name = "1234";

const INPUT_SET_20 = cloneDeep(INPUT_SET_19);
INPUT_SET_20.cropImage = true;
INPUT_SET_20.image && (INPUT_SET_20.image.body.meta.name = "1234");
INPUT_SET_20.image.body.meta.name = "1234";
INPUT_SET_20.cameraCalibrationData.rotation = undefined;
INPUT_SET_10.cropImage = true;

const INPUT_SET_21 = cloneDeep(INPUT_SET_20);
INPUT_SET_21.cameraCalibrationData.rotation = "50";

const INPUT_SET_22 = cloneDeep(INPUT_SET_18);
INPUT_SET_22.cameraCalibrationData.origin = "TOP_RIGHT";

const DATA = [
INPUT_SET_1,
INPUT_SET_1, INPUT_SET_2, INPUT_SET_3, INPUT_SET_4, INPUT_SET_5,
INPUT_SET_6, INPUT_SET_7, INPUT_SET_8, INPUT_SET_9, INPUT_SET_10,
INPUT_SET_11, INPUT_SET_12, INPUT_SET_13, INPUT_SET_14, INPUT_SET_15,
INPUT_SET_16, INPUT_SET_17, INPUT_SET_18, INPUT_SET_19, INPUT_SET_20,
INPUT_SET_21, INPUT_SET_22,
];

const expectedSize = { width: 385.968, height: 514.624 };
Expand Down Expand Up @@ -292,32 +298,40 @@ describe("<MapImage />", () => {
size: expectedSize, sx: -1, sy: 1, tx: 142.984, ty: 2567.688,
tOriginX: 193, tOriginY: 257, rotate: 0,
});
renderedTest(21, DATA, {
size: expectedSize, sx: 1, sy: -1, tx: -142.984, ty: -2567.688,
tOriginX: 193, tOriginY: 257, rotate: -50, cropPath: "url(#rectangle-1)",
});
renderedTest(22, DATA, {
size: expectedSize, sx: 1, sy: 1, tx: -142.984, ty: 2567.688,
tOriginX: 193, tOriginY: 257, rotate: -47,
});

it("doesn't render placeholder image", () => {
const p = cloneDeep(INPUT_SET_1);
p.image && (p.image.body.attachment_url = "/placehold.");
p.image.body.attachment_url = "/placehold.";
const wrapper = svgMount(<MapImage {...p} />);
expect(wrapper.html()).toEqual(NOT_DISPLAYED);
expect(wrapper.html()).toContain(NOT_DISPLAYED);
});

it("doesn't render image taken at different height than calibration", () => {
const p = cloneDeep(INPUT_SET_1);
p.image && (p.image.body.meta.z = 100);
p.image.body.meta.z = 100;
const wrapper = svgMount(<MapImage {...p} />);
expect(wrapper.html()).toEqual(NOT_DISPLAYED);
expect(wrapper.html()).toContain(NOT_DISPLAYED);
});

it("doesn't render images that are not adjusted for camera rotation", () => {
const p = cloneDeep(INPUT_SET_1);
p.image && (p.image.body.meta.name = "na");
p.image.body.meta.name = "na";
const wrapper = svgMount(<MapImage {...p} />);
expect(wrapper.html()).toEqual(NOT_DISPLAYED);
expect(wrapper.html()).toContain(NOT_DISPLAYED);
});

it("highlights image", () => {
const p = cloneDeep(INPUT_SET_1);
p.hoveredMapImage = 1;
p.image && (p.image.body.id = 1);
p.image.body.id = 1;
const wrapper = svgMount(<MapImage {...p} />);
wrapper.find(MapImage).setState({ imageWidth: 480, imageHeight: 640 });
expect(wrapper.find("image").props().opacity).toEqual(1);
Expand All @@ -327,7 +341,7 @@ describe("<MapImage />", () => {
it("doesn't highlight image", () => {
const p = cloneDeep(INPUT_SET_1);
p.hoveredMapImage = 100;
p.image && (p.image.body.id = 1);
p.image.body.id = 1;
const wrapper = svgMount(<MapImage {...p} />);
wrapper.find(MapImage).setState({ imageWidth: 480, imageHeight: 640 });
expect(wrapper.find("image").props().opacity).toEqual(0.3);
Expand Down
31 changes: 17 additions & 14 deletions frontend/farm_designer/map/layers/images/map_image.tsx
View file
Expand Up @@ -194,7 +194,7 @@ const parseCalibrationData =
};

export interface MapImageProps {
image: TaggedImage | undefined;
image: TaggedImage;
hoveredMapImage: number | undefined;
cameraCalibrationData: CameraCalibrationData;
cropImage: boolean;
Expand Down Expand Up @@ -226,21 +226,20 @@ export class MapImage extends React.Component<MapImageProps, MapImageState> {
};

render() {
const { imageWidth, imageHeight } = this.state;
const { image, cameraCalibrationData, mapTransformProps, cropImage,
} = this.props;
const { noCalib, imageScale, imageRotation } =
parseCalibrationData(cameraCalibrationData);
const { calibrationZ, center } = cameraCalibrationData;
const imageMetaName = image.body.meta.name || "";
const alreadyRotated = !!isRotated(imageMetaName, noCalib);
const imageUploadName = last(imageMetaName.split("/"));
const { x, y, z } = image.body.meta;

/* Check if the image exists. */
if (image && !image.body.attachment_url.includes("placehold")) {
if (!image.body.attachment_url.includes("placehold")) {
const imageUrl = image.body.attachment_url;
const { x, y, z } = image.body.meta;
const imageMetaName = image.body.meta.name || "";
const imageUploadName = last(imageMetaName.split("/"));
getImageSize(imageUrl, this.imageCallback);
const { imageWidth, imageHeight } = this.state;
const alreadyRotated = !!isRotated(imageMetaName, noCalib);

/* Check for necessary camera calibration and image data. */
if (imageScale && cameraZCheck(z, calibrationZ) && cameraOrientationCheck(
Expand All @@ -254,7 +253,7 @@ export class MapImage extends React.Component<MapImageProps, MapImageState> {
const hovered = this.props.hoveredMapImage == image.body.id;
const clipName = cropPathName(cropImage, imageRotation, image.body.id);
return <g id={`image-${image.body.id}`}>
{clipName != "none" &&
{clipName != "none" && imageRotation &&
<CropClipPaths imageId={image.body.id}
width={width} height={height}
transformOrigin={transformOrigin}
Expand All @@ -279,7 +278,10 @@ export class MapImage extends React.Component<MapImageProps, MapImageState> {
}
}
}
return <image />;
return <image id={"image-not-shown"}
data-comment={`${imageUploadName}: ${JSON.stringify({
image: { x, y, z, imageWidth, imageHeight }, cameraCalibrationData,
}).replace(/"/g, "")}`} />;
}
}

Expand Down Expand Up @@ -387,7 +389,7 @@ export const mapImagePositionData = (props: MapImagePositionDataProps):
y: { y, offset: imageOffsetY, o: o.y, qy: qCoords.qy },
quadrant, imageOrigin: imgOrigin, xySwap,
rotated90: { camera: rotated90, image: height > width },
}),
}).replace(/"/g, ""),
};
}
};
Expand Down Expand Up @@ -419,7 +421,7 @@ interface CropClipPathsProps {
imageId: number | undefined;
width: number;
height: number;
rotation: number | undefined;
rotation: number;
transformOrigin: string;
alreadyRotated: boolean;
}
Expand All @@ -431,7 +433,8 @@ const CropClipPaths = (props: CropClipPathsProps) => {
const center = { x: round(width / 2), y: round(height / 2) };
const narrow = Math.min(center.x, center.y);
const crop = cropAmount(rotation, { width, height });
const rotate = alreadyRotated ? 0 : rotation || 0;
const rotate = alreadyRotated ? 0 : rotation;
const rotated90 = !alreadyRotated && rotated90degrees(rotation);
return <g id={"crop-clip-paths"}>
<clipPath id={`circle-${imageId}`}>
<circle r={narrow} cx={center.x} cy={center.y} />
Expand All @@ -440,7 +443,7 @@ const CropClipPaths = (props: CropClipPathsProps) => {
<rect x={crop / 2} y={crop / 2}
width={round(width - crop)} height={round(height - crop)}
style={{ transformOrigin }}
transform={`rotate(${rotate})`} />
transform={`rotate(${rotate - (rotated90 ? 90 : 0)})`} />
</clipPath>
</g>;
};
Expand Down
17 changes: 9 additions & 8 deletions frontend/farm_designer/points/create_points.tsx
View file
Expand Up @@ -326,14 +326,15 @@ export class RawCreatePoints
<DesignerPanelContent panelName={"point-creation"}>
<this.PointProperties />
<this.PointActions />
<PlantGrid
xy_swap={this.props.xySwap}
itemName={point.name || t("Grid point")}
color={point.color}
radius={point.r}
dispatch={this.props.dispatch}
botPosition={{ x: this.props.deviceX, y: this.props.deviceY, z: 0 }}
close={this.closePanel} />
{panelType == Panel.Points &&
<PlantGrid
xy_swap={this.props.xySwap}
itemName={point.name || t("Grid point")}
color={point.color}
radius={point.r}
dispatch={this.props.dispatch}
botPosition={{ x: this.props.deviceX, y: this.props.deviceY, z: 0 }}
close={this.closePanel} />}
<hr />
{this.DeleteAllPoints(this.panel == "weeds" ? "weed" : "point")}
</DesignerPanelContent>
Expand Down

0 comments on commit 4527c4b

Please sign in to comment.